/* ============================================================
   STYLE.CSS – Platforma KSC/NIS2 – SP ZOZ MSWiA Katowice
   v2.0 – Multi-modułowy system dokumentacji KSC
   ============================================================ */

:root {
  --green-dark:  #1a4a2e;
  --green-main:  #2d5a3d;
  --green-mid:   #3d7a52;
  --green-light: #e8f2eb;
  --green-pale:  #f2f8f4;
  --accent:      #00558B;
  --accent2:     #0072b8;
  --gray:        #6b7c74;
  --gray-light:  #c8d4c0;
  --red:         #c0392b;
  --orange:      #d35400;
  --border:      #d6e4d8;
  --shadow:      0 2px 12px rgba(30,80,50,.10);
  --radius:      8px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: 'Segoe UI', Arial, sans-serif; font-size: 13.5px; background: var(--green-pale); color: #222; min-height: 100vh; }
a { color: var(--green-mid); text-decoration: none; }
a:hover { color: var(--green-dark); }

/* ---- HEADER ---- */
.header {
  background: linear-gradient(90deg, var(--green-dark) 0%, var(--accent) 100%);
  color: #fff; padding: 0 24px;
  display: flex; align-items: center; justify-content: space-between;
  min-height: 62px; gap: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,.25);
}
.header-logo     { display: flex; align-items: center; gap: 14px; }
.header-logo-img { height: 54px; width: auto; background: #fff; border-radius: 6px; padding: 3px; display: block; object-fit: contain; flex-shrink: 0; }
.header-title    { font-size: 15px; font-weight: 700; line-height: 1.3; }
.header-sub      { font-size: 11px; opacity: .82; }
.header-user     { display: flex; align-items: center; gap: 12px; font-size: 12px; opacity: .9; }
.header-user a   { color: #fff; background: rgba(255,255,255,.15); padding: 5px 12px; border-radius: 5px; font-size: 12px; transition: background .2s; }
.header-user a:hover { background: rgba(255,255,255,.28); }

/* ---- GŁÓWNA NAWIGACJA ---- */
.nav { background: var(--green-main); display: flex; gap: 0; overflow-x: auto; border-bottom: 2px solid var(--green-dark); }
.nav a { color: rgba(255,255,255,.82); padding: 11px 18px; font-size: 12.5px; font-weight: 600; white-space: nowrap; border-bottom: 3px solid transparent; transition: all .18s; letter-spacing: .02em; }
.nav a:hover  { background: rgba(255,255,255,.10); color: #fff; }
.nav a.active { color: #fff; border-bottom-color: #fff; background: rgba(255,255,255,.12); }

/* ---- ZAKŁADKI MODUŁU (główne: Moduł | Zestawienia | Instrukcja) ---- */
.module-tabs {
  background: #fff;
  border-bottom: 2px solid var(--border);
  display: flex;
  gap: 0;
  overflow-x: auto;
  padding: 0 20px;
}
.module-tab {
  display: inline-block;
  padding: 10px 20px;
  font-size: 13px;
  font-weight: 600;
  color: var(--gray);
  border-bottom: 3px solid transparent;
  transition: all .18s;
  white-space: nowrap;
  text-decoration: none;
}
.module-tab:hover  { color: var(--green-main); background: var(--green-pale); }
.module-tab.active { color: var(--green-dark); border-bottom-color: var(--green-main); background: var(--green-pale); }

/* ---- PODNAWIG WEWNĄTRZ MODUŁU ---- */
.ar-subnav {
  background: var(--green-pale);
  border-bottom: 1px solid var(--border);
  display: flex;
  gap: 0;
  overflow-x: auto;
  padding: 0 18px;
}
.ar-subnav a {
  display: inline-block;
  padding: 7px 16px;
  font-size: 12px;
  font-weight: 600;
  color: var(--gray);
  border-bottom: 2px solid transparent;
  transition: all .15s;
  white-space: nowrap;
  text-decoration: none;
}
.ar-subnav a:hover  { color: var(--green-main); }
.ar-subnav a.active { color: var(--green-main); border-bottom-color: var(--green-mid); }

/* ---- LAYOUT ---- */
.wrap      { max-width: 1100px; margin: 0 auto; padding: 24px 18px 48px; }
.wrap-wide { max-width: 1280px; margin: 0 auto; padding: 24px 18px 48px; }

/* ---- CARD ---- */
.card      { background: #fff; border-radius: var(--radius); box-shadow: var(--shadow); border: 1px solid var(--border); margin-bottom: 18px; overflow: hidden; }
.card-body { padding: 20px 24px; }
.sec  { font-size: 13px; font-weight: 700; color: var(--green-main); letter-spacing: .04em; text-transform: uppercase; margin-bottom: 10px; padding-bottom: 6px; border-bottom: 2px solid var(--green-light); }
.sec2 { font-size: 13px; font-weight: 700; color: var(--accent); margin: 14px 0 8px; }

/* ---- ALERTS ---- */
.alert     { padding: 12px 16px; border-radius: 6px; margin-bottom: 16px; font-size: 13px; display: flex; align-items: flex-start; gap: 8px; }
.alert-ok  { background: #e8f5e9; border: 1px solid #a5d6a7; color: #1b5e20; }
.alert-err { background: #fdecea; border: 1px solid #ef9a9a; color: #8b0000; }
.alert-info{ background: #e3f2fd; border: 1px solid #90caf9; color: #0d47a1; }

/* ---- BUTTONS ---- */
.btn      { display: inline-block; padding: 9px 20px; border-radius: 6px; border: none; cursor: pointer; font: inherit; font-size: 13px; font-weight: 600; text-decoration: none; transition: all .18s; white-space: nowrap; }
.btn-sm   { padding: 5px 12px; font-size: 12px; }
.btn-lg   { padding: 13px 32px; font-size: 15px; }
.bt       { background: var(--green-main); color: #fff; }
.bt:hover { background: var(--green-dark); color: #fff; }
.ba       { background: var(--accent);     color: #fff; }
.ba:hover { background: var(--accent2);    color: #fff; }
.br       { background: var(--red);        color: #fff; }
.br:hover { background: #922b21;           color: #fff; }
.bo       { background: var(--orange);     color: #fff; }
.bo:hover { background: #a04000;           color: #fff; }
.bw       { background: #f0f0f0; color: #333; border: 1px solid #ccc; }
.bw:hover { background: #e0e0e0; }
.bg       { background: #27ae60; color: #fff; }
.bg:hover { background: #1e8449; color: #fff; }

/* ---- FORMS ---- */
.form-row   { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; }
.form-group { display: flex; flex-direction: column; gap: 5px; flex: 1; min-width: 180px; }
.form-group label { font-size: 11.5px; font-weight: 700; color: var(--gray); text-transform: uppercase; letter-spacing: .03em; }
.form-group input,
.form-group select,
.form-group textarea {
  border: 1.5px solid var(--gray-light); border-radius: 6px; padding: 9px 12px;
  font: inherit; font-size: 13px; color: #222; background: #fff; transition: border .18s;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus { outline: none; border-color: var(--green-mid); box-shadow: 0 0 0 3px rgba(61,122,82,.12); }

/* ---- CHECKBOX LABEL ---- */
.chk-label { display: flex; align-items: center; gap: 8px; font-size: 12.5px; cursor: pointer; padding: 3px 0; }
.chk-label input[type=checkbox] { accent-color: var(--green-main); width: 15px; height: 15px; flex-shrink: 0; }

/* ---- TABLE ---- */
.tw { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 13px; }
thead th { background: var(--green-light); color: var(--green-dark); font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; padding: 9px 12px; text-align: left; border-bottom: 2px solid var(--border); white-space: nowrap; }
tbody tr { border-bottom: 1px solid #f0f4f1; transition: background .12s; }
tbody tr:hover { background: #f6fbf7; }
tbody tr.tr-highlight { background: #fffde7; }
tbody td { padding: 8px 12px; vertical-align: middle; }

/* ---- BADGES ---- */
.bs  { display: inline-block; padding: 2px 9px; border-radius: 12px; font-size: 11px; font-weight: 700; }
.bg2 { background: #e8f5e9; color: #2e7d32; }
.br2 { background: #fdecea; color: #b71c1c; }
.bo2 { background: #fff3e0; color: #e65100; }
.bg3 { background: #e3f2fd; color: #1565c0; }
.bg4 { background: var(--green-light); color: var(--green-dark); }

/* ---- MODAL ---- */
.modal-bg { display:none; position:fixed; inset:0; background:rgba(0,0,0,.45); z-index:1000; align-items:center; justify-content:center; }
.modal-bg.open { display:flex; }
.modal { background:#fff; border-radius:10px; box-shadow:0 8px 40px rgba(0,0,0,.3); padding:28px 30px; width:100%; max-width:620px; max-height:90vh; overflow-y:auto; }
.modal h3 { font-size:15px; font-weight:700; color:var(--green-dark); margin-bottom:18px; border-bottom:2px solid var(--green-light); padding-bottom:8px; }

/* ---- LOGIN PAGE ---- */
.login-page  { display:flex; align-items:center; justify-content:center; background:var(--green-pale); padding:40px 20px; min-height:calc(100vh - 62px); }
.login-box   { background:#fff; border-radius:12px; box-shadow:0 8px 40px rgba(0,0,0,.25); padding:40px 36px; width:100%; max-width:400px; }
.login-title { font-size:17px; font-weight:800; color:var(--green-dark); text-align:center; line-height:1.3; margin-bottom:4px; }
.login-sub   { font-size:12px; color:var(--gray); text-align:center; margin-bottom:22px; }
.login-footer{ margin-top:22px; font-size:10.5px; color:#aaa; text-align:center; line-height:1.6; }

/* ---- FOOTER ---- */
.footer { text-align:center; font-size:10.5px; color:#aaa; padding:18px 0 10px; border-top:1px solid var(--border); margin-top:20px; }

/* ---- STAT CARDS ---- */
.stats-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:12px; }
.stat-card  { background:#fff; border:1px solid var(--border); border-radius:var(--radius); padding:14px 12px; text-align:center; box-shadow:var(--shadow); }
.stat-num   { font-size:28px; font-weight:800; color:var(--green-main); line-height:1; margin-bottom:2px; }
.stat-label { font-size:11px; font-weight:600; color:var(--gray); text-transform:uppercase; }

/* ---- KAFELKI MODUŁÓW (dashboard) ---- */
.modules-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
}
.module-card {
  background: #fff;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  border: 1px solid var(--border);
  padding: 20px 18px;
  cursor: pointer;
  transition: all .2s;
}
.module-card:hover { transform: translateY(-2px); box-shadow: 0 6px 24px rgba(30,80,50,.15); border-color: var(--green-mid); }
.module-card.module-locked { opacity: .55; cursor: default; }
.module-card.module-locked:hover { transform: none; box-shadow: var(--shadow); }
.module-card.module-soon  { cursor: default; }
.module-card.module-soon:hover { transform: none; }
.module-card-icon  { font-size: 32px; margin-bottom: 10px; }
.module-card-title { font-size: 14px; font-weight: 800; color: var(--green-dark); margin-bottom: 6px; }
.module-card-desc  { font-size: 12px; color: var(--gray); line-height: 1.5; }

/* ---- SIATKA UPRAWNIEŃ (admin) ---- */
.modules-perms-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px;
  margin-bottom: 8px;
}
.perm-card {
  background: var(--green-pale);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 14px;
}

/* ---- BADGE RYZYKA ---- */
.risk-badge { display: inline-block; padding: 3px 10px; border-radius: 12px; font-size: 11px; font-weight: 700; }
.rb-akceptowalne { background: #e8f5e9; color: #1b5e20; border: 1px solid #a5d6a7; }
.rb-niskie       { background: #fff9e6; color: #7d5a00; border: 1px solid #ffe082; }
.rb-srednie      { background: #fff3e0; color: #e65100; border: 1px solid #ffcc02; }
.rb-wysokie      { background: #fdecea; color: #b71c1c; border: 1px solid #ef9a9a; }
.rb-krytyczne    { background: #f9ebea; color: #7b241c; border: 1px solid #c0392b; font-size: 12px; }

/* Wskaźnik liczbowy ryzyka */
.risk-num { display: inline-block; width: 36px; height: 36px; border-radius: 50%; line-height: 36px;
            text-align: center; font-weight: 800; font-size: 14px; color: #fff; }
.rn-akceptowalne { background: #27ae60; }
.rn-niskie       { background: #f39c12; }
.rn-srednie      { background: #e67e22; }
.rn-wysokie      { background: #c0392b; }
.rn-krytyczne    { background: #7b241c; }

/* Skala P/S/W */
.scale-btn { display: inline-block; width: 36px; height: 36px; line-height: 36px; text-align: center;
             border-radius: 6px; cursor: pointer; font-weight: 700; font-size: 14px;
             border: 2px solid transparent; transition: all .15s; }
.scale-btn:hover { transform: scale(1.1); }
.scale-1 { background: #e8f5e9; color: #1b5e20; }
.scale-2 { background: #fff9e6; color: #7d5a00; }
.scale-3 { background: #fff3e0; color: #e65100; }
.scale-4 { background: #fdecea; color: #b71c1c; }
.scale-5 { background: #f9ebea; color: #7b241c; }
.scale-btn.selected { border-color: #333; transform: scale(1.15); box-shadow: 0 2px 8px rgba(0,0,0,.2); }

/* Pasek postępu */
.risk-bar      { height: 12px; background: #eee; border-radius: 6px; overflow: hidden; min-width: 80px; }
.risk-bar-fill { height: 100%; border-radius: 6px; transition: width .3s; }

/* Macierz ryzyka (tabela) */
.macierz-table { border-collapse: collapse; width: 100%; }
.macierz-table th { background: var(--green-light); color: var(--green-dark); font-size: 11px; padding: 8px 6px; text-align: center; border: 1px solid var(--border); font-weight: 700; }
.macierz-table td { border: 1px solid var(--border); }

/* Karta statystyk ryzyka (raport) */
.risk-stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 12px; margin-bottom: 20px; }
.risk-stat { background: #fff; border-radius: var(--radius); padding: 14px 12px; text-align: center;
             box-shadow: var(--shadow); border-top: 4px solid; }
.risk-stat .rs-num { font-size: 28px; font-weight: 800; line-height: 1; }
.risk-stat .rs-lbl { font-size: 11px; font-weight: 600; color: var(--gray); text-transform: uppercase; margin-top: 4px; }

/* Karta analizy */
.analiza-card { background: #fff; border-radius: var(--radius); box-shadow: var(--shadow);
                border: 1px solid var(--border); padding: 16px 20px; margin-bottom: 14px;
                display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.analiza-card:hover { border-color: var(--green-mid); }

/* ---- MISC ---- */
.empty { text-align:center; padding:48px 20px; }
.empty .ei { font-size:48px; margin-bottom:12px; opacity:.5; }
.empty p { color:var(--gray); font-size:14px; }

/* ---- PRINT ---- */
@media print {
  .no-print, .nav, .module-tabs, .ar-subnav, .header-user, .btn, .footer { display: none !important; }
  body { background: #fff; }
  .card { box-shadow: none; }
}

/* ============================================================
   STYLE DODATKOWE – Analiza Ryzyka (zakładki wewnętrzne, macierz)
   ============================================================ */

/* Zakładki wewnątrz analizy (Ryzyka / Plan działań / Macierz) */
.month-tabs {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}
.month-tab {
  display: inline-block;
  padding: 7px 18px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  border: 2px solid var(--border);
  background: #fff;
  color: var(--gray);
  transition: all .18s;
}
.month-tab:hover { background: var(--green-light); color: var(--green-dark); border-color: var(--green-mid); }
.month-tab.cur   { background: var(--green-main);  color: #fff; border-color: var(--green-dark); }
.month-tab.open  { background: #fff; color: var(--gray); }

/* Macierz ryzyka 5x5 – kolory komórek */
.risk-matrix { border-collapse: separate; border-spacing: 3px; }
.risk-matrix td,
.risk-matrix th {
  min-width: 70px;
  height: 52px;
  text-align: center;
  font-size: 11px;
  font-weight: 700;
  border-radius: 4px;
  cursor: default;
}
.risk-matrix .axis-label {
  background: var(--green-light);
  color: var(--green-dark);
  font-size: 11px;
  padding: 6px 8px;
}

/* Kolory komórek macierzy */
.rm-akceptowalne { background: #27ae60; color: #fff; }
.rm-niskie       { background: #f39c12; color: #fff; }
.rm-srednie      { background: #e67e22; color: #fff; }
.rm-wysokie      { background: #c0392b; color: #fff; }
.rm-krytyczne    { background: #7b241c; color: #fff; }

/* Badge ryzyka w tabeli */
.risk-badge { display: inline-block; padding: 3px 10px; border-radius: 12px; font-size: 11px; font-weight: 700; }
.rb-akceptowalne { background: #e8f5e9; color: #1b5e20; border: 1px solid #a5d6a7; }
.rb-niskie       { background: #fff9e6; color: #7d5a00; border: 1px solid #ffe082; }
.rb-srednie      { background: #fff3e0; color: #e65100; border: 1px solid #ffcc02; }
.rb-wysokie      { background: #fdecea; color: #b71c1c; border: 1px solid #ef9a9a; }
.rb-krytyczne    { background: #f9ebea; color: #7b241c; border: 1px solid #c0392b; }

/* Wskaźnik liczbowy ryzyka (kółko) */
.risk-num            { display: inline-block; width: 36px; height: 36px; border-radius: 50%;
                       line-height: 36px; text-align: center; font-weight: 800; font-size: 14px; color: #fff; }
.rn-akceptowalne     { background: #27ae60; }
.rn-niskie           { background: #f39c12; }
.rn-srednie          { background: #e67e22; }
.rn-wysokie          { background: #c0392b; }
.rn-krytyczne        { background: #7b241c; }

/* Skala P/S/W (przyciski wyboru) */
.scale-btn  { display: inline-block; width: 36px; height: 36px; line-height: 36px; text-align: center;
              border-radius: 6px; cursor: pointer; font-weight: 700; font-size: 14px;
              border: 2px solid transparent; transition: all .15s; }
.scale-btn:hover  { transform: scale(1.1); }
.scale-1 { background: #e8f5e9; color: #1b5e20; }
.scale-2 { background: #fff9e6; color: #7d5a00; }
.scale-3 { background: #fff3e0; color: #e65100; }
.scale-4 { background: #fdecea; color: #b71c1c; }
.scale-5 { background: #f9ebea; color: #7b241c; }
.scale-btn.selected { border-color: #333; transform: scale(1.15); box-shadow: 0 2px 8px rgba(0,0,0,.2); }

/* Pasek postępu wartości CIA */
.risk-bar      { height: 12px; background: #eee; border-radius: 6px; overflow: hidden; min-width: 80px; }
.risk-bar-fill { height: 100%; border-radius: 6px; transition: width .3s; }

/* Karta statystyk w raporcie */
.risk-stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 12px; margin-bottom: 20px; }
.risk-stat      { background: #fff; border-radius: var(--radius); padding: 14px 12px; text-align: center;
                  box-shadow: var(--shadow); border-top: 4px solid; }
.risk-stat .rs-num { font-size: 28px; font-weight: 800; line-height: 1; }
.risk-stat .rs-lbl { font-size: 11px; font-weight: 600; color: var(--gray); text-transform: uppercase; margin-top: 4px; }

/* Animacja pulsowania (komórki macierzy z ryzykami) */
@keyframes pulse-cell {
  0%   { opacity: 1;   box-shadow: inset 0 0 0 0 rgba(255,255,255,.6); }
  50%  { opacity: .82; box-shadow: inset 0 0 0 6px rgba(255,255,255,.5); }
  100% { opacity: 1;   box-shadow: inset 0 0 0 0 rgba(255,255,255,.6); }
}
.rm-pulse { animation: pulse-cell 1.4s ease-in-out infinite; }


/* ============================================================
   MODUŁ RODO — style
   ============================================================ */
.rodo-card-stat {
  background:#fff; border:1px solid var(--border); border-radius:var(--radius);
  padding:18px; text-align:center; transition:all .2s; color:inherit;
  text-decoration:none; display:block;
}
.rodo-card-stat:hover { border-color:#7c3aed; box-shadow:0 4px 16px rgba(0,0,0,.08); }
.rodo-card-stat.warn  { border-color:#f39c12; background:#fffbf0; }
.rodo-card-stat.err   { border-color:#c0392b; background:#fef9f9; }
.rodo-stat-icon { font-size:26px; margin-bottom:6px; }
.rodo-stat-val  { font-size:32px; font-weight:800; color:#1a3a1a; line-height:1; margin-bottom:4px; }
.rodo-stat-lbl  { font-size:12px; color:var(--gray); line-height:1.4; margin-bottom:4px; }
.rodo-stat-law  { font-size:10px; color:#94a3b8; font-family:monospace; }