/* Tytuł w jednym rzędzie: logo + blok 2-liniowy */
.site-title{
  display: flex;
  align-items: center;     /* logo w linii z 1. wierszem tekstu */
  gap: 3px;
  margin: 0;
  line-height: 1.2;
  font-family: 'Poppins', sans-serif;
  font-size: 15px;
  font-weight: 500;
  color: var(--color-text);
}

/* Dwuliniowy blok po prawej od logo */
.site-title .title-text{
  display: inline-flex;
  flex-direction: column;  /* zawsze dokładnie 2 linie */
  white-space: nowrap;     /* brak przypadkowych zawijań w obrębie linii */
  line-height: 1.1;
}

/* (logo już masz wystylizowane, to tylko upewnienie) */
.site-title .logo{
  color: var(--color-primary);
  font-weight: 700;
  font-size: 33px;
  letter-spacing: 0.5px;
}




 :root {
      --color-bg: #f4f6f8;
      --color-section-bg: #ffffff;
      --color-surface: #eeeeee;
      --color-text: #000000;
      --color-muted-text: #666666;
      --color-primary: #2d6df6;
      --color-btn-bg: var(--color-primary);
      --color-btn-text: #ffffff;
      --color-btn-secondary-bg: #6c757d;
      --color-toggle-bg: #dddddd;
      --color-toggle-selected: #ffffff;
      --color-table-border: #dddddd;
      --color-input-bg: #ffffff;
      --color-input-border: #cccccc;
      --color-icon-btn-bg: #f0f0f0;
      --color-icon-btn-border: #ffffff;
      --color-icon-btn: #888888;
      --border-radius: 8px;
      --transition-speed: 0.2s;
      --info-bar-height: 19px;
    }
    body.dark-mode {
      --color-bg: #2b2b2b;
      --color-section-bg: #333333;
      --color-surface: #3a3a3a;
      --color-text: #eeeeee;
      --color-muted-text: #bbbbbb;
      --color-primary: #4e8cff;
      --color-btn-bg: var(--color-primary);
      --color-btn-text: #ffffff;
      --color-btn-secondary-bg: #555555;
      --color-toggle-bg: #555555;
      --color-toggle-selected: #777777;
      --color-table-border: #444444;
      --color-input-bg: #444444;
      --color-input-border: #666666;
      --color-icon-btn-bg: #444444;
      --color-icon-btn-border: #555555;
      --color-icon-btn: #cccccc;
    }
    *, *::before, *::after { box-sizing: border-box; }
    body {
      margin: 0; padding-bottom: var(--info-bar-height);
      font-family: 'Roboto', sans-serif;
      background: var(--color-bg);
      color: var(--color-text);
    }
    .navbar {
      width: 100%; background-color: var(--color-section-bg);
      padding: 6px 25px; box-shadow: 0 3px 3px -1px rgba(0,94,184,0.5);
      display: flex; align-items: center;
    }
    .navbar h1 {
      margin: 0; font-size: 15px; font-weight: 500;
      display: flex; align-items: center; line-height: 1.2;
      font-family: 'Poppins', sans-serif;
      color: var(--color-text);
    }
    .navbar .logo {
      color: var(--color-primary);
      font-family: 'Poppins', sans-serif;
      font-weight: 700; font-size: 33px;
      letter-spacing: 0.5px; margin-right: 8px;
    }
    .navbar-buttons {
      display: flex; align-items: center;
      gap: 10px; margin-left: 10px; width: 100%;
    }
    .tab-btn {
      background: none; border: none;
      padding: 6px 12px; margin: 0 4px;
      font-size: 17px; font-weight: 400;
      color: var(--color-text);
      cursor: pointer; position: relative;
      transition: color var(--transition-speed), font-weight var(--transition-speed);
      text-decoration: none;
    }
    .tab-btn.active {
      font-weight: 700; color: var(--color-text);
    }
    .tab-btn.active::after {
      content: "";
      position: absolute; left: 0; right: 0; bottom: -10px;
      height: 4px; background: var(--color-primary);
      border-radius: 2px 2px 0 0;
    }
    /* Production Tracker Dropdown */
    .prod-dropdown-wrapper {
      position: relative;
      display: inline-block;
    }
    .prod-dropdown-btn {
      background: none;
      border: none;
      padding: 6px 12px;
      margin: 0 4px;
      font-size: 17px;
      font-weight: 400;
      color: var(--color-text);
      cursor: pointer;
      display: flex;
      align-items: center;
      position: relative;
      transition: color var(--transition-speed), font-weight var(--transition-speed);
    }
    .prod-dropdown-btn .material-icons {
      font-size: 18px;
      margin-left: 6px;
      color: var(--color-muted-text);
      transition: transform .18s;
    }
    .prod-dropdown-btn.active, .prod-dropdown-btn:focus {
      font-weight: 700;
      color: var(--color-text);
    }
    .prod-dropdown-btn.active::after {
      content: "";
      position: absolute; left: 0; right: 0; bottom: -10px;
      height: 4px; background: var(--color-primary);
      border-radius: 2px 2px 0 0;
    }
    .prod-dropdown {
      display: none;
      position: absolute;
      top: 39px;
      left: 0;
      min-width: 210px;
      background: var(--color-section-bg);
      box-shadow: 0 2px 8px rgba(0,0,0,0.13);
      border: 1px solid var(--color-table-border);
      border-radius: var(--border-radius);
      z-index: 1002;
      padding: 7px 0;
    }
    .prod-dropdown-option {
      width: 100%;
      background: none;
      border: none;
      color: var(--color-text);
      text-align: left;
      font-size: 16px;
      padding: 9px 18px 9px 20px;
      cursor: pointer;
      transition: background var(--transition-speed);
      font-family: inherit;
      display: flex;
      align-items: center;
    }
    .prod-dropdown-option.selected, .prod-dropdown-option:hover {
      background: var(--color-toggle-bg);
      font-weight: 600;
      color: var(--color-primary);
    }
    .action-icons {
      margin-left: auto; display: flex;
      align-items: center; gap: 12px; position: relative;
    }
    .icon-btn {
      background-color: var(--color-icon-btn-bg);
      border: 1px solid var(--color-icon-btn-border);
      cursor: pointer; font-size: 16px;
      color: var(--color-icon-btn);
      transition: all 0.3s ease;
      padding: 5px;
      border-radius: var(--border-radius);
      display: inline-flex;
      align-items: center;
      justify-content: center;
    }
    .icon-btn:hover {
      color: var(--color-text);
      background-color: var(--color-toggle-selected);
      border-color: var(--color-icon-btn-border);
    }
   
    #info-bar {
      position: fixed; bottom: 0; left: 0;
      width: 100%; height: var(--info-bar-height);
      padding: 4px 12px;
      background-color: var(--color-surface);
      border-top: 1px solid var(--color-table-border);
      font-size: 11px;
      display: flex; align-items: center; gap: 16px;
      color: var(--color-muted-text);
      z-index: 1000;
    }
    #info-bar span strong { font-weight: bold; }
    .container {
      width: 100%; padding: 4px 8px; text-align: left;
    }
    .section {
      position: relative;
      background: var(--color-section-bg);
      padding: 20px; margin-bottom: 24px;
      border-radius: var(--border-radius);
      box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    }
    table.dataTable {
      border-collapse: collapse;
      background: var(--color-section-bg);
      border-radius: var(--border-radius);
      overflow: hidden;
      box-shadow: 0 1px 3px rgba(0,0,0,0.1);
      width: auto !important; margin-left: 0 !important;
      table-layout: auto;
    }
    table.dataTable th,
    table.dataTable td {
      padding: 6px 8px;
      font-size: 13px;
      color: var(--color-text);
      border-right: 1px solid var(--color-table-border);
      white-space: nowrap;
      text-align: center;
    }
    table.dataTable th:last-child,
    table.dataTable td:last-child {
      border-right: none;
    }
    table.dataTable thead th {
      background: var(--color-bg);
      border-bottom: 2px solid var(--color-primary);
      padding: 8px 10px;
      position: relative;
    }
    .filter-input { display: none; width: 100%; margin-top: 4px; box-sizing: border-box; }
    .filter-icon {
      cursor: pointer; margin-left: 6px;
      font-size: 14px; vertical-align: middle;
    }
    .column-title { display: inline-block; }
    .user-dropdown {
      position: absolute; top: 42px; right: 0;
      background: var(--color-section-bg);
      border: 1px solid var(--color-table-border);
      border-radius: var(--color-border-radius);
      box-shadow: 0 2px 6px rgba(0,0,0,0.2);
      padding: 8px; width: 200px; z-index: 1001;
    }
    .user-dropdown input {
      width: 100%; padding: 6px 8px; margin-bottom: 8px;
      font-size: 14px;
      border: 1px solid var(--color-input-border);
      border-radius: var(--border-radius);
      outline: none;
    }
    .user-dropdown ul {
      list-style: none; margin: 0; padding: 0;
      max-height: 200px; overflow-y: auto;
    }
    .user-dropdown li {
      padding: 6px 8px; cursor: pointer;
      border-radius: var(--border-radius);
      font-size: 14px;
    }
    .user-dropdown li:hover { background: var(--color-toggle-selected); }
    .comment-cell {
      width: 100%; height: 100%; padding: 0; margin: 0;
      border: none; background: transparent;
      outline: none; font-family: inherit;
      font-size: inherit; color: inherit;
    }
    .comment-cell:focus { background: rgba(45,109,246,0.1); }
    .status-not-ok { background-color: rgba(255, 0, 0, 0.1) !important; }
    .status-ok     { background-color: rgba(40, 167, 69, 0.2) !important; }
    #whiteboard-table_wrapper { display: inline-block; }

    /* żółte podświetlenie dla zbliżających się terminów */
