/* =========================================================
   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);
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-position: center top;
}

/* ---------- 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"] main button,
body[data-theme="light_premium"] main .btn,
body[data-theme="light_premium"] main a.buttonlike,
body[data-theme="light_premium"] main input[type="button"],
body[data-theme="light_premium"] main 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"] main button:hover,
body[data-theme="light_premium"] main .btn:hover,
body[data-theme="light_premium"] main 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"] main .primary,
body[data-theme="light_premium"] main button.primary,
body[data-theme="light_premium"] main .btn-primary,
body[data-theme="light_premium"] main 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(-120%);
  opacity: 0;
  transition: transform .65s ease, opacity .18s ease;
  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(120%);
}

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,

/* =========================================================
   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,
body[data-theme="light_premium"] #wizardNav a#navInquiries,
body[data-theme="light_premium"] #wizardNav a#navDrawings,
body[data-theme="light_premium"] #wizardNav a#navReports,
body[data-theme="light_premium"] #wizardNav a#navLista{
  /* 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: visible !important;

  /* 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,
body[data-theme="light_premium"] #wizardNav a#navInquiries::before,
body[data-theme="light_premium"] #wizardNav a#navDrawings::before,
body[data-theme="light_premium"] #wizardNav a#navReports::before,
body[data-theme="light_premium"] #wizardNav a#navLista::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,
body[data-theme="light_premium"] #wizardNav a#navInquiries > span,
body[data-theme="light_premium"] #wizardNav a#navDrawings > span,
body[data-theme="light_premium"] #wizardNav a#navReports > span,
body[data-theme="light_premium"] #wizardNav a#navLista > span{
  white-space: nowrap;
}

/* 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);
}

/* RYSUNKI: neutral (jak Zlecenia) */
body[data-theme="light_premium"] #wizardNav a#navDrawings{
  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#navDrawings::before{
  border-color: rgba(148,163,184,0.40);
  background: rgba(148,163,184,0.14);
}

/* RAPORTY jak Zlecenia */

body[data-theme="light_premium"] #wizardNav a#navReports{
  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#navReports::before{
  border-color: rgba(148,163,184,0.40);
  background: rgba(148,163,184,0.14);
}

/* Lista jak Zlecenia */

body[data-theme="light_premium"] #wizardNav a#navLista{
  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#navLista::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,
body[data-theme="light_premium"] #wizardNav a#navInquiries:hover,
body[data-theme="light_premium"] #wizardNav a#navDrawings:hover,
body[data-theme="light_premium"] #wizardNav a#navReports:hover,
body[data-theme="light_premium"] #wizardNav a#navLista: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,
body[data-theme="light_premium"] #wizardNav a#navInquiries:hover::before,
body[data-theme="light_premium"] #wizardNav a#navDrawings:hover::before,
body[data-theme="light_premium"] #wizardNav a#navReports:hover::before,
body[data-theme="light_premium"] #wizardNav a#navLista: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,
body[data-theme="light_premium"] #wizardNav a#navInquiries.active,
body[data-theme="light_premium"] #wizardNav a#navDrawings.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,
body[data-theme="light_premium"].sidebar-collapsed #wizardNav a#navInquiries,
body[data-theme="light_premium"].sidebar-collapsed #wizardNav a#navDrawings,
body[data-theme="light_premium"].sidebar-collapsed #wizardNav a#navReports,
body[data-theme="light_premium"].sidebar-collapsed #wizardNav a#navLista{
  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,
body[data-theme="light_premium"].sidebar-collapsed #wizardNav a#navInquiries > span,
body[data-theme="light_premium"].sidebar-collapsed #wizardNav a#navDrawings > 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;
}

body[data-theme="light_premium"] #ordersTable.orders-table tbody tr:hover > td{
  background: rgba(244,196,0,0.10) !important;
}

/* 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);
}

/* =========================================================
   FIX: Sidebar – nie ucinaj "Wycena" i "Zlecenia"
   (styles.css ucina span przez max-width + overflow)
   ========================================================= */

body[data-theme="light_premium"] header nav a#navSummary,
body[data-theme="light_premium"] header nav a#navOrders,
body[data-theme="light_premium"] header nav a#navInquiries,
body[data-theme="light_premium"] header nav a#navDrawings,
body[data-theme="light_premium"] header nav a#navReports,
body[data-theme="light_premium"] header nav a#navLista{
  width: 100% !important;
  box-sizing: border-box !important;
  justify-content: flex-start !important;
}

body[data-theme="light_premium"] header nav a#navSummary > span,
body[data-theme="light_premium"] header nav a#navOrders > span,
body[data-theme="light_premium"] header nav a#navInquiries > span,
body[data-theme="light_premium"] header nav a#navDrawings > span,
body[data-theme="light_premium"] header nav a#navReports > span,
body[data-theme="light_premium"] header nav a#navLista > span{
  max-width: none !important;
  overflow: visible !important;
  text-overflow: clip !important;
  white-space: nowrap !important;
}

/* =========================================================
   ZLECENIA – tabela: nagłówki bez "ramek/pigułek"
   ========================================================= */

/* 1) Sam wiersz nagłówka */
body[data-theme="light_premium"] table thead th{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding-top: 10px;
  padding-bottom: 10px;
}

/* 2) Jeśli nagłówek jest opakowany w <span>/<button>/<a> (pigułka) */
body[data-theme="light_premium"] table thead th > *,
body[data-theme="light_premium"] table thead th label,
body[data-theme="light_premium"] table thead th button,
body[data-theme="light_premium"] table thead th a,
body[data-theme="light_premium"] table thead th span{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
}

/* 3) Ikonki sortowania / chevrony – bez obwódek */
body[data-theme="light_premium"] table thead th svg,
body[data-theme="light_premium"] table thead th i{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* KROK 3: TYLKO "Zapisz ODPOWIEDZI" ma być żółty */
body[data-theme="light_premium"] #step3 #step3SaveBtn{
  background: #f5c400 !important;
  border-color: #e0b000 !important;
  color: #111 !important;
  font-weight: 600 !important;
}

body[data-theme="light_premium"] #step3 #step3SaveBtn:hover{
  filter: brightness(0.98);
}


/* === LIGHT PREMIUM: KROK 1 – "Otwórz wycenę" jako żółty outline + ikonka 📂 === */
body[data-theme="light_premium"] #step1 #openQuoteBtn{
  border: 2px solid var(--brand) !important;
  background: transparent !important;
  color: var(--fg) !important;

  /* trochę bardziej "premium" */
  border-radius: 12px !important;
  font-weight: 750 !important;
}

/* Ikonka dodana bez zmian w HTML */
body[data-theme="light_premium"] #step1 #openQuoteBtn::before{
  content: "📂";
  display: inline-block;
  margin-right: 8px;
  line-height: 1;
  transform: translateY(1px);
  /* ważne: emoji bierze kolor z fontu/OS, ale "czytelność" zapewnia tło i kolor tekstu */
}

/* Hover: wypełnienie żółte + ciemny tekst (spójne z primary) */
body[data-theme="light_premium"] #step1 #openQuoteBtn:hover{
  background: rgba(244,196,0,0.14) !important;
  border-color: var(--brandDeep) !important;
  color: #111 !important;
}

/* Active: delikatne wciśnięcie */
body[data-theme="light_premium"] #step1 #openQuoteBtn:active{
  transform: translateY(1px);
}

