/* ============================================================
   WordPress KSeF — premium SaaS admin styles
   Mercury × Linear × Stripe aesthetic
   ============================================================ */

:root{
  /* === Surfaces === */
  --bg: #FAFAFB;
  --surface: #FFFFFF;
  --surface-2: #F7F7F8;
  --surface-3: #EFEFF2;

  /* === Ink (text) === */
  --ink: #09090B;
  --ink-2: #18181B;
  --ink-3: #3F3F46;
  --ink-4: #71717A;
  --ink-5: #A1A1AA;
  --ink-6: #D4D4D8;

  /* === Borders === */
  --line: #E4E4E7;
  --line-2: #D4D4D8;
  --line-soft: rgba(15,15,20,.06);

  /* === Brand (indigo violet, Linear-ish) === */
  --brand: #5B5BD6;
  --brand-2: #4B4BC4;
  --brand-3: #3F3FA6;
  --brand-soft: #F0F1FF;
  --brand-soft-2: #E0E3FF;
  --brand-glow: rgba(91,91,214,.18);

  /* === Status === */
  --emerald: #10B981;
  --emerald-2: #059669;
  --emerald-soft: #ECFDF5;
  --amber: #F59E0B;
  --amber-2: #D97706;
  --amber-soft: #FFFBEB;
  --red: #EF4444;
  --red-2: #DC2626;
  --red-soft: #FEF2F2;
  --rose: #F43F5E;
  --rose-soft: #FFF1F2;
  --sky: #0EA5E9;
  --sky-soft: #F0F9FF;
  --violet: #8B5CF6;
  --violet-soft: #F5F3FF;

  /* === Sidebar (deep dark with warmth) === */
  --side-bg: #0A0A0B;
  --side-bg-2: #131316;
  --side-bg-3: #1C1C20;
  --side-ink: #FAFAFA;
  --side-ink-2: #D4D4D8;
  --side-ink-3: #A1A1AA;
  --side-ink-4: #71717A;
  --side-line: rgba(255,255,255,.08);
  --side-line-2: rgba(255,255,255,.14);

  /* === Effects === */
  --shadow-xs: 0 1px 2px rgba(15,15,20,.03);
  --shadow-sm: 0 1px 2px rgba(15,15,20,.04), 0 1px 1px rgba(15,15,20,.02);
  --shadow: 0 1px 3px rgba(15,15,20,.06), 0 1px 2px rgba(15,15,20,.04);
  --shadow-md: 0 4px 12px -2px rgba(15,15,20,.08), 0 2px 4px rgba(15,15,20,.04);
  --shadow-lg: 0 12px 32px -8px rgba(15,15,20,.12), 0 4px 8px rgba(15,15,20,.04);
  --shadow-xl: 0 24px 56px -12px rgba(15,15,20,.18), 0 8px 16px rgba(15,15,20,.06);
  --shadow-brand: 0 6px 18px -4px rgba(91,91,214,.4);

  /* === Radii === */
  --r-xs: 4px;
  --r-sm: 6px;
  --r: 10px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 24px;

  /* === Type === */
  --font-ui: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-display: 'Instrument Serif', 'Iowan Old Style', serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;
}

/* Stylowanie ograniczone do .ksef-modern-wrap — NIE nadpisywać body/html
   globalnie, bo WP-admin używa własnego tła i fontu. */
.ksef-modern-wrap *{box-sizing:border-box}
.ksef-modern-wrap{
  color:var(--ink);
  font-family:var(--font-ui);
  font-size:14px; line-height:1.5;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  font-feature-settings: "cv11", "ss01", "ss03";
}
.mono{font-family:var(--font-mono); letter-spacing:-.01em; font-feature-settings: "tnum"}
.serif-i{font-family:var(--font-display); font-style:italic; font-weight:400; letter-spacing:-.01em}
a{color:var(--brand); text-decoration:none}
button{font-family:inherit; cursor:pointer; border:0; background:none; padding:0; color:inherit}
h1,h2,h3,h4{margin:0; letter-spacing:-.018em}
p{margin:0}
input,textarea,select{font-family:inherit; color:inherit}

/* ============================================================
   WP context — slim top bar
   ============================================================ */
