/* === Motywy (jasny/ciemny) === */
:root{
  --bg:#ffffff;
  --text:#111111;
  --muted:#666666;

  --card:#ffffff;
  --border:#dddddd;

  --navbtn-bg:#ffffff;
  --navbtn-text:#111111;

  --table-head:#fafafa;
  --cell-border:#eeeeee;

  --input-bg:#ffffff;
  --input-text:#111111;

  --accent:#b00020;

  --tab-bg:#f5f5f5;

  --banner-err-bg:#ffecec;
  --banner-err-border:#b00020;
  --banner-err-text:#b00020;

  --banner-ok-bg:#eaffef;
  --banner-ok-border:#0a7a2f;
  --banner-ok-text:#0a7a2f;
}

html[data-theme="dark"]{
  --bg:#0f1115;
  --text:#e9eef5;
  --muted:#a7b0bd;

  --card:#151923;
  --border:#2a3240;

  --navbtn-bg:#151923;
  --navbtn-text:#e9eef5;

  --table-head:#1b2230;
  --cell-border:#2a3240;

  --input-bg:#0f1115;
  --input-text:#e9eef5;

  --accent:#ed1c24;

  --tab-bg:#1b2230;

  --banner-err-bg:#2b1517;
  --banner-err-border:#b24b57;
  --banner-err-text:#ffb7c0;

  --banner-ok-bg:#142319;
  --banner-ok-border:#2c6a3d;
  --banner-ok-text:#b8ffd0;
}

@font-face {
    font-family: 'Gotham';
    src: url('/static/fonts/GothamRounded-Book.ttf') format('truetype');
    font-weight: 400;
}

@font-face {
    font-family: 'Gotham';
    src: url('/static/fonts/GothamRounded-Bold.ttf') format('truetype');
    font-weight: 700;
}

/* === Global === */


.muted{
  color: var(--muted);
  font-size: 13px;
}

/* Linki jak zwykły tekst (globalnie) */
a{
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}
a:hover{
  text-decoration: underline;
  opacity: 0.85;
}

/* === Header / Nawigacja === */
.top{
  display:flex;
  justify-content: space-between;
  align-items:flex-start;
  gap: 18px;
  margin-left: 20px;
  margin-bottom: 50px;
  margin-top: -40px;
}

.top-inner {
    display: flex;
    align-items: center;
    align-items: flex-end;
    gap: 20px;          /* odstęp między logo a tekstem */
    margin-left: 25px;
}

.top-login{
  display:flex;
  justify-content: center;
  align-items:flex-start;
  gap: 18px;
  margin-left: 20px;
  margin-bottom: 20px;
}

.top-inner-login {
    display: flex;
    justify-content: center;
    align-items: center;
}

.version {
    font-size: 10px;
    opacity: 0.7;
    margin-top: 4px;
}

body{
  font-family: 'Gotham', Arial, sans-serif;
  margin: 0;
  padding: 0 24px 24px 24px;
  background: var(--bg);
  color: var(--text);
}

.nav{
  position: sticky;
  top: 0;
  z-index: 1000;

  margin: 0 -24px 0 -24px;
  padding: 8px 24px;

  display:flex;
  gap:10px;
  flex-wrap:wrap;
  justify-content:flex-end;
  align-items:center;

  box-sizing: border-box;
  isolation: isolate;
}

.nav::before{
  content:"";
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  width:1000px;

  pointer-events:none;
  z-index:-1;

  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);

  -webkit-mask-image: linear-gradient(to left, black 60%, transparent 100%);
  mask-image: linear-gradient(to left, black 60%, transparent 100%);
}

html[data-theme="dark"] .nav::before{
  background: linear-gradient(
    to left,
    rgba(15,17,21,0.50) 0%,
    rgba(15,17,21,0.42) 65%,
    rgba(15,17,21,0.00) 100%
  );
}