/* === LIGHT PREMIUM: KROK 1 – "Nowa wycena" z ikonką nowego pliku === */
body[data-theme="light_premium"] #step1 #newQuoteBtn::before{
  content: "📄";
  display: inline-block;
  margin-right: 8px;
  line-height: 1;
  transform: translateY(1px);
}

/* === LIGHT PREMIUM: KROK 1 – "Usuń wycenę" (deleteQuoteBtn) – czerwona ramka + 🗑 === */
body[data-theme="light_premium"] #step1 #deleteQuoteBtn{
  border: 2px solid #ef4444 !important;    /* czerwona ramka */
  background: transparent !important;
  color: #b91c1c !important;              /* ciemniejsza czerwień tekstu */
  border-radius: 12px !important;
  font-weight: 750 !important;
}

/* ikonka kosza przed tekstem */
body[data-theme="light_premium"] #step1 #deleteQuoteBtn::before{
  content: "📚";
  display: inline-block;
  margin-right: 8px;
  line-height: 1;
  transform: translateY(1px);
}

/* hover: lekkie czerwone wypełnienie */
body[data-theme="light_premium"] #step1 #deleteQuoteBtn:hover{
  background: rgba(239,68,68,0.12) !important;
  border-color: #dc2626 !important;
  color: #991b1b !important;
}
/* === LIGHT PREMIUM: KROK 1 – przycisk potwierdzający "Usuń" (openQuoteDelete) – SOLID RED === */
body[data-theme="light_premium"] #step1 #openQuoteDelete{
  background: #ef4444 !important;          /* czerwony fill */
  border: 2px solid #dc2626 !important;     /* ciemniejsza ramka */
  color: #ffffff !important;                /* biały tekst */
  border-radius: 12px !important;
  font-weight: 850 !important;
  box-shadow: 0 10px 22px rgba(239, 68, 68, 0.18) !important;
}


/* hover: mocniej */
body[data-theme="light_premium"] #step1 #openQuoteDelete:hover{
  background: #dc2626 !important;
  border-color: #b91c1c !important;
  box-shadow: 0 14px 28px rgba(239, 68, 68, 0.22) !important;
}

/* === LIGHT PREMIUM: KROK 3 – "Zapisz ODPOWIEDZI" z błyśnięciem jak primary === */
body[data-theme="light_premium"] #step3 #step3SaveBtn{
  position: relative;
  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: 500 !important;
  box-shadow:
    0 16px 34px rgba(244,196,0,0.22),
    0 2px 0 rgba(0,0,0,0.06) !important;
}

/* błyśnięcie (sheen) */
body[data-theme="light_premium"] #step3 #step3SaveBtn::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(-120%);
  opacity: 0;
  transition: transform .65s ease, opacity .18s ease;
  pointer-events:none;
}

body[data-theme="light_premium"] #step3 #step3SaveBtn:hover::after{
  opacity: 1;
  transform: translateX(120%);
}

body[data-theme="light_premium"] #step3 #step3SaveBtn: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);
}

/* === LIGHT PREMIUM: KROK 1 – przycisk "Otwórz" (openQuoteConfirm) na żółto + błyśnięcie === */
body[data-theme="light_premium"] #step1 #openQuoteConfirm{
  position: relative;
  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: 750 !important;
  box-shadow:
    0 16px 34px rgba(244,196,0,0.22),
    0 2px 0 rgba(0,0,0,0.06) !important;
}

/* błyśnięcie (sheen) */
body[data-theme="light_premium"] #step1 #openQuoteConfirm::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(-120%);
  opacity: 0;
  transition: transform .65s ease, opacity .18s ease;
  pointer-events:none;
}

body[data-theme="light_premium"] #step1 #openQuoteConfirm:hover::after{
  opacity: 1;
  transform: translateX(120%);
}

body[data-theme="light_premium"] #step1 #openQuoteConfirm: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);
}

/* === LIGHT PREMIUM: KROK 3 – pigułkowy przełącznik Tak/Nie === */
body[data-theme="light_premium"] .yn-toggle{
  display: inline-flex;
  align-items: center;
  gap: 0;
  padding: 4px;
  border-radius: 999px;
  border: 1px solid rgba(15, 23, 42, 0.18);
  background: rgba(2,6,23,0.04);
  box-shadow: 0 6px 18px rgba(2,6,23,0.06);
  width: fit-content;
  user-select: none;
}

body[data-theme="light_premium"] .yn-toggle button{
  appearance: none;
  border: 0 !important;
  background: transparent !important;
  color: var(--fg) !important;
  padding: 8px 14px;
  border-radius: 999px !important;
  cursor: pointer;
  font-weight: 650;
  transition: background .18s ease, color .18s ease, transform .12s ease;
}

/* "Tak" zostaje żółte (jak było) */
body[data-theme="light_premium"] .yn-toggle button[aria-pressed="true"]{
  background: linear-gradient(180deg, var(--brand2), var(--brand)) !important;
  color: #111 !important;
  box-shadow: 0 10px 22px rgba(244,196,0,0.20), 0 2px 0 rgba(0,0,0,0.06);
}

/* ✅ "Nie" (aktywny) ma być biały z żółtą obwódką */
body[data-theme="light_premium"] .yn-toggle button[aria-pressed="true"]:last-child{
  background: #ffffff !important;                 /* biały środek */
  border: 2px solid var(--brand) !important;      /* żółta obwódka */
  color: var(--fg) !important;                    /* normalny kolor tekstu */
  box-shadow: 0 8px 18px rgba(2,6,23,0.08) !important;
}


body[data-theme="light_premium"] .yn-toggle button:active{
  transform: translateY(1px);
}

/* ukryty input, który trzyma wartość Tak/Nie */
body[data-theme="light_premium"] .yn-hidden{
  display: none !important;
}

/* ================================
   LIGHT PREMIUM – "Moje konto" (acc-modal)
   ================================ */

body[data-theme="light_premium"] .modal.acc-modal{
  /* tło za oknem – bez udziwnień i bez "szarej mgły" */
  background: rgba(2,6,23,0.32) !important;
}

/* Samo okno: żadnej przezroczystości */
body[data-theme="light_premium"] .modal.acc-modal .modal-card.acc-modal-card{
  background: #ffffff !important;
}

/* "test" (pill w tytule) — żółtawy chip */
body[data-theme="light_premium"] .acc-pill{
  background: rgba(244,196,0,0.18) !important;
  border-color: rgba(244,196,0,0.55) !important;
  color: #111 !important;
  font-weight: 800;
}

/* X – jasny z żółtą ramką */
body[data-theme="light_premium"] .acc-x{
  background: #ffffff !important;
  border-color: rgba(244,196,0,0.55) !important;
  color: #111 !important;
}
body[data-theme="light_premium"] .acc-x:hover{
  background: rgba(244,196,0,0.14) !important;
  border-color: rgba(244,196,0,0.75) !important;
}

/* Zakładki (Dane adresowe / Technologia) – jasne */
body[data-theme="light_premium"] .acc-tab{
  background: #ffffff !important;
  border-color: rgba(244,196,0,0.45) !important;
  color: #111 !important;
  font-weight: 750;
}

/* Aktywna zakładka – całkiem żółta (urozmaicenie) */
body[data-theme="light_premium"] .acc-tab[aria-selected="true"]{
  background: linear-gradient(180deg, var(--brand2), var(--brand)) !important;
  border-color: rgba(0,0,0,0.10) !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(244,196,0,0.22) !important;
}