.wp-bar{
  background:#000;
  color:#9b9ea3;
  height:30px;
  display:flex; align-items:center; padding:0 14px; gap:16px;
  font-size:12.5px; position:sticky; top:0; z-index:60;
  border-bottom:1px solid rgba(255,255,255,.06);
}
.wp-bar .item{display:flex; align-items:center; gap:6px; cursor:default}
.wp-bar .item:hover{color:#fff}
.wp-bar .grow{flex:1}
.wp-bar .soon{
  background:rgba(255,255,255,.06); color:#9b9ea3;
  padding:2px 7px; border-radius:3px; font-size:11px; letter-spacing:.02em;
}
.wp-bar .badge{
  background:var(--red); color:#fff; padding:0 6px; border-radius:8px;
  font-size:10.5px; font-weight:500;
}

/* ============================================================
   App shell — sidebar + main
   ============================================================ */
.app{display:grid; grid-template-columns: 248px 1fr; min-height:calc(100vh - 30px)}

/* ============================================================
   SIDEBAR (premium dark)
   ============================================================ */
.sidebar{
  background:var(--side-bg);
  color:var(--side-ink-2);
  display:flex; flex-direction:column;
  border-right:1px solid var(--side-line);
}

/* Workspace switcher */
.workspace{
  padding:12px 12px 0;
}
.workspace-switcher{
  display:flex; align-items:center; gap:10px;
  padding:9px 10px; border-radius:var(--r);
  background:var(--side-bg-2); border:1px solid var(--side-line);
  cursor:default; transition:background .12s ease;
}
.workspace-switcher:hover{background:var(--side-bg-3)}
.workspace-avatar{
  width:28px; height:28px; border-radius:7px; flex-shrink:0;
  background:linear-gradient(135deg, var(--brand) 0%, var(--violet) 100%);
  color:#fff; display:grid; place-items:center;
  font-family:var(--font-mono); font-size:12px; font-weight:600;
  box-shadow:0 2px 6px -1px rgba(91,91,214,.4), inset 0 1px 0 rgba(255,255,255,.18);
}
.workspace-info{flex:1; min-width:0}
.workspace-info b{
  display:block; font-size:13px; font-weight:600; color:var(--side-ink);
  letter-spacing:-.01em;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.workspace-info small{
  display:block; font-size:11px; color:var(--side-ink-3);
  font-family:var(--font-mono);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.workspace-switcher .chev{color:var(--side-ink-4); flex-shrink:0}

/* Search */
.side-search{
  margin:10px 12px;
  display:flex; align-items:center; gap:8px;
  padding:7px 10px; border-radius:var(--r-sm);
  background:var(--side-bg-2); border:1px solid var(--side-line);
  color:var(--side-ink-3); cursor:default; font-size:13px;
}
.side-search:hover{background:var(--side-bg-3); color:var(--side-ink-2)}
.side-search .kbd{
  margin-left:auto; display:flex; gap:2px;
}
.side-search .kbd span{
  background:var(--side-bg-3); border:1px solid var(--side-line);
  padding:1px 5px; border-radius:3px;
  font-family:var(--font-mono); font-size:10px;
}

/* Section header */
.side-section{padding:6px 0}
.side-section h4{
  padding:14px 18px 6px;
  font-size:10.5px; font-weight:500; color:var(--side-ink-4);
  text-transform:uppercase; letter-spacing:.08em;
}

/* Nav items */
.side-item{
  display:flex; align-items:center; gap:10px;
  padding:6px 12px; margin:1px 8px; border-radius:var(--r-sm);
  color:var(--side-ink-2); cursor:default; font-size:13.5px;
  transition:background .1s ease, color .1s ease;
  position:relative;
}
.side-item:hover{background:var(--side-bg-2); color:var(--side-ink)}
.side-item .ic{
  width:16px; height:16px; flex-shrink:0;
  color:var(--side-ink-3); display:grid; place-items:center;
}
.side-item .ic svg{width:15px; height:15px; stroke-width:1.8}
.side-item:hover .ic{color:var(--side-ink-2)}
.side-item.active{
  background:linear-gradient(180deg, rgba(91,91,214,.22) 0%, rgba(91,91,214,.12) 100%);
  color:var(--side-ink); font-weight:500;
  box-shadow:inset 0 0 0 1px rgba(91,91,214,.28), 0 1px 2px rgba(91,91,214,.18);
}
.side-item.active .ic{color:#A5A8FF}
.side-item .badge-n{
  margin-left:auto; padding:1px 7px;
  background:var(--side-bg-3); color:var(--side-ink-2);
  font-family:var(--font-mono); font-size:10.5px; font-weight:500;
  border-radius:99px;
}
.side-item .badge-new{
  margin-left:auto; padding:1px 6px;
  background:linear-gradient(135deg, var(--brand) 0%, var(--violet) 100%);
  color:#fff; font-family:var(--font-mono); font-size:9.5px; font-weight:600;
  border-radius:3px; letter-spacing:.05em; text-transform:uppercase;
  box-shadow:0 1px 2px rgba(91,91,214,.4);
}
.side-item .badge-dot{
  margin-left:auto; width:6px; height:6px; border-radius:50%; background:var(--emerald);
  box-shadow:0 0 0 3px rgba(16,185,129,.18);
}
.side-divider{height:1px; background:var(--side-line); margin:8px 12px}

/* KSeF status footer */
.side-status{
  margin-top:auto; padding:12px;
  border-top:1px solid var(--side-line);
}
.side-status-card{
  padding:10px 12px; border-radius:var(--r);
  background:linear-gradient(180deg, rgba(16,185,129,.08) 0%, rgba(16,185,129,.02) 100%);
  border:1px solid rgba(16,185,129,.18);
  display:flex; align-items:center; gap:10px;
  font-size:12px;
}
.side-status-card .dot{
  width:8px; height:8px; border-radius:50%; background:var(--emerald);
  box-shadow:0 0 0 3px rgba(16,185,129,.18); flex-shrink:0;
  animation:pulse-em 2s ease-in-out infinite;
}
@keyframes pulse-em{0%,100%{opacity:1}50%{opacity:.6}}
.side-status-card .text{flex:1; min-width:0}
.side-status-card .text b{
  display:block; color:var(--side-ink); font-size:12px; font-weight:500;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.side-status-card .text small{
  display:block; font-family:var(--font-mono); font-size:10.5px;
  color:var(--side-ink-3); margin-top:1px;
}

/* User chip at bottom */
.side-user{
  display:flex; align-items:center; gap:10px;
  padding:10px 12px; margin-top:8px;
  cursor:default; border-radius:var(--r-sm);
}
.side-user:hover{background:var(--side-bg-2)}
.side-user .av{
  width:26px; height:26px; border-radius:50%;
  background:linear-gradient(135deg, #FB7185, #F59E0B);
  color:#fff; display:grid; place-items:center;
  font-size:11.5px; font-weight:600; flex-shrink:0;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.2);
}
.side-user .info{flex:1; min-width:0}
.side-user .info b{display:block; color:var(--side-ink); font-size:13px; font-weight:500; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.side-user .info small{display:block; color:var(--side-ink-3); font-size:11px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}

/* ============================================================
   MAIN
   ============================================================ */
.main{
  background:var(--bg);
  min-width:0;
  display:flex; flex-direction:column;
}

/* App bar */
.appbar{
  position:sticky; top:30px; z-index:40;
  background:rgba(250,250,251,.85);
  backdrop-filter: blur(12px) saturate(1.2);
  -webkit-backdrop-filter: blur(12px) saturate(1.2);
  border-bottom:1px solid var(--line-soft);
  padding:10px 28px;
}
.appbar-row{display:flex; align-items:center; gap:18px; min-height:36px}
.crumbs{
  display:flex; align-items:center; gap:6px;
  font-size:13px; color:var(--ink-4); flex:1; min-width:0;
}
.crumbs a{color:var(--ink-4)}
.crumbs a:hover{color:var(--ink-2)}
.crumbs b{color:var(--ink-2); font-weight:500}
.crumbs .sep{color:var(--ink-5); font-size:11px}
.crumbs .ksef-id{
  margin-left:8px; padding:2px 8px; border-radius:var(--r-sm);
  background:var(--surface); border:1px solid var(--line);
  font-family:var(--font-mono); font-size:11px; color:var(--ink-3);
}
.appbar-actions{display:flex; align-items:center; gap:6px}
.iconbtn{
  width:34px; height:34px; border-radius:var(--r-sm);
  display:grid; place-items:center; color:var(--ink-3);
  transition:background .12s ease, color .12s ease;
  position:relative;
}
.iconbtn:hover{background:var(--surface-2); color:var(--ink)}
.iconbtn svg{width:16px; height:16px; stroke-width:1.8}
.iconbtn .dot{
  position:absolute; top:7px; right:8px; width:7px; height:7px; border-radius:50%;
  background:var(--rose); border:2px solid var(--bg);
}
.appbar .help-pill{
  display:flex; align-items:center; gap:6px;
  padding:6px 12px; border-radius:99px;
  background:var(--surface); border:1px solid var(--line);
  font-size:12.5px; color:var(--ink-3); font-weight:500;
}
.appbar .help-pill:hover{background:var(--surface-2); color:var(--ink-2)}

/* ============================================================
   Page hero
   ============================================================ */
.page-hero{
  padding:28px 28px 0;
}
.hero-row{display:flex; justify-content:space-between; align-items:flex-end; gap:32px; flex-wrap:wrap}
.hero-title-block{flex:1; min-width:0}
.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--font-mono); font-size:11.5px;
  text-transform:uppercase; letter-spacing:.08em; color:var(--ink-4);
  font-weight:500;
}
.eyebrow::before{
  content:""; width:18px; height:1px; background:var(--ink-5); display:inline-block;
}
.page-title{
  font-size:32px; font-weight:600; letter-spacing:-.025em; color:var(--ink);
  display:flex; align-items:center; gap:14px; margin-top:8px; flex-wrap:wrap;
}
.page-title .accent{font-family:var(--font-display); font-style:italic; font-weight:400; color:var(--brand)}
.page-subtitle{
  margin-top:8px; font-size:15px; color:var(--ink-4); max-width:680px; line-height:1.55;
}
.hero-actions{display:flex; align-items:center; gap:8px; flex-shrink:0}

/* Status pill */
.status-pill{
  display:inline-flex; align-items:center; gap:6px;
  padding:4px 10px; border-radius:99px;
  background:var(--surface); border:1px solid var(--line);
  font-size:12px; font-weight:500; color:var(--ink-3);
  font-feature-settings:"tnum";
}
.status-pill::before{
  content:""; width:7px; height:7px; border-radius:50%; background:var(--ink-4);
}
.status-pill.draft{background:var(--amber-soft); border-color:#FCD34D; color:#78350F}
.status-pill.draft::before{background:var(--amber); box-shadow:0 0 0 2px rgba(245,158,11,.2)}
.status-pill.sent{background:var(--brand-soft); border-color:#C7CFFF; color:var(--brand-3)}
.status-pill.sent::before{background:var(--brand); box-shadow:0 0 0 2px rgba(91,91,214,.2)}
.status-pill.paid{background:var(--emerald-soft); border-color:#A7F3D0; color:#065F46}
.status-pill.paid::before{background:var(--emerald); box-shadow:0 0 0 2px rgba(16,185,129,.2)}
.status-pill.danger{background:var(--red-soft); border-color:#FCA5A5; color:#7F1D1D}
.status-pill.danger::before{background:var(--red); box-shadow:0 0 0 2px rgba(239,68,68,.2)}
.status-pill.live::before{
  background:var(--emerald); box-shadow:0 0 0 0 var(--emerald);
  animation:pulse-live 2s ease-in-out infinite;
}
@keyframes pulse-live{0%{box-shadow:0 0 0 0 rgba(16,185,129,.5)}70%{box-shadow:0 0 0 6px rgba(16,185,129,0)}100%{box-shadow:0 0 0 0 rgba(16,185,129,0)}}

/* Hero metrics inline */
.hero-metrics{
  display:flex; gap:0; margin-top:20px;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md);
  overflow:hidden; box-shadow:var(--shadow-xs);
}
.hero-metrics .m{
  flex:1; padding:14px 18px; border-right:1px solid var(--line);
  min-width:0;
}
.hero-metrics .m:last-child{border-right:0}
.hero-metrics .m .l{
  font-size:11.5px; color:var(--ink-4); display:flex; align-items:center; gap:5px;
  font-weight:500;
}
.hero-metrics .m .l svg{width:13px; height:13px}
.hero-metrics .m .v{
  font-family:var(--font-mono); font-size:22px; font-weight:600;
  color:var(--ink); margin-top:4px; letter-spacing:-.02em;
  display:flex; align-items:baseline; gap:8px;
}
.hero-metrics .m .v .delta{
  font-family:var(--font-ui); font-size:11.5px; font-weight:500;
  padding:1px 6px; border-radius:99px;
  background:var(--emerald-soft); color:var(--emerald-2);
}
.hero-metrics .m .v .delta.down{background:var(--red-soft); color:var(--red-2)}
.hero-metrics .m .spark{
  margin-top:8px; display:flex; align-items:flex-end; gap:2px; height:18px;
}
.hero-metrics .m .spark span{
  width:4px; background:var(--brand-soft-2); border-radius:1px;
}
.hero-metrics .m .spark span.hi{background:var(--brand)}

/* ============================================================
   Buttons (premium)
   ============================================================ */
.btn{
  display:inline-flex; align-items:center; gap:7px;
  padding:9px 14px; border-radius:var(--r-sm);
  font-weight:500; font-size:13.5px;
  border:1px solid transparent; cursor:pointer;
  transition: background .12s ease, border-color .12s ease, color .12s ease, box-shadow .12s ease;
  white-space:nowrap;
}
.btn svg{width:14px; height:14px; stroke-width:1.8}
.btn-link{padding:9px 6px; color:var(--ink-4)}
.btn-link:hover{color:var(--ink)}
.btn-ghost{color:var(--ink); border-color:var(--line); background:var(--surface)}
.btn-ghost:hover{background:var(--surface-2); border-color:var(--line-2)}
.btn-soft{background:var(--brand-soft); color:var(--brand); border:1px solid var(--brand-soft-2)}
.btn-soft:hover{background:var(--brand-soft-2)}
.btn-primary{
  background:linear-gradient(180deg, #6B6BE3 0%, var(--brand) 100%);
  color:#fff; border-color:var(--brand-2);
  box-shadow: 0 1px 2px rgba(15,15,20,.08), inset 0 1px 0 rgba(255,255,255,.18), 0 4px 14px -4px rgba(91,91,214,.4);
}
.btn-primary:hover{background:linear-gradient(180deg, #5959D6 0%, var(--brand-2) 100%); box-shadow: 0 1px 2px rgba(15,15,20,.08), inset 0 1px 0 rgba(255,255,255,.18), 0 6px 18px -4px rgba(91,91,214,.5)}
.btn-primary[disabled]{background:#A1A1AA; border-color:#A1A1AA; box-shadow:none; cursor:not-allowed; opacity:.7}
.btn-dark{background:var(--ink); color:#fff; border-color:var(--ink)}
.btn-dark:hover{background:var(--ink-2)}
.btn-emerald{
  background:linear-gradient(180deg, #14C28F 0%, var(--emerald) 100%);
  color:#fff; border-color:var(--emerald-2);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 4px 14px -4px rgba(16,185,129,.4);
}
.btn-emerald:hover{background:linear-gradient(180deg, #0FB07F 0%, var(--emerald-2) 100%)}
.btn-amber{background:linear-gradient(180deg, #FBB73D 0%, var(--amber) 100%); color:#fff; border-color:var(--amber-2); box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 4px 14px -4px rgba(245,158,11,.4)}
.btn-amber:hover{background:linear-gradient(180deg, #F3A923 0%, var(--amber-2) 100%)}
.btn-lg{padding:11px 18px; font-size:14.5px; border-radius:var(--r)}
.btn-sm{padding:6px 10px; font-size:12.5px}
.btn-icon{width:32px; height:32px; padding:0; justify-content:center}

/* Segmented control */
.seg{
  display:inline-flex; padding:2px; gap:0;
  background:var(--surface-2); border:1px solid var(--line);
  border-radius:var(--r);
}
.seg button{
  padding:6px 14px; font-size:12.5px; font-weight:500; border-radius:var(--r-sm);
  color:var(--ink-4); transition:background .1s ease, color .1s ease;
}
.seg button:hover{color:var(--ink-2)}
.seg button.active{
  background:var(--surface); color:var(--ink); font-weight:600;
  box-shadow:0 1px 2px rgba(15,15,20,.06), 0 0 0 1px var(--line-soft);
}

/* ============================================================
   Content layout
   ============================================================ */
.content{
  padding:22px 28px 96px;
  display:grid; grid-template-columns: 1fr 360px;
  gap:22px; max-width:1480px; margin:0 auto;
}
.content.single{grid-template-columns:1fr}
.col-form{display:flex; flex-direction:column; gap:18px; min-width:0}
.col-side{position:relative}
.side-sticky{position:sticky; top:calc(30px + 56px + 16px)}

/* ============================================================
   Banner (sophisticated alerts)
   ============================================================ */
.banner{
  border-radius:var(--r-md); padding:14px 16px;
  display:flex; align-items:flex-start; gap:14px;
  border:1px solid; box-shadow:var(--shadow-xs);
  background:var(--surface);
}
.banner .ic-wrap{
  width:36px; height:36px; border-radius:var(--r-sm); flex-shrink:0;
  display:grid; place-items:center;
}
.banner .ic-wrap svg{width:18px; height:18px; stroke-width:2}
.banner h4{font-size:14px; font-weight:600; color:var(--ink); letter-spacing:-.01em; margin-bottom:2px}
.banner p{font-size:13px; color:var(--ink-3); line-height:1.55}
.banner p b{color:var(--ink-2); font-weight:600}
.banner .actions{margin-left:auto; display:flex; gap:8px; flex-shrink:0; align-self:center}
.banner.warn{border-color:#FCD34D; background:linear-gradient(180deg, #FFFBEB 0%, #FFFFFF 100%)}
.banner.warn .ic-wrap{background:linear-gradient(180deg, #FBB73D 0%, var(--amber) 100%); color:#fff}
.banner.brand{border-color:#C7CFFF; background:linear-gradient(180deg, #F0F1FF 0%, #FFFFFF 100%)}
.banner.brand .ic-wrap{background:linear-gradient(180deg, #6B6BE3 0%, var(--brand) 100%); color:#fff}
.banner.success{border-color:#A7F3D0; background:linear-gradient(180deg, #ECFDF5 0%, #FFFFFF 100%)}
.banner.success .ic-wrap{background:linear-gradient(180deg, #14C28F 0%, var(--emerald) 100%); color:#fff}

/* ============================================================
   Cards
   ============================================================ */
.card{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-md);
  box-shadow:var(--shadow-xs);
  overflow:hidden;
}
.card-head{
  padding:18px 22px 14px;
  display:flex; justify-content:space-between; align-items:flex-start; gap:16px;
  border-bottom:1px solid var(--line-soft);
}
.card-head.no-border{border-bottom:0}
.card-head .title-row{display:flex; align-items:center; gap:12px; min-width:0}
.card-head h3{font-size:14.5px; font-weight:600; color:var(--ink); letter-spacing:-.01em; line-height:1.3}
.card-head .sub{font-size:12.5px; color:var(--ink-4); margin-top:2px; line-height:1.4}
.card-head .meta{
  font-family:var(--font-mono); font-size:11px; color:var(--ink-4);
  text-transform:uppercase; letter-spacing:.05em;
  padding:3px 8px; background:var(--surface-2); border-radius:var(--r-xs);
}
.card-head .actions{display:flex; align-items:center; gap:6px}
.card-body{padding:18px 22px}
.card-body.tight{padding:14px 22px}
.card-body.no-pad{padding:0}

/* Section icons (gradient circles) */
.s-ic{
  width:30px; height:30px; border-radius:var(--r-sm);
  display:grid; place-items:center; flex-shrink:0;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(15,15,20,.06);
}
.s-ic svg{width:15px; height:15px; stroke-width:2}
.s-ic.brand{background:linear-gradient(135deg, #6B6BE3 0%, var(--brand) 100%); color:#fff}
.s-ic.emerald{background:linear-gradient(135deg, #14C28F 0%, var(--emerald) 100%); color:#fff}
.s-ic.amber{background:linear-gradient(135deg, #FBB73D 0%, var(--amber) 100%); color:#fff}
.s-ic.sky{background:linear-gradient(135deg, #38BDF8 0%, var(--sky) 100%); color:#fff}
.s-ic.violet{background:linear-gradient(135deg, #A78BFA 0%, var(--violet) 100%); color:#fff}
.s-ic.rose{background:linear-gradient(135deg, #FB7185 0%, var(--rose) 100%); color:#fff}
.s-ic.gray{background:linear-gradient(135deg, #71717A 0%, #52525B 100%); color:#fff}

/* ============================================================
   Form fields
   ============================================================ */
.field-grid{display:grid; gap:16px}
.field-grid.cols-2{grid-template-columns:1fr 1fr}
.field-grid.cols-3{grid-template-columns:1fr 1fr 1fr}
.field-grid.cols-4{grid-template-columns:1fr 1fr 1fr 1fr}

.field label{
  display:flex; align-items:center;
  font-size:12.5px; color:var(--ink-3);
  margin-bottom:6px; font-weight:500;
}
.field label .req{color:var(--rose); margin-left:3px; font-weight:600}
.field label .hint{margin-left:auto; font-weight:400; color:var(--ink-4); font-size:11.5px}

.input{
  width:100%; padding:9px 12px; border-radius:var(--r-sm);
  border:1px solid var(--line); background:var(--surface);
  font-size:14px; color:var(--ink);
  transition: border-color .12s ease, box-shadow .12s ease, background .12s ease;
  font-feature-settings:"tnum";
  box-shadow:var(--shadow-xs);
}
.input:hover{border-color:var(--line-2)}
.input:focus{outline:0; border-color:var(--brand); box-shadow:0 0 0 3px var(--brand-glow), var(--shadow-xs)}
.input::placeholder{color:var(--ink-5)}
.input-wrap{position:relative}
.input-wrap .lic{
  position:absolute; left:10px; top:50%; transform:translateY(-50%);
  color:var(--ink-4); pointer-events:none;
}
.input-wrap .lic svg{width:14px; height:14px; stroke-width:1.8}
.input-wrap .input.with-icon{padding-left:34px}
.input-wrap .rtag{
  position:absolute; right:6px; top:50%; transform:translateY(-50%);
  padding:3px 8px; border-radius:var(--r-xs);
  background:var(--surface-2); border:1px solid var(--line);
  font-family:var(--font-mono); font-size:11px; color:var(--ink-3);
}
.field-hint{
  margin-top:6px; font-size:11.5px; color:var(--ink-4);
  display:flex; align-items:center; gap:6px;
}
.field-hint code{
  font-family:var(--font-mono); font-size:10.5px;
  padding:1px 5px; background:var(--surface-2); border:1px solid var(--line); border-radius:3px;
  color:var(--ink-3);
}

.textarea{
  width:100%; padding:10px 12px; min-height:88px; resize:vertical;
  border-radius:var(--r-sm); border:1px solid var(--line); background:var(--surface);
  font-family:inherit; font-size:14px; color:var(--ink); line-height:1.5;
  transition: border-color .12s ease, box-shadow .12s ease;
}
.textarea:focus{outline:0; border-color:var(--brand); box-shadow:0 0 0 3px var(--brand-glow)}

/* Checkbox */
.check{
  display:flex; align-items:center; gap:9px;
  padding:7px 10px; border-radius:var(--r-sm);
  cursor:default; font-size:13px; color:var(--ink-3);
  transition:background .1s ease;
}
.check:hover{background:var(--surface-2)}
.check .box{
  width:16px; height:16px; border-radius:4px; flex-shrink:0;
  border:1.5px solid var(--line-2); background:var(--surface);
  display:grid; place-items:center; transition:all .1s ease;
}
.check.checked .box{
  background:linear-gradient(180deg, #6B6BE3 0%, var(--brand) 100%);
  border-color:var(--brand-2);
  box-shadow:0 1px 2px rgba(15,15,20,.06), inset 0 1px 0 rgba(255,255,255,.18);
}
.check.checked .box::after{
  content:""; width:9px; height:9px;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><path d='M2.5 6L5 8.5L9.5 3.5' stroke='white' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-size:contain; background-repeat:no-repeat;
}
.check .text{flex:1; color:var(--ink-2)}
.check .code{font-family:var(--font-mono); font-size:10.5px; color:var(--ink-5)}

/* ============================================================
   Invoice line items table
   ============================================================ */
.items{
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  background:var(--surface);
}
.items-row{
  display:grid; grid-template-columns: 24px minmax(0,1.6fr) 1fr 60px 60px 90px 60px 70px 90px 90px 32px;
  gap:10px; padding:12px 22px;
  font-size:13px; align-items:center;
}
.items-row.head{
  background:var(--surface-2); color:var(--ink-4);
  font-size:10.5px; text-transform:uppercase; letter-spacing:.06em; font-weight:500;
  border-bottom:1px solid var(--line);
}
.items-row:not(.head):not(.add):not(.tot):hover{background:var(--surface-2)}
.items-row .lp{font-family:var(--font-mono); font-size:12px; color:var(--ink-5)}
.items-row .product{color:var(--ink); font-weight:500}
.items-row .product.empty{color:var(--ink-5); font-weight:400}
.items-row .num{font-family:var(--font-mono); text-align:right; font-feature-settings:"tnum"}
.items-row .center{text-align:center}
.items-row .vat-chip{
  display:inline-block; padding:2px 8px; border-radius:var(--r-xs);
  background:var(--brand-soft); color:var(--brand-3);
  font-family:var(--font-mono); font-size:11px; font-weight:600;
}
.items-row .del{
  width:26px; height:26px; border-radius:var(--r-sm);
  display:grid; place-items:center;
  color:var(--ink-5); cursor:pointer;
}
.items-row .del:hover{color:var(--red); background:var(--red-soft)}
.items-row.add{
  padding:14px 22px;
  color:var(--brand); font-weight:600; font-size:13.5px; cursor:pointer;
  display:flex; align-items:center; gap:8px;
}
.items-row.add:hover{background:var(--brand-soft); color:var(--brand-2)}

/* Totals */
.totals{padding:14px 22px; background:var(--surface)}
.totals .row{
  display:grid; grid-template-columns: 1fr 90px 100px 100px;
  gap:12px; padding:6px 0; font-size:13px;
}
.totals .row.head{
  color:var(--ink-4); font-size:10.5px; text-transform:uppercase; letter-spacing:.06em; font-weight:500;
  border-bottom:1px solid var(--line); padding-bottom:8px; margin-bottom:4px;
}
.totals .row .l{color:var(--ink-3); text-align:right}
.totals .row .v{font-family:var(--font-mono); text-align:right; font-feature-settings:"tnum"}
.totals .row.grand{
  border-top:1px solid var(--line); margin-top:6px; padding-top:12px;
  font-weight:600; color:var(--ink);
}
.totals .row.grand .l{color:var(--ink); font-size:14px}
.totals .row.grand .v{font-size:15px}

/* ============================================================
   Sticky right summary
   ============================================================ */
.summary{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-md);
  box-shadow:var(--shadow-sm);
  overflow:hidden;
}
.summary-head{
  padding:14px 18px; border-bottom:1px solid var(--line-soft);
  display:flex; align-items:center; gap:10px;
}
.summary-head h3{
  font-size:12px; font-weight:600; color:var(--ink-3);
  text-transform:uppercase; letter-spacing:.06em;
}
.summary-head .live{
  margin-left:auto;
  font-family:var(--font-mono); font-size:10px; color:var(--ink-4);
  display:flex; align-items:center; gap:5px;
}
.summary-head .live::before{
  content:""; width:6px; height:6px; border-radius:50%; background:var(--emerald);
  box-shadow:0 0 0 3px rgba(16,185,129,.18);
  animation:pulse-em 2s ease-in-out infinite;
}
.summary-body{padding:8px 18px 16px}
.summary-row{
  display:flex; justify-content:space-between; align-items:baseline;
  padding:6px 0; font-size:13px; color:var(--ink-3);
}
.summary-row .v{font-family:var(--font-mono); color:var(--ink); font-weight:500; font-feature-settings:"tnum"}
.summary-row.section{
  padding-top:12px; margin-top:6px; border-top:1px dashed var(--line);
}
.summary-row.grand{
  padding:14px 0 8px; margin-top:8px; border-top:1.5px solid var(--ink);
  font-weight:600;
}
.summary-row.grand .l{color:var(--ink); font-size:14px}
.summary-row.grand .v{font-size:18px; letter-spacing:-.02em}

.payable{
  margin:0 16px 16px; padding:18px;
  background:linear-gradient(135deg, var(--brand-soft) 0%, #E7D7FF 50%, #DDE0FF 100%);
  border:1px solid var(--brand-soft-2);
  border-radius:var(--r);
  position:relative; overflow:hidden;
}
.payable::before{
  content:""; position:absolute; top:-20px; right:-20px;
  width:80px; height:80px; border-radius:50%;
  background:radial-gradient(circle, rgba(91,91,214,.2), transparent 70%);
  pointer-events:none;
}
.payable .l{
  font-family:var(--font-mono); font-size:10.5px; text-transform:uppercase; letter-spacing:.08em;
  color:var(--brand-3); font-weight:600;
}
.payable .v{
  font-family:var(--font-display); font-style:italic; font-weight:400;
  font-size:38px; color:var(--brand-3); letter-spacing:-.02em; line-height:1; margin-top:8px;
  font-feature-settings:"tnum";
}
.payable .v .cur{font-family:var(--font-mono); font-style:normal; font-size:16px; margin-left:4px; opacity:.7; font-weight:500}
.payable .due{
  display:flex; align-items:center; gap:6px;
  margin-top:10px; font-size:12px; color:var(--brand-3);
}
.payable .due svg{width:12px; height:12px}

.summary-cta{padding:0 16px 14px; display:flex; flex-direction:column; gap:8px}
.summary-cta .btn{width:100%; justify-content:center; padding:11px}

.summary-meta{
  padding:14px 18px; border-top:1px solid var(--line-soft);
  font-size:11.5px; color:var(--ink-4);
  display:flex; flex-direction:column; gap:7px;
}
.summary-meta .r{display:flex; justify-content:space-between; gap:8px}
.summary-meta .r .v{color:var(--ink-3); font-family:var(--font-mono); font-feature-settings:"tnum"}

/* ============================================================
   HUB SPECIFIC
   ============================================================ */

/* Big stats cards */
.stats-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:20px}
.stat{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-md);
  padding:16px 18px;
  box-shadow:var(--shadow-xs);
  position:relative; overflow:hidden;
}
.stat::after{
  content:""; position:absolute; top:0; right:0; width:80px; height:80px;
  background:radial-gradient(circle, var(--brand-glow), transparent 60%);
  pointer-events:none; opacity:.4;
}
.stat .l{
  font-size:12px; color:var(--ink-4); display:flex; align-items:center; gap:6px; font-weight:500;
}
.stat .l svg{width:13px; height:13px; color:var(--ink-4)}
.stat .v{
  font-family:var(--font-mono); font-size:26px; font-weight:600;
  letter-spacing:-.025em; margin-top:6px; color:var(--ink);
  display:flex; align-items:baseline; gap:8px;
  font-feature-settings:"tnum";
}
.stat .v .unit{font-family:var(--font-ui); font-size:14px; color:var(--ink-4); font-weight:500}
.stat .v .delta{
  font-family:var(--font-ui); font-size:11.5px; font-weight:500;
  padding:2px 7px; border-radius:99px;
  background:var(--emerald-soft); color:var(--emerald-2);
}
.stat .v .delta.down{background:var(--red-soft); color:var(--red-2)}
.stat .src-mix{display:flex; gap:3px; margin-top:10px; height:5px}
.stat .src-mix span{flex:1; border-radius:2px}
.stat .src-mix .woo{background:var(--violet)}
.stat .src-mix .man{background:var(--ink-4)}
.stat .src-mix .imp{background:var(--amber)}
.stat .src-mix .pay{background:var(--emerald)}
.stat .src-mix .due{background:var(--amber)}
.stat .src-mix .over{background:var(--red)}
.stat .src-legend{
  margin-top:8px; display:flex; flex-wrap:wrap; gap:10px 14px;
  font-size:11px; color:var(--ink-4); font-family:var(--font-ui);
}
.stat .src-legend span{display:flex; align-items:center; gap:5px}
.stat .src-legend .d{width:7px; height:7px; border-radius:2px}

/* Hub feature */
.hub-feature{
  display:grid; grid-template-columns: auto 1fr auto; gap:18px;
  align-items:center; padding:16px 20px;
  border-radius:var(--r-md);
  background:linear-gradient(120deg, var(--brand-soft) 0%, #F5F3FF 50%, #FDF4FF 100%);
  border:1px solid var(--brand-soft-2);
  margin-bottom:18px; position:relative; overflow:hidden;
}
.hub-feature::before{
  content:""; position:absolute; top:-40px; right:80px;
  width:200px; height:200px; border-radius:50%;
  background:radial-gradient(circle, var(--brand-glow), transparent 60%);
  pointer-events:none;
}
.hub-feature .ic-big{
  width:44px; height:44px; border-radius:var(--r);
  background:linear-gradient(135deg, var(--brand) 0%, var(--violet) 100%);
  color:#fff; display:grid; place-items:center; flex-shrink:0;
  box-shadow:0 4px 12px -2px rgba(91,91,214,.4), inset 0 1px 0 rgba(255,255,255,.18);
  position:relative;
}
.hub-feature .ic-big svg{width:22px; height:22px}
.hub-feature h4{font-size:15px; font-weight:600; color:var(--ink); margin-bottom:3px; position:relative}
.hub-feature p{font-size:13.5px; color:var(--ink-3); line-height:1.55; position:relative; max-width:680px}
.hub-feature p b{color:var(--ink); font-weight:600}
.hub-feature .actions{display:flex; gap:8px; position:relative}

/* Integrations row */
.integrations{
  display:flex; gap:10px; flex-wrap:wrap; margin-bottom:20px;
}
.integration{
  display:flex; align-items:center; gap:10px;
  padding:10px 14px; border-radius:var(--r);
  background:var(--surface); border:1px solid var(--line);
  font-size:13px; min-width:180px; box-shadow:var(--shadow-xs);
  transition:border-color .12s ease;
}
.integration:hover{border-color:var(--line-2)}
.integration .logo-sq{
  width:30px; height:30px; border-radius:var(--r-sm); flex-shrink:0;
  display:grid; place-items:center; font-weight:700; font-size:11.5px; color:#fff;
  font-family:var(--font-mono); letter-spacing:-.02em;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18);
}
.integration b{font-size:13.5px; font-weight:600; color:var(--ink); display:block}
.integration small{font-size:11px; color:var(--ink-4); font-family:var(--font-mono); display:block; margin-top:1px}
.integration .dot{
  width:8px; height:8px; border-radius:50%; background:var(--emerald);
  box-shadow:0 0 0 3px rgba(16,185,129,.18); margin-left:auto;
}
.integration.disconnected .dot{background:var(--ink-5); box-shadow:0 0 0 3px rgba(161,161,170,.18)}
.integration.add{
  background:transparent; border-style:dashed; cursor:pointer;
  color:var(--brand);
}
.integration.add:hover{background:var(--brand-soft); border-color:var(--brand)}

/* List toolbar */
.list-toolbar{display:flex; align-items:center; gap:10px; margin-bottom:14px; flex-wrap:wrap}
.search-box{flex:1; min-width:240px; max-width:380px}

/* Tabs */
.tabs{
  display:inline-flex; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r); padding:3px; gap:0; box-shadow:var(--shadow-xs);
}
.tabs a,
.tabs button{
  padding:6px 12px; font-size:12.5px; font-weight:500; border-radius:var(--r-sm);
  color:var(--ink-4); display:inline-flex; align-items:center; gap:7px;
  text-decoration:none; line-height:1;
  transition:background .12s ease, color .12s ease;
}
.tabs a:hover,
.tabs button:hover{color:var(--ink-2)}
.tabs a.active,
.tabs button.active{background:var(--brand-soft); color:var(--brand-3)}
.tabs a .count,
.tabs button .count{
  font-family:var(--font-mono); font-size:10.5px; padding:1px 6px;
  border-radius:99px; background:rgba(15,15,20,.05); color:var(--ink-4);
  margin-left:2px;
}
.tabs a.active .count,
.tabs button.active .count{background:var(--surface); color:var(--brand)}
.tabs a .d,
.tabs button .d{width:6px; height:6px; border-radius:50%; display:inline-block}

/* Source chips */
.src{
  display:inline-flex; align-items:center; gap:5px;
  padding:2px 7px; border-radius:var(--r-xs);
  font-family:var(--font-mono); font-size:10.5px; font-weight:500;
  letter-spacing:.02em;
}
.src .d{width:5px; height:5px; border-radius:50%}
.src.woo{background:var(--violet-soft); color:#5B21B6}
.src.woo .d{background:var(--violet)}
.src.manual{background:var(--surface-2); color:var(--ink-3); border:1px solid var(--line)}
.src.manual .d{background:var(--ink-4)}
.src.import{background:var(--amber-soft); color:#92400E}
.src.import .d{background:var(--amber)}

/* List table */
.list{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-md);
  box-shadow:var(--shadow-xs);
  overflow:hidden;
}
.list-row{
  display:grid;
  grid-template-columns: 140px minmax(0,1fr) 130px 110px 130px 110px 40px;
  gap:14px; padding:13px 22px; align-items:center;
  font-size:13.5px; border-bottom:1px solid var(--line);
  transition:background .1s ease;
}
.list-row:last-child{border-bottom:0}
.list-row:not(.head):hover{background:var(--surface-2)}
/* Faktury sprzedaży — kolejność: Data | Kontrahent | Numer | Kwota | Płatność | KSeF | Opcje */
.list--outgoing .list-row{ grid-template-columns: 34px 110px minmax(0,1.4fr) 150px 130px 130px 110px 40px; }
.list--outgoing .list-row .date{ text-align:left; }
.list--outgoing .list-row:not(.head){ cursor:pointer; }
.ksef-row-clickable{ cursor:pointer; }
/* Kolumna zaznaczania (masowe usuwanie) */
.list-row .sel{ display:flex; align-items:center; justify-content:center; }
.list-row .sel input[type=checkbox]{ width:16px; height:16px; cursor:pointer; margin:0; }
/* Pasek akcji masowych */
.ksef-bulkbar{ position:fixed; bottom:22px; left:50%; transform:translateX(-50%); z-index:9990;
  display:flex; align-items:center; gap:10px; background:#fff; border:1px solid var(--ink-6,#E7E5E1);
  border-radius:12px; box-shadow:0 16px 40px rgba(10,10,11,.18); padding:10px 16px; font-size:13px; }
.ksef-bulkbar-count{ color:var(--ink-3,#555); }
.ksef-bulkbar-count b{ color:var(--ink,#0A0A0B); }
.ksef-bulkbar-sep{ width:1px; height:22px; background:var(--ink-6,#E7E5E1); margin:0 2px; }
.ksef-btn-danger{ background:#DC2626; color:#fff; border:1px solid #DC2626; }
.ksef-btn-danger:hover{ background:#B91C1C; border-color:#B91C1C; }
.ksef-btn-danger-outline{ background:#fff; color:#DC2626; border:1px solid #FCA5A5; }
.ksef-btn-danger-outline:hover{ background:#FEE2E2; border-color:#DC2626; }
.list-row.head{
  background:var(--surface-2); color:var(--ink-4);
  font-size:10.5px; text-transform:uppercase; letter-spacing:.06em; font-weight:500;
  padding-top:10px; padding-bottom:10px;
}
.list-row .num{font-family:var(--font-mono); color:var(--ink-2); font-weight:500}
.list-row .amt{font-family:var(--font-mono); text-align:right; font-weight:600; font-feature-settings:"tnum"}
.list-row .amt.neg{color:var(--red-2)}
.list-row .nabywca b{display:block; color:var(--ink); font-weight:500}
.list-row .nabywca small{
  display:flex; align-items:center; gap:6px; margin-top:3px;
  font-size:11.5px; color:var(--ink-4); font-family:var(--font-mono);
}
.list-row .date{
  font-family:var(--font-mono); font-size:12px; color:var(--ink-4);
  text-align:center; font-feature-settings:"tnum";
}
.list-row .menu{
  width:28px; height:28px; border-radius:var(--r-sm);
  display:grid; place-items:center; color:var(--ink-4); cursor:pointer; justify-self:end;
}
.list-row .menu:hover{background:var(--surface-2); color:var(--ink-2)}

/* Plan mini badge (above hero) */
.plan-mini{
  display:inline-flex; align-items:center; gap:7px;
  padding:4px 10px 4px 8px; border-radius:99px;
  background:var(--amber-soft); border:1px solid #FCD34D;
  color:#78350F; font-size:12px; font-weight:500;
}
.plan-mini svg{width:13px; height:13px}
.plan-mini b{font-family:var(--font-mono); font-weight:600}

/* Bank empty state */
.empty{
  margin:14px 22px 22px; padding:32px;
  background:linear-gradient(180deg, var(--surface-2) 0%, var(--surface) 100%);
  border:1px dashed var(--line-2); border-radius:var(--r);
  text-align:center; color:var(--ink-4); font-size:13px;
}
.empty .ic{
  width:42px; height:42px; border-radius:50%;
  background:var(--surface); border:1px solid var(--line);
  display:grid; place-items:center; margin:0 auto 12px;
  color:var(--ink-4);
}
.empty .ic svg{width:18px; height:18px}
.empty b{display:block; color:var(--ink-2); font-size:13.5px; font-weight:600; margin-bottom:3px}

/* KV row */
.kv-row{display:grid; grid-template-columns:1fr 1fr 36px; gap:10px; align-items:center}

/* Pagination */
.pagination{
  display:flex; justify-content:space-between; align-items:center;
  margin-top:14px; font-size:12.5px; color:var(--ink-4);
}
.pagination b{color:var(--ink-2); font-weight:600; font-feature-settings:"tnum"}
.pagination .pages{display:flex; gap:4px}
.pagination .pages button{
  width:30px; height:30px; border-radius:var(--r-sm);
  font-size:12.5px; font-weight:500; color:var(--ink-3);
  border:1px solid transparent; display:grid; place-items:center;
}
.pagination .pages button:hover{background:var(--surface-2)}
.pagination .pages button.active{
  background:var(--brand-soft); color:var(--brand-3);
  border-color:var(--brand-soft-2);
}
/* Pagination links (WP paginate_links outputs <a>/<span class="current">) */
.pagination .pages a,
.pagination .pages span{
  display:grid; place-items:center; min-width:30px; height:30px; padding:0 8px;
  border-radius:var(--r-sm); font-size:12.5px; font-weight:500; color:var(--ink-3);
  text-decoration:none; border:1px solid transparent;
}
.pagination .pages a:hover{background:var(--surface-2)}
.pagination .pages .current{
  background:var(--brand-soft); color:var(--brand-3);
  border-color:var(--brand-soft-2);
}

/* =========================================================
   BRIDGE LAYER — old .ksef-* classes mapped to modern tokens
   (used by Wystaw fakturę / Manual invoice form)
   ========================================================= */

/* Outer container */
.ksef-app{padding:0; background:transparent}
.ksef-app-quota-banner{
  margin:14px 32px -8px !important;
  padding:12px 16px !important; border-radius:var(--r-md) !important;
  background:#fff !important; border:1px solid var(--ink-6) !important;
  font-size:13px; color:var(--ink-2);
}

/* Header inside app */
.ksef-app-header{
  padding:8px 32px 0; display:flex; flex-direction:column; gap:8px;
}
.ksef-app-breadcrumb{
  font-size:12px; color:var(--ink-4); display:flex; gap:6px; align-items:center;
}
.ksef-app-breadcrumb a{color:var(--ink-3); text-decoration:none}
.ksef-app-breadcrumb a:hover{color:var(--ink)}
.ksef-app-breadcrumb .ksef-sep{color:var(--ink-5)}

.ksef-app-title-row{
  display:flex; justify-content:space-between; align-items:center; gap:14px; flex-wrap:wrap;
}
.ksef-app-title-row h1{
  margin:0; font-size:28px; font-weight:600; letter-spacing:-0.02em; color:var(--ink);
}

/* Status pills (legacy → new) */
.ksef-pill{
  display:inline-flex; align-items:center; gap:6px;
  padding:3px 10px 3px 8px; border-radius:999px; font-size:11.5px; font-weight:600;
  border:1px solid var(--ink-6); background:#fff; color:var(--ink-3);
}
.ksef-pill .dot{width:6px; height:6px; border-radius:50%; background:currentColor}
.ksef-pill-draft{color:var(--ink-3); border-color:var(--ink-6); background:#fff}
.ksef-pill-sent{color:#0369A1; border-color:#BAE6FD; background:#F0F9FF}
.ksef-pill-paid{color:#15803D; border-color:#BBF7D0; background:#F0FDF4}

/* Actions row */
.ksef-app-actions{display:flex; gap:8px; align-items:center; flex-wrap:wrap}

/* Layout: 2-col main + sidebar (sticky summary) */
.ksef-app-layout{
  display:grid; grid-template-columns:1fr 360px; gap:20px;
  padding:16px 32px 32px; align-items:start;
}
.ksef-app-main{display:flex; flex-direction:column; gap:14px; min-width:0}
.ksef-app-sidebar{position:sticky; top:14px; display:flex; flex-direction:column; gap:14px}

@media (max-width: 1100px){
  .ksef-app-layout{grid-template-columns:1fr}
  .ksef-app-sidebar{position:static}
}

/* Cards */
.ksef-card{
  background:#fff; border:1px solid var(--ink-6); border-radius:var(--r-lg);
  padding:18px 20px; box-shadow:0 1px 0 rgba(10,10,11,0.02);
}
/* Only style h2 in cards that DON'T have the new .ksef-card-h wrapper.
   The wrapper version owns its own typography in the page's inline CSS. */
.ksef-card > h2{
  margin:0 0 14px; font-size:15px; font-weight:600; letter-spacing:-.01em;
  color:var(--ink, #0A0A0B);
}
.ksef-card > h2 + .ksef-hint{margin-top:-6px}

/* New card head with icon + subtitle (matches design screenshots) */
.ksef-card-head{
  display:flex; align-items:flex-start; gap:12px;
  margin:0 0 16px; padding:0;
  font-size:inherit; text-transform:none; letter-spacing:normal;
  border-bottom:1px solid #F1EFEA; padding-bottom:14px;
}
.ksef-card-ic{
  display:grid; place-items:center; width:36px; height:36px;
  border-radius:10px; flex-shrink:0;
  color:#fff;
}
.ksef-card-ic svg{width:18px; height:18px}
.ksef-card-ic.violet{background:linear-gradient(135deg,#8B5CF6,#6D28D9)}
.ksef-card-ic.emerald{background:linear-gradient(135deg,#10B981,#059669)}
.ksef-card-ic.sky{background:linear-gradient(135deg,#3B82F6,#1D4ED8)}
.ksef-card-ic.amber{background:linear-gradient(135deg,#F59E0B,#D97706)}
.ksef-card-ic.slate{background:linear-gradient(135deg,#475569,#334155)}
.ksef-card-ic.pink{background:linear-gradient(135deg,#EC4899,#BE185D)}
.ksef-card-meta{display:flex; flex-direction:column; gap:2px; min-width:0; flex:1}
.ksef-card-meta b{font-size:15px; font-weight:600; color:var(--ink, #0A0A0B); line-height:1.3}
.ksef-card-meta small{font-size:12.5px; color:var(--ink-4); line-height:1.4}
.ksef-card-head-actions{margin-left:auto; display:flex; gap:6px; align-items:center}

.ksef-grid-2{display:grid; grid-template-columns:1fr 1fr; gap:14px}
.ksef-grid-2-inner{display:grid; grid-template-columns:1fr 1fr; gap:10px}
@media (max-width: 900px){
  .ksef-grid-2, .ksef-grid-2-inner{grid-template-columns:1fr}
}

/* Fields */
.ksef-field{display:flex; flex-direction:column; gap:5px; margin-bottom:10px}
.ksef-field:last-child{margin-bottom:0}
.ksef-field > label{
  font-size:12px; font-weight:500; color:var(--ink-3); display:flex; gap:4px; align-items:center;
}
.ksef-field .req{color:#DC2626}
.ksef-field input[type="text"],
.ksef-field input[type="number"],
.ksef-field input[type="email"],
.ksef-field input[type="date"],
.ksef-field input[type="tel"],
.ksef-field select,
.ksef-field textarea,
.ksef-app input.ksef-input,
.ksef-app textarea.ksef-input{
  width:100%; padding:8px 11px; border:1px solid var(--ink-6); border-radius:var(--r-sm);
  font-size:13px; color:var(--ink); background:#fff;
  font-family:inherit; transition:border-color .15s, box-shadow .15s;
}
.ksef-field input:focus,
.ksef-field select:focus,
.ksef-field textarea:focus{
  outline:none; border-color:var(--brand); box-shadow:0 0 0 3px var(--brand-soft);
}
.ksef-hint{font-size:11.5px; color:var(--ink-4); margin:3px 0 0}

/* Toggle mini */
.ksef-toggle-mini{
  font-size:11.5px; color:var(--ink-4); display:inline-flex; gap:5px; align-items:center; cursor:pointer;
}

/* Segmented */
.ksef-segmented{
  display:inline-flex; background:var(--surface-2); border:1px solid var(--ink-6);
  border-radius:999px; padding:2px; gap:2px;
}
.ksef-segmented input{display:none}
.ksef-segmented label{
  padding:5px 12px; font-size:12px; font-weight:500; color:var(--ink-3);
  border-radius:999px; cursor:pointer; transition:all .15s;
}
.ksef-segmented input:checked + label{background:#fff; color:var(--ink); box-shadow:0 1px 2px rgba(10,10,11,.08)}
.ksef-segmented-sm label{padding:4px 10px; font-size:11.5px}

/* Buttons (legacy → new) */
.ksef-btn{
  display:inline-flex; align-items:center; gap:6px; padding:7px 14px;
  border-radius:var(--r-sm); font-size:13px; font-weight:500; cursor:pointer;
  border:1px solid transparent; background:transparent; color:var(--ink);
  text-decoration:none; transition:all .15s; line-height:1;
}
.ksef-btn-primary{background:var(--brand); color:#fff; border-color:var(--brand)}
.ksef-btn-primary:hover{background:var(--brand-2); border-color:var(--brand-2); color:#fff}
.ksef-btn-secondary{background:#fff; border-color:var(--ink-6); color:var(--ink)}
.ksef-btn-secondary:hover{background:var(--surface-2)}
.ksef-btn-ghost{background:transparent; color:var(--ink-3)}
.ksef-btn-ghost:hover{background:var(--surface-2); color:var(--ink)}
.ksef-btn-disabled,
.ksef-btn[disabled]{opacity:.5; cursor:not-allowed; pointer-events:none}

/* Items table */
.ksef-items-table{
  width:100%; border-collapse:separate; border-spacing:0; font-size:13px;
  background:#fff; border:1px solid var(--ink-6); border-radius:var(--r-md); overflow:hidden;
}
.ksef-items-table thead th{
  font-size:11px; font-weight:600; letter-spacing:.04em; text-transform:uppercase;
  color:var(--ink-4); background:var(--surface-2); padding:9px 10px; text-align:left;
  border-bottom:1px solid var(--ink-6);
}
.ksef-items-table tbody td{padding:8px 10px; border-bottom:1px solid #F1EFEA; vertical-align:middle}
.ksef-items-table tbody tr:last-child td{border-bottom:none}
.ksef-items-table tfoot th{
  padding:10px; font-size:12px; font-weight:600; color:var(--ink-2);
  background:var(--surface-2); border-top:1px solid var(--ink-6);
}
.ksef-items-table input, .ksef-items-table select{
  width:100%; padding:5px 8px; border:1px solid var(--ink-6); border-radius:6px;
  font-size:12.5px; background:#fff;
}

/* Items summary block (totals strip below table) */
.ksef-items-summary{margin-top:12px}

/* Contractor picker */
.ksef-contractor-picker{position:relative; display:flex; gap:6px; align-items:center}
.ksef-contractor-picker input{flex:1}
.ksef-suggestions{
  position:absolute; left:0; right:60px; top:calc(100% + 4px);
  background:#fff; border:1px solid var(--ink-6); border-radius:var(--r-md);
  box-shadow:0 12px 32px rgba(10,10,11,.10); max-height:280px; overflow-y:auto;
  z-index:20; display:none;
}
.ksef-suggestions.open{display:block}
.ksef-suggestions > div{padding:8px 12px; cursor:pointer; font-size:13px; border-bottom:1px solid #F1EFEA}
.ksef-suggestions > div:hover{background:var(--surface-2)}
.ksef-contractor-summary:not(:empty){
  margin-top:6px; padding:8px 12px; background:var(--surface-2);
  border-radius:var(--r-sm); font-size:12px; color:var(--ink-3);
}

/* Read-only view */
.ksef-app-readonly input,
.ksef-app-readonly select,
.ksef-app-readonly textarea{background:var(--surface-2); cursor:default}

/* =========================================================
   BRIDGE LAYER — przemodeluj klasyczne elementy WP wewnątrz
   .ksef-modern-wrap (Kontrahenci, Raporty, Monitoring, Ustawienia,
   Kredencjały) tak, by pasowały do designu z Mercury/Linear.
   ========================================================= */

/* Buttons — Settings/Credentials/Contractors używają .button / .button-primary */
.ksef-modern-wrap .button,
.ksef-modern-wrap .button-secondary{
  background:#fff; border:1px solid var(--ink-6);
  border-radius:var(--r-sm); padding:7px 14px;
  color:var(--ink); font-size:13px; font-weight:500;
  text-shadow:none; box-shadow:none; min-height:0; line-height:1.3;
  transition:all .15s;
}
.ksef-modern-wrap .button:hover,
.ksef-modern-wrap .button-secondary:hover{
  background:var(--surface-2); border-color:var(--ink-5);
  color:var(--ink);
}
.ksef-modern-wrap .button-primary,
.ksef-modern-wrap .button.button-primary{
  background:var(--brand); border:1px solid var(--brand);
  color:#fff; border-radius:var(--r-sm); padding:7px 14px;
  font-size:13px; font-weight:500; text-shadow:none; box-shadow:none;
  min-height:0; line-height:1.3;
}
.ksef-modern-wrap .button-primary:hover,
.ksef-modern-wrap .button.button-primary:hover{
  background:var(--brand-2); border-color:var(--brand-2);
  color:#fff;
}
.ksef-modern-wrap .button-link{color:var(--brand); text-decoration:none}
.ksef-modern-wrap .button-link:hover{color:var(--brand-2); text-decoration:underline}
.ksef-modern-wrap .page-title-action{
  background:var(--brand); border:1px solid var(--brand); color:#fff;
  border-radius:var(--r-sm); padding:6px 12px; font-size:12.5px; font-weight:500;
  text-shadow:none; box-shadow:none; margin-left:8px; display:inline-block;
  vertical-align:middle; line-height:1.3;
}
.ksef-modern-wrap .page-title-action:hover,
.ksef-modern-wrap .page-title-action:focus{
  background:var(--brand-2); border-color:var(--brand-2); color:#fff;
}

/* Nav tabs (Settings) */
.ksef-modern-wrap .nav-tab-wrapper{
  border-bottom:1px solid var(--ink-6);
  padding-left:0; padding-right:0;
  margin:0 0 22px;
}
.ksef-modern-wrap .nav-tab{
  background:transparent; border:none; border-bottom:2px solid transparent;
  border-radius:0; margin:0 18px 0 0; padding:10px 0 12px;
  font-size:13.5px; font-weight:500; color:var(--ink-4);
  box-shadow:none;
}
.ksef-modern-wrap .nav-tab:hover,
.ksef-modern-wrap .nav-tab:focus{
  background:transparent; color:var(--ink-2); border-bottom-color:var(--ink-5);
  box-shadow:none;
}
.ksef-modern-wrap .nav-tab-active,
.ksef-modern-wrap .nav-tab-active:hover,
.ksef-modern-wrap .nav-tab-active:focus{
  background:transparent; color:var(--brand);
  border-bottom-color:var(--brand);
}

/* WP list tables (Credentials, Contractors list) */
.ksef-modern-wrap .wp-list-table{
  background:#fff; border:1px solid var(--ink-6);
  border-radius:var(--r-lg); border-collapse:separate; border-spacing:0;
  box-shadow:0 1px 0 rgba(10,10,11,.02);
}
.ksef-modern-wrap .wp-list-table thead th,
.ksef-modern-wrap .wp-list-table tfoot th{
  background:var(--surface-2); color:var(--ink-3);
  font-size:11.5px; font-weight:600;
  text-transform:uppercase; letter-spacing:.04em;
  border-bottom:1px solid var(--ink-6); padding:11px 14px;
}
.ksef-modern-wrap .wp-list-table tbody td{
  padding:12px 14px; border-bottom:1px solid #F1EFEA;
  font-size:13.5px; color:var(--ink-2);
}
.ksef-modern-wrap .wp-list-table tbody tr:last-child td{border-bottom:0}
.ksef-modern-wrap .wp-list-table tbody tr:hover td{background:var(--surface)}
.ksef-modern-wrap .wp-list-table a{color:var(--brand); text-decoration:none}
.ksef-modern-wrap .wp-list-table a:hover{color:var(--brand-2); text-decoration:underline}
.ksef-modern-wrap .wp-list-table .row-actions a{color:var(--ink-4); font-size:12.5px}

/* Generic form inputs poza .ksef-app */
.ksef-modern-wrap input[type="text"]:not(.ksef-app input),
.ksef-modern-wrap input[type="search"]:not(.ksef-app input),
.ksef-modern-wrap input[type="email"]:not(.ksef-app input),
.ksef-modern-wrap input[type="url"]:not(.ksef-app input),
.ksef-modern-wrap input[type="password"]:not(.ksef-app input),
.ksef-modern-wrap input[type="number"]:not(.ksef-app input),
.ksef-modern-wrap input[type="date"]:not(.ksef-app input),
.ksef-modern-wrap input[type="tel"]:not(.ksef-app input),
.ksef-modern-wrap select:not(.ksef-app select),
.ksef-modern-wrap textarea:not(.ksef-app textarea){
  border:1px solid var(--ink-6); border-radius:var(--r-sm);
  padding:7px 11px; font-size:13px; color:var(--ink);
  background:#fff; box-shadow:none; line-height:1.4;
}
.ksef-modern-wrap input:focus:not(.ksef-app input),
.ksef-modern-wrap select:focus:not(.ksef-app select),
.ksef-modern-wrap textarea:focus:not(.ksef-app textarea){
  border-color:var(--brand); box-shadow:0 0 0 3px var(--brand-soft); outline:none;
}

/* WP notices wewnątrz wrappera (oprócz tych ukrywanych) */
.ksef-modern-wrap .notice{
  background:#fff; border:1px solid var(--ink-6); border-left:3px solid var(--ink-5);
  border-radius:var(--r-sm); box-shadow:none;
  padding:12px 16px; margin:10px 0;
}
.ksef-modern-wrap .notice-success{border-left-color:var(--emerald)}
.ksef-modern-wrap .notice-error{border-left-color:#DC2626}
.ksef-modern-wrap .notice-warning{border-left-color:var(--amber)}
.ksef-modern-wrap .notice-info{border-left-color:var(--brand)}

/* Reports cards: usuń kolorowe paski (sales=niebieski, purch=pomarańczowy itp.),
   wyrównaj do białego designu z subtelnym akcentem. */
.ksef-modern-wrap .ksef-rcard{
  background:#fff; border:1px solid var(--ink-6); border-radius:var(--r-lg);
  padding:18px 22px; box-shadow:0 1px 0 rgba(10,10,11,.02); border-top:1px solid var(--ink-6);
}
.ksef-modern-wrap .ksef-rcard .rcard-h{color:var(--ink-3); font-weight:500; letter-spacing:.02em}
.ksef-modern-wrap .ksef-rcard .rcard-big{color:var(--ink); font-feature-settings:"tnum"}
.ksef-modern-wrap .ksef-rcard .rcard-sub{color:var(--ink-4)}
.ksef-modern-wrap .rcard-sales{border-top:2px solid var(--brand)}
.ksef-modern-wrap .rcard-purch{border-top:2px solid var(--amber)}
.ksef-modern-wrap .rcard-profit.positive{border-top:2px solid var(--emerald)}
.ksef-modern-wrap .rcard-profit.positive .rcard-big{color:#15803D}
.ksef-modern-wrap .rcard-profit.negative{border-top:2px solid #DC2626}
.ksef-modern-wrap .rcard-profit.negative .rcard-big{color:#991B1B}

/* Monitoring dashboard cards (.ksef-card poza manual-invoice też używa tej klasy) */
.ksef-modern-wrap .ksef-dashboard-grid{margin-bottom:22px}
.ksef-modern-wrap .ksef-dashboard-grid .ksef-card,
.ksef-modern-wrap .ksef-stat-large,
.ksef-modern-wrap .ksef-section{font-feature-settings:"tnum"}
.ksef-modern-wrap .ksef-section h2{
  font-size:15px; font-weight:600; color:var(--ink); letter-spacing:-.01em;
  margin:0 0 14px; padding-bottom:10px; border-bottom:1px solid #F1EFEA;
}

/* Form table (Settings, Email_Settings, License_Settings używają form-table) */
.ksef-modern-wrap .form-table{background:#fff; border:1px solid var(--ink-6); border-radius:var(--r-lg); border-collapse:separate; padding:6px 10px; margin:10px 0}
.ksef-modern-wrap .form-table th{
  color:var(--ink-2); font-size:13px; font-weight:500;
  padding:14px 10px; vertical-align:top; width:220px;
}
.ksef-modern-wrap .form-table td{padding:12px 10px; color:var(--ink-2)}
.ksef-modern-wrap .form-table p.description{color:var(--ink-4); font-size:12.5px; margin-top:5px}
.ksef-modern-wrap .form-table tr{border-bottom:1px solid #F1EFEA}
.ksef-modern-wrap .form-table tr:last-child{border-bottom:0}

/* Page-title-action hover w listach (Contractors etc.) */
.ksef-modern-wrap h2.title,
.ksef-modern-wrap .ksef-section > h2{margin:18px 0 10px}

/* Filters row (Reports etc.) — używają .ksef-report-filters */
.ksef-modern-wrap .ksef-report-filters{
  background:#fff; border:1px solid var(--ink-6); border-radius:var(--r-lg);
  padding:14px 18px; gap:14px; align-items:flex-end;
}
.ksef-modern-wrap .ksef-report-filters label{color:var(--ink-3)}
.ksef-modern-wrap .ksef-quick a{color:var(--brand)}

/* =====================================================================
   RESPONSYWNOŚĆ MOBILNA — kompleksowa (audyt v1.7.13)
   Cel: WSZYSTKIE opcje widoczne i czytelne na telefonie (≤ ~600px),
   bez poziomego przewijania całej strony.
   ===================================================================== */

/* — Listy faktur (sprzedaż + zakup + każda .list-row): stos kart zamiast
     sztywnego wielokolumnowego grida. Wcześniej tylko zakup miał breakpoint;
     sprzedaż przewijała się w bok. — */
@media (max-width: 920px){
  .list{ overflow-x:hidden; }
  .list--outgoing .list-row,
  .list--incoming .list-row,
  .list-row{ grid-template-columns:1fr !important; gap:6px !important; padding:12px 14px !important; position:relative; }
  .list-row.head{ display:none !important; }
  /* checkbox zaznaczania — w róg, nie jako osobny pełny wiersz */
  .list-row .sel{ position:absolute; top:10px; right:10px; justify-content:flex-end; }
  /* kwoty i statusy wyrównane do lewej gdy w stosie */
  .list-row .amt{ text-align:left !important; font-size:15px; }
  .list-row .date{ text-align:left !important; color:var(--ink-3); font-size:12px; }
  /* menu akcji (⋮) i pay-cell w stosie wyrównane do lewej, pełna szerokość */
  .list-row .ksef-row-actions{ justify-content:flex-start; }
  .list-row [style*="text-align:center"]{ text-align:left !important; }
  .list-row .nabywca b{ font-size:14px; }
}

/* — Pasek masowych akcji: na wąskim ekranie pełna szerokość + zawijanie — */
@media (max-width: 720px){
  .ksef-bulkbar{
    left:8px; right:8px; bottom:10px; transform:none; width:auto;
    flex-wrap:wrap; justify-content:center; gap:8px; padding:10px 12px;
  }
  .ksef-bulkbar .btn{ flex:1 1 auto; justify-content:center; }
  .ksef-bulkbar-sep{ display:none; }
}

/* — Toolbar list: szukajka pełnej szerokości, filtry/przyciski zawijają — */
@media (max-width: 720px){
  .list-toolbar{ gap:8px; }
  .list-toolbar .search-box{ flex:1 1 100%; max-width:none; min-width:0; }
  .list-toolbar > div[style*="margin-left:auto"]{ margin-left:0 !important; width:100%; }
  .list-toolbar select{ flex:1 1 auto; max-width:none !important; }
  .tabs{ flex-wrap:wrap; }
}

/* — Modal (podgląd faktury): prawie pełny ekran + węższe paddingi — */
@media (max-width: 600px){
  .ksef-modal-card{ width:96% !important; max-width:none !important; padding:16px 14px !important; max-height:92vh; border-radius:12px; }
  #ksef-modal-body, #incoming-modal-body{ max-height:80vh !important; }
}

/* — „Piękny podgląd" (ksdt-*): wszystkie siatki klucz/wartość → jedna kolumna.
     Dotyczy też formularzy płatności/załączników ze stylem inline (stąd !important). — */
@media (max-width: 600px){
  .ksdt-kv{ grid-template-columns:1fr !important; gap:2px 0 !important; }
  .ksdt-kv > span:nth-child(odd){ margin-top:6px; font-size:11px; }
  .ksdt-2col,
  .ksdt-party-meta{ grid-template-columns:1fr !important; }
  /* faktura: tabela pozycji w podglądzie i formularze siatkowe → scroll/stos */
  .ksef-detail table{ display:block; overflow-x:auto; white-space:nowrap; }
  #ksef-modal-body form[style*="grid"],
  #incoming-modal-body form[style*="grid"],
  .ksdt-section form[style*="grid"],
  .ksef-detail form[style*="grid"]{ grid-template-columns:1fr !important; }
  .ksef-detail [style*="grid-template-columns"]{ grid-template-columns:1fr !important; }
}

/* — Hero metryki (dashboard) i akcje hero: zawijanie zamiast przewijania — */
@media (max-width: 720px){
  .hero-metrics{ flex-wrap:wrap; gap:10px; }
  .hero-metrics .m{ border-right:0 !important; flex:1 1 45%; }
  .hero-actions{ flex-wrap:wrap; }
  .hero-actions .btn, .hero-actions a, .hero-actions button{ flex:1 1 auto; justify-content:center; }
}

/* — Tabele „pełnych pól XML" / inne szerokie tabele w treści: scroll poziomy — */
@media (max-width: 600px){
  .ksdt-xml-tree{ overflow-x:auto; }
  .ksef-modern-wrap table:not(.list):not(.form-table){ display:block; overflow-x:auto; }
}