.status-warning {
  background-color: rgba(255, 255, 0, 0.2) !important;
}


    /* Knowledge Base styles */
    .kb-cards-container {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
      gap: 16px;
    }
    .kb-card {
      background: var(--color-section-bg);
      padding: 16px;
      border-radius: var(--border-radius);
      box-shadow: 0 1px 3px rgba(0,0,0,0.1);
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .kb-card-content {
      flex-grow: 1;
    }
    .kb-card-title {
      font-weight: 700;
      margin-bottom: 8px;
    }
    .kb-card-comment {
      color: var(--color-muted-text);
    }
    .kb-card-link {
      margin-left: 16px;
      font-size: 24px;
      text-decoration: none;
      color: var(--color-primary);
    }

    .modal-overlay {
      display: none;
      position: fixed;
      top: 0; left: 0; right: 0; bottom: 0;
      background: rgba(0,0,0,0.5);
      align-items: center;
      justify-content: center;
      z-index: 2000;
    }
    .modal-content {
      background: var(--color-section-bg);
      padding: 24px;
      border-radius: var(--border-radius);
      width: 400px;
      max-width: 90%;
      position: relative;
      box-shadow: 0 3px 6px rgba(0,0,0,0.3);
    }
    .modal-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 16px;
    }
    .modal-header .modal-title {
      font-size: 18px;
      font-weight: 700;
    }
    .close-btn {
      font-size: 24px;
      cursor: pointer;
      line-height: 1;
    }
    .modal-body label {
      display: block;
      margin-bottom: 4px;
      font-weight: 500;
    }
    .modal-body input[type="text"],
    .modal-body textarea {
      width: 100%;
      padding: 8px;
      margin-bottom: 12px;
      border: 1px solid var(--color-input-border);
      border-radius: var(--border-radius);
      background: var(--color-input-bg);
      color: var(--color-text);
      font-size: 14px;
      font-family: inherit;
    }
    .modal-body textarea {
      resize: vertical;
      min-height: 80px;
    }
    .save-btn {
      display: block;
      width: 100%;
      padding: 10px;
      background: var(--color-primary);
      color: var(--color-btn-text);
      border: none;
      border-radius: var(--border-radius);
      font-size: 16px;
      font-weight: 500;
      cursor: pointer;
      text-align: center;
      margin-top: 8px;
    }
    .save-btn:hover {
      background: #1a51c6;
    }
    





    .kb-search-wrapper input#kb-search {
  width: 60%;
  padding: 10px 12px;
  font-size: 1rem;
  box-sizing: border-box;
  border-width: 4px;
  border-style: solid;
  border-color: #a0c4ff;            /* AI-like pastel azure start */
  border-radius: 12px;
  background: var(--color-input-bg);
  color: var(--color-text);
  animation: borderColorCycle 4s ease-in-out infinite;
}

/* usuwa systemową obwódkę focus */
.kb-search-wrapper input#kb-search,
.kb-search-wrapper input#kb-search:focus {
  outline: none !important;
  box-shadow: none !important;
}


@keyframes borderColorCycle {
  0%   { border-color: #a0c4ff; }  /* pastel azure */
  25%  { border-color: #70a1ff; }  /* sky-blue tech */
  50%  { border-color: #4c6ef5; }  /* vivid electric blue */
  75%  { border-color: #2f49d1; }  /* deep AI-core blue */
  100% { border-color: #a0c4ff; }  /* back to pastel */
}





select.maintenance-status,
select.fds-check,
select.rtv-check,
select.legacy-select,
select.impact-status {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  border: none;
  background: transparent;
  width: 100%;                 /* wypełnia całą komórkę */
  padding: 0 20px 0 4px;        /* zostaw trochę miejsca na strzałkę */
  margin: 0;
  font: inherit;
  color: inherit;
  line-height: inherit;
  outline: none;
  border-radius: 0;
  cursor: pointer;
  text-align: center;
  text-align-last: center;
  background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" width="8" height="6"><path fill="%23666" d="M0 0l4 4 4-4z"/></svg>');
  background-repeat: no-repeat;
  background-position: right 6px center;
  background-size: 8px 6px;
}



/* Opcjonalnie: zmień kolor tła całej komórki po zmianie wartości */
.select-cell-wrapper {
  position: relative;
}
.select-cell-wrapper.select-ok { background: rgba(40,167,69,0.1); }
.select-cell-wrapper.select-not-ok { background: rgba(255,0,0,0.1); }

/* Upewnij się, że wrapper ma padding i wysokość jak komórka */
td .select-cell-wrapper {
  display: flex;
  align-items: center;
  width: 100%;
  height: 100%;
}


/* dodaj to na końcu Twojego <style> */
  .typing::after {
  content: '';
  display: inline-block;
  width: 2px;
  height: 1em;
  background: var(--color-text);
  margin-left: 2px;
  animation: blink 0.7s steps(1) infinite;
  vertical-align: bottom;
}

@keyframes blink {
  0%, 100% { opacity: 0; }
  50%      { opacity: 1; }
}



/* ==== Nowoczesny, minimalistyczny styl dla Whiteboard ==== */

/* Kontener tabeli */
#whiteboard-table.dataTable {
  width: 100% !important;
  border-collapse: collapse;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.06);
  overflow: hidden;
}

/* Wrapper (DataTables dodaje wrapper wokół tabeli) */
#whiteboard-table.dataTable_wrapper {
  border-radius: 8px;
  overflow: hidden;
}

/* Sticky header */
#whiteboard-table.dataTable thead th {
  position: sticky;
  top: 0;
  background: #fafafa;
  color: #333;
  font-weight: 600;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-bottom: 1px solid #e1e1e1;
  text-align: center;
  padding: 4px 10px;
}

/* Komórki body */
#whiteboard-table.dataTable tbody td {
  border: none;
  border-bottom: 1px solid #f0f0f0;
  padding: 6px 12px;
  text-align: center;
  font-size: 13px;
  line-height: 1;
}

/* Naprzemienne tło wierszy */
#whiteboard-table.dataTable tbody tr:nth-child(2n) {
  background: #f9f9f9;
}

/* Hover na wierszu */
#whiteboard-table.dataTable tbody tr:hover {
  background: rgba(45,109,246,0.08);
}

/* Komórki stopki */
#whiteboard-table.dataTable tfoot th {
  border-top: 2px solid #e1e1e1;
  padding: 8px 12px;
  font-size: 14px;
  font-weight: 600;
  background: #fafafa;
  text-align: center;
}

/* Podświetlenie holiday */
#whiteboard-table.dataTable tr.status-warning {
  background-color: rgba(255,235,59,0.25) !important;

}

/* Sekcja 100% – jasnozielone tło */
.section-ok {
  background-color: rgba(40, 167, 69, 0.2) !important;
}

/* Sekcja najgorsze (dolne 2 miejsca + remisy) – jasnoczerwone tło */
.section-worst {
  background-color: rgba(255, 0, 0, 0.2) !important;
}


/* ---- Separatory między sekcjami ---- */

/* 1) Przed 4. kolumną (Sekcja Discover) */
#whiteboard-table.dataTable thead th:nth-child(4),
#whiteboard-table.dataTable tbody td:nth-child(4),
#whiteboard-table.dataTable tfoot th:nth-child(4) {
  border-left: 2px solid #e1e1e1;
  padding-left: 16px;
}

/* 2) Przed 7. kolumną (Sekcja Legacy) */
#whiteboard-table.dataTable thead th:nth-child(7),
#whiteboard-table.dataTable tbody td:nth-child(7),
#whiteboard-table.dataTable tfoot th:nth-child(7) {
  border-left: 2px solid #e1e1e1;
  padding-left: 16px;
}

/* 3) Przed 10. kolumną (Sekcja POD) */
#whiteboard-table.dataTable thead th:nth-child(10),
#whiteboard-table.dataTable tbody td:nth-child(10),
#whiteboard-table.dataTable tfoot th:nth-child(10) {
  border-left: 2px solid #e1e1e1;
  padding-left: 16px;
}




/* w Twoim <style> */
.truncate {
  display: inline-block;
  max-width: 30ch;            /* ok. 30 znaków szerokości */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Rezerwa miejsca w sekcjach pod przycisk Bulk Upload */
.section {
  /* jeśli masz już padding-top, zwiększ go – tu globalnie +28px */
  padding-top: 28px;
}

/* Tabele trochę niżej, żeby przycisk nie nachodził */
.section table {
  margin-top: 10px;
}

/* Bulk Upload button – mały, przezroczysty, szary tekst */
.bulk-upload-btn {
  position: absolute;
  top: 8px;              /* bliżej górnej krawędzi sekcji */
  right: 20px;
  background: transparent;
  border: none;
  color: var(--color-muted-text);
  font-size: 12px;
  padding: 2px 4px;
  cursor: pointer;
  z-index: 10;           /* nad tabelą, ale pod dropdownami/selectami */
}
.bulk-upload-btn:hover {
  background: rgba(128,128,128,0.1);
}

/* Modal dla Bulk Upload */
#bulk-upload-modal.modal-overlay {
  display: none;
  position: fixed; top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.5);
  align-items: center; justify-content: center;
  z-index: 2000;
}
#bulk-upload-modal .modal-content {
  background: var(--color-section-bg);
  padding: 20px;
  border-radius: var(--border-radius);
  width: 360px; max-width: 90%;
  box-shadow: 0 3px 6px rgba(0,0,0,0.3);
}
#bulk-upload-modal .modal-body label {
  margin-top: 8px;
  font-weight: 500;
  display: block;
}
#bulk-upload-modal .modal-body select,
#bulk-upload-modal .modal-body textarea,
#bulk-upload-modal .modal-body input[type="text"] {
  width: 100%;
  margin-top: 4px;
  padding: 6px;
  border: 1px solid var(--color-input-border);
  border-radius: var(--border-radius);
  background: var(--color-input-bg);
  color: var(--color-text);
  font-family: inherit;
  font-size: 13px;
}
#bulk-upload-modal textarea { min-height: 80px; resize: vertical; }
#bulk-upload-save-btn {
  margin-top: 12px;
}


/* NEW: lewy label na wysokości Bulk Upload */
.section-label{
  position: absolute;
  top: 8px;
  left: 20px;
  background: transparent;
  border: none;
  color: var(--color-muted-text);
  font-size: 12px;
  padding: 2px 4px;
  pointer-events: none; /* to tylko etykieta */
}


.rearrange-link{
  position: absolute;
  top: 8px;                 /* ten sam poziom co Bulk Upload */
  right: 120px;             /* po lewej od Bulk (Bulk ma right:20px) */
  color: var(--color-muted-text);
  font-size: 12px;
  cursor: pointer;
  text-decoration: none;    /* było: underline */
  line-height: 1;           /* wyrównanie linii do przycisku Bulk */
  padding: 2px 4px;         /* ten sam „feeling” co Bulk Upload */
}
.rearrange-link:hover{
  color: var(--color-text);
  text-decoration: none;    /* bez podkreślenia również w hoverze */
}