body[data-theme="light_premium"] #step1 #openQuoteArchive,
body[data-theme="light_premium"] #step1 #openQuoteTemplate{
  border-radius: 12px !important;
  font-weight: 750 !important;
}

/* =========================================================
   Zarządzanie wycenami – tabela (quotesManageTable)
   Cel: ładna, dynamiczna, full width, sticky header + filtry
   ========================================================= */

/* kontener w panelu "Otwórz wycenę" */
#quotesManageWrap{
  width: 100%;
  max-width: 100%;
}

/* wrapper (ten div z overflow:auto wstrzykiwany inline) */
#quotesManageWrap > div:first-child{
  width: 100% !important;
  max-width: 100% !important;
  overflow: auto !important;
  border: 1px solid var(--border, rgba(148,163,184,.25)) !important;
  border-radius: 12px !important;
  background: var(--card, #111722) !important;
  box-shadow: var(--shadow, 0 6px 18px rgba(0,0,0,.25));
}

/* tabela: pełna szerokość obszaru, ale z min-width żeby kolumny nie robiły „kaszki” */
#quotesManageTable{
  width: 100% !important;
  min-width: 860px;                 /* przewijanie poziome dopiero gdy trzeba */
  border-collapse: separate !important;
  border-spacing: 0 !important;
  table-layout: fixed;              /* stabilne kolumny + ellipsis */
  background: transparent !important;
  color: var(--fg, #e8ebf0);
  font-variant-numeric: tabular-nums;
}

#quotesManageTable tbody tr{
  background-clip: padding-box;
}

#quotesManageTable tbody tr:nth-child(even){
  background: rgba(148,163,184,0.06);
}

#quotesManageTable tbody tr:hover{
  background: rgba(244,196,0,0.10);
}

#quotesManageWrap > div:first-child{
  overflow-x: auto !important;
  overflow-y: visible !important; 
  border-radius: 12px !important;
}

/* nagłówki + komórki */
#quotesManageTable th,
#quotesManageTable td{
  padding: 10px 12px;
  border-bottom: 1px solid var(--border, rgba(148,163,184,.18));
  vertical-align: middle;
}

/* sticky header (2 wiersze thead: nagłówki + filtry) */
#quotesManageTable thead th{
  position: sticky;
  top: 0;
  z-index: 3;
  background: var(--card, #111722);
  font-weight: 800;
}

/* drugi wiersz (filtry) ma być „pod” pierwszym */
#quotesManageTable thead tr#qmFiltersRow th{
  position: sticky;
  top: 44px;                        /* wysokość 1. wiersza nagłówka */
  z-index: 2;
  background: var(--card2, var(--card, #111722));
  padding-top: 8px;
  padding-bottom: 10px;
}

/* zebra + hover */
#quotesManageTable tbody tr:nth-child(even){
  background: rgba(148,163,184,0.06);
}
#quotesManageTable tbody tr:hover{
  background: rgba(244,196,0,0.10); /* żółty akcent – pasuje do premium */
}

/* zaznaczenie wiersza: gdy checkbox w środku zaznaczony */
#quotesManageTable tbody tr:has(.qmRowCb:checked){
  background: rgba(244,196,0,0.16);
  box-shadow: inset 0 0 0 2px rgba(244,196,0,0.20);
}

/* pierwsza kolumna (checkboxy) wąska i “sticky” po lewej (mega wygodne przy scrollu w bok) */
#quotesManageTable th:first-child,
#quotesManageTable td:first-child{
  width: 56px;        /* było 44px */
  min-width: 56px;    /* dodaj */
  max-width: 56px;    /* dodaj */
  padding-left: 6px;   /* mały luz od lewej */
  padding-right: 6px;
  text-align: center;
  position: sticky;
  left: 0;
  z-index: 4;
  background: inherit;
  border-right: 1px solid var(--border, rgba(148,163,184,.18));
}
/* komórki z tekstem: ładne ucinanie, bez rozpychania tabeli */
#quotesManageTable td{
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* filtrowanie – nadpisz inline-style z JS */
#quotesManageWrap .qmFilterInput{
  width: 100% !important;
  box-sizing: border-box !important;
  padding: 8px 10px !important;
  border-radius: 12px !important;
  border: 1px solid var(--border, rgba(148,163,184,.35)) !important;
  background: rgba(2,6,23,0.06) !important;
  color: var(--fg, inherit) !important;
  outline: none !important;
}
#quotesManageWrap .qmFilterInput::placeholder{
  color: var(--muted, rgba(154,163,178,.75)) !important;
}
#quotesManageWrap .qmFilterInput:focus{
  border-color: rgba(244,196,0,0.70) !important;
  box-shadow: 0 0 0 4px rgba(244,196,0,0.18) !important;
}

/* checkboxy trochę większe i czytelniejsze */
#quotesManageWrap input[type="checkbox"]{
  width: 16px;
  height: 16px;
  accent-color: var(--brand, #f4c400);
  cursor: pointer;
}

/* mały „hint” pod tabelą */
#quotesManageWrap .muted{
  color: var(--muted, rgba(154,163,178,.75)) !important;
}

/* responsywka: na wąskich ekranach pozwól łatwo scrollować w poziomie */
@media (max-width: 980px){
  #quotesManageTable{
    min-width: 760px;
  }
}

/* =========================================================
   "Tylko aktywne" – styl dynamiczny z oczkiem
   ========================================================= */

#openOnlyActive{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 14px;
  border: 1px solid var(--border, rgba(148,163,184,.35));
  background: rgba(2,6,23,0.03);
  font-weight: 800;
  cursor: pointer;
  transition: all .15s ease;
}

/* oczko */
#openOnlyActive::before{
  content: "👁";
  font-size: 15px;
  line-height: 1;
  opacity: .85;
}

/* hover */
#openOnlyActive:hover{
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(0,0,0,.10);
}

/* aktywny – delikatny zielony obrys */
button#openOnlyActive[aria-pressed="true"]{
  background: transparent !important;
  border: 2px solid #22c55e !important;
  box-shadow: 0 0 0 2px rgba(34,197,94,0.35) !important;
}


/* aktywne oczko mocniejsze */
#openOnlyActive[aria-pressed="true"]::before{
  opacity: 1;
  filter: saturate(1.2);
}

/* opcjonalnie – gdy wyłączony (pokazuje wszystko) */
#openOnlyActive[aria-pressed="false"]::before{
  content: "👁‍🗨";
  opacity: .6;
}

/* ===== Sortowanie – Zarządzanie wycenami ===== */

#quotesManageTable thead .qm-sort{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: 0;
  color: inherit;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
  padding: 0;
}

#quotesManageTable thead .qm-sort-ico{
  width: 14px;
  height: 14px;
  opacity: .5;
  transition: transform .15s ease, opacity .15s ease;
}

#quotesManageTable thead .qm-sort.active .qm-sort-ico{
  opacity: 1;
}

#quotesManageTable thead .qm-sort[data-dir="desc"] .qm-sort-ico{
  transform: rotate(180deg);
}

/* ===== Szerokości kolumn – procentowy układ stabilny ===== */

#quotesManageTable{
  table-layout: fixed;
  width: 100%;
}

/* checkbox – stała szerokość */
#quotesManageTable th:first-child,
#quotesManageTable td:first-child{
  width: 56px;
  min-width: 56px;
  max-width: 56px;
}

