/* ===== SimplyMobile EmployeePortal — motyw marki (app-shell) ===== */

@font-face{font-family:'Nunito Sans';font-style:normal;font-weight:200 900;font-display:swap;
  src:url('/fonts/nunito-sans-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+0304,U+0308,U+0329,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Nunito Sans';font-style:normal;font-weight:200 900;font-display:swap;
  src:url('/fonts/nunito-sans-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}

:root{
  --brand:#0E7A63; --brand-600:#0B5F4E; --brand-700:#094A3D; --brand-tint:#E4F2ED; --brand-050:#F0F8F5;
  --accent:#0B5F4E; /* tekst akcentu (linki, text-brand) — w dark staje się jasny */
  --canvas:#F4F7F5; --surface:#FFFFFF; --line:#E3EAE7; --line-2:#D3DEDA;
  --ink:#15241F; --slate:#586E67; --muted:#8C9B95;
  --sb:#0C3B31; --sb-2:#0A322A; --sb-line:#1B5548; --sb-text:#CFE3DC; --sb-muted:#7FA99C;
  --ok:#15A05A; --ok-bg:#E6F5EC; --warn:#C77A08; --warn-bg:#FBF0DC; --danger:#D23B3B; --danger-bg:#FBE9E9; --info:#2F6FE0; --info-bg:#E9F0FC;
  --radius:10px; --sbw:260px;

  /* rebrand Bootstrap */
  --bs-primary:#0E7A63; --bs-primary-rgb:14,122,99;
  --bs-link-color:#0B5F4E; --bs-link-color-rgb:11,95,78; --bs-link-hover-color:#094A3D;
  --bs-body-color:#15241F; --bs-body-bg:#F4F7F5;
  --bs-border-color:#E3EAE7;
  --bs-body-font-family:'Nunito Sans',"Segoe UI",system-ui,-apple-system,sans-serif;
  --bs-emphasis-color:#15241F;
}

html{position:relative;min-height:100%;font-size:15px;}
@media (min-width:768px){html{font-size:16px;}}
body{margin:0;background:var(--canvas);color:var(--ink);
  font-family:'Nunito Sans',"Segoe UI",system-ui,-apple-system,sans-serif;
  -webkit-font-smoothing:antialiased;}
.num,.text-mono{font-variant-numeric:tabular-nums;font-feature-settings:"tnum";}
h1,h2,h3,h4,h5{font-weight:700;letter-spacing:-.01em;color:var(--ink);}
a{text-decoration:none;}
a:hover{text-decoration:underline;}

/* ===== App shell ===== */
.app-shell{display:flex;min-height:100vh;}
.sidebar{width:var(--sbw);flex-shrink:0;background:var(--sb);color:var(--sb-text);
  position:sticky;top:0;height:100vh;overflow-y:auto;display:flex;flex-direction:column;padding:16px 12px;}
.sidebar::-webkit-scrollbar{width:8px;}.sidebar::-webkit-scrollbar-thumb{background:var(--sb-line);border-radius:8px;}

.sb-brand{display:flex;align-items:center;gap:10px;padding:6px 8px 14px;}
.sb-brand img{height:30px;width:auto;display:block;}
.sb-brand .sub{font-size:11px;color:var(--sb-muted);letter-spacing:.02em;}

.sb-group{font-size:10.5px;text-transform:uppercase;letter-spacing:.09em;color:var(--sb-muted);padding:14px 10px 6px;}
.sb-link{display:flex;align-items:center;gap:11px;padding:9px 11px;border-radius:8px;color:var(--sb-text);
  font-size:14px;text-decoration:none;line-height:1.2;transition:background .12s;}
.sb-link:hover{background:var(--sb-2);color:#fff;text-decoration:none;}
.sb-link.active{background:var(--brand);color:#fff;font-weight:600;}
.sb-link i,.sb-link .ico{width:18px;height:18px;display:inline-flex;align-items:center;justify-content:center;opacity:.85;flex-shrink:0;font-style:normal;}
.sb-link .ico svg{width:16px;height:16px;display:block;}
.sb-link.active .ico{opacity:1;}
.sb-link .badge{margin-left:auto;font-size:10.5px;font-weight:600;background:var(--sb-2);color:var(--sb-text);padding:2px 7px;border-radius:20px;}
.sb-link.active .badge{background:rgba(255,255,255,.2);color:#fff;}
.sb-divider{height:1px;background:var(--sb-line);margin:10px 8px;}

.sb-foot{margin-top:auto;padding-top:12px;border-top:1px solid var(--sb-line);}
.sb-user{display:flex;align-items:center;gap:10px;padding:8px;}
.sb-user .ava{width:32px;height:32px;border-radius:50%;background:var(--brand-600);color:#fff;
  display:grid;place-items:center;font-size:12px;font-weight:700;flex-shrink:0;}
.sb-user .nm{font-size:13px;color:#fff;line-height:1.25;overflow:hidden;text-overflow:ellipsis;}
.sb-user .rl{font-size:11px;color:var(--sb-muted);}
.sb-logout{display:flex;align-items:center;gap:9px;padding:8px;color:var(--sb-muted);font-size:12.5px;border-radius:8px;}
.sb-logout:hover{background:var(--sb-2);color:#fff;text-decoration:none;}

/* main + topbar */
.main{flex:1;min-width:0;display:flex;flex-direction:column;}
.topbar{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:16px;
  background:rgba(255,255,255,.9);backdrop-filter:saturate(1.2) blur(6px);
  border-bottom:1px solid var(--line);padding:14px 28px;}
.topbar .crumb{font-size:11.5px;color:var(--muted);}
.topbar h1{font-size:19px;margin:0;line-height:1.2;}
.topbar .spacer{margin-left:auto;}
.hamb{display:none;background:none;border:1px solid var(--line);border-radius:8px;width:38px;height:38px;color:var(--slate);font-size:18px;line-height:1;cursor:pointer;}
.content{padding:24px 28px 48px;max-width:1400px;width:100%;}

/* auth (login/anon) */
.auth-shell{min-height:100vh;display:grid;place-items:center;padding:24px;background:
  radial-gradient(1200px 600px at 100% -10%,var(--brand-050),transparent),var(--canvas);}
.auth-card{background:var(--surface);border:1px solid var(--line);border-radius:16px;
  box-shadow:0 20px 50px -30px rgba(12,59,49,.4);padding:40px;max-width:460px;width:100%;text-align:center;}
.auth-card img{height:38px;margin-bottom:20px;}

/* ===== Bootstrap component polish ===== */
.card{border:1px solid var(--line);border-radius:12px;box-shadow:none;}
.card.shadow-sm{box-shadow:0 1px 2px rgba(21,36,31,.04)!important;}
.card.shadow-sm:hover{box-shadow:0 6px 20px -12px rgba(21,36,31,.18)!important;}
.card-body{padding:1.1rem 1.25rem;}
.display-6{font-size:2rem;font-weight:700;letter-spacing:-.02em;}

.btn{border-radius:8px;font-weight:600;font-size:.95rem;}
.btn-primary{--bs-btn-bg:var(--brand);--bs-btn-border-color:var(--brand);--bs-btn-hover-bg:var(--brand-600);
  --bs-btn-hover-border-color:var(--brand-600);--bs-btn-active-bg:var(--brand-700);--bs-btn-active-border-color:var(--brand-700);
  --bs-btn-disabled-bg:var(--brand);--bs-btn-disabled-border-color:var(--brand);}
.btn-outline-primary{--bs-btn-color:var(--accent);--bs-btn-border-color:var(--brand);--bs-btn-hover-bg:var(--brand);
  --bs-btn-hover-border-color:var(--brand);--bs-btn-active-bg:var(--brand-600);}
.btn-link{color:var(--accent);}

.table{--bs-table-color:var(--ink);border-color:var(--line);}
.table>thead th{font-size:11px;text-transform:uppercase;letter-spacing:.05em;font-weight:600;color:var(--muted);
  border-bottom:1px solid var(--line);padding:.7rem .75rem;}
.table>tbody td{padding:.7rem .75rem;vertical-align:middle;border-color:var(--line);}
.table-striped>tbody>tr:nth-of-type(odd)>*{--bs-table-bg-type:#FAFCFB;}
.table-hover>tbody>tr:hover>*{--bs-table-bg-state:var(--brand-050);}

.badge{font-weight:600;border-radius:20px;padding:.32em .7em;font-size:.72rem;}
.badge.text-bg-primary{background:var(--brand-tint)!important;color:var(--accent)!important;}
.badge.text-bg-success{background:var(--ok-bg)!important;color:#0C6B3B!important;}
.badge.text-bg-warning{background:var(--warn-bg)!important;color:#8A5406!important;}
.badge.text-bg-danger{background:var(--danger-bg)!important;color:#8f2222!important;}
.badge.text-bg-secondary{background:#EEF2F0!important;color:var(--slate)!important;}
.badge.text-bg-info{background:var(--info-bg)!important;color:#204a99!important;}
.badge.text-bg-orange{background:#FBE7D6!important;color:#9A4A12!important;}

.form-control,.form-select{border-radius:8px;border-color:var(--line-2);padding:.5rem .75rem;}
.form-control:focus,.form-select:focus{border-color:var(--brand);box-shadow:0 0 0 .2rem rgba(14,122,99,.15);}
.form-check-input:checked{background-color:var(--brand);border-color:var(--brand);}
.form-check-input:focus{border-color:var(--brand);box-shadow:0 0 0 .2rem rgba(14,122,99,.15);}
.btn:focus,.btn:active:focus,.form-control:focus,.form-check-input:focus{box-shadow:0 0 0 .2rem rgba(14,122,99,.2);}

.dropdown-menu{border:1px solid var(--line);border-radius:12px;box-shadow:0 14px 34px -18px rgba(21,36,31,.35);padding:6px;}
.dropdown-item{border-radius:7px;padding:.45rem .65rem;font-size:.92rem;}
.dropdown-item:active,.dropdown-item.active{background:var(--brand);}
.dropdown-item:hover{background:var(--brand-050);}
.dropdown-header{font-size:10.5px;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);}

.alert{border-radius:10px;border:1px solid transparent;}
.alert-info{background:var(--info-bg);color:#204a99;border-color:#cfe0fb;}
.alert-success{background:var(--ok-bg);color:#0C6B3B;border-color:#c7ecd6;}
.alert-warning{background:var(--warn-bg);color:#8A5406;border-color:#f2dcae;}
.alert-danger{background:var(--danger-bg);color:#8f2222;border-color:#f3caca;}

.nav-tabs .nav-link.active{color:var(--accent);border-bottom-color:var(--brand);}
.progress-bar{background-color:var(--brand);}
code{color:var(--accent);background:var(--brand-050);padding:.1em .35em;border-radius:5px;}
.text-brand{color:var(--accent)!important;}
hr{color:var(--line);opacity:1;}

/* ===== Bespoke components (dashboards, listy) ===== */
.page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:18px;flex-wrap:wrap;}
.page-head .lead{color:var(--slate);font-size:.95rem;margin:2px 0 0;}
.metrics{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px;}
.metric{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:15px 16px;}
.metric .lab{font-size:12.5px;color:var(--slate);display:flex;align-items:center;gap:8px;}
.metric .val{font-size:1.7rem;font-weight:700;letter-spacing:-.02em;margin-top:9px;line-height:1.1;display:flex;align-items:baseline;gap:8px;font-variant-numeric:tabular-nums;}
.metric .val small{font-size:12.5px;font-weight:400;color:var(--muted);}
.metric .foot{font-size:11.5px;margin-top:9px;color:var(--slate);}
.mini-bar{height:6px;border-radius:20px;background:var(--line);margin-top:11px;overflow:hidden;}
.mini-bar>span{display:block;height:100%;border-radius:20px;background:var(--brand);}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:12px;overflow:hidden;}
.panel-head{display:flex;align-items:center;gap:10px;padding:14px 18px;border-bottom:1px solid var(--line);}
.panel-head h2{font-size:14.5px;margin:0;font-weight:700;}
.panel-head .more{margin-left:auto;font-size:12.5px;font-weight:600;}
.panel-body{padding:16px 18px;}
.panel>.table{margin:0;}
.panel>.table>thead th{padding-left:18px;padding-right:18px;}
.panel>.table>tbody td{padding-left:18px;padding-right:18px;}
.avatar{width:32px;height:32px;border-radius:50%;background:var(--brand-tint);color:var(--accent);display:inline-grid;place-items:center;font-size:12px;font-weight:700;flex-shrink:0;}
.icon-tile{width:30px;height:30px;border-radius:8px;display:inline-grid;place-items:center;background:var(--brand-tint);color:var(--accent);flex-shrink:0;}
.dim{color:var(--muted);}
.hint{color:var(--slate);font-size:.9rem;}
.who{display:flex;align-items:center;gap:10px;}
.who small{display:block;color:var(--muted);font-size:.78rem;}
.mini-prog{display:inline-flex;align-items:center;gap:8px;}
.mini-prog .pb{width:64px;height:6px;border-radius:20px;background:var(--line);overflow:hidden;}
.mini-prog .pb>i{display:block;height:100%;background:var(--brand);border-radius:20px;}

/* ===== Responsive: off-canvas sidebar ===== */
.sb-backdrop{display:none;}
@media (max-width:991.98px){
  .sidebar{position:fixed;left:0;top:0;z-index:1050;transform:translateX(-100%);transition:transform .22s ease;
    box-shadow:0 0 60px rgba(0,0,0,.35);}
  .app-shell.nav-open .sidebar{transform:translateX(0);}
  .app-shell.nav-open .sb-backdrop{display:block;position:fixed;inset:0;background:rgba(12,20,17,.45);z-index:1040;}
  .hamb{display:inline-flex;align-items:center;justify-content:center;}
  .content{padding:18px 16px 40px;}
  .topbar{padding:12px 16px;}
}

/* ===== Dark mode ===== */
[data-theme="dark"]{
  --brand:#12A386; --brand-600:#0E7A63; --brand-700:#0B5F4E; --brand-tint:#123A30; --brand-050:#132520;
  --accent:#5FD3B8;
  --canvas:#0E1512; --surface:#161F1B; --line:#26332E; --line-2:#324139;
  --ink:#E7EFEB; --slate:#A2B3AC; --muted:#71857D;
  --sb:#0A2B24; --sb-2:#0C332A; --sb-line:#164237; --sb-text:#CFE3DC; --sb-muted:#7FA99C;
  --ok:#3BC77E; --ok-bg:#13321F; --warn:#E0A032; --warn-bg:#33280F; --danger:#F06868; --danger-bg:#331A1A; --info:#5B9BF0; --info-bg:#15223A;

  --bs-primary:#12A386; --bs-primary-rgb:18,163,134;
  --bs-link-color:#5FD3B8; --bs-link-color-rgb:95,211,184; --bs-link-hover-color:#8FE3CD;
  --bs-body-color:#E7EFEB; --bs-body-color-rgb:231,239,235; --bs-body-bg:#0E1512; --bs-border-color:#26332E; --bs-emphasis-color:#F3F8F6;
  /* .text-muted/.small liczą się z --bs-body-color-rgb — bez tego byłby ciemny tekst na ciemnym tle */
  --bs-secondary-color:rgba(231,239,235,.70); --bs-tertiary-color:rgba(231,239,235,.50);
}
/* app-shell surfaces z zahardkodowanym kolorem */
[data-theme="dark"] .topbar{background:rgba(14,21,18,.85);}
[data-theme="dark"] .table-striped>tbody>tr:nth-of-type(odd)>*{--bs-table-bg-type:#131C18;}
[data-theme="dark"] .card.shadow-sm:hover{box-shadow:0 6px 20px -12px rgba(0,0,0,.5)!important;}
[data-theme="dark"] .form-control,[data-theme="dark"] .form-select{background-color:#101815;color:var(--ink);}
[data-theme="dark"] .form-control::placeholder{color:var(--muted);}
[data-theme="dark"] .dropdown-menu{background:var(--surface);}
[data-theme="dark"] .dropdown-item{color:var(--ink);}
/* Bootstrap list-group: domyślny hover ma jasne tło (#f8f9fa) — w dark mode chowa jasny tekst.
   Nadpisujemy zmienne, by hover/active miały ciemne tło i czytelny tekst. */
[data-theme="dark"] .list-group{
  --bs-list-group-color:var(--ink);
  --bs-list-group-border-color:var(--line);
  --bs-list-group-action-color:var(--ink);
  --bs-list-group-action-hover-color:var(--ink);
  --bs-list-group-action-hover-bg:var(--brand-050);
  --bs-list-group-action-active-color:var(--ink);
  --bs-list-group-action-active-bg:var(--line-2);
}
/* Treść dokumentu ISO (.iso-content) w dark mode — cross-referencje/role-ref/linki miały
   zahardkodowane JASNE tła (#eef5ff, #e8f5e9, #fff3cd) → jasny tekst na jasnym = nieczytelne.
   Cytaty (#555) i obramowania tabel (#dee2e6) też były pod jasny motyw. */
[data-theme="dark"] .iso-content table td,
[data-theme="dark"] .iso-content table th{border-color:var(--line-2);}
[data-theme="dark"] .iso-content blockquote{color:var(--slate);border-left-color:var(--brand);}
[data-theme="dark"] .iso-content a.iso-xref{background:rgba(95,211,184,.14);border-bottom-color:var(--accent);color:var(--accent);}
[data-theme="dark"] .iso-content a.iso-xref:hover{background:rgba(95,211,184,.26);color:var(--accent);}
[data-theme="dark"] .iso-content .iso-xref-missing,
[data-theme="dark"] .iso-content .role-ref-missing{background:rgba(224,160,50,.18);border-bottom-color:var(--warn);color:var(--ink);}
[data-theme="dark"] .iso-content .role-ref{background:rgba(59,199,126,.16);border-bottom-color:var(--ok);color:var(--ink);}
/* badge/alert — nadpisanie zahardkodowanych ciemnych kolorów tekstu */
[data-theme="dark"] .badge.text-bg-success{color:#4FD08A!important;}
[data-theme="dark"] .badge.text-bg-warning{color:#EBB65A!important;}
[data-theme="dark"] .badge.text-bg-danger{color:#F58A8A!important;}
[data-theme="dark"] .badge.text-bg-info{color:#8AB8F5!important;}
[data-theme="dark"] .badge.text-bg-orange{background:#3A2412!important;color:#E8934F!important;}
[data-theme="dark"] .badge.text-bg-secondary{background:#26332E!important;color:#A2B3AC!important;}
[data-theme="dark"] .alert-info{color:#9BC0F5;border-color:#24406e;}
[data-theme="dark"] .alert-success{color:#6FE0A0;border-color:#1d5236;}
[data-theme="dark"] .alert-warning{color:#EBC077;border-color:#4a3a17;}
[data-theme="dark"] .alert-danger{color:#F5A0A0;border-color:#5a2626;}

/* przełącznik motywu w topbarze */
.theme-toggle{background:none;border:1px solid var(--line);border-radius:8px;width:38px;height:38px;
  display:inline-flex;align-items:center;justify-content:center;color:var(--slate);cursor:pointer;transition:background .12s,color .12s;flex-shrink:0;}
.theme-toggle:hover{background:var(--brand-tint);color:var(--accent);border-color:var(--brand);}
.theme-toggle svg{width:18px;height:18px;}
.theme-toggle .ic-sun{display:none;}
.theme-toggle .ic-moon{display:block;}
[data-theme="dark"] .theme-toggle .ic-sun{display:block;}
[data-theme="dark"] .theme-toggle .ic-moon{display:none;}

/* płynne przełączanie motywu */
body,.panel,.metric,.card,.topbar,.sidebar,.form-control,.form-select,.table,.dropdown-menu{
  transition:background-color .2s ease,border-color .2s ease,color .2s ease;}