/* W MSD (brak Bulk) trzymaj przy prawym brzegu sekcji */
#msd-section .rearrange-link{ right: 20px; }


/* NEW: prawy panel wysuwany */
#column-toggle-panel{
  position: fixed;
  top: 0; right: 0; height: 100%;
  width: 20vw; min-width: 280px; max-width: 420px;
  background: var(--color-section-bg);
  border-left: 1px solid var(--color-table-border);
  box-shadow: -2px 0 10px rgba(0,0,0,0.12);
  transform: translateX(100%);
  transition: transform .25s ease;
  z-index: 2001;
  display: flex; flex-direction: column;
}
#column-toggle-panel.open{ transform: translateX(0); }

#column-toggle-panel .colpanel-header{
  padding: 16px;
  border-bottom: 1px solid var(--color-table-border);
  display: flex; align-items: center; justify-content: space-between;
  font-weight: 700;
}
#column-toggle-panel .colpanel-close{
  background: none; border: none; cursor: pointer;
  font-size: 22px; color: var(--color-muted-text);
}
#column-toggle-panel .colpanel-body{
  padding: 12px 16px; overflow-y: auto;
}
#column-toggle-panel ul{ list-style: none; margin: 0; padding: 0; }
#column-toggle-panel li{
  padding: 10px 0;
  border-bottom: 1px dashed var(--color-table-border);
}

/* NEW: nowoczesne przełączniki (checkbox → switch) */
.switch{
  display: flex; align-items: center; gap: 10px;
}
.switch input[type="checkbox"]{
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  width: 38px; height: 20px; border-radius: 999px;
  background: var(--color-toggle-bg);
  position: relative; outline: none; cursor: pointer;
  transition: background .2s;
}
.switch input[type="checkbox"]::after{
  content: ""; position: absolute; top: 2px; left: 2px;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--color-section-bg);
  box-shadow: 0 1px 3px rgba(0,0,0,.2);
  transition: transform .2s;
}
.switch input[type="checkbox"]:checked{ background: var(--color-primary); }
.switch input[type="checkbox"]:checked::after{ transform: translateX(18px); }
.switch .label{ font-size: 14px; }





/* =========================================================
   WSPÓLNY STYL KAFELEK: .widget-box + nagłówki
   ========================================================= */
.widget-box{
  padding: 10px;
  background: var(--color-section-bg);
  border: 1px solid var(--color-table-border);
  border-radius: var(--border-radius);
  box-shadow: 0 2px 6px rgba(0,0,0,0.12);
}
.widget-title{
  font-weight: bold;
}
.widget-subtitle{
  font-size: 12px;
  color: var(--color-muted-text);
  margin-top: 2px;
  margin-bottom: 8px;
}
.widget-body{
  /* miejsce na zawartość (tabela, wykres itp.) */
}

/* MSD widget – zachowujemy dotychczasowe pozycjonowanie i szerokość */
#msd-widget{
  position: absolute;
  top: 0;
  right: 15px;
  left: var(--msd-left);    /* <— NOWE: osobna zmienna dla MSD */
  min-height: 160px;
  margin-top: 10px;
  padding: 10px;
  background: var(--color-section-bg);
  border: 1px solid var(--color-table-border);
  border-radius: var(--border-radius);
  box-shadow: 0 2px 6px rgba(0,0,0,0.12);
  z-index: 5;
  min-width: 260px;
  width: auto !important;
  box-sizing: border-box;
}



/* Tytuł + total w jednej linii (jak wcześniej) */
#msd-widget .widget-title { font-weight: bold; display: inline-block; margin-right: 1px; }
#msd-widget .msd-total { display: inline-block; vertical-align: middle; margin-left: 4px; }
#msd-widget .msd-total::before { content: " — "; }

/* wykres */
.msd-chart-wrap { position: relative; height: 80px; margin-top: 15px; }
#msd-chart { display: block; width: 100% !important; height: 100% !important; }


#wb-widget {
  margin-top:0 !important;
  margin-right: 10px;
  min-height: 220px;
  display: inline-block;
  width: fit-content;
}


/* Responsive: jeśli ekran jest wąski, kafelki pod sobą */
@media (max-width: 1100px){
  #msd-widget{
    position: static;
    width: 100%;
    height: auto;
    margin: 10px 0 0 0;
  }
  #wb-widget{
    margin-right: 0;
  }
}

.msd-stats-line {
  margin-top: 8px;
  font-size: 0.8em;
  color: var(--color-muted-text);
}

.whiteboard-pill {
  display: inline-block;
  padding: 1px 3px;          /* mniejszy padding */
  border-radius: 10px;       /* lekko zaokrąglone */
  font-size: 14px;        /* ta sama wielkość czcionki co reszta */
  line-height: 1;          /* kompaktowa wysokość */
  background: var(--color-section-bg);
  color: var(--color-text);
  margin-right: 3px;
  vertical-align: middle;    /* wyrównanie z tekstem */
}

.whiteboard-pill.overdue {
  background: #fdecea; /* blado czerwony */
  color: #8a1c1c;
}

.whiteboard-pill.warning {
  background: #fff4e5; /* blado pomarańczowy */
  color: #a15c0e;
}




/* --- Whiteboard: progress + inline message w jednej linii --- */
#wb-widget .widget-title{
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-weight: 700;             /* tylko progress jest pogrubiony */
}

/* zwykła (nie bold), trochę mniejsza, przytłumiona */
#wb-inline-msg.widget-inline-msg{
  font-weight: 400;
  font-size: 0.9em;
  color: var(--color-muted-text);
}

/* automatyczny długi myślnik, gdy istnieje treść wiadomości */
#wb-inline-msg.widget-inline-msg:not(:empty)::before{
  content: " — ";
  font-weight: 400;
  color: var(--color-muted-text);
}

/* na wszelki wypadek: wyłącz stary, „rozwijany” podtytuł jeśli był renderowany pod spodem */
#wb-widget .widget-subtitle{
  display: none !important;
}


/* Odstęp między wierszem nagłówka a tabelą (bez pustych divów) */
#wb-widget .widget-title{
  margin-bottom: 14px; /* dostosuj 12–16px wg uznania */
  margin-top -12px;
}








.holiday-toolbar {
  margin-top: -18px;
  margin-botton: 30px;

}




/* Większe odstępy między wierszami */
#holiday-modal .form-row {
  margin-bottom: 1rem;
}

/* Nowocześniejszy date input */
#holiday-modal .modern-date {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid #ccc;
  border-radius: 6px;
  font-size: 0.95rem;
  background-color: #fff;
  color: #333;
  box-sizing: border-box;
  transition: border-color 0.2s, box-shadow 0.2s;
}

#holiday-modal .modern-date:hover {
  border-color: #888;
}

#holiday-modal .modern-date:focus {
  border-color: #007bff;
  box-shadow: 0 0 3px rgba(0, 123, 255, 0.5);
  outline: none;
}

/* Ikona kalendarza po prawej (tylko WebKit/Blink) */
#holiday-modal .modern-date::-webkit-calendar-picker-indicator {
  cursor: pointer;
  filter: invert(50%) sepia(20%) saturate(500%) hue-rotate(180deg);
}

/* Pasek zakładek i searcha w jednej linii */
.holiday-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

/* Kontener zakładek po lewej — nic nie zmieniamy w samych przyciskach zakładek */
.holiday-tabs {
  display: flex;
  align-items: center;
  gap: 8px; /* oddech między zakładkami */
}

/* Search po prawej — przezroczysty, nowoczesny */
.holiday-search {
  min-width: 220px;
  flex: 0 0 260px; /* możesz zmienić szerokość */
}

#holiday-search {
  width: 100%;
  padding: 8px 12px;
  background: transparent;
  border: 1px solid rgba(0,0,0,0.15);
  border-radius: 999px;         /* pigułka */
  outline: none;
  font-size: 0.95rem;
  transition: box-shadow .2s, border-color .2s, background-color .2s;
}

#holiday-search::placeholder {
  color: rgba(0,0,0,0.5);
}

#holiday-search:hover {
  border-color: rgba(0,0,0,0.35);
}

#holiday-search:focus {
  border-color: rgba(0,123,255,0.8);
  box-shadow: 0 0 0 3px rgba(0,123,255,0.15);
  background-color: rgba(0,0,0,0.02); /* nadal „przezroczysty vibe” */
}

/* Jeżeli masz dark mode, możesz dodać wariant: */
@media (prefers-color-scheme: dark) {
  #holiday-search {
    border-color: rgba(255,255,255,0.18);
    color: #fff;
  }
  #holiday-search::placeholder {
    color: rgba(255,255,255,0.6);
  }
  #holiday-search:hover {
    border-color: rgba(255,255,255,0.36);
  }
  #holiday-search:focus {
    border-color: rgba(0,153,255,0.9);
    box-shadow: 0 0 0 3px rgba(0,153,255,0.2);
    background-color: rgba(255,255,255,0.03);
  }
}




/* ==== FIX: pasek akcji u góry, bez nachodzenia ==== */

/* 1) Pasek akcji przy górnej krawędzi sekcji */
.section-actions{
  position: absolute;
  top: 4px;              /* było 8px – podnieśliśmy wyżej */
  right: 20px;
  display: flex;
  align-items: center;
  gap: 12px;             /* większy odstęp, żeby nic nie „dotykało” */
  white-space: nowrap;
  z-index: 15;           /* nad tabelą/innymi elementami */
}

/* 2) Ujednolicone przyciski – wymuszamy brak absolutów z dawnych reguł */
.section-actions .rearrange-link,
.section-actions .export-link,
.section-actions .bulk-upload-btn{
  position: static !important;   /* kluczowe: kasuje stare position:absolute */
  top: auto !important;
  right: auto !important;

  background: transparent;
  border: none;
  color: var(--color-muted-text);
  font-size: 12px;
  line-height: 1;                /* spójna wysokość tekstu */
  padding: 2px 8px;
  border-radius: var(--border-radius);
  cursor: pointer;
}

.section-actions .rearrange-link:hover,
.section-actions .export-link:hover,
.section-actions .bulk-upload-btn:hover{
  background: rgba(128,128,128,0.1);
  color: var(--color-text);
}