/* Firma */
#quotesManageTable th:nth-child(2),
#quotesManageTable td:nth-child(2){
  width: 20%;
}

/* Nazwa wyceny */
#quotesManageTable th:nth-child(3),
#quotesManageTable td:nth-child(3){
  width: 30%;
}

/* Data */
#quotesManageTable th:nth-child(4),
#quotesManageTable td:nth-child(4){
  width: 15%;
  white-space: nowrap;
}

/* Cena */
#quotesManageTable th:nth-child(5){
  width: 15%;
  text-align: left;   /* nagłówek w lewo */
}

#quotesManageTable td:nth-child(5){
  width: 15%;
  text-align: right;  /* liczby w prawo */
  white-space: nowrap;
}

/* Status */
#quotesManageTable th:nth-child(6),
#quotesManageTable td:nth-child(6){
  width: 20%;
}

/* =========================
   RYSUNKI (na końcu wydruku)
   ========================= */
.drawings-wrap{ margin-top: 18px; }
.drawings-wrap h2{ margin-top: 18px; }

.drawing-card{
  border: 1px solid rgba(15,23,42,0.14);
  border-radius: 12px;
  padding: 10px 12px;
  margin: 10px 0;
  background: #fff;
  break-inside: avoid;
  page-break-inside: avoid;
}

.drawing-title{
  margin: 0 0 8px 0;
  font-weight: 900;
  font-size: 12pt;
  color: rgba(15,23,42,0.92);
}

.drawing-svg{
  border: 1px solid rgba(15,23,42,0.10);
  border-radius: 10px;
  padding: 8px;
  background: #fff;
  overflow: hidden;
}

/* SVG dopasowane do szerokości strony */
.drawing-svg svg{
  width: 100% !important;
  height: auto !important;
  display: block;
}

/* gdyby trafił się IMG (fallback) */
.drawing-svg img{
  width: 100%;
  height: auto;
  display: block;
}

.drawings-empty{
  opacity: .75;
  padding: 6px 0 0;
}

/* =========================================================
   Light Premium – KROK 2 jeszcze bardziej premium
   ========================================================= */
body[data-theme="light_premium"] #step2 .step2-flow-card{
  background:
    radial-gradient(1200px 340px at -5% -10%, rgba(244,196,0,0.16), rgba(255,255,255,0) 56%),
    radial-gradient(900px 260px at 110% 0%, rgba(15,23,42,0.05), rgba(255,255,255,0) 45%),
    linear-gradient(180deg, rgba(255,255,255,0.98), rgba(255,255,255,0.94)) !important;
  border: 1px solid rgba(15,23,42,0.08) !important;
  box-shadow:
    0 28px 80px rgba(15,23,42,0.10),
    0 1px 0 rgba(255,255,255,0.94) inset,
    0 0 0 1px rgba(244,196,0,0.06) inset !important;
}

body[data-theme="light_premium"] #step2 .step2-choice-tile{
  background: linear-gradient(180deg, rgba(255,255,255,0.99), rgba(249,250,251,0.97)) !important;
  border-color: rgba(15,23,42,0.08) !important;
  box-shadow:
    0 18px 40px rgba(15,23,42,0.08),
    0 1px 0 rgba(255,255,255,0.95) inset !important;
}

body[data-theme="light_premium"] #step2 .step2-choice-tile:hover{
  border-color: rgba(244,196,0,0.72) !important;
  box-shadow:
    0 26px 54px rgba(15,23,42,0.12),
    0 0 0 4px rgba(244,196,0,0.10),
    0 1px 0 rgba(255,255,255,0.95) inset !important;
}

body[data-theme="light_premium"] #step2 .step2-choice-media{
  background:
    radial-gradient(circle at top left, rgba(244,196,0,0.22), rgba(255,255,255,0) 42%),
    linear-gradient(135deg, rgba(250,250,250,1), rgba(241,245,249,0.96)) !important;
}

body[data-theme="light_premium"] #step2 .step2-choice-fallback{
  color: rgba(15,23,42,0.90) !important;
  text-shadow: 0 1px 0 rgba(255,255,255,0.7);
}

body[data-theme="light_premium"] #step2 .step2-crumb.is-current{
  box-shadow: 0 10px 24px rgba(244,196,0,0.16) !important;
}

body[data-theme="light_premium"] #step2 .step2-inline-back,
body[data-theme="light_premium"] #step2 .step2-crumb-back{
  background: rgba(255,255,255,0.96) !important;
}

/* Wygląd przycików Raport i Lista */

body[data-theme="light_premium"]:not(.sidebar-collapsed) #wizardNav a#navReports > span{
  margin-left: 10px;
}

body[data-theme="light_premium"]:not(.sidebar-collapsed) #wizardNav a#navLista > span{
  margin-left: 10px;
}

/* =========================================================
   LISTA
   ========================================================= */

  .lista-status-badge {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.2px;
  white-space: nowrap;
}

.lista-status-badge.neutral {
  background: rgba(120, 120, 120, 0.12);
  color: #666;
}

.lista-status-badge.new {
  background: rgba(255, 193, 7, 0.18);
  color: #9a6a00;
}

.lista-status-badge.draft {
  background: rgba(149, 165, 166, 0.18);
  color: #5d6d6e;
}

.lista-status-badge.vendor {
  background: rgba(52, 152, 219, 0.16);
  color: #21618c;
}

.lista-status-badge.ready {
  background: rgba(155, 89, 182, 0.16);
  color: #6c3483;
}

.lista-status-badge.production {
  background: rgba(230, 126, 34, 0.16);
  color: #a04000;
}

.lista-status-badge.assembly {
  background: rgba(26, 188, 156, 0.16);
  color: #117864;
}

.lista-status-badge.done {
  background: rgba(46, 204, 113, 0.16);
  color: #1e8449;
}

.lista-status-badge.cancelled {
  background: rgba(231, 76, 60, 0.16);
  color: #922b21;
}

.lista-search-row {
  position: relative;
  display: flex;
  justify-content: center;
  margin: 18px 0;
}

.lista-search-box {
  position: relative;
  width: 100%;
  max-width: 760px;
}

.lista-search-box input {
  width: 100%;
  padding-right: 44px;
}


.lista-results-counter {
  position: absolute;
  left: calc(50% + 390px);
  top: 50%;
  transform: translateY(-50%);

  font-size: 13px;
  font-weight: 700;
  color: #8a6d1f;
  background: rgba(255, 193, 7, 0.14);
  border: 1px solid rgba(255, 193, 7, 0.28);
  border-radius: 999px;
  padding: 8px 14px;
  white-space: nowrap;
}

.lista-search-highlight {
  background: rgba(255, 215, 0, 0.45);
  color: inherit;
  border-radius: 5px;
  padding: 0 2px;
}

/* =========================================================
   START – centrum dowodzenia
   ========================================================= */

#start {
  overflow: hidden;
}

.start-page {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.start-hero {
  padding: 24px;
  border-radius: 24px !important;
  background:
    radial-gradient(900px 320px at -5% -20%, rgba(244,196,0,0.22), rgba(255,255,255,0) 60%),
    radial-gradient(700px 260px at 110% 0%, rgba(15,23,42,0.06), rgba(255,255,255,0) 48%),
    linear-gradient(180deg, rgba(255,255,255,0.98), rgba(255,255,255,0.94)) !important;
}

.start-eyebrow {
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(15,23,42,0.58);
  margin-bottom: 6px;
}

.start-hero h2 {
  margin: 0 0 8px;
  font-size: clamp(26px, 4vw, 42px);
  line-height: 1.05;
}

.start-hero p {
  max-width: 760px;
  color: var(--muted);
  margin: 0;
}

.start-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(180px, 1fr));
  gap: 14px;
}

