/* =========================================================
   LIGHT PREMIUM – modern / white / black / yellow accent
   Motyw: theme = "light_premium"
   ========================================================= */

body[data-theme="light_premium"],
body.theme-light-premium{
  --bg: #ffffff;
  --fg: #0b0b0c;
  --muted: rgba(11,11,12,0.62);

  --card: #ffffff;
  --card2: #fbfbfc;

  --border: rgba(15, 23, 42, 0.12);
  --border2: rgba(15, 23, 42, 0.18);

  --brand: #f4c400;          /* żółty */
  --brand2: #ffda3a;         /* jaśniejszy */
  --brandDeep: #eab308;      /* głębszy */

  --danger: #dc2626;
  --warn: #d97706;

  --shadow: 0 10px 28px rgba(2,6,23,0.08);
  --shadow2: 0 18px 45px rgba(2,6,23,0.10);

  color-scheme: light;
}

/* delikatne tło premium (biała baza + subtelny gradient) */
body[data-theme="light_premium"]{
  background:
    radial-gradient(1200px 520px at 18% 0%, rgba(244,196,0,0.10), rgba(255,255,255,0) 55%),
    radial-gradient(900px 420px at 85% 10%, rgba(0,0,0,0.04), rgba(255,255,255,0) 60%),
    var(--bg);
  color: var(--fg);
}

/* ---------- Logo ---------- */
.tb-logo{
  background: transparent !important;
  border: 1px solid transparent !important;
  border-radius: 12px !important;
  padding: 6px 10px !important;
}
.tb-logo:hover{
  background: rgba(244,196,0,0.10) !important;
  border-color: rgba(244,196,0,0.35) !important;
}
.tb-logo-img{
  height: 34px;
  width: auto;
  display: block;
  image-rendering: -webkit-optimize-contrast;
}

.login-logo-img{
  width: 260px;
  height: auto;
  display: block;
  margin: 0 auto;
  filter: drop-shadow(0 10px 20px rgba(2,6,23,0.10));
}

/* ---------- Topbar = premium white + brand strip ---------- */
#topbar{
  background: rgba(255,255,255,0.92) !important;
  border-bottom: 1px solid var(--border) !important;
  box-shadow: var(--shadow) !important;
  backdrop-filter: blur(10px) saturate(120%) !important;
  position: fixed;
}
#topbar::before{
  content:"";
  position:absolute;
  left:0; right:0; top:0;
  height: 3px;
  background: linear-gradient(90deg, var(--brand), var(--brand2), var(--brand));
}
#topbar .tb-btn{
  background: rgba(255,255,255,0.70) !important;
  color: var(--fg) !important;
  border: 1px solid var(--border) !important;
  box-shadow: 0 1px 0 rgba(2,6,23,0.04);
}
#topbar .tb-btn:hover{
  border-color: rgba(244,196,0,0.55) !important;
  background: rgba(244,196,0,0.12) !important;
}
#topbar .tb-menu{
  background: #ffffff !important;
  border: 1px solid var(--border) !important;
  box-shadow: var(--shadow2) !important;
}
#topbar .tb-item{
  color: var(--fg) !important;
}
#topbar .tb-item:hover{
  border-color: rgba(244,196,0,0.55) !important;
  background: rgba(244,196,0,0.16) !important;
}

/* ---------- Sidebar ---------- */
header{
  background: rgba(255,255,255,0.88) !important;
  border-right: 1px solid var(--border) !important;
  box-shadow: 8px 0 24px rgba(2,6,23,0.06);
  backdrop-filter: blur(10px) saturate(120%);
}
header::-webkit-scrollbar-track{
  background: transparent !important;
  border-left: 1px solid var(--border) !important;
}
header::-webkit-scrollbar-thumb{
  background: rgba(2,6,23,0.14) !important;
  border: 2px solid rgba(255,255,255,0.70) !important;
  border-radius: 999px !important;
}

/* przyciski nawigacji (lewy panel) */
header nav a,
header .navbtn{
  background: #ffffff !important;
  color: var(--fg) !important;
  border: 1px solid var(--border) !important;
  border-radius: 12px !important;
  box-shadow: 0 1px 0 rgba(2,6,23,0.04);
  transition: transform .10s ease, box-shadow .20s ease, border-color .20s ease, background .20s ease;
}
header nav a:hover,
header .navbtn:hover{
  border-color: rgba(244,196,0,0.55) !important;
  background: rgba(244,196,0,0.10) !important;
  box-shadow: 0 10px 22px rgba(2,6,23,0.08);
}
header nav a.active,
header .navbtn.active{
  border-color: rgba(244,196,0,0.75) !important;
  box-shadow: 0 0 0 3px rgba(244,196,0,0.20), 0 12px 28px rgba(2,6,23,0.10);
}