html:not([data-theme="dark"]) .nav::before{
  background: linear-gradient(
    to left,
    rgba(255,255,255,0.55) 0%,
    rgba(255,255,255,0.42) 65%,
    rgba(255,255,255,0.00) 100%
  );
}

/* ===== NAVBTN: gradient + kolory per zakładka + 50% wysokości ===== */
.navbtn{
  display:inline-block;
  padding:8px 12px;
  border:1px solid var(--border);
  border-radius:10px;

  text-decoration:none;
  color: var(--navbtn-text);

  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: transparent;

  /* brak zaznaczania tekstu */
  -webkit-user-select: none;
  user-select: none;

  /* fallback */
  --tab-accent: var(--accent, #b00020);
}

/* nie podkreślaj / nie zmieniaj opacity na hover dla nav */
.nav .navbtn:hover{
  text-decoration:none;
  opacity: 1;
}

/* bazowe tło przycisku */
.navbtn::after{
  content:"";
  position:absolute;
  inset:0;
  background: var(--navbtn-bg);
  z-index:-2;
}

/* === NAV: kolory daltonisto-friendly (Okabe–Ito) === */
.navbtn.nav-home{ --tab-accent:#56B4E9; }      /* SKY BLUE */
.navbtn.nav-assets{ --tab-accent:#009E73; }    /* BLUISH GREEN */
.navbtn.nav-locations{ --tab-accent:#E69F00; } /* ORANGE */
.navbtn.nav-service{ --tab-accent:#D55E00; }   /* VERMILLION */
.navbtn.nav-tasks{ --tab-accent:#CC79A7; }     /* PURPLE */
.navbtn.nav-reports{ --tab-accent:#0072B2; }   /* BLUE (ciemniejszy dla kontrastu) */
.navbtn.nav-admin{ --tab-accent:#6A6A6A; }     /* GREY */
.navbtn.nav-changelog{ --tab-accent:#F0E442; } /* YELLOW (czytelny jako akcent) */
.navbtn.nav-acc{ --tab-accent:#9acc79; } /* Akcesoria */
.navbtn.nav-parts{ --tab-accent:#ac247e; } /* Części */
/* akcje */
.navbtn.nav-logout{ --tab-accent:#D55E00; }    /* VERMILLION */
.navbtn.nav-theme{ --tab-accent:#6A6A6A; }     /* GREY */
.navbtn.navdrop-btn{ --tab-accent:#6A1B9A; } /* albo inny */


/* ===== Dropdown w nawigacji ===== */
.navdrop{
  position: relative;
  display: inline-block;
}

/* menu schowane */
.navdrop-menu{
  position: absolute;
  top: calc(100% + 8px);
  right: 0;                 /* u Ciebie nav jest do prawej */
  min-width: 220px;
  display: none;
  flex-direction: column;
  gap: 8px;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--card);
  box-shadow: 0 10px 24px rgba(0,0,0,.18);
  z-index: 999;
}

/* pokaż po najechaniu */
.navdrop:hover .navdrop-menu{
  display: flex;
}

/* żeby po najechaniu dropdown się nie zamykał "po drodze" */
.navdrop-menu::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:-10px;
  height:10px;
}

/* opcjonalnie: w dropdownie nie chcemy 50% gradientu na całej liście? (możesz zostawić) */
.navdrop-menu .navbtn{
  width: 100%;
}



/* wypełnienie od dołu (bez color-mix, działa wszędzie) */
.navbtn::before{
  content:"";
  position:absolute;
  left:0;
  bottom:0;
  width:100%;
  height:0%;
  z-index:-1;
  transition: height 0.25s ease;

  background: linear-gradient(to top, var(--tab-accent) 0%, transparent 100%);
  opacity: 0.55;
}

/* hover i active: do połowy */
.navbtn:hover::before,
.navbtn.active::before{
  height:50%;
}

/* === Kolor tekstu zależny od motywu === */

/* jasny motyw – tekst zostaje ciemny */
html:not([data-theme="dark"]) .navbtn:hover,
html:not([data-theme="dark"]) .navbtn.active{
  color: var(--navbtn-text);
}

/* ciemny motyw – tekst biały */
html[data-theme="dark"] .navbtn:hover,
html[data-theme="dark"] .navbtn.active{
  color: #ffffff;
}


/* === Banner === */
.banner{
  margin:10px 0;
  padding:10px;
  border-radius:6px;
  border:1px solid;
}
.banner.err{
  border-color: var(--banner-err-border);
  background: var(--banner-err-bg);
  color: var(--banner-err-text);
}
.banner.ok{
  border-color: var(--banner-ok-border);
  background: var(--banner-ok-bg);
  color: var(--banner-ok-text);
}

/* === Layout cards/rows === */
.row{
  display:flex;
  gap:18px;
  flex-wrap: wrap;
  align-items:flex-start;
}
.row-top{
  display:flex;
  gap:18px;
  width:100%;
  align-items:flex-start;
}

.card{
  border:1px solid var(--border);
  border-radius:10px;
  padding:14px;
  background: var(--card);
  min-width: 320px;
}
.card.full{ width:100%; }

.card.ops{ flex: 2 1 auto; padding-left: 25px }
.card.issue{ flex: 1 1 360px; }

/* === Formularze === */
input, select{
  padding: 8px;
  margin: 6px 0;
  width: 100%;
  box-sizing:border-box;
  background: var(--input-bg);
  color: var(--input-text);
  border: 1px solid var(--border);
  border-radius: 8px;
}

button{
  padding:8px 12px;
  margin-top: 8px;
  cursor:pointer;
  margin-right: 12px;
}

/* === Tabele === */
table{
  border-collapse: collapse;
  width: 100%;
  margin-top: 12px;
}
th, td{
  border:1px solid var(--cell-border);
  padding: 8px;
  text-align:left;
  vertical-align:top;
}
th{ background: var(--table-head); }

/* ===== STATUSY – JEDNOLITY WYGLĄD ===== */
.pill{
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 0;
  border: 1px solid;
  white-space: nowrap;
}
.pill.status-do { background: #fff7e6; border-color: #f1d39a; color: #8a5a00; } /* DO_SERWISU */
.pill.status-wt { background: #e9f2ff; border-color: #b6d2ff; color: #0b4db3; } /* W_TRAKCIE_SERWISU */
.pill.status-po { background: #e9fff0; border-color: #a7e0b7; color: #0a6b2d; } /* PO_SERWISIE */
.pill.status-wy { background: #f1f1f1; border-color: #d5d5d5; color: #555; }     /* WYDANE_NA_MAGAZYN */
.pill.status-kw { background: #ffecec; border-color: #d32f2f; color: #b00020; font-weight: 600; } /* KWARANTANNA */
.pill.status-ws { background: #fff3e0; border-color: #ffcc80; color: #a14b00; font-weight: 600; } /* WSTRZYMANE */

/* === Zakładki / taby wewnątrz stron === */
.tabs{ margin-top:10px; }
.tab-buttons{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-bottom:25px;
}
.tab-btn{
  border: 1px solid var(--border);
  background: var(--tab-bg);
  padding:8px 12px;
  border-radius:10px;
  cursor:pointer;
  font-size:13px;
  color: var(--text);
}
.tab-btn.active{
  background: var(--card);
  border-color: var(--text);
  font-weight:600;
}
.tab-panel{ display:none; margin-top:10px; }
.tab-panel.active{ display:block; }

.cols{ display:flex; gap:18px; flex-wrap:wrap; }
.col{ flex: 1 1 520px; }

@media (max-width: 980px){
  .row-top{ flex-direction: column; }
  .card.ops, .card.issue{ flex: 1 1 auto; }
}

/* === Logo / nagłówek === */
.app-header{
  padding: 12px 18px;
  display: flex;
  align-items: flex-start;
}
.app-logo{
  max-width: 180px;   /* ≈ 45 mm */
  max-height: auto;   /* ≈ 18 mm */
  width: auto;
  height: auto;
  object-fit: contain;
}

.logo-wrap {
    display: flex;
    align-items: center;
    gap: 14px;     /* odstęp między logotypami */
    text-decoration: none;
}

.app-logo-small {
    height: 28px;
    opacity: 0.9;
    margin-left: -45px;
    margin-top: 200px;
}

.app-logo-small-login {
    height: 28px;
    opacity: 0.9;
    margin-left: -35px;
    margin-top: 200px;
}

/* === Tooltip checklist === */
.chk-label{
  cursor: help;
}
.tooltip{
  position: fixed;
  max-width: 320px;
  padding: 8px 10px;
  background: var(--card);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 12px;
  line-height: 1.4;
  box-shadow: 0 6px 18px rgba(0,0,0,0.15);
  z-index: 9999;
  display: none;
  pointer-events: none;
}
/* === Tab box (kolorowe tło pod elementem) === */
.tab-box{
  position: relative;
  border-radius: 12px;
  padding: 16px;
  z-index: 0;
}

/* 1) kolorowy box POD spodem */
.tab-box::before{
  content:"";
  position:absolute;
  inset: 0;
  border-radius: 12px;
  background: var(--tab-accent, #424242);
  z-index: -2;
  transform: translateX(-10px);
  box-shadow: 0 6px 18px rgba(0,0,0,.10);
}

/* 2) górny box (jasny/ciemny) NAD kolorem, ale POD treścią */
.tab-box::after{
  content:"";
  position:absolute;
  inset: 0;
  border-radius: 12px;
  background: var(--card);
  border: 1px solid var(--border);
  z-index: -1;
}

/* treść zawsze na wierzchu */
.tab-box > *{
  position: relative;
  z-index: 1;
}

/* warstwy koloru (jak miałeś) */
.layer-return     { --tab-accent:#E69F00; } /* ORANGE */
.layer-start      { --tab-accent:#56B4E9; } /* SKY BLUE */
.layer-finish     { --tab-accent:#009E73; } /* BLUISH GREEN */
.layer-quarantine { --tab-accent:#D55E00; } /* VERMILLION */
.layer-edit       { --tab-accent:#6A6A6A; } /* NEUTRAL GREY */
.layer-receive    { --tab-accent:#9acc79; } /* PURPLE */
.layer-zasoby     { --tab-accent:#ac247e; } /* PINK */
.layer-locations  { --tab-accent:#0072B2; } /* BLUE */
.layer-requirements { --tab-accent:#6A1B9A; } /* DARK PURPLE */


/* =========================
   DASHBOARD IT (KPI/ALERTY)
   ========================= */
.dash-grid{
  display:flex;
  flex-direction:column;
  gap:18px;
}

.dash-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
}

.dash-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

.kpi-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(220px, 1fr));
  gap:12px;
  margin-top:12px;
}

@media (max-width: 980px){
  .kpi-grid{ grid-template-columns: repeat(2, minmax(220px, 1fr)); }
}
@media (max-width: 620px){
  .kpi-grid{ grid-template-columns: 1fr; }
}

.kpi-new {
  border: 1px solid #ffcc00;
  box-shadow: 0 0 6px rgba(255, 204, 0, 0.4);
}

.badge-new {
  background: #ffcc00;
  color: #000;
  font-size: 18px;
  padding: 2px 6px;
  border-radius: 6px;
  font-weight: 600;
}

.kpi-mini {
  font-size: 18px;
  padding: 4px 8px;
  border-radius: 6px;
  background: var(--bg-soft);
  text-decoration: none;
}

.tb-kpi-chip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:6px 10px;
  border-radius:999px;
  text-decoration:none;
}

.tb-kpi-chip-icon{
  font-size:20px;
  line-height:1;
}

.tb-kpi-chip-value{
  font-weight:700;
  line-height:1;
}

.tb-kpi-chip-label{
  font-size:12px;
  opacity:.92;
}

.tb-kpi-chip-mention{ border:1px solid rgba(80,140,255,.28); }
.tb-kpi-chip-comments{ border:1px solid rgba(120,120,120,.28); }
.tb-kpi-chip-ack{ border:1px solid rgba(255,120,120,.28); }

.kpi{
  display:block;
  text-decoration:none;
  color: var(--text);
  border:1px solid var(--border);
  background: var(--card);
  border-radius:12px;
  padding:12px;
  transition: transform .08s ease, border-color .08s ease;
}
.kpi:hover{
  transform: translateY(-1px);
  border-color: var(--text);
}

.kpi-ghost{ cursor: default; }

.kpi-title{ font-size: 12px; letter-spacing: .2px; opacity:.9; }
.kpi-value{ font-size: 28px; font-weight: 700; margin-top: 4px; }
.kpi-sub{ font-size: 12px; margin-top: 6px; }

.kpi-warn{ border-left: 4px solid #ffcc80; }
.kpi-danger{ border-left: 4px solid var(--accent); }
.kpi-good{ border-left: 4px solid #6A6A6A; }
.kpi-service{ border-left: 4px solid #E69F00; }
.kpi-done{ border-left: 4px solid #009E73; }
.kpi-start{ border-left: 4px solid #56B4E9; }

.kpi-priority{
  border-left: 4px solid var(--accent);
  background: linear-gradient(
    to right,
    rgba(255, 153, 0, 0.08),
    transparent 60%
  );
}

.dash-2col{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:18px;
}
@media (max-width: 980px){
  .dash-2col{ grid-template-columns: 1fr; }
}

.tbl{ margin-top: 0; }

.alert-box{
  display:block;
  text-decoration:none;
  color: var(--text);
  border:1px solid var(--border);
  border-radius:12px;
  padding:10px 12px;
  background: var(--card);
}
.alert-box.warn{ border-left: 4px solid #ffcc80; }
.alert-box.danger{ border-left: 4px solid var(--accent); }
.alert-box:hover{ border-color: var(--text); }

/* szybkie "OK" pille (używane w dashboardzie) */
.pill.ok{ background: var(--banner-ok-bg); border-color: var(--banner-ok-border); color: var(--banner-ok-text); font-weight:600; }
.pill.warn{ background: #fff3e0; border-color: #ffcc80; color: #a14b00; font-weight:600; }
.pill.err{ background: var(--banner-err-bg); border-color: var(--banner-err-border); color: var(--banner-err-text); font-weight:600; }


/* =========================================
   BUTTON tab-box: zrób z ::before tylko WĄSKI PASEK
   ========================================= */

/* upewniamy się, że button ma kontekst dla pseudo-elementów */
button.tab-btn.tab-box{
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: 8px 12px; /* tab-btn, a nie 16px z tab-box */
}

/* Pasek: tylko po lewej, bez przykrywania całej szerokości */
button.tab-btn.tab-box::before{
  content:"";
  position:absolute;
  left:-10px;            /* lekko “wystaje” jak u Ciebie */
  top:0;
  height:100%;
  width:20px;            /* <-- GRUBOŚĆ PASKA (zmień na 10/14) */
  border-radius: 12px;
  background: var(--tab-accent, #424242);
  z-index: 0;            /* nad tłem, pod tekstem */
  box-shadow: 0 6px 18px rgba(0,0,0,.10);
  transform: none;       /* wyłącz stare translateX */
}

/* Wyłączamy stare „pełne” tło buttona z ::after (bo chcemy animować background buttona) */
button.tab-btn.tab-box::after{
  content:none !important;
}
/* =========================================
   Animacja: wypełnij tło buttona od lewej do prawej (75%)
   ========================================= */

button.tab-btn.tab-box{
  --fill-w: 0%;
  background:
    linear-gradient(to right, var(--tab-accent) 0%, var(--tab-accent) 100%)
      0 0 / var(--fill-w) 100% no-repeat,
    var(--card);

  transition: background-size 0.25s ease, color 0.25s ease;
}

button.tab-btn.tab-box:hover,
button.tab-btn.tab-box.active{
  --fill-w: 100%;
}

/* Tekst czytelny zależnie od motywu */
html[data-theme="dark"] button.tab-btn.tab-box:hover,
html[data-theme="dark"] button.tab-btn.tab-box.active{
  color:#fff;
}
html:not([data-theme="dark"]) button.tab-btn.tab-box:hover,
html:not([data-theme="dark"]) button.tab-btn.tab-box.active{
  color: var(--text);
}
/* sortowanie tabel: dodaj kursor wskazujący na możliwość sortowania */
th.sortable {
  cursor: pointer;
  user-select: none;
}

th.sortable::after {
  content: " ↕";
  font-size: 12px;
  color: #999;
}

th.sortable.asc::after {
  content: " ▲";
  color: #b00020;
}

th.sortable.desc::after {
  content: " ▼";
  color: #b00020;
}
thead th.sortable {
  cursor: pointer;
  user-select: none;
}

thead th.sortable::after {
  content: " ↕";
  font-size: 12px;
  opacity: 0.6;
}

thead th.sortable.asc::after {
  content: " ▲";
  opacity: 1;
}

thead th.sortable.desc::after {
  content: " ▼";
  opacity: 1;
}
.ui-modal{
  position: fixed;
  inset: 0;
  z-index: 99999;
}

.ui-modal__backdrop{
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.45);
}

.ui-modal__box{
  position: absolute;
  left: 50%;
  top: 18%;
  transform: translateX(-50%);
  width: min(520px, calc(100vw - 24px));
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.35);
}

.ui-modal__header{
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
}

.ui-modal__title{
  font-weight: 700;
}

.ui-modal__body{
  padding: 16px;
}

.ui-modal__footer{
  padding: 14px 16px;
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

/* input w prompt */
.ui-modal__input{
  width: 100%;
  padding: 10px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--input-bg);
  color: var(--input-text);
  margin-top: 10px;
}


/* === Pills (status badges) === */
.pill{ color: var(--text); border-color: var(--border); background: transparent; }
.pill.ok{ border-color: var(--banner-ok-border); color: var(--banner-ok-text); background: var(--banner-ok-bg); }
.pill.warn{ border-color: #f2b700; color: #8a5a00; background: #fff4cc; }
html[data-theme="dark"] .pill.warn{ border-color: #f2b700; color: #ffd27a; background: rgba(242,183,0,0.15); }
.pill.err{ border-color: var(--banner-err-border); color: var(--banner-err-text); background: var(--banner-err-bg); }

.index-grid{
  display:grid;
  grid-template-columns: 2fr 1fr; /* 2/3 i 1/3 */
  gap:12px;
  align-items:start;
  margin-top:12px;
}

.index-left, .index-right{
  display:flex;
  flex-direction:column;
  gap:12px;
}

/* Mobile */
@media (max-width: 980px){
  .index-grid{
    grid-template-columns: 1fr;
  }
}
.index-bottom{
  margin-top: 14px;
}

.inline-filters{
  display:flex;
  gap:14px;
  align-items:flex-end;
  flex-wrap:wrap;
}

.filter-field{
  display:flex;
  flex-direction:column;
  gap:4px;
  min-width:140px;
}

.filter-field label{
  font-size:12px;
  opacity:.8;
}

.filter-btn{
  min-width:auto;
}

/* mobile */
@media (max-width: 900px){
  .inline-filters{
    flex-direction:column;
    align-items:stretch;
  }
}
.kpi-wide{
  grid-column: span 2;
}

/* Tabliza zespołu */
.tb-st{ font-weight:800; letter-spacing:.2px; }
.tb-st-in{ border-color: #56b3e959; }
.tb-st-wait{ border-color: rgba(255,200,0,.45); box-shadow: 0 0 0 2px rgba(255,200,0,.10) inset; }
.tb-st-done{ opacity:.85; border-color: #009E73;}
.tb-st-todo{ opacity:.9; border-color: #fc090962;}

/* dodatkowo: żeby "CZEKA" rzucało się w oczy na całym kafelku */
.tb-item.tb-wait { box-shadow: 0 0 0 2px #e69d004b; }
.tb-item.tb-in   { box-shadow: 0 0 0 2px #56b3e959; }
.tb-item.tb-todo { box-shadow: 0 0 0 2px #fc090948; }
.tb-item.tb-done { box-shadow: 0 0 0 2px #009E7345; }

/* === TEAM BOARD: lewy pasek statusu === */
.tb-item{
  position: relative;   /* konieczne dla .tb-accent */
  overflow: hidden;     /* żeby pasek nie wystawał */
}

.tb-accent{
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 6px;
  border-radius: 14px 0 0 14px;
  /* UWAGA: bez background tutaj – kolor idzie z inline w HTML */
}
/* === TEAM BOARD: widoczność (checkboxy) === */
.tb-vis{
  min-width: 260px;
}

/* === TEAM BOARD: widoczność (kompaktowo, inline) === */
.tb-vis{ min-width: 0; }

.tb-vis-title{
  display:block;
  font-size:12px;
  opacity:.85;
  margin-bottom:4px;
}

.tb-vis-row{
  display:flex;
  gap:12px;
  align-items:center;
  flex-wrap:wrap; /* jak zabraknie miejsca, ładnie złamie */
}

.tb-vis-opt{
  display:inline-flex;
  align-items:center;
  gap:6px;
  cursor:pointer;
  user-select:none;
  padding:2px 0;           /* minimalny “touch” bez zajmowania miejsca */
}

.tb-vis-opt input{
  width: 14px;
  height: 14px;
  margin: 0;               /* ważne: bez defaultowych marginesów */
}

.tb-vis-opt span{
  font-size:12px;
  line-height:1;
  opacity:.95;
}

.tb-arrow {
  transition: transform 0.2s ease;
  opacity: 0.7;
}

/* rozwinięte */
details[open] .tb-arrow {
  transform: rotate(180deg);
}

/* =========================
   TEAM BOARD — tylko LIGHT
   Zachowujemy KOLORY, ale układ i typografię bierzemy z dark
   ========================= */

html[data-theme="light"] .tb-item{
  background: #ffffff;
  border: 1px solid #d9e1ea;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
  color: #17212b;
}

html[data-theme="light"] .tb-item .pill{
  background: #f5f7fa;
  color: #344054;
  border: 1px solid #d0d5dd;
  font-weight: 600;
}

html[data-theme="light"] .tb-item .tb-st{
  color: #111827;
  border-width: 1px;
}

html[data-theme="light"] .tb-item .tb-st-todo{
  background: #fff4e8;
  border-color: #f7c58a;
}

html[data-theme="light"] .tb-item .tb-st-in{
  background: #eaf4ff;
  border-color: #9ecbff;
}

html[data-theme="light"] .tb-item .tb-st-wait{
  background: #fff8db;
  border-color: #ead37a;
}

html[data-theme="light"] .tb-item .tb-st-done{
  background: #eef2f6;
  border-color: #c7d0db;
}

html[data-theme="light"] .tb-item .tb-priority-urgent{
  background: #ffe7e7;
  color: #b42318;
  border-color: #f3b0ac;
}

html[data-theme="light"] .tb-item .tb-priority-important{
  background: #fff1d6;
  color: #b54708;
  border-color: #f2c98b;
}

html[data-theme="light"] .tb-item .tb-priority-info{
  background: #eef2f6;
  color: #475467;
  border-color: #cfd6df;
}

html[data-theme="light"] .tb-meta .muted{
  color: #475467 !important;
}

html[data-theme="light"] .tb-meta b{
  color: #1f2937;
}

html[data-theme="light"] .tb-comments-badge{
  background: #f5f7fa;
  color: #344054;
  border: 1px solid #d0d5dd;
}

html[data-theme="light"] .tb-comments-badge-unread{
  background: #efe8ff;
  color: #6941c6;
  border-color: #cdb8ff;
}

html[data-theme="light"] .tb-comments-new{
  background: #7f56d9;
  color: #fff;
}

html[data-theme="light"] .tb-arrow{
  color: #667085;
}

html[data-theme="light"] .tb-fold-body .card{
  background: #fbfcfe;
  border: 1px solid #e4e7ec;
}

html[data-theme="light"] .tb-comment{
  background: #ffffff;
  border: 1px solid #e4e7ec;
}

html[data-theme="light"] .tb-actions .tab-btn{
  border: 1px solid #d0d5dd;
  background: #fff;
  color: #344054;
}

html[data-theme="light"] .tb-actions .tab-btn:hover{
  background: #f9fafb;
}

/* braki ZM */

.pill-bad{
  background:#ffe5e5;
  color:#b42318;
}

.pill-warn{
  background:#fff4e5;
  color:#b54708;
}

.tb-comment-menu{
  position:relative;
  flex:0 0 auto;
}

.tb-comment-menu-btn{
  border:none;
  background:transparent;
  cursor:pointer;
  padding:0 4px;
  font-size:14px;
  line-height:1;
  border-radius:8px;
  color:var(--text);
  opacity:.6;
}

.tb-comment-menu-btn:hover{
  opacity:1;
  background:var(--card);
}

.tb-comment-menu-pop{
  position:absolute;
  top:18px;
  right:0;
  min-width:110px;
  background:var(--card);
  border:1px solid var(--line, rgba(127,127,127,.18));
  border-radius:10px;
  padding:4px;
  box-shadow:0 8px 24px rgba(0,0,0,.14);
  display:none;
  z-index:30;
}

.tb-comment-menu.open .tb-comment-menu-pop{
  display:block;
}

.tb-comment-menu:hover .tb-comment-menu-pop{
  display:block;
}

.tb-comment-menu-item{
  width:100%;
  text-align:left;
  border:none;
  background:transparent;
  cursor:pointer;
  padding:8px 10px;
  border-radius:8px;
  color:var(--text);
  font-size:13px;
}

.tb-comment-menu-item:hover{
  background:rgba(127,127,127,.10);
}

.tb-help{
  position: relative;
  display: inline-flex;
  align-items: center;
}

.tb-help-trigger{
  font-size: 13px;
  color: var(--muted);
  cursor: help;
  user-select: none;
  border-bottom: 1px dashed transparent;
  transition: color .15s ease, border-color .15s ease;
}

.tb-help:hover .tb-help-trigger{
  color: var(--text);
  border-bottom-color: var(--line);
}

.tb-help-popover{
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 340px;
  max-width: min(340px, 85vw);
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--card);
  color: var(--text);
  box-shadow: 0 10px 28px rgba(0,0,0,.16);
  display: none;
  z-index: 50;
}

.tb-help:hover .tb-help-popover{
  display: block;
}

.tb-help-popover::before{
  content: "";
  position: absolute;
  top: -6px;
  right: 18px;
  width: 10px;
  height: 10px;
  background: var(--card);
  border-left: 1px solid var(--line);
  border-top: 1px solid var(--line);
  transform: rotate(45deg);
}