.start-stat-card {
  border: 1px solid rgba(15,23,42,0.10);
  border-radius: 20px;
  background: rgba(255,255,255,0.92);
  box-shadow: var(--shadow);
  padding: 18px;
  position: relative;
  overflow: hidden;
}

.start-stat-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(244,196,0,0.16), rgba(255,255,255,0));
  pointer-events: none;
}

.start-stat-number {
  font-size: 34px;
  font-weight: 950;
  line-height: 1;
  position: relative;
}

.start-stat-label {
  margin-top: 6px;
  color: var(--muted);
  font-weight: 750;
  position: relative;
}

.start-panels {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.start-panel {
  animation: startFadeIn .18s ease;
}

@keyframes startFadeIn {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.start-choice-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(240px, 1fr));
  gap: 16px;
}

.start-choice-grid-secondary {
  margin-top: 16px;
}

.start-choice-tile {
  min-height: 160px;
  padding: 22px !important;
  border-radius: 24px !important;
  display: flex !important;
  flex-direction: column;
  align-items: flex-start !important;
  justify-content: center !important;
  text-align: left !important;
  gap: 10px;
  background:
    radial-gradient(520px 220px at 0% 0%, rgba(244,196,0,0.12), rgba(255,255,255,0) 58%),
    #ffffff !important;
  border: 1px solid rgba(15,23,42,0.12) !important;
  box-shadow:
    0 18px 46px rgba(15,23,42,0.09),
    0 1px 0 rgba(255,255,255,0.80) inset !important;
  color: var(--fg) !important;
}

.start-choice-tile:hover {
  border-color: rgba(244,196,0,0.72) !important;
  background:
    radial-gradient(520px 220px at 0% 0%, rgba(244,196,0,0.24), rgba(255,255,255,0) 58%),
    #ffffff !important;
  transform: translateY(-2px);
  box-shadow:
    0 24px 60px rgba(15,23,42,0.13),
    0 0 0 4px rgba(244,196,0,0.16) !important;
}

.start-choice-primary {
  background:
    radial-gradient(700px 260px at 0% 0%, rgba(244,196,0,0.34), rgba(255,255,255,0) 60%),
    linear-gradient(180deg, rgba(255,255,255,1), rgba(255,248,218,0.92)) !important;
  border-color: rgba(244,196,0,0.48) !important;
}

.start-choice-icon {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  background: rgba(244,196,0,0.18);
  border: 1px solid rgba(244,196,0,0.40);
  font-size: 24px;
}

.start-choice-title {
  font-size: 21px;
  line-height: 1.15;
  font-weight: 950;
}

.start-choice-desc {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.35;
}

.start-panel-head {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}

.start-panel-head h3 {
  margin: 0 0 4px;
  font-size: 24px;
}

.start-panel-head p {
  margin: 0;
  color: var(--muted);
}

.start-form-card {
  padding: 18px;
  border-radius: 22px !important;
}

#navStart {
  border-color: rgba(244,196,0,0.48) !important;
  background: linear-gradient(180deg, rgba(244,196,0,0.16), rgba(255,255,255,0.96)) !important;
}

body[data-theme="light_premium"] #wizardNav a#navStart {
  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;
}

body[data-theme="light_premium"] #wizardNav a#navStart::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(244,196,0,0.40);
  background: rgba(244,196,0,0.16);
}

@media (max-width: 900px) {
  .start-stats,
  .start-choice-grid {
    grid-template-columns: 1fr;
  }

  .start-choice-tile {
    min-height: 130px;
  }
}

/* =========================================================
   START — klikalne kolorowe kafelki liczników
   ========================================================= */

.start-stat-card {
  cursor: pointer;
  text-align: left;
  border: 0 !important;
  color: #0f172a !important;
  transition:
    transform .14s ease,
    box-shadow .14s ease,
    filter .14s ease;
}

.start-stat-card:hover {
  transform: translateY(-3px);
  filter: brightness(1.02);
}

.start-stat-card:active {
  transform: translateY(-1px);
}

.start-stat-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  position: relative;
  z-index: 1;
}

.start-stat-icon {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: rgba(255,255,255,0.52);
  border: 1px solid rgba(255,255,255,0.56);
  box-shadow: 0 8px 22px rgba(15,23,42,0.10);
  font-size: 22px;
}

.start-stat-open {
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .08em;
  opacity: .78;
}

.start-stat-projects {
  background:
    radial-gradient(560px 220px at 0% 0%, rgba(59,130,246,0.34), transparent 58%),
    linear-gradient(135deg, #dbeafe, #ffffff) !important;
  box-shadow: 0 18px 45px rgba(37,99,235,0.18) !important;
}

.start-stat-quotes {
  background:
    radial-gradient(560px 220px at 0% 0%, rgba(244,196,0,0.40), transparent 58%),
    linear-gradient(135deg, #fef3c7, #ffffff) !important;
  box-shadow: 0 18px 45px rgba(217,119,6,0.18) !important;
}

.start-stat-orders {
  background:
    radial-gradient(560px 220px at 0% 0%, rgba(34,197,94,0.32), transparent 58%),
    linear-gradient(135deg, #dcfce7, #ffffff) !important;
  box-shadow: 0 18px 45px rgba(22,163,74,0.18) !important;
}

.start-stat-projects .start-stat-icon {
  color: #1d4ed8;
}

.start-stat-quotes .start-stat-icon {
  color: #b45309;
}

.start-stat-orders .start-stat-icon {
  color: #15803d;
}

.start-stat-card .start-stat-number {
  margin-top: 18px;
}

.start-stat-card .start-stat-label {
  color: rgba(15,23,42,0.68) !important;
}

/* =========================================================
   START — poprawiony układ kafelków i liczników
   ========================================================= */

#start .start-choice-grid {
  display: grid;
  gap: 16px;
}

#start .start-choice-grid-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

#start .start-choice-grid-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

#start .start-choice-tile {
  min-height: 150px;
}

#start .start-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin: 18px 0;
}

#start .start-stat-card {
  appearance: none;
  border: 1px solid rgba(15, 23, 42, .10);
  border-radius: 18px;
  padding: 18px 20px;
  min-height: 118px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 16px;
  text-align: left;
  cursor: pointer;
  color: #111827;
  background: #fff;
  box-shadow: 0 12px 30px rgba(15, 23, 42, .06);
  transition:
    transform .14s ease,
    box-shadow .14s ease,
    border-color .14s ease;
}

#start .start-stat-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 42px rgba(15, 23, 42, .10);
  border-color: rgba(15, 23, 42, .18);
}

#start .start-stat-icon {
  width: 48px;
  height: 48px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  font-size: 24px;
  background: rgba(255,255,255,.72);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.8);
}

#start .start-stat-content {
  min-width: 0;
}

#start .start-stat-number {
  font-size: 34px;
  line-height: 1;
  font-weight: 950;
  letter-spacing: -0.04em;
  color: #0f172a;
}