/* ---------- Karty i układ główny ---------- */
.card,
.modal-card{
  background: rgba(255,255,255,0.92) !important;
  color: var(--fg) !important;
  border: 1px solid var(--border) !important;
  box-shadow: var(--shadow) !important;
  border-radius: 16px !important;
}

/* nagłówki kroków: bardziej premium */
h2, h3{
  letter-spacing: 0.2px;
}
#step1 h2, #step2 h2, #step3 h2, #summary h2{
  font-weight: 800;
}

/* ---------- Formularze ---------- */
input, select, textarea{
  background: #ffffff !important;
  color: var(--fg) !important;
  border: 1px solid var(--border) !important;
  border-radius: 12px !important;
  box-shadow: 0 1px 0 rgba(2,6,23,0.04);
}
input:focus, select:focus, textarea:focus{
  outline: none !important;
  border-color: rgba(244,196,0,0.75) !important;
  box-shadow: 0 0 0 4px rgba(244,196,0,0.22), 0 10px 22px rgba(2,6,23,0.08) !important;
}

/* ---------- Przyciski: premium żółte primary ---------- */
button,
a.buttonlike{
  border-radius: 12px !important;
}

button.primary, .primary,
#proposalSendBtn.primary, #proposalAcceptBtn.primary{
  background: linear-gradient(180deg, var(--brand2), var(--brand)) !important;
  color: #111 !important;
  border: 1px solid rgba(0,0,0,0.10) !important;
  box-shadow: 0 10px 22px rgba(244,196,0,0.22), 0 2px 0 rgba(0,0,0,0.06);
  font-weight: 750;
}
button.primary:hover, .primary:hover{
  filter: brightness(1.02);
  box-shadow: 0 14px 28px rgba(244,196,0,0.26), 0 2px 0 rgba(0,0,0,0.06);
}
button.secondary, .secondary{
  background: #ffffff !important;
  color: var(--fg) !important;
  border: 1px solid var(--border2) !important;
}
button.secondary:hover, .secondary:hover{
  border-color: rgba(244,196,0,0.55) !important;
  background: rgba(244,196,0,0.10) !important;
}

/* ---------- Prawy panel (toolbox/akordeon) ---------- */
.sidepane-fixed{
  background: rgba(255,255,255,0.92) !important;
  color: var(--fg) !important;
  border-left: 1px solid var(--border) !important;
  box-shadow: -14px 0 32px rgba(2,6,23,0.10) !important;
  border-radius: 16px 0 0 16px !important;
}

.acc-item{
  background: #ffffff !important;
  border: 1px solid var(--border) !important;
  border-radius: 14px !important;
  box-shadow: 0 8px 22px rgba(2,6,23,0.07) !important;
}
.acc-btn{
  background: #ffffff !important;
  color: var(--fg) !important;
  border-bottom: 1px solid var(--border) !important;
  font-weight: 750 !important;
}
.acc-btn:hover{
  border-color: rgba(244,196,0,0.55) !important;
  background: rgba(244,196,0,0.10) !important;
}
.acc-item.acc-open > .acc-btn{
  background: rgba(244,196,0,0.12) !important;
  box-shadow: inset 0 0 0 2px rgba(244,196,0,0.30) !important;
}

/* listy wyboru w toolboxie */
.picklist{
  background: #ffffff !important;
}
.picklist li{
  border-color: var(--border) !important;
}

/* ikonowe przyciski w toolboxie */
.icon-btn{
  background: #ffffff !important;
  color: var(--fg) !important;
  border: 1px solid var(--border) !important;
  border-radius: 12px !important;
  box-shadow: 0 1px 0 rgba(2,6,23,0.04);
}
.icon-btn:hover{
  border-color: rgba(244,196,0,0.55) !important;
  background: rgba(244,196,0,0.10) !important;
}

