/* /static/styles.css */

/* Brand */
:root{
  --jnl-primary: #1b65ff;
  --jnl-ink: #0f172a;
  --jnl-muted: rgba(15,23,42,.65);
  --jnl-border: rgba(15,23,42,.10);
  --jnl-surface: rgba(255,255,255,.92);
  --jnl-shadow: 0 18px 50px rgba(2,6,23,.10);
  --jnl-radius: 18px;
}

/* Page background */
body.jnl-body{
  min-height: 100vh;
  color: var(--jnl-ink);
  background:
    radial-gradient(1200px circle at 12% 8%, rgba(27,101,255,.16), transparent 55%),
    radial-gradient(900px circle at 85% 18%, rgba(64,211,255,.12), transparent 55%),
    linear-gradient(180deg, #f7f9ff 0%, #f3f6ff 35%, #f8fafc 100%);
}

/* Better focus */
:focus-visible{
  outline: 3px solid rgba(27,101,255,.28) !important;
  outline-offset: 2px;
  border-radius: 12px;
}

/* Navbar */
.jnl-navbar{
  background: rgba(255,255,255,.70);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--jnl-border);
}
.jnl-brand{
  font-weight: 800;
  letter-spacing: .2px;
}
.jnl-brand small{
  color: var(--jnl-muted);
  font-weight: 600;
}

/* Logo badge */
.jnl-logo-badge{
  width: 46px;
  height: 46px;
  border-radius: 16px;
  background: #fff;
  border: 1px solid var(--jnl-border);
  box-shadow: 0 10px 24px rgba(2,6,23,.10);
  display: flex;
  align-items: center;
  justify-content: center;
}
.jnl-logo-badge img{
  width: 34px;
  height: 34px;
  object-fit: contain;
}

/* Cards */
.jnl-card{
  border-radius: var(--jnl-radius);
  border: 1px solid var(--jnl-border);
  background: var(--jnl-surface);
  box-shadow: var(--jnl-shadow);
}
.jnl-card .card-body{
  padding: 1.25rem;
}
@media (min-width: 992px){
  .jnl-card .card-body{ padding: 1.5rem; }
}

/* Headings */
.jnl-page-title{
  font-weight: 800;
  letter-spacing: -.2px;
}
.jnl-subtitle{
  color: var(--jnl-muted);
}

/* Inputs */
.form-control, .form-select{
  border-radius: 14px !important;
  border-color: rgba(15,23,42,.14) !important;
}
.form-control:focus, .form-select:focus{
  border-color: rgba(27,101,255,.55) !important;
  box-shadow: 0 0 0 .25rem rgba(27,101,255,.14) !important;
}

/* Buttons */
.btn-primary{
  background-color: var(--jnl-primary) !important;
  border-color: var(--jnl-primary) !important;
}
.btn-primary:hover{
  filter: brightness(.96);
}
.btn-outline-primary{
  border-color: rgba(27,101,255,.50) !important;
  color: var(--jnl-primary) !important;
}
.btn-outline-primary:hover{
  background: rgba(27,101,255,.08) !important;
}

/* Zielona obwódka (jak "Wyloguj"), tylko w wariancie "success" */
.btn-outline-success{
  border-color: rgba(25,135,84,.50) !important;
  color: #198754 !important;
}
.btn-outline-success:hover{
  background: rgba(25,135,84,.08) !important;
}

/* Pretty <pre> */
.jnl-pre{
  background: rgba(248,250,252,.92) !important;
  border: 1px solid var(--jnl-border) !important;
  border-radius: 14px !important;
}

/* Collapsible details (e.g. JSON payloads) */
.jnl-details{
  border-radius: 14px;
}
.jnl-details-summary{
  cursor: pointer;
  user-select: none;
  font-weight: 700;
  color: var(--jnl-primary);
  outline: none;
}
.jnl-details[open] .jnl-details-summary{
  margin-bottom: .75rem;
}
.jnl-details-summary::marker{
  color: var(--jnl-primary);
}

/* Tiny badges */
.jnl-badge{
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  padding:.25rem .55rem;
  border-radius: 999px;
  border: 1px solid var(--jnl-border);
  background: rgba(255,255,255,.75);
  color: var(--jnl-muted);
  font-size: .82rem;
  font-weight: 600;
}

/* Auth layout */
.jnl-auth-wrap{
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 2.5rem 1rem;
}
.jnl-auth-card{
  width: 100%;
  max-width: 560px;
}
.jnl-auth-header{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .6rem;
}
.jnl-auth-hero-logo{
  display: block;
  max-width: min(100%, 260px);
  max-height: 120px;
  width: auto;
  height: auto;
  object-fit: contain;
}