#start .start-stat-label {
  margin-top: 6px;
  font-size: 13px;
  font-weight: 800;
  color: rgba(15,23,42,.62);
}

#start .start-stat-arrow {
  font-size: 34px;
  font-weight: 300;
  color: rgba(15,23,42,.35);
}

#start .start-stat-projects {
  background:
    radial-gradient(380px 180px at 0% 0%, rgba(59,130,246,.20), transparent 62%),
    linear-gradient(135deg, #eff6ff, #ffffff);
}

#start .start-stat-quotes {
  background:
    radial-gradient(380px 180px at 0% 0%, rgba(245,158,11,.22), transparent 62%),
    linear-gradient(135deg, #fffbeb, #ffffff);
}

#start .start-stat-orders {
  background:
    radial-gradient(380px 180px at 0% 0%, rgba(34,197,94,.20), transparent 62%),
    linear-gradient(135deg, #f0fdf4, #ffffff);
}

#start .start-stat-projects .start-stat-icon {
  color: #2563eb;
}

#start .start-stat-quotes .start-stat-icon {
  color: #b45309;
}

#start .start-stat-orders .start-stat-icon {
  color: #15803d;
}

@media (max-width: 1100px) {
  #start .start-choice-grid-3,
  #start .start-choice-grid-2,
  #start .start-stats {
    grid-template-columns: 1fr;
  }
}

/* KROK 1 — ukrycie starych przycisków akcji */
#step1 > .actions {
  display: none !important;
}

/* =========================================================
   START — nowy układ głównego panelu
   ========================================================= */

#start .start-section-title {
  margin: 18px 0 10px;
  font-size: 13px;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: rgba(15, 23, 42, .56);
}

#start .start-choice-grid {
  display: grid;
  gap: 16px;
}

#start .start-choice-grid-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

#start .start-choice-grid-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

#start .start-quick-create-grid .start-choice-tile {
  min-height: 132px;
}

#start .start-secondary-actions-grid .start-choice-tile {
  min-height: 132px;
}

#start .start-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin: 18px 0 20px;
}

@media (max-width: 1100px) {
  #start .start-choice-grid-3,
  #start .start-choice-grid-2,
  #start .start-stats {
    grid-template-columns: 1fr;
  }
}

/* =========================================================
   START — odstęp przed "Otwórz lub zarządzaj"
   ========================================================= */

#start .start-stats + .start-section-title {
  margin-top: 34px !important;
  margin-bottom: 10px !important;
}

#start .start-secondary-actions-grid {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

#start .start-secondary-actions-grid::before {
  content: none !important;
  display: none !important;
}

/* =========================================================
   START — kolorowe kafelki liczników
   Projekty = niebieski
   Oferty = żółty / pomarańczowy
   Zlecenia = zielony
   ========================================================= */

#start .start-stat-card.start-stat-projects {
  background:
    radial-gradient(circle at top left, rgba(37, 99, 235, 0.24), transparent 42%),
    linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%) !important;
  border-color: rgba(37, 99, 235, 0.28) !important;
  box-shadow: 0 14px 34px rgba(37, 99, 235, 0.14) !important;
}

#start .start-stat-card.start-stat-quotes {
  background:
    radial-gradient(circle at top left, rgba(245, 158, 11, 0.28), transparent 42%),
    linear-gradient(135deg, #fffbeb 0%, #fde68a 100%) !important;
  border-color: rgba(217, 119, 6, 0.30) !important;
  box-shadow: 0 14px 34px rgba(217, 119, 6, 0.14) !important;
}

#start .start-stat-card.start-stat-orders {
  background:
    radial-gradient(circle at top left, rgba(22, 163, 74, 0.24), transparent 42%),
    linear-gradient(135deg, #f0fdf4 0%, #bbf7d0 100%) !important;
  border-color: rgba(22, 163, 74, 0.30) !important;
  box-shadow: 0 14px 34px rgba(22, 163, 74, 0.14) !important;
}

#start .start-stat-card.start-stat-projects .start-stat-icon {
  background: rgba(37, 99, 235, 0.13) !important;
  color: #1d4ed8 !important;
}

#start .start-stat-card.start-stat-quotes .start-stat-icon {
  background: rgba(245, 158, 11, 0.16) !important;
  color: #b45309 !important;
}

#start .start-stat-card.start-stat-orders .start-stat-icon {
  background: rgba(22, 163, 74, 0.14) !important;
  color: #15803d !important;
}

#start .start-stat-card.start-stat-projects .start-stat-arrow {
  color: rgba(29, 78, 216, 0.55) !important;
}

#start .start-stat-card.start-stat-quotes .start-stat-arrow {
  color: rgba(180, 83, 9, 0.55) !important;
}

#start .start-stat-card.start-stat-orders .start-stat-arrow {
  color: rgba(21, 128, 61, 0.55) !important;
}

#start .start-stat-card:hover {
  transform: translateY(-3px);
}

/* =========================================================
   START — większy, wyraźniejszy przycisk "← Wróć"
   ========================================================= */

#start .start-panel-head > button.secondary[id^="startBack"] {
  min-height: 58px;
  min-width: 150px;
  padding: 12px 20px !important;
  border-radius: 16px !important;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;

  font-size: 16px !important;
  font-weight: 950 !important;
  line-height: 1.15;

  background:
    linear-gradient(135deg, #ffffff 0%, #eef2ff 100%) !important;
  color: #1e3a8a !important;

  border: 2px solid rgba(37, 99, 235, 0.35) !important;
  box-shadow: 0 12px 28px rgba(37, 99, 235, 0.14) !important;

  cursor: pointer;
}

#start .start-panel-head > button.secondary[id^="startBack"]:hover {
  transform: translateY(-2px);
  border-color: rgba(37, 99, 235, 0.55) !important;
  box-shadow: 0 16px 34px rgba(37, 99, 235, 0.20) !important;
}

#start .start-panel-head > button.secondary[id^="startBack"]:active {
  transform: translateY(0);
}

#start .start-panel-head > button.secondary[id^="startBack"]::first-letter {
  font-size: 20px;
}

/* =========================================================
   KROK 3 — załączniki: jeden wybór plików + mocny przycisk Dodaj
   ========================================================= */

.step3-attachment-row-single {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: stretch;
}

.step3AttachmentUploadBtnPrimary {
  min-width: 150px;
  min-height: 48px;
  padding: 0 22px;
  border: 0;
  border-radius: 14px;
  cursor: pointer;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;

  font-size: 15px;
  font-weight: 950;

  background:
    linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
  color: #ffffff;

  box-shadow: 0 14px 30px rgba(37, 99, 235, 0.25);
}

.step3AttachmentUploadBtnPrimary:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 38px rgba(37, 99, 235, 0.32);
}

.step3AttachmentUploadBtnPrimary:active {
  transform: translateY(0);
}

.step3AttachmentUploadBtnPrimary:disabled {
  opacity: .65;
  cursor: not-allowed;
  transform: none;
}

@media (max-width: 760px) {
  .step3-attachment-row-single {
    grid-template-columns: 1fr;
  }

  .step3AttachmentUploadBtnPrimary {
    width: 100%;
  }
}
/* KROK 3 — główny przycisk zapisu i przejścia do podsumowania */
#step3SaveBtn {
  min-height: 48px;
  padding: 0 22px;
  border-radius: 14px;
  font-weight: 950;
}