/* save (+💰) jako żółty akcent */
.save-btn{
  background: linear-gradient(180deg, var(--brand2), var(--brand)) !important;
  border-color: rgba(0,0,0,0.10) !important;
  color: #111 !important;
  font-weight: 800;
}

/* ---------- Modal komunikatu (OK) - dopasuj do jasnego ---------- */
#msgModal{
  background: rgba(2,6,23,0.35) !important;
}
#msgModal .modal-content{
  background: #ffffff !important;
  color: var(--fg) !important;
  border: 1px solid var(--border) !important;
  box-shadow: var(--shadow2) !important;
  border-radius: 16px !important;
}
#msgModal button{
  background: linear-gradient(180deg, var(--brand2), var(--brand)) !important;
  color: #111 !important;
  border: 1px solid rgba(0,0,0,0.10) !important;
  border-radius: 12px !important;
  font-weight: 800;
}

/* ---------- Login screen: dopasuj do premium light ---------- */
#login-screen{
  background:
    radial-gradient(1200px 520px at 18% 0%, rgba(244,196,0,0.16), rgba(255,255,255,0) 55%),
    radial-gradient(900px 420px at 85% 10%, rgba(0,0,0,0.05), rgba(255,255,255,0) 60%),
    #ffffff !important;
}
.login-card{
  background: rgba(255,255,255,0.92) !important;
  color: var(--fg) !important;
  border: 1px solid var(--border) !important;
  border-radius: 18px !important;
  box-shadow: var(--shadow2) !important;
}
.login-field input{
  background:#fff !important;
  color: var(--fg) !important;
  border: 1px solid var(--border) !important;
}
.login-button{
  background: linear-gradient(180deg, var(--brand2), var(--brand)) !important;
  color: #111 !important;
  border: 1px solid rgba(0,0,0,0.10) !important;
  font-weight: 850 !important;
}

/* ---------- CAM: tło viewer w jasnym motywie ---------- */
#camSvgContainer{
  background: #ffffff !important;
  border-color: var(--border) !important;
}
/* =========================================================
   Light Premium – polish pass: usuń "ciemne" przyciski + WOW
   Dopisz na końcu pliku, żeby miało priorytet.
   ========================================================= */

body[data-theme="light_premium"]{
  --soft: rgba(2,6,23,0.04);
  --soft2: rgba(2,6,23,0.06);
  --ring: rgba(244,196,0,0.28);
  --ring2: rgba(244,196,0,0.18);
  --glow: rgba(244,196,0,0.22);
}

/* ---------- FIX: wszystkie przyciski przestają być "dark" ---------- */
/* To nadpisze bazowe style, nawet jeśli były inline (o ile nie inline !important) */
body[data-theme="light_premium"] button,
body[data-theme="light_premium"] .btn,
body[data-theme="light_premium"] a.buttonlike,
body[data-theme="light_premium"] input[type="button"],
body[data-theme="light_premium"] input[type="submit"]{
  background: #ffffff !important;
  color: var(--fg) !important;
  border: 1px solid var(--border2) !important;
  border-radius: 12px !important;
  box-shadow: 0 1px 0 rgba(2,6,23,0.04) !important;
  font-weight: 750;
  letter-spacing: 0.2px;
  transition: transform .12s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease, filter .18s ease;
}

body[data-theme="light_premium"] button:hover,
body[data-theme="light_premium"] .btn:hover,
body[data-theme="light_premium"] a.buttonlike:hover{
  border-color: rgba(244,196,0,0.55) !important;
  background: rgba(244,196,0,0.10) !important;
  box-shadow: 0 12px 26px rgba(2,6,23,0.10) !important;
  transform: translateY(-1px);
}

body[data-theme="light_premium"] button:active,
body[data-theme="light_premium"] .btn:active,
body[data-theme="light_premium"] a.buttonlike:active{
  transform: translateY(0px);
  filter: brightness(0.99);
}

body[data-theme="light_premium"] button:focus-visible,
body[data-theme="light_premium"] .btn:focus-visible,
body[data-theme="light_premium"] a.buttonlike:focus-visible{
  outline: none !important;
  box-shadow: 0 0 0 4px var(--ring), 0 12px 26px rgba(2,6,23,0.10) !important;
  border-color: rgba(244,196,0,0.70) !important;
}

/* ---------- PRIMARY: żółte, premium, z efektem sheen ---------- */
/* Jeżeli Twoje główne akcje nie mają .primary, dopisz im klasę w HTML/JS,
   ale poniższe też łapie sporo typowych selektorów */