/* 3) Label po lewej – wyrównujemy pionowo do tych samych 4px */
.section-label{
  top: 4px;             /* było 8px – żeby linia była idealnie równa */
}

/* 4) Mniej zapasu na górze sekcji (bo pasek jest absolutny) */
.section{
  padding-top: 22px;    /* było 28px – dzięki temu tabela nie „pcha” wszystkiego w dół */
}

/* 5) Usuwamy stare przesuwanie Rearrange w samym MSD */
#msd-section .rearrange-link{ right: auto !important; }







/***************************************
 * AD HOC ACTIVITIES — wygląd spójny z col panel
 ***************************************/
#activities-panel{
  position: fixed;
  top: 0; right: 0; height: 100%;
  width: 23vw; min-width: 402px; max-width: 483px;
  background: var(--color-section-bg);
  border-left: 1px solid var(--color-table-border);
  box-shadow: -2px 0 10px rgba(0,0,0,0.12);
  transform: translateX(100%);
  transition: transform .25s ease;
  z-index: 2002;
  display: flex; flex-direction: column;
}
#activities-panel.open{ transform: translateX(0); }

#activities-panel .colpanel-header{
  padding: 16px;
  border-bottom: 1px solid var(--color-table-border);
  display: flex; align-items: center; justify-content: space-between;
  font-weight: 700;
}
#activities-panel .colpanel-close{
  background: none; border: none; cursor: pointer;
  font-size: 22px; color: var(--color-muted-text);
}

#activities-panel .activities-body{
  padding: 12px 16px;
  overflow-y: auto;
}

/* Formularz */
.activities-form{
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
  grid-template-areas:
    "toggle toggle"
    "input  add";
  gap: 10px;
  margin-bottom: 8px;
}

/* Toggle */
.privacy-toggle{
  grid-area: toggle;
  display: inline-flex;
  border: 1px solid var(--color-table-border);
  border-radius: var(--border-radius);
  overflow: hidden;
  background: var(--color-input-bg);
}
.privacy-toggle .privacy-btn{
  border: none;
  background: transparent;
  color: var(--color-text);
  font-size: 13px;
  padding: 6px 12px;
  cursor: pointer;
  transition: background .18s ease, color .18s ease;
}
.privacy-toggle .privacy-btn:not(:last-child){
  border-right: 1px solid var(--color-table-border);
}
.privacy-toggle .privacy-btn.active{
  background: var(--color-primary);
  color: #fff;
}

/* Input */
.activity-input{
  grid-area: input;
  width: 100%;
  height: 34px;
  padding: 7px 10px;
  border: 1px solid var(--color-input-border);
  border-radius: var(--border-radius);
  background: rgba(255,255,255,0.85);
  color: var(--color-text);
  font-size: 14px;
  outline: none;
  transition: border-color .18s, box-shadow .18s, background .18s;
}
.activity-input:focus{
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(45,109,246,0.15);
  background: #fff;
}

/* Plus */
.activity-save{
  grid-area: add;
  align-self: center; /* wyrównanie pionowe */
  width: 32px; height: 34px; /* dopasowanie do input */
  border-radius: var(--border-radius);
  border: 1px solid var(--color-table-border);
  background: var(--color-toggle-bg);
  color: var(--color-text);
  font-size: 18px;
  line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background .18s, color .18s, transform .12s, box-shadow .18s;
}
.activity-save:hover{
  background: var(--color-toggle-selected);
}
.activity-save:active{
  transform: translateY(1px);
}

/* Lista */
.activities-list{
  list-style: none; margin: 0; padding: 0;
}
.activities-list li{
  padding: 10px 0;
  border-bottom: 1px dashed var(--color-table-border);
}
.activities-empty{
  margin: 6px 0 0;
  color: var(--color-muted-text);
  font-size: 13px;
  text-align: center;
}

/* Wiersz */
.activity-item{
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
  grid-template-areas:
    "status actions"
    "title actions";
  gap: 4px 10px;
  align-items: start;
}

/* Pigułki */
.visibility-pill{
  grid-area: status;
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 999px;
  border: 1px solid var(--color-table-border);
  color: var(--color-muted-text);
  white-space: nowrap;
  align-self: start;
  justify-self: start;
}
.visibility-pill.public{
  border-color: rgba(46,125,50,.35);
  color: #2e7d32; background: rgba(46,125,50,.10);
}
.visibility-pill.private{
  border-color: rgba(66,66,66,.35);
  color: #424242; background: rgba(66,66,66,.08);
}

/* Tytuł */
.activity-title-edit{
  grid-area: title;
  width: 100%;
  padding: 6px 8px;
  border: 1px solid transparent;
  border-radius: var(--border-radius);
  background: transparent;
  color: var(--color-text);
  font: inherit;

  /* widok: max 2 linie */
  min-height: calc(1.4em * 2); /* wysokość na dwie linie */
  line-height: 1.4;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
  word-break: break-word;
}
.activity-title-edit:focus{
  border-color: var(--color-input-border);
  background: var(--color-input-bg);
  -webkit-line-clamp: unset;
  overflow: visible;
  text-overflow: unset;
  min-height: unset;
}

/* Akcje */
.activity-actions{
  grid-area: actions;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.icon-btn.small{
  border: 1px solid var(--color-icon-btn-border);
  background: transparent;
  color: var(--color-icon-btn);
  width: 30px; height: 30px;
  border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background .18s, color .18s, transform .12s, box-shadow .18s;
}
.icon-btn.small i{ font-size: 18px; line-height: 0; }
.icon-btn.small:hover{
  background: var(--color-toggle-selected);
  color: var(--color-text);
  box-shadow: 0 2px 6px rgba(0,0,0,.06);
}
.icon-btn.small:active{ transform: translateY(1px); }

/* Responsywność */
@media (max-width: 1100px){
  #activities-panel{ width: 80vw; }
}













/* Ustaw stałą pozycję odniesienia dla obu widgetów */
#widgets-container { /* <- ID/klasa rodzica obu widgetów */
  position: relative;
}

/* ZMIANA: prawy widget rozciąga się między lewą krawędzią (za lewym widgetem) a prawą krawędzią strony */
:root{
  --left-widget-width: 320px; /* faktyczna szerokość lewego widgetu (MSD) */
  --gap-between-widgets: 15px; /* odstęp między kafelkami */
  --page-right-padding: 15px;  /* odstęp od prawej krawędzi */
}

/* możesz umieścić gdziekolwiek w swoim CSS */
:root{
  /* będzie nadpisane z JS */
  --wb-width: 0px;
}

:root{
  /* ustawiane przez JS */
  --important-left: 0px;   /* lewy brzeg prawego widgetu */
}

/* PRAWY WIDGET – brak width, rozciąga się między left a right */
#important-topics-widget{
  position: absolute;
  top: 250px;
  right: 15px;                 /* stały margines z prawej */
  /* left ustawia JS względem lewego widgetu */
  min-height: 390px;
  padding: 12px;
  border: 1px solid var(--color-table-border);
  border-radius: var(--border-radius);
  background: var(--color-section-bg);
  box-shadow: 0 2px 6px rgba(0,0,0,0.12);
  z-index: 4;
  box-sizing: border-box;      /* padding/border wliczone w szerokość */
  min-width: 260px;            /* opcjonalne minimum na wąsko */
  width: auto !important;      /* zabezpieczenie przed nadpisaną width */
}





#important-topics-widget .widget-title{
  font-weight: 700;
  margin-bottom: 10px;
}





/* prawa kolumna – upcoming holidays */
#important-topics-widget .topics-side{
  grid-column: 2;
  align-self: start;
}


.topic-row{
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid var(--color-table-border);
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(0,0,0,0.02), rgba(0,0,0,0.00));
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease;
}
.topic-row:hover{
  background: rgba(0,0,0,0.04);
  border-color: rgba(0,0,0,0.15);
}




.topic-title{
  font-weight: 600;
  font-size: 13px;
  /* zawijanie do 3 linii + łamanie długich słów */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  white-space: normal;
  word-break: break-word;
}

/* Donut (conic-gradient) */
.donut{
  --size: 62px;
  --thick: 10px;
  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  background:
    conic-gradient(var(--color-primary) calc(var(--p,0) * 1%), #e6eaf3 0);
  display: grid;
  place-items: center;
  position: relative;
}
.donut::after{
  content: "";
  position: absolute;
  width: calc(var(--size) - var(--thick)*2);
  height: calc(var(--size) - var(--thick)*2);
  background: var(--color-section-bg);
  border-radius: 50%;
  z-index: 0;
}
.donut-center{
  position: relative;
  font-weight: 700;
  font-size: 12px;
  color: var(--color-text);
  z-index: 1; /* tekst nad „dziurą” */
}

/* Szczegóły (lista osób TODO) */
.topic-details{
  margin: 8px 0 12px 0;
  padding: 10px;
  border: 1px dashed var(--color-table-border);
  border-radius: 10px;
  background: var(--color-input-bg);
}
.details-head{
  font-size: 12px;
  margin-bottom: 8px;
  color: #8a1c1c; /* lekko czerwone - sygnalizuje 'not completed' */
}
.details-list{
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
}
.chip{
  display: inline-flex;
  align-items: center;
  padding: 4px 8px;
  border-radius: 999px;
  font-size: 12px;
  line-height: 1.2;
  white-space: nowrap;
}
.chip--todo{
  background: #fdecea;     /* blado czerwone tło */
  color: #8a1c1c;          /* ciemniejsza czerwień dla tekstu */
  border: 1px solid #f5c2c0;
}
.details-empty{
  font-size: 12px;
  color: var(--color-muted-text);
}
.details-close{
  margin-top: 6px;
  padding: 6px 10px;
  border-radius: 8px;
  border: 1px solid var(--color-table-border);
  background: var(--color-section-bg);
  font-size: 12px;
  cursor: pointer;
}
.details-close:hover{
  background: rgba(0,0,0,0.04);
}

/* SEKCJA DOLNA: publiczne, nie–resolved */
.topics-public{
  border-top: 1px dashed var(--color-table-border);
  padding-top: 10px;
}
.topics-public-title{
  font-size: 12px;
  color: var(--color-muted-text);
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: .4px;
}
/* Dwie kolumny */
.topics-public-list{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px; /* odstęp w pionie i poziomie */
}


.public-item{
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid var(--color-table-border);
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(0,0,0,0.02), rgba(0,0,0,0.00));
}
.public-title{
  font-size: 13px;
  font-weight: 500;
  /* zawijanie do 2 linii + łamanie długich słów */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  white-space: normal;
  word-break: break-word;
}
.public-owner{
  font-size: 12px;
  color: var(--color-muted-text);
  padding: 3px 8px;
  border: 1px solid var(--color-table-border);
  border-radius: 999px;
  background: var(--color-input-bg);
}