/* KROK 3 — główny przycisk zapisu i przejścia do podsumowania */
#step3SaveBtn {
  min-height: 48px;
  padding: 0 22px;
  border-radius: 14px;
  font-weight: 950;
}

#projectsManageTable .pmDeleteProject {
  margin-left: 6px;
  background: #dc2626 !important;
  color: #ffffff !important;
  border-color: #dc2626 !important;
  font-weight: 900;
}

#projectsManageTable .pmDeleteProject:hover {
  background: #b91c1c !important;
  border-color: #b91c1c !important;
}

/* Ruchoma ramka aktywnego przycisku nawigacji */
#routeActiveFrame {
  position: absolute;
  z-index: 20;
  pointer-events: none;

  border: 2px solid rgba(235, 44, 37, 0.95);
  border-radius: 14px;

  box-shadow:
    0 0 0 4px rgba(37, 99, 235, 0.12),
    0 10px 24px rgba(37, 99, 235, 0.18);

  opacity: 0;
  transform: translate3d(0, 0, 0);

  transition:
    left 0.28s ease,
    top 0.28s ease,
    width 0.28s ease,
    height 0.28s ease,
    opacity 0.18s ease;
}

#routeActiveFrame.is-visible {
  opacity: 1;
}

.start-client-context {
  margin: 0 0 22px 0;
  padding: 14px 18px;

  border: 2px solid #dc2626;
  border-radius: 14px;

  background: rgba(220, 38, 38, 0.08);
  color: #7f1d1d;

  font-size: 15px;
  font-weight: 800;
  line-height: 1.35;

  box-shadow: 0 10px 26px rgba(220, 38, 38, 0.12);
}

.start-client-context strong {
  color: #991b1b;
  font-weight: 950;
}

.step3-long-textarea {
  width: 100%;
  min-height: 150px;
  resize: vertical;
  line-height: 1.45;
  white-space: pre-wrap;
  font-family: inherit;
}

.step3-long-textarea::placeholder {
  opacity: .65;
}

#uwagiMineOnlyBtn,
.uwagi-mine-btn {
  display: block;
  width: 100%;
  margin-top: 10px;
  padding: 9px 14px;

  border-radius: 10px;
  border: 1px solid rgba(202, 138, 4, 0.35) !important;

  background: rgba(250, 204, 21, 0.10) !important;
  color: #7c5a00 !important;

  font-size: 14px;
  font-weight: 800;
  line-height: 1.2;
  text-align: center;

  box-shadow: none;
  cursor: pointer;
}

#uwagiMineOnlyBtn:hover,
.uwagi-mine-btn:hover {
  background: rgba(250, 204, 21, 0.18) !important;
  border-color: rgba(202, 138, 4, 0.55) !important;
  color: #5f4300 !important;
}

#uwagiMineOnlyBtn.is-active,
.uwagi-mine-btn.is-active {
  background: linear-gradient(180deg, #facc15 0%, #eab308 100%) !important;
  border-color: #ca8a04 !important;
  color: #3f2a00 !important;

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    0 8px 18px rgba(234, 179, 8, 0.24);
}

/* =========================================================
   START — premium light attention:
   "Otwórz istniejącą wycenę" + "Zarządzaj"
   ========================================================= */

body[data-theme="light_premium"] #startOpenExistingQuoteDirectBtn,
body[data-theme="light_premium"] #startManageBtn {
  position: relative;
  overflow: hidden;
  isolation: isolate;

  border-radius: 24px !important;
  border: 1px solid rgba(15, 23, 42, 0.10) !important;

  background:
    radial-gradient(520px 220px at 0% 0%, rgba(244, 196, 0, 0.18), rgba(255,255,255,0) 58%),
    linear-gradient(180deg, #ffffff 0%, #fffdf2 100%) !important;

  box-shadow:
    0 18px 46px rgba(15, 23, 42, 0.09),
    0 0 0 1px rgba(255,255,255,0.85) inset,
    0 0 0 0 rgba(244,196,0,0.00) !important;

  transform: translateZ(0);

  animation: startLpPremiumPulse 4.8s ease-in-out infinite;

  transition:
    transform .18s ease,
    box-shadow .22s ease,
    border-color .22s ease,
    background .22s ease,
    filter .22s ease;
}

/* delikatny świetlny sweep */
body[data-theme="light_premium"] #startOpenExistingQuoteDirectBtn::before,
body[data-theme="light_premium"] #startManageBtn::before {
  content: "";
  position: absolute;
  inset: -40% -80%;
  z-index: -1;
  pointer-events: none;

  background:
    linear-gradient(115deg,
      transparent 0%,
      transparent 42%,
      rgba(255,255,255,0.00) 45%,
      rgba(255,255,255,0.92) 49%,
      rgba(244,196,0,0.34) 52%,
      rgba(255,255,255,0.00) 58%,
      transparent 100%
    );

  transform: translateX(-72%);
  opacity: 0;

  animation: startLpPremiumSweep 6.4s cubic-bezier(.22,.61,.36,1) infinite;
}

/* miękka poświata w narożniku */
body[data-theme="light_premium"] #startOpenExistingQuoteDirectBtn::after,
body[data-theme="light_premium"] #startManageBtn::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  z-index: -2;
  pointer-events: none;

  background:
    radial-gradient(circle at 16% 16%,
      rgba(244,196,0,0.24),
      rgba(244,196,0,0.00) 42%
    ),
    radial-gradient(circle at 92% 92%,
      rgba(15,23,42,0.045),
      rgba(15,23,42,0.00) 38%
    );

  opacity: .85;
}

/* Otwórz istniejącą wycenę — mocniejszy żółty akcent */
body[data-theme="light_premium"] #startOpenExistingQuoteDirectBtn {
  border-color: rgba(244,196,0,0.46) !important;

  background:
    radial-gradient(620px 240px at 0% 0%, rgba(244,196,0,0.28), rgba(255,255,255,0) 58%),
    linear-gradient(180deg, #ffffff 0%, #fff8dc 100%) !important;
}

/* Zarządzaj — bardziej enterprise, ale nadal przyciąga uwagę */
body[data-theme="light_premium"] #startManageBtn {
  border-color: rgba(15, 23, 42, 0.14) !important;

  background:
    radial-gradient(620px 240px at 0% 0%, rgba(15,23,42,0.075), rgba(255,255,255,0) 58%),
    radial-gradient(420px 180px at 100% 0%, rgba(244,196,0,0.13), rgba(255,255,255,0) 56%),
    linear-gradient(180deg, #ffffff 0%, #f8fafc 100%) !important;

  animation-delay: .9s;
}

body[data-theme="light_premium"] #startManageBtn::before {
  animation-delay: 1.35s;
}

/* ikony tych dwóch kafli bardziej widoczne */
body[data-theme="light_premium"] #startOpenExistingQuoteDirectBtn .start-choice-icon,
body[data-theme="light_premium"] #startManageBtn .start-choice-icon {
  width: 52px;
  height: 52px;
  border-radius: 18px;

  background:
    linear-gradient(180deg, rgba(255,255,255,0.88), rgba(244,196,0,0.18)) !important;

  border: 1px solid rgba(244,196,0,0.45);
  box-shadow:
    0 10px 22px rgba(244,196,0,0.15),
    0 1px 0 rgba(255,255,255,0.88) inset;

  transform: translateZ(0);
}