body[data-theme="light_premium"] .primary,
body[data-theme="light_premium"] button.primary,
body[data-theme="light_premium"] .btn-primary,
body[data-theme="light_premium"] button[type="submit"]{
  position: relative;
  background: linear-gradient(180deg, var(--brand2), var(--brand)) !important;
  color: #111 !important;
  border: 1px solid rgba(0,0,0,0.10) !important;
  box-shadow:
    0 16px 34px rgba(244,196,0,0.22),
    0 2px 0 rgba(0,0,0,0.06) !important;
}

/* sheen (wow) */
body[data-theme="light_premium"] .primary::after,
body[data-theme="light_premium"] button.primary::after,
body[data-theme="light_premium"] .btn-primary::after,
body[data-theme="light_premium"] button[type="submit"]::after{
  content:"";
  position:absolute;
  inset:-2px;
  border-radius: 14px;
  background:
    linear-gradient(120deg,
      rgba(255,255,255,0) 0%,
      rgba(255,255,255,0.55) 18%,
      rgba(255,255,255,0) 36%);
  transform: translateX(-70%);
  opacity: 0;
  pointer-events:none;
}

body[data-theme="light_premium"] .primary:hover::after,
body[data-theme="light_premium"] button.primary:hover::after,
body[data-theme="light_premium"] .btn-primary:hover::after,
body[data-theme="light_premium"] button[type="submit"]:hover::after{
  opacity: 1;
  transform: translateX(70%);
  transition: transform .65s ease, opacity .18s ease;
}

body[data-theme="light_premium"] .primary:hover,
body[data-theme="light_premium"] button.primary:hover,
body[data-theme="light_premium"] .btn-primary:hover,
body[data-theme="light_premium"] button[type="submit"]:hover{
  box-shadow:
    0 20px 44px rgba(244,196,0,0.26),
    0 2px 0 rgba(0,0,0,0.06) !important;
  filter: saturate(1.04);
}

/* ---------- SECONDARY (jeśli masz klasę) ---------- */
body[data-theme="light_premium"] .secondary,
body[data-theme="light_premium"] button.secondary{
  background: #ffffff !important;
  border: 1px solid var(--border2) !important;
}

/* ---------- "WOW" na kartach: cienka poświata i border gradient ---------- */
body[data-theme="light_premium"] .card,
body[data-theme="light_premium"] .modal-card{
  position: relative;
  overflow: hidden;
}

/* subtelny "premium edge" */
body[data-theme="light_premium"] .card::before,
body[data-theme="light_premium"] .modal-card::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius: 16px;
  padding: 1px;
  background: linear-gradient(135deg,
    rgba(244,196,0,0.55),
    rgba(0,0,0,0.08),
    rgba(244,196,0,0.22));
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: .55;
  pointer-events:none;
}

body[data-theme="light_premium"] .card:hover,
body[data-theme="light_premium"] .modal-card:hover{
  box-shadow: 0 22px 52px rgba(2,6,23,0.12) !important;
  transform: translateY(-1px);
  transition: transform .14s ease, box-shadow .20s ease;
}

/* ---------- Brand strip: delikatna animacja (wow, ale premium) ---------- */
@keyframes lpStripMove {
  0%   { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}

body[data-theme="light_premium"] #topbar::before{
  background: linear-gradient(90deg,
    var(--brand),
    rgba(255,255,255,0.85),
    var(--brand2),
    rgba(255,255,255,0.85),
    var(--brand));
  background-size: 200% 100%;
  animation: lpStripMove 6.5s linear infinite;
}

/* ---------- Prawy toolbox: mniej "ciężko", bardziej premium ---------- */
body[data-theme="light_premium"] .sidepane-fixed{
  background: rgba(255,255,255,0.86) !important;
  backdrop-filter: blur(12px) saturate(130%) !important;
}

body[data-theme="light_premium"] .acc-item{
  background: rgba(255,255,255,0.92) !important;
  border-color: rgba(2,6,23,0.10) !important;
}

body[data-theme="light_premium"] .acc-btn{
  letter-spacing: .15px;
}

/* ---------- Minimal motion fallback (jeśli ktoś ma reduced motion) ---------- */
@media (prefers-reduced-motion: reduce){
  body[data-theme="light_premium"] *{
    animation: none !important;
    transition: none !important;
  }
}
/* =========================================================
   Light Premium – subtle grain (bez plików)
   ========================================================= */