/* Wspólne */
.topics-empty{
  font-size: 12px;
  color: var(--color-muted-text);
  text-align: center;
  padding: 10px 0;
}

/* RWD: na węższych ekranach kafelek pod tabelą (pełna szerokość) */
@media (max-width: 1100px){
  #important-topics-widget{
    position: static;
    width: 100%;
    min-height: unset;
    margin: 12px 0 0 0;
  }
}
















/* ====== LOGIN OVERLAY ====== */
#login-overlay{
  position: fixed; inset: 0;
  background: var(--color-bg);
  display: none;            /* JS steruje widocznością */
  z-index: 5000;
}
#login-overlay[aria-hidden="false"]{ display: flex; }

.login-left{ flex: 1; }
.login-right{
  flex: 1; display: flex; align-items: center; justify-content: center;
}
.login-box{
  width: 100%; max-width: 420px;
  background: var(--color-section-bg);
  border: 1px solid var(--color-table-border);
  border-radius: 16px;
  padding: 32px;
  box-shadow: 0 8px 24px rgba(0,0,0,.08);
}
.login-box h2{ margin: 0 0 18px; }
.login-label{ display:block; margin:6px 0 8px; font-weight:600; }

.login-select{
  width: 100%;
  padding: 14px 16px;
  font-size: 1.05rem;
  border-radius: 12px;
  border: 1px solid var(--color-input-border);
  background: var(--color-input-bg);
  outline: none; margin-bottom: 16px;
  transition: box-shadow .2s, border-color .2s;
  appearance: none;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="18" height="12"><path fill="%23666" d="M0 0l9 9 9-9z"/></svg>');
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 18px 12px;
}
.login-select:focus{
  border-color: var(--color-primary);
  box-shadow: 0 0 0 4px rgba(45,109,246,.15);
}
.login-btn{
  display: inline-block; width: 100%;
  padding: 14px 16px; font-size: 1rem;
  border: none; border-radius: 12px;
  background: var(--color-primary); color: #fff;
  cursor: pointer; transition: transform .05s ease-in, box-shadow .2s;
}
.login-btn:hover{ box-shadow: 0 6px 16px rgba(45,109,246,.28); }
.login-btn:active{ transform: translateY(1px); }

/* Dropdown: wariant „zalogowany” */
.user-dropdown .current-user{
  font-weight: 700;
  padding: 8px 10px;
  border-radius: var(--border-radius);
}
.user-dropdown .logout-link{
  padding: 8px 10px; cursor: pointer;
  border-radius: var(--border-radius);
}
.user-dropdown .logout-link:hover{
  background: var(--color-toggle-bg);
}










/* === Global: zablokuj natywne zaznaczanie tekstu === */
html, body, .container, .section, .navbar, #whiteboard-section, #kb-section {
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}
/* ale nadal pozwól w polach formularzy */
input, textarea, select, button, .comment-cell, .activity-title-edit, .login-select {
  -webkit-user-select: text !important;
  -moz-user-select: text !important;
  user-select: text !important;
}

/* === Excel-like selection (dla naszych tabel) === */
.table-excel-select {
  /* wyłącz natywne zaznaczanie jeszcze raz, lokalnie */
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}
.table-excel-select td, .table-excel-select th {
  position: relative;
  cursor: cell;
}
.table-excel-select thead th { cursor: pointer; }

/* zaznaczone komórki */
.excel-selected {
  outline: 2px solid var(--color-primary);
  outline-offset: -2px;
  background-image: linear-gradient(0deg, rgba(45,109,246,0.08), rgba(45,109,246,0.08));
}

/* cała kolumna */
.excel-col-selected {
  background-image: linear-gradient(0deg, rgba(45,109,246,0.12), rgba(45,109,246,0.12));
}

/* aktywny „fokus” – ostatnia komórka */
.excel-anchor::after {
  content: "";
  position: absolute;
  right: 0; bottom: 0;
  width: 6px; height: 6px;
  border-right: 2px solid var(--color-primary);
  border-bottom: 2px solid var(--color-primary);
}

/* sygnał: skopiowano */
.copy-toast {
  position: fixed;
  left: 50%; bottom: calc(var(--info-bar-height, 20px) + 12px);
  transform: translateX(-50%);
  background: var(--color-section-bg);
  color: var(--color-text);
  border: 1px solid var(--color-table-border);
  border-radius: 10px;
  padding: 8px 12px;
  font-size: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,.15);
  z-index: 5001;
  opacity: 0;
  transition: opacity .15s ease, transform .15s ease;
}
.copy-toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(-2px);
}

.login-select-wrapper {
  position: relative;
  width: 100%;
}
#login-user-search {
  width: 100%;
  padding: 14px 16px;
  font-size: 1.05rem;
  border-radius: 12px;
  border: 1px solid var(--color-input-border);
  background: var(--color-input-bg);
  outline: none;
}
#login-user-list {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: var(--color-section-bg);
  border: 1px solid var(--color-input-border);
  border-radius: 8px;
  max-height: 200px;
  overflow-y: auto;
  list-style: none;
  margin: 0;
  padding: 0;
  display: none;
  z-index: 100;
}
#login-user-list li {
  padding: 10px 14px;
  cursor: pointer;
}
#login-user-list li:hover {
  background: var(--color-toggle-bg);
}


.login-left {
  flex: 1;
  background-color: var(--color-section-bg);
  display: flex;
  align-items: center;
  justify-content: center;
}
.login-brand {
  text-align: center;
}

.login-logo {
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 80px;
  color: var(--color-primary);
}


.login-subtitle {
  display: flex;
  flex-direction: column;
  font-family: 'Poppins', sans-serif;
  font-size: 28px;
  font-weight: 500;
  color: var(--color-text);
  margin-top: 8px;
}
#login-user-search {
  width: 100%;
  padding: 10px 12px;
  margin-bottom: 10px;
  border-radius: 8px;
  border: 1px solid var(--color-input-border);
  font-size: 0.95rem;
  outline: none;
}
#login-user-search:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(45,109,246,0.15);
}











.upload-box {
  margin-top: 20px;
  padding: 16px;
  border: 1px solid var(--color-table-border);
  border-radius: var(--border-radius);
  background: var(--color-section-bg);
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}

.upload-box h4 {
  margin-top: 0;
}

.upload-result {
  margin-top: 10px;
  font-size: 14px;
  color: var(--color-muted-text);
}









/* ===== MSD widget: split 50/50 z pionowym przerywanym separatorem ===== */
#msd-widget .msd-split{
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 18px;
  position: relative;
  align-items: start;
}

/* separator pionowy jak w Important topics */
#msd-widget .msd-split::after{
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  left: 50%;
  border-left: 1px dashed var(--color-table-border);
  pointer-events: none;
}

/* prawa część – nowy mini-wykres */
#msd-widget .msd-right{
  min-width: 0;
}
#msd-widget .msd-mini-title{
  font-size: 12px;
  color: var(--color-muted-text);
  margin-bottom: 6px;
}
#msd-widget .msd-mini-chart-wrap{
  position: relative;
  height: 120px;       /* mały wykres */
  max-height: 200px;   /* bez wyłażenia poza kafelek */
  overflow: hidden;
}
#msd-mini-chart{
  display: block;
  width: 100% !important;
  height: 100% !important;
}

/* responsywka – na wąsko układ pod sobą, separator znika */
@media (max-width: 1100px){
  #msd-widget .msd-split{
    grid-template-columns: 1fr;
  }
  #msd-widget .msd-split::after{ display:none; }
  #msd-widget .msd-mini-chart-wrap{ height: 200px; }
}















/* ===================== Follow-ups (modern table) ===================== */

/* Kontener widgetu – stoi POD MSD i ma elastyczną szerokość jak prawa kolumna
   (lewy brzeg dostarczany przez JS: --msd-left albo ustawiany inline; right = 15px).
   TOP jest ustawiany w JS tuż pod #msd-widget. */
#wb-followups-widget {
  position: absolute;
  left: var(--msd-left, 0px);  /* zostanie też ustawione inline w JS */
  right: 15px;
  top: auto;                   /* faktyczna wartość nadpisywana z JS */
  box-sizing: border-box;
  min-width: 260px;
  width: auto !important;      /* szerokość automatyczna między left i right */
  margin-top: 0;               /* niepotrzebny przy position:absolute */
  z-index: 4;
}

/* Scroll wewnątrz, gdy jest dużo rekordów; zaokrąglenie i „karta” */
#wb-followups-widget .widget-body {
  padding: 0;                            /* tabela sama ma padding w komórkach */
  border-radius: 12px;
  overflow: hidden;                      /* ważne: żeby zaokrąglenie działało */
  box-shadow: 0 1px 2px rgba(0,0,0,.06);
  background: var(--color-section-bg, #fff);
  /* opcjonalny max-height: odkomentuj jeśli chcesz przewijanie pionowe
  max-height: 440px;
  overflow-y: auto;
  */
}

/* Nowoczesna tabela: mniejsza czcionka, subtelna siatka komórek */
.wb-followups-table {
  width: 100%;
  border-collapse: separate;             /* pozwala na sticky header i rogi */
  border-spacing: 0;                     /* brak przerwy */
  font-size: 0.7rem;                     /* mniejsza typografia */
  line-height: 1.35;
  font-feature-settings: "tnum" 1, "lnum" 1; /* ładniejsze cyfry w datach/nr */
}