/* Footer */
.jnl-footer{
  color: var(--jnl-muted);
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  *{ transition:none !important; animation:none !important; scroll-behavior:auto !important; }
}

/* Optional dark mode */
@media (prefers-color-scheme: dark){
  :root{
    --jnl-ink: #e5e7eb;
    --jnl-muted: rgba(229,231,235,.70);
    --jnl-border: rgba(229,231,235,.12);
    --jnl-surface: rgba(17,24,39,.72);
    --jnl-shadow: 0 18px 50px rgba(0,0,0,.35);
  }
  body.jnl-body{
    background:
      radial-gradient(1200px circle at 12% 8%, rgba(27,101,255,.22), transparent 55%),
      radial-gradient(900px circle at 85% 18%, rgba(64,211,255,.14), transparent 55%),
      linear-gradient(180deg, #0b1220 0%, #0b1220 35%, #0a0f1a 100%);
  }
  .jnl-logo-badge{ background: rgba(255,255,255,.92); }
}

/* ==============================
   Admin – kreator licencji (PRO)
   ============================== */

.jnl-stepper .nav-link{
  border-radius: 999px;
  font-weight: 700;
  border: 1px solid rgba(15,23,42,.10);
  background: rgba(255,255,255,.72);
}
.jnl-stepper .nav-link:disabled{
  opacity: .55;
}

.jnl-product-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: .75rem;
}
@media (min-width: 768px){
  .jnl-product-grid{ grid-template-columns: 1fr 1fr; }
}

.jnl-product-tile{
  border: 1px solid rgba(15,23,42,.12);
  background: rgba(255,255,255,.78);
  border-radius: 18px;
  padding: 1rem;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
  box-shadow: 0 10px 24px rgba(2,6,23,.06);
}
.jnl-product-tile:hover{
  transform: translateY(-1px);
  box-shadow: 0 18px 44px rgba(2,6,23,.10);
}
.jnl-product-tile[data-selected="true"]{
  border-color: rgba(27,101,255,.50);
  box-shadow: 0 20px 50px rgba(27,101,255,.12);
}

.jnl-pill{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .22rem .6rem;
  border-radius: 999px;
  font-size: .78rem;
  font-weight: 700;
  border: 1px solid rgba(15,23,42,.12);
}
.jnl-pill-blue{ background: rgba(27,101,255,.10); color: var(--jnl-primary); }
.jnl-pill-gray{ background: rgba(15,23,42,.06); color: rgba(15,23,42,.80); }
.jnl-pill-purple{ background: rgba(147,51,234,.10); color: rgb(147,51,234); }
.jnl-pill-green{ background: rgba(16,185,129,.10); color: rgb(16,185,129); }

.jnl-wiz-summary{
  position: sticky;
  top: 92px;
}
.jnl-sum-row{
  border: 1px solid rgba(15,23,42,.08);
  border-radius: 16px;
  padding: .6rem .75rem;
  background: rgba(255,255,255,.65);
}

/* PRO: kompaktowy przycisk zwijania – IKONA jak w Bootstrap Accordion */
.jnl-collapse-btn{
  width: 34px;
  height: 30px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-color: transparent !important;
  background: transparent !important;
}
.jnl-collapse-btn:hover{
  background: rgba(15,23,42,.06) !important;
}

/* jeśli w HTML zostanie stary span z trójkątem – ukryj go */
.jnl-collapse-btn .jnl-tri{ display: none; }

/* caret identyczny jak w .accordion-button::after */
.jnl-collapse-btn::after{
  content: "";
  display: inline-block;
  width: 1.25rem;
  height: 1.25rem;
  background-image: var(--bs-accordion-btn-icon);
  background-repeat: no-repeat;
  background-size: 1.25rem;
  transition: var(--bs-accordion-btn-icon-transition);
}
.jnl-collapse-btn[aria-expanded="true"]::after{
  background-image: var(--bs-accordion-btn-active-icon);
  transform: var(--bs-accordion-btn-icon-transform);
}



/* ==============================
   Wizard PRO V2
   ============================== */