body[data-theme="light_premium"]{
  position: relative;
}

/* warstwa graina nad tłem, pod UI */
body[data-theme="light_premium"]::before{
  content:"";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.06; /* jak za mocne: 0.04 */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
  background-repeat: repeat;
  mix-blend-mode: multiply;
}

/* upewnij się, że aplikacja jest nad grainem */
#app-root,
#login-screen{
  position: relative;
  z-index: 1;
}
/* =========================================================
   Light Premium – Sidebar: Wycena & Zlecenia (premium pills)
   ========================================================= */

/* Te dwa mają wyglądać jak "premium kafelki" z ikoną w chipie */
body[data-theme="light_premium"] #wizardNav a#navSummary,
body[data-theme="light_premium"] #wizardNav a#navOrders{
  /* nadpisz bazowe centrowanie i "linkowy" vibe */
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  text-align: left !important;
  gap: 10px !important;

  padding: 12px 14px !important;
  border-radius: 14px !important;

  position: relative;
  overflow: hidden;

  /* delikatnie bardziej “kafelkowe” */
  box-shadow: 0 1px 0 rgba(2,6,23,0.04) !important;
}

/* Ikona jako osobny chip (ładniej niż emoji "luzem") */
body[data-theme="light_premium"] #wizardNav a#navSummary::before,
body[data-theme="light_premium"] #wizardNav a#navOrders::before{
  content: attr(data-icon);
  width: 30px;
  height: 30px;
  display: inline-grid;
  place-items: center;

  border-radius: 10px;
  font-size: 16px;
  line-height: 1;

  border: 1px solid rgba(15,23,42,0.10);
  background: rgba(2,6,23,0.04);
}

/* Tekst */
body[data-theme="light_premium"] #wizardNav a#navSummary > span,
body[data-theme="light_premium"] #wizardNav a#navOrders > span{
  font-weight: 700;
  letter-spacing: 0.15px;
}

/* WYCENA: złoty hint (ale premium, nie krzykliwy) */
body[data-theme="light_premium"] #wizardNav a#navSummary{
  border-color: rgba(244,196,0,0.35) !important;
  background: linear-gradient(180deg, rgba(244,196,0,0.10), rgba(255,255,255,0.95)) !important;
}

body[data-theme="light_premium"] #wizardNav a#navSummary::before{
  border-color: rgba(244,196,0,0.40);
  background: rgba(244,196,0,0.16);
}

/* ZLECENIA: neutral enterprise (slate) */
body[data-theme="light_premium"] #wizardNav a#navOrders{
  border-color: rgba(148,163,184,0.40) !important;
  background: linear-gradient(180deg, rgba(148,163,184,0.10), rgba(255,255,255,0.95)) !important;
}

body[data-theme="light_premium"] #wizardNav a#navOrders::before{
  border-color: rgba(148,163,184,0.40);
  background: rgba(148,163,184,0.14);
}

/* Hover – oba “ożywają” żółtym akcentem */
body[data-theme="light_premium"] #wizardNav a#navSummary:hover,
body[data-theme="light_premium"] #wizardNav a#navOrders:hover{
  border-color: rgba(244,196,0,0.70) !important;
  background: rgba(244,196,0,0.12) !important;
  box-shadow: 0 12px 22px rgba(2,6,23,0.08) !important;
  transform: translateY(-1px);
}

body[data-theme="light_premium"] #wizardNav a#navSummary:hover::before,
body[data-theme="light_premium"] #wizardNav a#navOrders:hover::before{
  border-color: rgba(244,196,0,0.70);
  background: rgba(244,196,0,0.18);
}

/* Active (gdy jesteś na /summary lub /orders) – premium ring */
body[data-theme="light_premium"] #wizardNav a#navSummary.active,
body[data-theme="light_premium"] #wizardNav a#navOrders.active{
  border-color: rgba(244,196,0,0.85) !important;
  box-shadow: 0 0 0 3px rgba(244,196,0,0.20), 0 14px 30px rgba(2,6,23,0.10) !important;
}