/* Sticky header z lekkim „frostem” i cieniem */
.wb-followups-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  text-align: left;
  padding: 10px 12px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--color-muted-text, #666);
  background: color-mix(in srgb, var(--color-section-bg, #fff) 85%, #f6f6f6);
  backdrop-filter: saturate(1.2) blur(4px);
  border-bottom: 1px solid var(--color-table-border, #e6e6e6);
}

/* Zaokrąglone rogi na skrajnych komórkach nagłówka */
.wb-followups-table thead th:first-child { border-top-left-radius: 12px; }
.wb-followups-table thead th:last-child  { border-top-right-radius: 12px;  }

/* Komórki – subtelne wewnętrzne oddzielenia („kratka”), bez grubych ramek zewn. */
.wb-followups-table tbody td {
  padding: 10px 12px;
  vertical-align: middle;
  border-top: 1px solid var(--color-table-border, #eee);
  /* pionowe separatory między kolumnami */
  box-shadow: inset 1px 0 0 var(--color-table-border, #eee);
}

/* Usuń separator po pierwszej kolumnie (żeby nie było kreski przy samym brzegu) */
.wb-followups-table tbody td:first-child,
.wb-followups-table thead th:first-child {
  box-shadow: none;
}

/* Zebra + interakcja */
.wb-followups-table tbody tr:nth-child(odd)  { background: rgba(0,0,0,0.015); }
.wb-followups-table tbody tr:hover {
  background: rgba(45,109,246,0.08);
  transform: translateY(-0.5px);
  transition: background .15s ease, transform .12s ease;
}

/* Wyrównania i drobne detale */
.wb-followups-table td:nth-last-child(2) { white-space: nowrap; }    /* Target Date */
.wb-followups-table td:last-child        { color: var(--color-muted-text, #6a6a6a); text-align: right; } /* Time */

.wb-followups-empty {
  padding: 12px 14px;
  font-size: 0.88rem;
  color: var(--color-muted-text, #6a6a6a);
}

/* Responsywność: na wąskich ekranach Follow-ups zachowuje się jak zwykły blok */
@media (max-width: 1100px) {
  #wb-followups-widget {
    position: static;
    width: 100% !important;
    margin-top: 10px;
  }
}

/* Responsywność: poziomy scroll gdy bardzo wąsko */
@media (max-width: 920px) {
  #wb-followups-widget .widget-body { overflow-x: auto; }
  .wb-followups-table { min-width: 680px; }
}







/* === MSD: 3 pigułki o identycznej szerokości i wysokości === */
#msd-pills{
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* trzy równe kolumny */
  gap: 8px;
  width: 100%;
  margin-top: 6px;
  align-items: stretch;                  /* elementy rozciągają się na pełną wysokość wiersza */
}

/* Wyrównanie napisu na środku, identyczna wysokość; nie ruszamy kolorów/stylu .whiteboard-pill */
#msd-pills .whiteboard-pill{
  display: flex;                         /* tylko dla ułożenia treści */
  align-items: center;                   /* pionowe wyśrodkowanie */
  justify-content: center;               /* poziome wyśrodkowanie */
  text-align: center;
  white-space: nowrap;                   /* unikamy zawijania (różne długości: Overdue/Today/Tomorrow) */
  min-height: 20px;                      /* stała, wspólna wysokość */
  height: 100%;                          /* wypełnij całą wysokość „kafelka” */
  line-height: 1;                        /* spójny środek tekstu */
  /* brak zmian tła, obramowania itp. — pochodzą z Twojej klasy .whiteboard-pill/.warning/.overdue */
}








/* ===== Upcoming Holidays (inline) ===== */
#upcoming-holidays-inline {
  margin-top: 14px;
}

#upcoming-holidays-inline .topics-public-title{
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Pojedyncza grupa tygodniowa */
.uh-group{
  background: var(--color-section-bg, #fff);
  border: 1px solid var(--color-table-border, #e8e8e8);
  border-radius: 12px;
  padding: 10px 12px;
  margin-top: 10px;
  box-shadow: 0 1px 2px rgba(0,0,0,.05);
}

.uh-group-title{
  font-size: 0.78rem;
  letter-spacing: .04em;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--color-muted-text, #6a6a6a);
  margin-bottom: 6px;
}

.uh-group-line{
  font-size: 0.95rem;
  line-height: 1.35;
}

/* Wyróżnienie dni w nawiasach */
.uh-days{
  color: var(--color-muted-text, #6a6a6a);
  font-size: 0.92rem;
}


.uh-chip{
  display:inline-flex; align-items:center; gap:6px;
  padding:6px 10px; border-radius:999px;
  background: rgba(45,109,246,.06);
}








/* === Smukły, nowoczesny Group picker === */
.group-picker {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px;
  border-radius: 12px;
  background: var(--color-section-bg, #fff);
  border: 1px solid #e5e7eb;
  max-width: 320px;    /* <= węższy kontener */
}

.group-picker-top {
  display: flex;
  align-items: center;
  gap: 6px;
}

#group-search {
  flex: 1;
  padding: 6px 10px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  background: #fafafa;
  font-size: 0.85rem;
  margin-bottom: 5px;
}
#group-search:focus {
  border-color: var(--color-primary, #2563eb);
  outline: none;
  box-shadow: 0 0 0 2px rgba(37,99,235,0.1);
}

/* nowoczesne lekkie kapsułki */
.group-actions {
  display: flex;
  gap: 4px;
}
.pill-btn {
  border: none;
  background: transparent;
  color: var(--color-primary, #2563eb);
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 0.7rem;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.pill-btn:hover {
  background: rgba(37,99,235,0.08);
}
.pill-btn:active {
  background: rgba(37,99,235,0.15);
}

/* lista użytkowników jako schludne tagi */
.group-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 6px;
  max-height: 140px;
  overflow-y: auto;
}

.user-chip {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  border: 1px solid #e5e7eb;
  border-radius: 999px;
  background: #f9fafb;
  cursor: pointer;
  font-size: 0.8rem;
  transition: all 0.2s;
}
.user-chip:hover {
  background: #f3f4f6;
}
.user-chip.selected {
  border-color: var(--color-primary, #2563eb);
  background: rgba(37,99,235,0.1);
}

/* wybrane osoby jako małe kapsułki */
.group-selected {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  min-height: 22px;
  padding-top: 2px;
}

.sel-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  background: var(--color-primary, #2563eb);
  color: #fff;
  border-radius: 999px;
  font-size: 0.75rem;
}
.sel-pill .x {
  cursor: pointer;
  font-weight: 600;
  opacity: .8;
  margin-left: 2px;
}
.sel-pill .x:hover { opacity: 1; }












/* ===== Announcements (prawa kolumna w Important topics) ===== */
#announcements { margin-bottom: 12px; }

.annc-carousel { 
  position: relative;
  border: 1px solid var(--color-table-border);
  border-radius: 10px;
  padding: 8px 8px 10px;
  background: var(--color-section-bg);
}

.annc-viewport {
  max-height: 220px;           /* współgra z MAX_VIEWPORT_PX w JS */
  overflow: hidden;            /* bez scrolla – paginujemy */
  display: grid;
  gap: 8px;
}

.annc-item {
  font-size: 13px;
  color: var(--color-muted-text);
  line-height: 1.35;
  background: linear-gradient(180deg, rgba(0,0,0,0.02), rgba(0,0,0,0.00));
  padding: 8px 10px;
  border-radius: 8px;
  border-left: 3px solid #cfcfcf;   /* „cytatowa” kreska po lewej */
  word-break: break-word;
}

.annc-empty {
  font-size: 12px;
  color: var(--color-muted-text);
  padding: 6px 8px;
  text-align: center;
}

/* Nawigacja: strzałki i kropki */
.annc-nav {
  margin-top: 8px;
  display: grid;
  grid-template-columns: 24px 1fr 24px;
  align-items: center;
  gap: 6px;
}

.annc-arrow {
  background: transparent;
  border: 1px solid var(--color-icon-btn-border);
  color: var(--color-icon-btn);
  width: 28px;
  height: 28px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background .18s, color .18s, box-shadow .18s;
}
.annc-arrow:hover { background: var(--color-toggle-selected); color: var(--color-text); }
.annc-arrow:disabled { opacity: .45; cursor: default; }

.annc-dots {
  display: flex;
  justify-content: center;
  gap: 6px;
}

.annc-dot {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  border: 1px solid var(--color-muted-text);
  background: transparent;
  padding: 0;
  cursor: pointer;
  transition: transform .12s;
}
.annc-dot:hover { transform: scale(1.15); }
.annc-dot.active {
  background: var(--color-muted-text);
}




















/* Odstęp między wierszami po lewej, żeby nic nie nachodziło */
#topics-groups-block .topic-row{ 
  margin-bottom:8px;
}

/* Prawa kolumna nie łamie layoutu */
#important-topics-widget .topics-side{ 
  min-width:0;
}

/* Slider — używamy zmiennej z JS na maksymalną wysokość */
#announcements .annc-carousel{ overflow:hidden; }
#announcements .annc-viewport{
  display:grid;
  gap:8px;
  overflow:hidden;
  max-height: var(--annc-max-h, 220px); /* domyślnie 220px, JS ustawi realny limit */
}






/* GROUP ACTIVITIES jako siatka: do 3 kafelków w wierszu,
   a gdy jest 1–2, elementy rozszerzają się do szerokości widgetu */
.topics-groups{
  display: grid;
  grid-template-columns: repeat(3, minmax(220px, 1fr));
  gap: 10px;
  margin-bottom: 12px;
  position: relative;
}

/* .topic-details niech rozwija się na całą szerokość siatki */
#important-topics-widget .topic-details{
  grid-column: 1 / -1;
}

/* RWD: zwężaj liczbę kolumn gdy mniej miejsca */
@media (max-width: 1200px){
  .topics-groups{ grid-template-columns: repeat(2, minmax(220px, 1fr)); }
}
@media (max-width: 700px){
  .topics-groups{ grid-template-columns: 1fr; }
}

/* Usuń stary pionowy separator (był częścią poprzedniego podziału) */
.topics-groups::after{ content: none !important; }




/* ANNOUNCEMENTS — zwykły tekst */
#announcements-plain{
  font-size: 13px;
  line-height: 1.35;
  color: var(--color-muted-text);
  padding: 2px 0;
  min-height: 1em;       /* żeby nie „skakało” gdy pusto */
  margin-bottom 10px;
}

/* całkowicie zdejmujemy stare wizualne elementy karuzeli, gdyby gdzieś pozostały */
#announcements, 
#announcements .annc-carousel,
#announcements .annc-nav,
#annc-dots, #annc-prev, #annc-next { display: none !important; }













/* blok detali (jeśli używasz .topic-details) — pełna szerokość pod kafelkami */
body #whiteboard-section #important-topics-widget .topic-details{
  grid-column: auto !important;
  flex: 1 1 100% !important;
}

/* schowaj STARĄ prawą kolumnę (by nie rezerwowała miejsca) */
body #whiteboard-section #important-topics-widget .topics-side,
body #whiteboard-section #important-topics-widget #announcements,
body #whiteboard-section #important-topics-widget .annc-carousel,
body #whiteboard-section #important-topics-widget .annc-nav,
body #whiteboard-section #important-topics-widget #annc-dots,
body #whiteboard-section #important-topics-widget #annc-prev,
body #whiteboard-section #important-topics-widget #annc-next{
  display: none !important;
}

/* RWD: 2 w rzędzie na średnich szerokościach, 1 na wąskich */
@media (max-width: 1200px){
  body #whiteboard-section #important-topics-widget .topic-row{
    flex-basis: calc(50% - 10px) !important;
  }
}
@media (max-width: 700px){
  body #whiteboard-section #important-topics-widget .topic-row{
    flex-basis: 100% !important;
    min-width: 0 !important;
  }
}

