/* KSC Compliance – interfejs. Bez zewnętrznych zależności. */
:root{
  --bg:#f3f5f9;--surface:#fff;--line:#e4e8f0;--text:#1c2434;--muted:#6b7689;
  --brand:#2f5bea;--brand-dark:#1f3fb4;--brand-soft:#e8eefe;
  --nav:#0f1b33;--nav-text:#b8c4de;--nav-active:#2f5bea;
  --ok:#15803d;--ok-bg:#dcfce7;--warn:#b45309;--warn-bg:#fef3c7;
  --bad:#b91c1c;--bad-bg:#fee2e2;--info:#1d4ed8;--info-bg:#dbeafe;
  --purple:#6d28d9;--purple-bg:#ede9fe;--gray-bg:#eef1f6;
  --accent:var(--brand);--accent-bg:var(--brand-soft);
  --radius:12px;--shadow:0 1px 2px rgba(15,27,51,.06),0 4px 14px rgba(15,27,51,.06);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;background:var(--bg);color:var(--text);font-size:15px;line-height:1.5}
a{color:var(--brand);text-decoration:none}a:hover{text-decoration:underline}
h1{font-size:1.6rem;margin:0;line-height:1.2}
h2{font-size:1.1rem;margin:1.25rem 0 .6rem}
h3{font-size:1rem;margin:1rem 0 .4rem;color:#2b364d}
.card>h2:first-child,.card>h3:first-child{margin-top:0}
p{margin:.4rem 0 .8rem}
code{background:var(--gray-bg);padding:.1rem .35rem;border-radius:5px;font-size:.9em}
.icon{width:1.15em;height:1.15em;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0;vertical-align:-.2em}

/* moduły – kolor akcentu */
.mod-tasks{--accent:#2563eb;--accent-bg:#dbeafe}
.mod-documents{--accent:#4f46e5;--accent-bg:#e0e7ff}
.mod-ksc_requirements{--accent:#0d9488;--accent-bg:#ccfbf1}
.mod-audits{--accent:#7c3aed;--accent-bg:#ede9fe}
.mod-risks{--accent:#ea580c;--accent-bg:#ffedd5}
.mod-incidents{--accent:#dc2626;--accent-bg:#fee2e2}
.mod-projects{--accent:#16a34a;--accent-bg:#dcfce7}
.mod-suppliers{--accent:#b45309;--accent-bg:#fef3c7}
.mod-supplier_portal{--accent:#b45309;--accent-bg:#fef3c7}
.mod-training{--accent:#0891b2;--accent-bg:#cffafe}
.mod-organizations{--accent:#0369a1;--accent-bg:#e0f2fe}
.mod-reports{--accent:#475569;--accent-bg:#e2e8f0}
.mod-notifications{--accent:#ca8a04;--accent-bg:#fef9c3}
.mod-dashboard{--accent:#2f5bea;--accent-bg:#e8eefe}

/* górny pasek */
.topbar{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:1rem;padding:.55rem 1.1rem;background:var(--surface);border-bottom:1px solid var(--line);color:var(--text)}
.brand{display:flex;align-items:center;gap:.55rem;font-weight:800;color:var(--text);letter-spacing:-.01em}
.brand:hover{text-decoration:none}
.brand-mark{display:grid;place-items:center;width:32px;height:32px;border-radius:9px;background:linear-gradient(135deg,#2f5bea,#7c3aed);color:#fff}
.brand-mark .icon{width:18px;height:18px}
.topbar-right{margin-left:auto;display:flex;align-items:center;gap:.75rem;flex-wrap:wrap}
.topbar form{margin:0}
.topbar .user{display:flex;align-items:center;gap:.5rem;font-weight:600;font-size:.9rem}
.avatar{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--brand-soft);color:var(--brand-dark);font-weight:700;font-size:.8rem}
.org-switcher select{padding:.35rem .6rem;border:1px solid var(--line);border-radius:8px;background:var(--gray-bg);font-weight:600;color:var(--text);max-width:260px}
.burger{display:none;cursor:pointer;font-size:1.4rem}
.btn-link{background:none;border:0;color:var(--muted);cursor:pointer;font:inherit;text-decoration:underline;padding:0 .25rem}

/* pasek „ważne” – widoczny na każdej stronie */
.attention{display:flex;flex-wrap:wrap;gap:.5rem;margin:0 0 1rem}
.chip{display:inline-flex;align-items:center;gap:.4rem;padding:.3rem .7rem;border-radius:999px;font-size:.85rem;font-weight:600;border:1px solid transparent}
.chip:hover{text-decoration:none;filter:brightness(.97)}
.chip b{font-weight:800}
.chip-bad{background:var(--bad-bg);color:var(--bad)}
.chip-warn{background:var(--warn-bg);color:var(--warn)}
.chip-info{background:var(--info-bg);color:var(--info)}
.chip-ok{background:var(--ok-bg);color:var(--ok)}

/* układ */
.layout{display:flex;min-height:calc(100vh - 53px)}
.sidebar{width:248px;background:var(--nav);padding:1rem .75rem 2rem;flex-shrink:0;overflow-y:auto}
.nav-group{margin:.9rem 0 .25rem;padding:0 .75rem;font-size:.68rem;text-transform:uppercase;letter-spacing:.09em;color:#6f7fa3;font-weight:700}
.sidebar a{display:flex;align-items:center;gap:.7rem;padding:.5rem .75rem;margin:1px 0;border-radius:9px;color:var(--nav-text);font-size:.92rem}
.sidebar a:hover{background:rgba(255,255,255,.07);color:#fff;text-decoration:none}
.sidebar a.active{background:var(--nav-active);color:#fff;font-weight:600;box-shadow:0 2px 8px rgba(47,91,234,.45)}
.sidebar .count{margin-left:auto;background:#ef4444;color:#fff;border-radius:999px;padding:0 .45rem;font-size:.72rem;font-weight:700}
.content{flex:1;padding:1.5rem 2rem 3rem;min-width:0;max-width:1400px}

/* nagłówek strony */
.page-head{display:flex;align-items:center;gap:.9rem;margin-bottom:1.1rem}
.page-icon{display:grid;place-items:center;width:46px;height:46px;border-radius:13px;background:var(--accent-bg);color:var(--accent)}
.page-icon .icon{width:24px;height:24px}
.page-sub{color:var(--muted);font-size:.9rem;margin:.1rem 0 0}

/* karty i siatki */
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem;margin-bottom:1rem}
.grid-2{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:1rem;margin-bottom:1rem}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:1.1rem 1.3rem;box-shadow:var(--shadow);overflow-x:auto;margin-bottom:1rem}
.grid .card,.grid-2 .card{margin-bottom:0}
.card.accent{border-top:3px solid var(--accent)}
.stat-card{display:flex;align-items:center;gap:1rem;color:inherit}
.stat-card:hover{text-decoration:none;transform:translateY(-1px);box-shadow:0 6px 18px rgba(15,27,51,.1)}
.stat-icon{display:grid;place-items:center;width:48px;height:48px;border-radius:13px;background:var(--accent-bg);color:var(--accent)}
.stat-icon .icon{width:24px;height:24px}
.stat-label{color:var(--muted);font-size:.85rem;font-weight:600}
.stat a{color:inherit}
.stat{font-size:2rem;font-weight:800;margin:0;line-height:1.1}
.stat-bad .stat{color:var(--bad)}
.stat-sub{font-size:.8rem;color:var(--muted)}
.overdue{color:var(--bad);font-weight:600}
.muted{color:var(--muted)}

/* tabele */
.table-wrap{overflow-x:auto}
table{width:100%;border-collapse:collapse}
th{font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-weight:700;background:#f8f9fc}
th,td{text-align:left;padding:.6rem .7rem;border-bottom:1px solid var(--line);vertical-align:top}
tbody tr:hover td{background:#fafbff}
tbody tr:last-child td{border-bottom:0}

/* przyciski i formularze */
.btn{display:inline-flex;align-items:center;gap:.4rem;padding:.45rem .9rem;border:1px solid var(--line);border-radius:9px;background:var(--surface);color:var(--text);cursor:pointer;font:inherit;font-weight:600;font-size:.9rem;line-height:1.3}
.btn:hover{background:var(--gray-bg);text-decoration:none}
.btn-primary{background:var(--brand);border-color:var(--brand);color:#fff}
.btn-primary:hover{background:var(--brand-dark);color:#fff}
.btn-block{width:100%;justify-content:center;padding:.7rem}
p>.btn,.card>.btn{margin:.15rem .15rem .15rem 0}
input,select,textarea{font:inherit;color:var(--text)}
input[type=text],input[type=email],input[type=password],input[type=search],input[type=date],input[type=number],input[type=url],input[type=file],input[type=datetime-local],select,textarea{width:100%;max-width:560px;padding:.5rem .65rem;border:1px solid #cdd5e3;border-radius:9px;background:#fff}
.filters input,.filters select,.inline-form input,.inline-form select{width:auto}
input:focus,select:focus,textarea:focus{outline:2px solid var(--brand);outline-offset:0;border-color:var(--brand)}
form p label,.field label{display:block;margin-bottom:.2rem;font-weight:600;font-size:.88rem;color:#2b364d}
form p{margin:.4rem 0 .9rem}
.field{margin-bottom:1rem}
.helptext{color:var(--muted);font-size:.8rem}
.errorlist{color:var(--bad);list-style:none;padding:0;margin:.25rem 0;font-size:.85rem}
.filters{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center}
.inline-form{display:inline-flex;gap:.4rem;align-items:center;margin:.15rem 0}
.btn-inline{display:inline-flex}
.alert{display:flex;gap:.6rem;align-items:flex-start;padding:.7rem 1rem;border-radius:10px;background:var(--info-bg);color:#1e3a8a;margin-bottom:1rem;border:1px solid #bfdbfe}
.alert-warn{background:var(--warn-bg);color:#78350f;border-color:#fde68a}
.alert-error{background:var(--bad-bg);color:#7f1d1d;border-color:#fecaca}
details{border:1px solid var(--line);border-radius:10px;padding:.5rem .8rem;margin:.4rem 0;background:#fbfcfe}
summary{cursor:pointer;font-weight:600}
ul{padding-left:1.2rem}li{margin:.2rem 0}

/* plakietki statusów */
.badge{display:inline-flex;align-items:center;gap:.3rem;padding:.12rem .6rem;border-radius:999px;font-size:.78rem;font-weight:700;white-space:nowrap}
.badge::before{content:"";width:.45rem;height:.45rem;border-radius:50%;background:currentColor;opacity:.8}
.badge-ok{background:var(--ok-bg);color:var(--ok)}
.badge-warn{background:var(--warn-bg);color:var(--warn)}
.badge-bad{background:var(--bad-bg);color:var(--bad)}
.badge-info{background:var(--info-bg);color:var(--info)}
.badge-purple{background:var(--purple-bg);color:var(--purple)}
.badge-gray{background:var(--gray-bg);color:#475569}

/* wykresy bez bibliotek */
.bar-row{display:grid;grid-template-columns:150px 1fr 40px;gap:.6rem;align-items:center;margin:.35rem 0;font-size:.88rem}
.bar{height:10px;border-radius:999px;background:var(--gray-bg);overflow:hidden}
.bar>span{display:block;height:100%;border-radius:999px;background:var(--accent)}
.bar-ok>span{background:#22c55e}.bar-warn>span{background:#f59e0b}.bar-bad>span{background:#ef4444}.bar-info>span{background:#3b82f6}.bar-gray>span{background:#94a3b8}.bar-orange>span{background:#f97316}
.stack{display:flex;height:14px;border-radius:999px;overflow:hidden;background:var(--gray-bg)}
.stack span{display:block;height:100%}
.stack .s-ok{background:#22c55e}.stack .s-warn{background:#f59e0b}.stack .s-bad{background:#ef4444}.stack .s-info{background:#3b82f6}.stack .s-gray{background:#94a3b8}
.donut{--size:132px;width:var(--size);height:var(--size);border-radius:50%;display:grid;place-items:center;flex-shrink:0}
.donut>div{width:calc(var(--size) - 36px);height:calc(var(--size) - 36px);border-radius:50%;background:var(--surface);display:grid;place-items:center;text-align:center;line-height:1.1;font-weight:800;font-size:1.5rem}
.donut small{display:block;font-size:.7rem;color:var(--muted);font-weight:600}
.donut-wrap{display:flex;align-items:center;gap:1.2rem;flex-wrap:wrap}
.legend{display:flex;gap:.7rem;align-items:center;flex-wrap:wrap;font-size:.85rem}
.dot{display:inline-block;width:.7rem;height:.7rem;border-radius:3px;margin-right:.3rem}
.progress{height:8px;background:var(--gray-bg);border-radius:999px;overflow:hidden;min-width:90px}
.progress>span{display:block;height:100%;background:var(--accent)}

/* szybkie akcje i listy */
.quick{display:flex;flex-wrap:wrap;gap:.6rem}
.quick a{display:inline-flex;align-items:center;gap:.5rem;padding:.55rem .9rem;border-radius:10px;background:var(--surface);border:1px solid var(--line);color:var(--text);font-weight:600;font-size:.9rem;box-shadow:var(--shadow)}
.quick a:hover{text-decoration:none;border-color:var(--brand);color:var(--brand)}
.list-clean{list-style:none;padding:0;margin:0}
.list-clean li{display:flex;align-items:center;justify-content:space-between;gap:.8rem;padding:.55rem 0;border-bottom:1px solid var(--line);margin:0}
.list-clean li:last-child{border-bottom:0}
.empty{display:flex;align-items:center;gap:.6rem;color:var(--muted);padding:.5rem 0}

/* uwierzytelnianie i strona główna */
.auth{display:flex;justify-content:center;padding:3rem 1rem}
.auth-card{width:100%;max-width:400px}
.login-wrap{display:grid;grid-template-columns:1.1fr 1fr;min-height:100vh}
.login-side{background:linear-gradient(145deg,#0f1b33,#233a8f 70%,#4c2fb8);color:#e6ecff;padding:3rem;display:flex;flex-direction:column;justify-content:center;gap:1.2rem}
.login-side h2{color:#fff;font-size:1.8rem;margin:0}
.login-side li{margin:.5rem 0}
.login-form{display:grid;place-items:center;padding:2rem}
.login-form .card{width:100%;max-width:400px;box-shadow:var(--shadow)}
.hero{background:linear-gradient(135deg,#0f1b33 0%,#233a8f 60%,#6d28d9 100%);color:#e6ecff;padding:4rem 1.5rem 5rem;text-align:center}
.hero h1{font-size:2.6rem;color:#fff;max-width:820px;margin:.8rem auto}
.hero p{max-width:720px;margin:0 auto 1.6rem;font-size:1.1rem;color:#cbd6f5}
.hero .btn{padding:.7rem 1.4rem;font-size:1rem}
.hero .btn:not(.btn-primary){background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.3);color:#fff}
.public-nav{display:flex;align-items:center;justify-content:space-between;padding:1rem 2rem;max-width:1200px;margin:0 auto}
.public-nav .brand{color:#fff}
.public-wrap{max-width:1200px;margin:-3rem auto 0;padding:0 1.5rem 3rem}
.features{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1rem}
.feature{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:1.2rem;box-shadow:var(--shadow)}
.feature .stat-icon{margin-bottom:.7rem}
.feature h3{margin:.2rem 0 .3rem}
.feature p{color:var(--muted);margin:0;font-size:.92rem}
.section-title{text-align:center;margin:2.6rem 0 1.2rem}
.section-title h2{font-size:1.6rem;margin:0}
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem;counter-reset:s}
.step{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:1.2rem 1.2rem 1.2rem 3.4rem}
.step::before{counter-increment:s;content:counter(s);position:absolute;left:1rem;top:1.1rem;width:1.7rem;height:1.7rem;border-radius:50%;background:var(--brand);color:#fff;display:grid;place-items:center;font-weight:800;font-size:.85rem}
.disclaimer{margin-top:2rem;padding:1rem 1.2rem;border-radius:var(--radius);background:var(--warn-bg);color:#78350f;font-size:.9rem}
.footer{text-align:center;color:var(--muted);padding:1.5rem;font-size:.85rem}

@media (max-width:900px){
  .login-wrap{grid-template-columns:1fr}.login-side{padding:2rem}
  .hero h1{font-size:1.9rem}
}
@media (max-width:768px){
  .burger{display:block}
  .layout{flex-direction:column}
  .sidebar{display:none;width:100%}
  .nav-toggle:checked ~ .layout .sidebar{display:block}
  .content{padding:1rem}
  .topbar .user span.name{display:none}
  .bar-row{grid-template-columns:110px 1fr 34px}
}

/* istniejące komponenty */
.kanban{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1rem;align-items:start}
.kanban-card{margin-bottom:.5rem;border-left:3px solid var(--accent)}
.kanban-moves{display:flex;flex-wrap:wrap;gap:.25rem;margin-top:.5rem}
.comment{list-style:none}
.lvl-low{background:#dcfce7;color:#166534}
.lvl-medium{background:#fef9c3;color:#854d0e}
.lvl-high{background:#fed7aa;color:#9a3412}
.lvl-critical{background:#fecaca;color:#991b1b}
span[class^="lvl-"]{padding:.12rem .55rem;border-radius:999px;font-size:.82em;font-weight:700}
.risk-matrix{width:auto;border-collapse:separate;border-spacing:3px}
.risk-matrix td{width:3.5rem;height:3rem;text-align:center;border-radius:6px;padding:0;border:0}
.risk-matrix td a{display:block;padding:.8rem 0;text-decoration:none;color:inherit}
.risk-matrix th{text-align:center;font-weight:600;background:none}