/* Tryb zwinięty sidebara – ikonka jako kafelek, tekst znika */
body[data-theme="light_premium"].sidebar-collapsed #wizardNav a#navSummary,
body[data-theme="light_premium"].sidebar-collapsed #wizardNav a#navOrders{
  justify-content: center !important;
  padding: 10px !important;
  gap: 0 !important;
}

body[data-theme="light_premium"].sidebar-collapsed #wizardNav a#navSummary > span,
body[data-theme="light_premium"].sidebar-collapsed #wizardNav a#navOrders > span{
  display: none !important;
}

/* =========================================================
   Light Premium – Orders (Zlecenia) overrides
   (naprawia darkowe UI z styles.css)
   ========================================================= */

body[data-theme="light_premium"] .datefilter-btn{
  border: 1px solid var(--border) !important;
  background: #fff !important;
  color: var(--fg) !important;
  box-shadow: 0 1px 0 rgba(2,6,23,0.04);
}
body[data-theme="light_premium"] .datefilter-btn:hover{
  border-color: rgba(244,196,0,0.55) !important;
  background: rgba(244,196,0,0.12) !important;
}

body[data-theme="light_premium"] .orders-date-popover{
  border: 1px solid var(--border) !important;
  background: rgba(255,255,255,0.96) !important;
  color: var(--fg) !important;
  box-shadow: var(--shadow2) !important;
  backdrop-filter: blur(10px) saturate(120%);
}
body[data-theme="light_premium"] .orders-date-popover .close{
  border: 1px solid var(--border) !important;
  background: #fff !important;
  color: var(--fg) !important;
}
body[data-theme="light_premium"] .orders-date-popover .close:hover{
  border-color: rgba(244,196,0,0.55) !important;
  background: rgba(244,196,0,0.10) !important;
}

/* zakładki w popoverze: active = żółty */
body[data-theme="light_premium"] .orders-date-popover .tab{
  border: 1px solid var(--border) !important;
  background: #fff !important;
  color: var(--fg) !important;
}
body[data-theme="light_premium"] .orders-date-popover .tab:hover{
  border-color: rgba(244,196,0,0.55) !important;
  background: rgba(244,196,0,0.10) !important;
}
body[data-theme="light_premium"] .orders-date-popover .tab.active{
  border-color: rgba(244,196,0,0.70) !important;
  background: rgba(244,196,0,0.18) !important;
}

/* inputy w popoverze */
body[data-theme="light_premium"] .orders-date-popover input[type="date"]{
  border: 1px solid var(--border) !important;
  background: #fff !important;
  color: var(--fg) !important;
}
body[data-theme="light_premium"] .orders-date-popover input[type="date"]:focus{
  outline: none !important;
  border-color: rgba(244,196,0,0.75) !important;
  box-shadow: 0 0 0 4px rgba(244,196,0,0.22), 0 10px 22px rgba(2,6,23,0.08) !important;
}

/* toggles (Aktywne / Kompaktowy): tło jasne, ring żółty */
body[data-theme="light_premium"] .orders-active-toggle__ui,
body[data-theme="light_premium"] .orders-compact-toggle__ui{
  background: rgba(2,6,23,0.03) !important;
  box-shadow: 0 0 0 1px rgba(2,6,23,0.06), 0 10px 24px rgba(2,6,23,0.08) !important;
}
body[data-theme="light_premium"] .orders-active-toggle__txt,
body[data-theme="light_premium"] .orders-compact-toggle__txt{
  color: rgba(11,11,12,0.70) !important;
}
body[data-theme="light_premium"] .orders-active-toggle__txt--off,
body[data-theme="light_premium"] .orders-compact-toggle__txt--off{
  color: var(--fg) !important;
}
body[data-theme="light_premium"] .orders-active-toggle input:focus-visible + .orders-active-toggle__ui,
body[data-theme="light_premium"] .orders-compact-toggle input:focus-visible + .orders-compact-toggle__ui{
  box-shadow: 0 0 0 1px rgba(244,196,0,0.45), 0 0 0 4px rgba(244,196,0,0.20) !important;
}

/* due-pending: zamiast niebieskiego – żółty akcent (premium) */
body[data-theme="light_premium"] #ordersTable td.due-pending{
  color: var(--fg) !important;
  background: rgba(244,196,0,0.12) !important;
}
body[data-theme="light_premium"] #ordersTable td.due-pending::after{
  color: rgba(244,196,0,0.95) !important;
}
/* =========================================================
   Light Premium – Orders table header (thead/th) light fix
   ========================================================= */