/* (opcjonalnie) styl tekstowych ogłoszeń, jeśli już je dodasz w HTML jako #announcements-plain */
#announcements-plain{
  font-size: 13px; line-height: 1.35; color: var(--color-muted-text);
  padding: 2px 0; min-height: 1em;
}





/* --- Important Topics: spacing + people toggle --- */
#important-topics-widget .topics-groups{
  gap: 12px !important;            /* mały odstęp między kafelkami */
  margin-bottom: 12px !important;
}

#important-topics-widget .topic-row{
  margin: 0 !important;
  box-sizing: border-box !important;
}

#important-topics-widget .topic-details{
  flex: 1 1 100% !important;       /* pełna szerokość pod kafelkami */
  margin-top: 6px;                 /* oddech pod rzędami kafelków */
}

#important-topics-widget .topic-people{
  margin-top: 6px;
  font-size: 13px;
  line-height: 1.4;
}

#important-topics-widget .topic-people-toggle{
  border: none;
  background: none;
  padding: 0;
  cursor: pointer;
  color: var(--color-link, #2b6cb0);
  text-decoration: underline;
  font: inherit;
}

#important-topics-widget .topic-people-list{
  margin: 6px 0 0 0;
  padding-left: 18px;
}





/* Separator w parach (ARS, IMPACT) */
.wb-sep {
  color: #999;      /* jasnoszary */
  opacity: 0.7;     /* lekko przezroczysty */
  font-weight: normal;
}











/* === Upcoming Holidays – czytelne pigułki === */
.upcoming-holidays-list{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}

.holiday-chip{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:4px 10px;
  border:1px solid var(--color-table-border);
  border-radius:999px;
  background: var(--color-toggle-selected);
  color: var(--color-text);
  line-height:1.2;
  box-shadow: 0 1px 2px rgba(0,0,0,.04);
}

.holiday-chip .avatar{
  width:20px; height:20px;
  border-radius:50%;
  background: var(--color-primary);
  color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-weight:700; font-size:11px;
  letter-spacing:.5px;
}

.holiday-chip .name{ font-weight:600; }
.holiday-chip .date{ font-size:12px; color: var(--color-muted-text); }
.holiday-chip .days{
  font-size:11px;
  padding:2px 6px;
  border-radius:999px;
  background: var(--color-bg);
  border:1px solid var(--color-table-border);
}

/* stany: przeszłość / dziś-w-trakcie / nadchodzące */
.holiday-chip.past{
  opacity:.6;
  filter: grayscale(.1);
}

.holiday-chip.current{
  border-color:#2e7d32;
  box-shadow: inset 0 0 0 1px rgba(46,125,50,.25);
}

.holiday-chip.upcoming{
  /* default look – zostaje */
}

/* drobny oddech pod tytułem sekcji */
#upcoming-holidays-inline .topics-public-title{
  margin-bottom:6px;
}











/* KB: badge + icons */
.kb-card-type {
display:inline-flex; align-items:center; gap:6px;
font-size:12px; padding:2px 6px; border-radius:999px;
border:1px solid var(--color-table-border); color:var(--color-muted-text);
}
.kb-card-type.link { background: rgba(45,109,246,.06); }
.kb-card-type.article { background: rgba(0,0,0,.05); }
.kb-icon { font-family: 'Material Icons'; font-style: normal; font-weight: normal; }

/* KB: article body keeps line breaks & paragraphs */
.kb-article-body { white-space: pre-wrap; line-height: 1.5; }

/* KB: empty state */
#kb-empty {
text-align:center; color: var(--color-muted-text); padding: 24px 6px;
}
#kb-empty .hint { margin-top: 8px; font-size: 0.95em; }

/* Small select for modal */
#kb-add-modal select#kb-type { width:100%; padding:8px; margin-bottom:12px; }

/* Request Study button next to + */
#kb-request-btn,
#kb-add-btn {
  background:#fff;
  color: var(--color-primary);
  border:1px solid var(--color-primary);
  padding: 10px 12px;
  border-radius: var(--border-radius);
  cursor: pointer;
  font-weight:600;
}

#kb-request-btn:hover,
#kb-add-btn:hover {
  background: rgba(45,109,246,.08);
}






/* Kafel KB: miejsce na badge u góry i na ikonę po prawej */
.kb-card {
  position: relative;
  padding: 28px 44px 12px 12px; /* 28px u góry na badge, 44px z prawej na ikonę */
  box-sizing: border-box;
}

/* Zapas po prawej także wewnątrz contentu */
.kb-card-content {
  padding-right: 36px;
}

/* Prawa ikonka – pozycjonowanie stałe */
.kb-card .kb-card-link {
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  text-decoration: none;
}

/* Mały, mocno zaokrąglony badge typu, zawsze w tym samym miejscu */
.kb-card-type {
  position: absolute;
  top: 12px;            /* niżej niż 6px, żeby nie nachodził */
  left: 10px;
  font-size: 8px;       /* mniejszy tekst */
  font-weight: 600;
  color: #333;
  background: #eee;
  border-radius: 999px; /* „pill” */
  padding: 1px 6px;     /* cieńszy padding */
  display: inline-flex;
  align-items: center;
  gap: 3px;
  line-height: 1;
  pointer-events: none; /* nie blokuje kliku w kafelek */
}

.kb-card-type i {
  font-size: 11px;      /* mniejsza ikonka */
}

/* Drobny margines pod tytułem, żeby oddzielić od komentarza */
.kb-card-title {
  margin-top: 6px;
  margin-bottom: 4px;
}

/* Komentarz: dokładnie 2 linie widoczne (line-clamp) */
.kb-card-comment.two-lines {
  display: -webkit-box;
  -webkit-line-clamp: 2;      /* liczba linii */
  -webkit-box-orient: vertical;
  overflow: hidden;
  white-space: normal;
}

/* (opcjonalnie) różne tła dla typów */
.kb-card-type.link {
  background: rgba(45,109,246,.10);
}
.kb-card-type.article {
  background: rgba(0,0,0,.08);
}








/* Upcoming Holidays — kolory stanów (wymuszone) */
#upcoming-holidays-inline .holiday-chip.past{
  background:#e6f4ea !important;
  border-color:#1e8e3e !important;
}
#upcoming-holidays-inline .holiday-chip.current{
  background:#fff7e0 !important;
  border-color:#f1b000 !important;
}
#upcoming-holidays-inline .holiday-chip.upcoming{
  background: var(--color-toggle-selected) !important; /* białe jak dotąd */
  border-color: var(--color-table-border) !important;
}







/* === Announcements jako kafelki === */
.announcement-card{
  grid-template-columns: 1fr !important; /* brak prawej kolumny (donut / licznik) */
  cursor: default;                        /* to informacja, nie przycisk */
}

/* więcej miejsca na treść ogłoszeń */
.announcement-card .announcement-text{
  /* domyślnie .topic-title ma clamp: 3; tu zwiększamy */
  -webkit-line-clamp: 8;
  line-clamp: 8;
  font-size: 13px;
  line-height: 1.35;
  word-break: break-word;
}

/* jeżeli gdzieś zostanie #announcements-plain, ukryj go globalnie */
#announcements-plain{ display: none !important; }






/* separator przed IMPACT (2. kolumną) */
#whiteboard-table.dataTable thead th:nth-child(2),
#whiteboard-table.dataTable tbody td:nth-child(2),
#whiteboard-table.dataTable tfoot th:nth-child(2) {
  border-left: 2px solid #e1e1e1;
  padding-left: 16px;
}


/* separator przed Discovery (3. kolumną) */
#whiteboard-table.dataTable thead th:nth-child(3),
#whiteboard-table.dataTable tbody td:nth-child(3),
#whiteboard-table.dataTable tfoot th:nth-child(3) {
  border-left: 2px solid #e1e1e1;
  padding-left: 16px;
}

/* separator przed Legacy (4. kolumną) */
#whiteboard-table.dataTable thead th:nth-child(4),
#whiteboard-table.dataTable tbody td:nth-child(4),
#whiteboard-table.dataTable tfoot th:nth-child(4) {
  border-left: 2px solid #e1e1e1;
  padding-left: 16px;
}

/* separator przed POD (5. kolumną) */
#whiteboard-table.dataTable thead th:nth-child(5),
#whiteboard-table.dataTable tbody td:nth-child(5),
#whiteboard-table.dataTable tfoot th:nth-child(5) {
  border-left: 2px solid #e1e1e1;
  padding-left: 16px;
}

/* separator przed IMPACT (6. kolumną) */
#whiteboard-table.dataTable thead th:nth-child(6),
#whiteboard-table.dataTable tbody td:nth-child(6),
#whiteboard-table.dataTable tfoot th:nth-child(6) {
  border-left: 2px solid #e1e1e1;
  padding-left: 16px;
}






/* Announcements: jeszcze mniejsze odstępy */
#whiteboard-section #important-topics-widget #announcements-cards {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  column-gap: 8px !important;
  row-gap: 8px !important;
  margin-bottom: 8px !important;
}

/* Group activities: wymuszone 2 kolumny */
#whiteboard-section #important-topics-widget #important-topics-groups {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  column-gap: 8px !important;
  row-gap: 8px !important;
}

/* Bezpośrednie dzieci w grupach NIE mogą mieć grid-column:1 */
#whiteboard-section #important-topics-widget #important-topics-groups > .topic-row,
#whiteboard-section #important-topics-widget #important-topics-groups > .topic-details {
  grid-column: auto !important;
  width: auto !important;
  max-width: 100% !important;
}