.jnl-wiz-hero{
  display:flex;
  flex-direction:column;
  gap:1rem;
  padding:1.1rem 1.2rem;
  border:1px solid rgba(15,23,42,.08);
  border-radius:22px;
  background: linear-gradient(135deg, rgba(255,255,255,.88), rgba(244,248,255,.92));
  box-shadow: 0 16px 40px rgba(2,6,23,.05);
}
@media (min-width: 992px){
  .jnl-wiz-hero{ flex-direction:row; align-items:center; justify-content:space-between; }
}
.jnl-wiz-kicker{
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  padding:.26rem .7rem;
  border-radius:999px;
  background: rgba(27,101,255,.10);
  color: var(--jnl-primary);
  font-size:.78rem;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.08em;
  margin-bottom:.45rem;
}
.jnl-progress-wrap .progress{
  border-radius:999px;
  background: rgba(15,23,42,.08);
}
.jnl-progress-wrap .progress-bar{
  background: linear-gradient(90deg, rgba(27,101,255,.96), rgba(49,118,255,.78));
  border-radius:999px;
  transition: width .25s ease;
}
.jnl-stepper{
  display:grid;
  grid-template-columns:1fr;
}
@media (min-width: 992px){
  .jnl-stepper{ grid-template-columns:repeat(3, 1fr); }
}
.jnl-stepper .nav-item{ width:100%; }
.jnl-stepper .nav-link{
  width:100%;
  display:flex;
  align-items:center;
  gap:.85rem;
  min-height:74px;
  padding:.9rem 1rem;
  border-radius:22px;
  font-weight:700;
  border:1px solid rgba(15,23,42,.10);
  background: rgba(255,255,255,.72);
  color: var(--jnl-ink);
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease, background .16s ease;
}
.jnl-stepper .nav-link:hover:not(:disabled){
  transform: translateY(-1px);
  box-shadow: 0 14px 32px rgba(2,6,23,.08);
}
.jnl-stepper .nav-link.is-active{
  border-color: rgba(27,101,255,.38);
  background: rgba(27,101,255,.08);
  box-shadow: 0 16px 34px rgba(27,101,255,.12);
}
.jnl-stepper .nav-link.is-done{
  border-color: rgba(16,185,129,.24);
  background: rgba(16,185,129,.08);
}
.jnl-stepper .nav-link.is-locked{
  opacity:.72;
}
.jnl-step-index{
  width:34px;
  height:34px;
  flex:0 0 34px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  background: rgba(15,23,42,.08);
  font-size:.92rem;
  font-weight:800;
}
.jnl-stepper .nav-link.is-active .jnl-step-index{
  background: var(--jnl-primary);
  color:#fff;
}
.jnl-stepper .nav-link.is-done .jnl-step-index{
  background: rgba(16,185,129,.92);
  color:#fff;
}
.jnl-step-meta{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  line-height:1.2;
}
.jnl-step-title{ font-size:.95rem; }
.jnl-step-desc{ font-size:.78rem; font-weight:600; color: var(--jnl-muted); }
.jnl-wiz-panel{
  border:1px solid rgba(15,23,42,.08);
  border-radius:24px;
  background: rgba(255,255,255,.70);
  box-shadow: 0 18px 42px rgba(2,6,23,.06);
  padding:1rem;
}
@media (min-width: 992px){
  .jnl-wiz-panel{ padding:1.2rem; }
}
.jnl-wiz-panel-head{
  display:flex;
  flex-direction:column;
  gap:.35rem;
  margin-bottom:1rem;
}
.jnl-wiz-panel-title{
  font-size:1.02rem;
  font-weight:800;
  letter-spacing:-.02em;
}
.jnl-wiz-panel-subtitle{
  color: var(--jnl-muted);
  font-size:.92rem;
}
.jnl-choice-panel{
  border:1px solid rgba(15,23,42,.08);
  border-radius:20px;
  background: rgba(255,255,255,.74);
  padding:1rem;
}
.jnl-subpanel{
  border-top:1px dashed rgba(15,23,42,.12);
  padding-top:1rem;
}
.jnl-mode-grid{
  display:grid;
  gap:.75rem;
}
.jnl-summary-chip{
  display:flex;
  flex-direction:column;
  gap:.25rem;
  padding:.8rem .9rem;
  border-radius:18px;
  background: linear-gradient(135deg, rgba(27,101,255,.10), rgba(64,211,255,.10));
  border:1px solid rgba(27,101,255,.12);
}
.jnl-summary-chip-label{
  font-size:.74rem;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.08em;
  color: var(--jnl-primary);
}
.jnl-summary-chip-value{
  font-weight:700;
}
.jnl-success-panel{
  border:1px solid rgba(16,185,129,.18);
  border-radius:24px;
  background: linear-gradient(180deg, rgba(240,253,247,.98), rgba(232,250,241,.96));
  box-shadow: 0 18px 44px rgba(16,185,129,.10);
  padding:1.2rem;
}
.jnl-success-icon{
  width:52px;
  height:52px;
  border-radius:16px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background: rgba(16,185,129,.16);
  color: rgb(5,150,105);
  font-size:1.5rem;
  font-weight:900;
  margin-bottom:.85rem;
}
.jnl-success-title{
  font-size:1.08rem;
  font-weight:800;
}
.jnl-success-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:.75rem;
}
@media (min-width: 768px){
  .jnl-success-grid{ grid-template-columns:1fr 1fr; }
}