body[data-theme="light_premium"] #ordersTable,
body[data-theme="light_premium"] #ordersTable *{
  color: var(--fg) !important;
}

/* cały nagłówek tabeli jasny */
body[data-theme="light_premium"] #ordersTable thead,
body[data-theme="light_premium"] #ordersTable thead tr{
  background: #ffffff !important;
}

/* komórki nagłówka */
body[data-theme="light_premium"] #ordersTable thead th{
  background: #ffffff !important;
  color: var(--fg) !important;
  border-bottom: 1px solid var(--border) !important;
  font-weight: 800 !important;
}

/* jeśli masz sortowanie (ikonki/strzałki) – też na ciemno */
body[data-theme="light_premium"] #ordersTable thead th .sort,
body[data-theme="light_premium"] #ordersTable thead th .sort-icon,
body[data-theme="light_premium"] #ordersTable thead th button,
body[data-theme="light_premium"] #ordersTable thead th a{
  color: var(--fg) !important;
}

/* hover / focus w nagłówku bez niebieskich tintów */
body[data-theme="light_premium"] #ordersTable thead th:hover{
  background: rgba(244,196,0,0.10) !important;
}
body[data-theme="light_premium"] #ordersTable thead th:focus-within{
  box-shadow: inset 0 0 0 2px rgba(244,196,0,0.35) !important;
}
body[data-theme="light_premium"] #orders table thead,
body[data-theme="light_premium"] #orders table thead th{
  background: #fff !important;
  color: #0b0b0c !important;
}
/* =========================================================
   Light Premium – Orders: pełny jasny wygląd tabeli
   (nadpisuje dark-style z styles.css)
   ========================================================= */

/* wrapper tabeli też ma być jasny (teraz łapie ciemne tła z bazy) */
body[data-theme="light_premium"] #orders .orders-table-wrap{
  background: #ffffff !important;
  border: 1px solid var(--border) !important;
  box-shadow: var(--shadow) !important;
}

/* cała tabela */
body[data-theme="light_premium"] #ordersTable.orders-table{
  background: #ffffff !important;
  color: var(--fg) !important;
}

/* komórki */
body[data-theme="light_premium"] #ordersTable.orders-table th,
body[data-theme="light_premium"] #ordersTable.orders-table td{
  background: #ffffff !important;
  color: var(--fg) !important;
  border-color: var(--border) !important;
}

/* 2 rzędy nagłówka (u Ciebie w bazie są hard-coded na ciemno) */
body[data-theme="light_premium"] #ordersTable.orders-table thead tr:first-child th{
  background: #ffffff !important;
  color: var(--fg) !important;
  border-bottom: 1px solid var(--border) !important;
}
body[data-theme="light_premium"] #ordersTable.orders-table thead tr:nth-child(2) th{
  background: #fbfbfc !important; /* delikatnie odróżnij wiersz filtrów */
  color: var(--fg) !important;
  border-bottom: 1px solid var(--border) !important;
}

/* wiersze tabeli */
body[data-theme="light_premium"] #ordersTable.orders-table tbody tr{
  background: #ffffff !important;
}
body[data-theme="light_premium"] #ordersTable.orders-table tbody tr:hover{
  background: rgba(244,196,0,0.10) !important; /* zamiast niebieskiego */
}

/* inputy/selecty w filtrach (w ciemnym robią się “brudne”) */
body[data-theme="light_premium"] #ordersTable thead input,
body[data-theme="light_premium"] #ordersTable thead select{
  background: #ffffff !important;
  color: var(--fg) !important;
  border: 1px solid var(--border) !important;
  box-shadow: 0 1px 0 rgba(2,6,23,0.04) !important;
}
body[data-theme="light_premium"] #ordersTable thead input:focus,
body[data-theme="light_premium"] #ordersTable thead select:focus{
  outline: none !important;
  border-color: rgba(244,196,0,0.75) !important;
  box-shadow: 0 0 0 4px rgba(244,196,0,0.22) !important;
}

/* przyciski/ikonki w Akcjach – jasne */
body[data-theme="light_premium"] #ordersTable .icon-btn.order-act{
  background: #ffffff !important;
  color: var(--fg) !important;
  border: 1px solid var(--border) !important;
  box-shadow: 0 1px 0 rgba(2,6,23,0.04) !important;
}
body[data-theme="light_premium"] #ordersTable .icon-btn.order-act:hover{
  background: rgba(244,196,0,0.10) !important;
  border-color: rgba(244,196,0,0.55) !important;
}