/* tekst — minimalnie mocniejszy */
body[data-theme="light_premium"] #startOpenExistingQuoteDirectBtn .start-choice-title,
body[data-theme="light_premium"] #startManageBtn .start-choice-title {
  color: #0f172a;
  letter-spacing: -0.015em;
}

body[data-theme="light_premium"] #startOpenExistingQuoteDirectBtn .start-choice-desc,
body[data-theme="light_premium"] #startManageBtn .start-choice-desc {
  color: rgba(15,23,42,0.66);
}

/* hover: premium uplift */
body[data-theme="light_premium"] #startOpenExistingQuoteDirectBtn:hover,
body[data-theme="light_premium"] #startManageBtn:hover {
  transform: translateY(-4px);

  border-color: rgba(244,196,0,0.78) !important;

  box-shadow:
    0 26px 64px rgba(15,23,42,0.14),
    0 0 0 4px rgba(244,196,0,0.18),
    0 1px 0 rgba(255,255,255,0.92) inset !important;

  filter: saturate(1.03);
}

body[data-theme="light_premium"] #startOpenExistingQuoteDirectBtn:hover .start-choice-icon,
body[data-theme="light_premium"] #startManageBtn:hover .start-choice-icon {
  transform: translateY(-1px) scale(1.03);
  box-shadow:
    0 14px 28px rgba(244,196,0,0.20),
    0 1px 0 rgba(255,255,255,0.92) inset;
}

/* klik */
body[data-theme="light_premium"] #startOpenExistingQuoteDirectBtn:active,
body[data-theme="light_premium"] #startManageBtn:active {
  transform: translateY(-1px);
}

/* focus klawiaturą */
body[data-theme="light_premium"] #startOpenExistingQuoteDirectBtn:focus-visible,
body[data-theme="light_premium"] #startManageBtn:focus-visible {
  outline: none !important;
  box-shadow:
    0 0 0 4px rgba(244,196,0,0.28),
    0 22px 54px rgba(15,23,42,0.14) !important;
}

/* puls: nie neon, tylko oddech cienia */
@keyframes startLpPremiumPulse {
  0%, 100% {
    box-shadow:
      0 18px 46px rgba(15, 23, 42, 0.09),
      0 0 0 1px rgba(255,255,255,0.85) inset,
      0 0 0 0 rgba(244,196,0,0.00);
  }

  50% {
    box-shadow:
      0 22px 56px rgba(15, 23, 42, 0.12),
      0 0 0 1px rgba(244,196,0,0.20) inset,
      0 0 0 5px rgba(244,196,0,0.10);
  }
}

/* sweep co kilka sekund */
@keyframes startLpPremiumSweep {
  0% {
    transform: translateX(-72%);
    opacity: 0;
  }

  10% {
    opacity: .72;
  }

  30% {
    transform: translateX(72%);
    opacity: 0;
  }

  100% {
    transform: translateX(72%);
    opacity: 0;
  }
}

/* mobile: trochę spokojniej */
@media (max-width: 760px) {
  body[data-theme="light_premium"] #startOpenExistingQuoteDirectBtn,
  body[data-theme="light_premium"] #startManageBtn {
    animation-duration: 6.2s;
  }

  body[data-theme="light_premium"] #startOpenExistingQuoteDirectBtn:hover,
  body[data-theme="light_premium"] #startManageBtn:hover {
    transform: translateY(-2px);
  }
}

/* szacunek dla reduced motion */
@media (prefers-reduced-motion: reduce) {
  body[data-theme="light_premium"] #startOpenExistingQuoteDirectBtn,
  body[data-theme="light_premium"] #startManageBtn,
  body[data-theme="light_premium"] #startOpenExistingQuoteDirectBtn::before,
  body[data-theme="light_premium"] #startManageBtn::before {
    animation: none !important;
  }
}

/* =========================================================
   START — "Zarządzaj" stały, wolny premium glow
   ========================================================= */

body[data-theme="light_premium"] #startManageBtn {
  animation:
    startLpPremiumPulse 4.8s ease-in-out infinite,
    startManageSlowGlow 3.6s ease-in-out infinite !important;
}

/* osobna, żywa poświata wokół kafelka */
body[data-theme="light_premium"] #startManageBtn {
  box-shadow:
    0 18px 46px rgba(15, 23, 42, 0.09),
    0 0 0 1px rgba(255,255,255,0.85) inset,
    0 0 0 0 rgba(244,196,0,0.00) !important;
}

/* ring wokół Zarządzaj */
body[data-theme="light_premium"] #startManageBtn::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 28px;
  z-index: -2;
  pointer-events: none;

  background:
    radial-gradient(circle at 50% 50%,
      rgba(244,196,0,0.24),
      rgba(244,196,0,0.12) 34%,
      rgba(244,196,0,0.00) 68%
    );

  opacity: .55;
  filter: blur(8px);

  animation: startManageGlowHalo 3.6s ease-in-out infinite;
}

/* hover ma być nadal mocny, ale bez agresji */
body[data-theme="light_premium"] #startManageBtn:hover::after {
  opacity: .78;
  filter: blur(10px);
}

@keyframes startManageSlowGlow {
  0%, 100% {
    border-color: rgba(15, 23, 42, 0.14) !important;
  }

  50% {
    border-color: rgba(244,196,0,0.72) !important;
  }
}

@keyframes startManageGlowHalo {
  0%, 100% {
    opacity: .28;
    transform: scale(0.985);
  }

  50% {
    opacity: .72;
    transform: scale(1.025);
  }
}

/* KBH_STAGE_67_INQUIRIES_ORDERS_STATUS_NOTIFICATIONS_V1: Zapytania korzystają z neutralnego wyglądu Zleceń. */
body[data-theme="light_premium"] #wizardNav a#navInquiries {
  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#navInquiries::before {
  border-color: rgba(148,163,184,0.40);
  background: rgba(148,163,184,0.14);
}


/* KBH_STAGE_70_HELP_MANAGEMENT_BACK_SIDEBAR_V1 */
body[data-theme="light_premium"] .kbh-manage-back {
  border-color: rgba(224, 176, 0, .95) !important;
  background: linear-gradient(180deg, #ffe16d 0%, #f5c400 100%) !important;
  color: #172033 !important;
  box-shadow: 0 8px 22px rgba(244, 196, 0, .20) !important;
}
body[data-theme="light_premium"] .kbh-manage-back:hover {
  background: linear-gradient(180deg, #ffe785 0%, #f6c91b 100%) !important;
}


/* KBH_STAGE_71_UNIFIED_MANAGEMENT_UI_V1 */
body[data-theme="light_premium"] .kbh-manage-back {
  background: linear-gradient(135deg, #ffffff 0%, #eef2ff 100%) !important;
  color: #1e3a8a !important;
  border: 2px solid rgba(37, 99, 235, 0.35) !important;
  box-shadow: 0 12px 28px rgba(37, 99, 235, 0.14) !important;
}
body[data-theme="light_premium"] .kbh-manage-back:hover {
  background: linear-gradient(135deg, #ffffff 0%, #e8edff 100%) !important;
  border-color: rgba(37, 99, 235, 0.55) !important;
  box-shadow: 0 16px 34px rgba(37, 99, 235, 0.20) !important;
}
body[data-theme="light_premium"] .kbh-manage-surface {
  border-color: rgba(37, 99, 235, 0.14) !important;
  box-shadow: 0 12px 34px rgba(15, 23, 42, 0.06) !important;
}