#login-password {
  width: 100%;
  padding: 8px;
  margin: 10px 0 16px 0;
  border: 1px solid var(--color-input-border);
  border-radius: var(--border-radius);
  background: var(--color-input-bg);
  color: var(--color-text);
  font-size: 14px;
  font-family: inherit;
}










#msd-legend {
  margin-top: 4px;
  font-size: 10px;
  line-height: 1.2;
  max-height: 60px;      /* nadal ograniczamy wysokość */
  white-space: normal;   /* zawijanie wierszy */
  word-wrap: break-word; /* łamanie długich wyrazów */
  overflow: hidden;      /* nic nie wychodzi na zewnątrz */
  width: 100%;           /* dopasowanie do szerokości kafelka */
  box-sizing: border-box;
}




#other-activities-widget {
  margin-top: 20px;
}





/* FINAL: 2 kolumny w obu sekcjach + neutralizacja kolumny 1 */
#whiteboard-section #important-topics-widget #announcements-cards,
#whiteboard-section #important-topics-widget #important-topics-groups{
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  column-gap: 16px !important;
  row-gap: 16px !important;
  margin-bottom: 12px !important;
}

#whiteboard-section #important-topics-widget #announcements-cards > .topic-row,
#whiteboard-section #important-topics-widget #announcements-cards > .topic-details,
#whiteboard-section #important-topics-widget #important-topics-groups > .topic-row,
#whiteboard-section #important-topics-widget #important-topics-groups > .topic-details{
  grid-column: auto !important;
  width: auto !important;
  max-width: 100% !important;
  min-width: 0 !important; /* anty-konflikt z dawnym min-width:220px */
  margin: 0 !important;
}









/* Announcements: podświetlenie wg PRIORITY */
.announcement-card.prio-1{
  border-left: 4px solid #c62828;
  background: rgba(198, 40, 40, 0.12);
}
.announcement-card.prio-2{
  border-left: 4px solid #f1b000;
  background: rgba(241, 176, 0, 0.12);
}
/* prio-3 = brak zmian */










/* --- Wymuś identyczny 2-kolumnowy grid dla obu list --- */
#whiteboard-section #important-topics-widget #announcements-cards,
#whiteboard-section #important-topics-widget #important-topics-groups{
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  column-gap: 16px !important;
  row-gap: 16px !important;
  margin-bottom: 12px !important;
}

/* --- KLUCZOWA ZMIANA: bez '>' — działa także, gdy JS dodał wrapper --- */
#whiteboard-section #important-topics-widget #announcements-cards .topic-row,
#whiteboard-section #important-topics-widget #announcements-cards .topic-details,
#whiteboard-section #important-topics-widget #important-topics-groups .topic-row,
#whiteboard-section #important-topics-widget #important-topics-groups .topic-details{
  grid-column: auto !important;   /* neutralizuje pełną szerokość */
  width: auto !important;
  max-width: 100% !important;
  min-width: 0 !important;        /* gasi stare min-width itp. */
  margin: 0 !important;
  flex: 0 1 auto !important;       /* gdyby gdzieś jeszcze był display:flex */
}














/* === Important Topics i Announcements: zawsze 2 kolumny === */
#whiteboard-section #important-topics-widget #important-topics-groups,
#whiteboard-section #important-topics-widget #announcements-cards {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  grid-auto-flow: row dense;           /* wypełnia ewentualne „dziury” */
  gap: 12px !important;
  margin-bottom: 12px !important;
}

/* Każde dziecko to normalny kafelek (nie pełna szerokość) */
#whiteboard-section #important-topics-widget #important-topics-groups > *,
#whiteboard-section #important-topics-widget #announcements-cards > * {
  grid-column: auto !important;
  width: auto !important;
  max-width: 100% !important;
  min-width: 0 !important;             /* gasi stare min-width:220px itp. */
  margin: 0 !important;
  flex: 0 1 auto !important;           /* gdyby coś nadal było flexem */
}

/* Jeśli chcesz, by detale ZAWSZE były pod kafelkami na całą szerokość – ODkomentuj: */
/* #whiteboard-section #important-topics-widget .topic-details { grid-column: 1 / -1 !important; } */











/* === WB SUPERHEADER (compact) === */
#wb-superheader{
  display:flex;
  flex-direction:column;
  width:100%;
  margin:0;
  margin-bottom:12px; /* space between capsules and whiteboard */
}
#wb-superheader .wb-superline{
  display:flex;
  align-items:baseline;
  gap:6px;
  font-weight:700;
}
#wb-superheader .widget-title{ font-weight:700; }
#wb-superheader .widget-inline-msg{ font-weight:400; font-size:.9em; color:var(--color-muted-text); }
#wb-superheader .widget-inline-msg:not(:empty)::before{ content:" — "; color:var(--color-muted-text); font-weight:400; }

.wb-caps{
  display:inline-flex;
  gap:6px;
  margin-top:2px;
}

.wk-capsule{
  display:inline-flex; align-items:center; gap:4px;
  padding:2px 6px; border:1px solid var(--color-table-border);
  border-radius:999px; background:var(--color-toggle-selected);
  color:var(--color-text); font-size:11px; line-height:1.1;
  box-shadow:0 1px 2px rgba(0,0,0,.03); white-space:nowrap;
}
.wk-capsule .wk-label{ font-weight:600; letter-spacing:.2px; }
.wk-capsule .wk-sep{ opacity:.5; }

/* Tag text rendered inline (no pills) to be ultra-compact */
.wk-tags{ font-weight:600; opacity:.85; font-size:10.5px; }

/* Hide original title inside the whiteboard widget; remove top margin */
#wb-widget > .widget-title{ display:none !important; }
#wb-widget{ margin-top:0 !important; }


/* NEW: TYPE pills */
.visibility-pill.group{
  border-color: rgba(25,118,210,.35);
  color: #1976d2; background: rgba(25,118,210,.10);
}
.visibility-pill.announcement{
  border-color: rgba(172,64,255,.35);
  color: #7b1fa2; background: rgba(123,31,162,.10);
}


/* smaller font for titles */
.activity-title-edit{ font-size: 13px; }


/* Announcements: inline controls */
.announcement-controls{
  display:flex; align-items:center; gap:6px;
}
.announcement-prio{
  border: 1px solid var(--color-input-border);
  background: var(--color-input-bg);
  border-radius: 8px;
  padding: 3px 6px;
  font-size: 12px;
}

/* =========================================================
   CAPS INLINE FIX (WKXX obok inline messages)
   ========================================================= */
#wb-superheader {
  margin-bottom: 10px; /* odstęp od kolejnego widgetu */
}

.wb-superline {
  display: flex;
  align-items: flex-end;  /* wyrównanie tekstu i kapsułek przy dolnej krawędzi */
  flex-wrap: wrap;        /* w razie małego ekranu złamie linię */
  gap: 12px;              /* odstęp między elementami */
}

#wb-caps {
  display: flex;
  gap: 8px;
}

.wk-capsule {
  background: var(--color-section-bg);
  border: 1px solid var(--color-table-border);
  border-radius: 12px;
  padding: 2px 8px;
  font-size: 13px;
  color: var(--color-text);
  display: inline-flex;
  align-items: center;
}

/* ===== CAPS INLINE (WKXX) — układ obok inline messages + odstęp od widgetu ===== */
#wb-superheader{
  margin-bottom: 12px; /* bezpieczny odstęp nad widgetem whiteboard */
}

.wb-superline{
  display: flex;
  align-items: flex-end; /* wyrównanie tekstu i kapsułek przy dolnej krawędzi */
  flex-wrap: wrap;       /* na wąskich ekranach złamie linię elegancko */
  gap: 12px;
}

#wb-caps{
  display: flex;
  gap: 8px;
}

.wk-capsule{
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 12px;
  border: 1px solid var(--color-table-border);
  background: var(--color-section-bg);
  color: var(--color-text);
  font-size: 13px;
}

.wk-capsule .wk-sep{
  margin: 0 4px;
  opacity: .6;
}
/* ===== END CAPS INLINE ===== */

/* ===== CAPS INLINE TEXT FIX — ujednolicenie tekstów w kapsułkach ===== */
.wk-capsule .wk-label,
.wk-capsule .wk-week,
.wk-capsule .wk-tags {
  font-size: 0.95em;          /* lekko mniejsze, spójne */
  font-weight: 500;           /* półpogrubione */
  line-height: 1.2;
  vertical-align: middle;
  font-variant-numeric: tabular-nums; /* cyfry o tej samej wysokości i szerokości */
}
/* ===== END CAPS INLINE TEXT FIX ===== */

/* ===== CAPS INLINE SEPARATOR SINGLE EM DASH — wydłużony pojedynczy myślnik ===== */
#wb-inline-msg-global::after {
  content: "—"; /* pojedynczy em dash */
  color: var(--color-muted-text);
  font-weight: 300;
  margin: 0 3px;      /* małe marginesy */
  letter-spacing: 4px; /* optyczne wydłużenie kreski */
}
/* ===== END CAPS INLINE SEPARATOR SINGLE EM DASH ===== */






/* SOFT CHARS: dropdown STATUS */
select.soft-status {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  border: none;
  background: transparent;
  width: 100%;
  padding: 0 20px 0 4px;
  margin: 0;
  font: inherit;
  color: inherit;
  line-height: inherit;
  outline: none;
  border-radius: 0;
  cursor: pointer;
  text-align: center;
  text-align-last: center;
  background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" width="8" height="6"><path fill="%23666" d="M0 0l4 4 4-4z"/></svg>');
  background-repeat: no-repeat;
  background-position: right 6px center;
  background-size: 8px 6px;
}






.widget-subtitle {
  font-weight: bold;
  text-align: left;       /* brak wyśrodkowania */
  color: #000;            /* czarny */
  margin-bottom: 12px;    /* większy odstęp pod napisem */
  margin-top: 2px;        /* mały odstęp od góry */
  text-transform: uppercase; /* wielkie litery */
}



.chart-block-right {
  border-left: 2px dashed var(--color-table-border);
  padding-left: 16px;
}






#pending-caps .caps-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 80px;
  font-size: 12px;
  color: #1b7a1b;
  font-weight: 600;
  text-align: center;
}