/* status-pill – w bazie kolory są robione pod ciemne tło (jasne fonty),
   więc na light robi się mało czytelne. Robimy “premium” pod jasne. */
body[data-theme="light_premium"] .status-pill{
  background: rgba(2,6,23,0.04) !important;
  border-color: rgba(2,6,23,0.10) !important;
  color: rgba(11,11,12,0.85) !important;
}
body[data-theme="light_premium"] .status-pill[data-status="Zakończono"]{
  background: rgba(34,197,94,0.12) !important;
  border-color: rgba(34,197,94,0.25) !important;
  color: rgba(11,11,12,0.90) !important;
}
body[data-theme="light_premium"] .status-pill[data-status="Oczekuje"]{
  background: rgba(245,158,11,0.16) !important;
  border-color: rgba(245,158,11,0.28) !important;
  color: rgba(11,11,12,0.90) !important;
}
body[data-theme="light_premium"] .status-pill[data-status="W realizacji"]{
  background: rgba(59,130,246,0.12) !important;
  border-color: rgba(59,130,246,0.22) !important;
  color: rgba(11,11,12,0.90) !important;
}

/* “PO TERMINIE” / due-pending – u Ciebie już jest, ale dopnij czytelność */
body[data-theme="light_premium"] #ordersTable td.due-pending{
  background: rgba(244,196,0,0.14) !important;
  color: rgba(11,11,12,0.90) !important;
}
/* Light Premium + Light (fallback): Zlecenia tabela na jasno */
body.theme-light #ordersTable.orders-table thead tr:first-child th,
body[data-theme="light_premium"] #ordersTable.orders-table thead tr:first-child th{
  background: #ffffff !important;
  color: #0b0b0c !important;
}

body.theme-light #ordersTable.orders-table thead tr:nth-child(2) th,
body[data-theme="light_premium"] #ordersTable.orders-table thead tr:nth-child(2) th{
  background: #fbfbfc !important;
  color: #0b0b0c !important;
}

body.theme-light #ordersTable.orders-table,
body[data-theme="light_premium"] #ordersTable.orders-table,
body.theme-light #ordersTable.orders-table td,
body.theme-light #ordersTable.orders-table th,
body[data-theme="light_premium"] #ordersTable.orders-table td,
body[data-theme="light_premium"] #ordersTable.orders-table th{
  background: #ffffff !important;
  color: #0b0b0c !important;
  border-color: rgba(15,23,42,0.12) !important;
}

body.theme-light #ordersTable.orders-table tbody tr:hover,
body[data-theme="light_premium"] #ordersTable.orders-table tbody tr:hover{
  background: rgba(244,196,0,0.10) !important;
}
/* Light Premium – zmienne dla tooltipów + toggle w Zleceniach */
body[data-theme="light_premium"],
body.theme-light{
  /* Tooltip: jasny, czytelny */
  --tooltip-bg: rgba(255,255,255,0.96);
  --tooltip-fg: #0b0b0c;
  --tooltip-border: rgba(15,23,42,0.14);

  /* Toggle: minimalnie jaśniejsze tło + ciemna czcionka */
  --orders-toggle-bg: rgba(2,6,23,0.06);
  --orders-toggle-fg: rgba(11,11,12,0.78);
  --orders-toggle-fg-strong: rgba(11,11,12,0.90);
}

/* ===== KROK 2: responsywna siatka + jasny przycisk "Przejdź do kroku 3" ===== */
@media (max-width: 1200px){
  #step2 #baseForm .grid{
    grid-template-columns: 1fr !important;
  }
}

#step2 #baseForm .actions a.buttonlike{
  background: #f5c400;
  border-color: #e0b000;
  color: #111;
  font-weight: 600;
}

#step2 #baseForm .actions a.buttonlike:hover{
  filter: brightness(0.98);
}
/* KROK 1: żółty przycisk "Przejdź do kroku 2" */
#step1 .actions a.buttonlike[href="#/step2"]{
  background: #f5c400;
  border-color: #e0b000;
  color: #111;
  font-weight: 600;
}

#step1 .actions a.buttonlike[href="#/step2"]:hover{
  filter: brightness(0.98);
}