/* Reports Manager — refined visual theme */
:root{
  --background: #f4f4f4;
  --panel: #ffffff;
  --muted: #6b7280;
  --text: #434343;
  --accent: #858585; /* primary accent */
  --soft: #f3f3f3;
  --border: #bcbcbc;
  --shadow: 0 6px 20px rgba(11,38,73,0.06);
}

/* Reset & base */
html,body{font-family:Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;background:var(--background);color:var(--text); overflow:hidden;}

/* Sidebar container */
#sidebar{height:100vh;border-right:1px solid var(--border);background:var(--panel);transition:width .28s ease,transform .28s ease;overflow:visible;padding:0;position:relative;}
/*#sidebar::-webkit-scrollbar{width:10px}*/
/*#sidebar::-webkit-scrollbar-thumb{background:linear-gradient(180deg,#e0e7ff,#cfd8ff);border-radius:10px}*/

/* Collapsed state */
#sidebar.collapsed{width:72px;min-width:72px;padding:12px}
#sidebar.collapsed .nav-link{padding-left:0;padding-right:0}
#sidebar.collapsed .folder-text{display:none}
#sidebar .selected-report{display:none}
#sidebar .selected-report{display:none}

/* Folder list */
#folder-list {
  padding: 0;
  margin: 0;
  list-style: none;
}
#folder-list > li {
  margin: 0;
  padding: 0;
}
#folder-list .nav-item {
  width: 100%;
}

/* Folder link: wyraźna ikona folderu, strzałka, spacing */
.folder-link {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 14px;
  font-weight: 600;
  color: var(--text);
  background: none;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.13s, color 0.13s;
  position: relative;
  font-size: 1rem;
}
.folder-link .bi-folder {
  color: var(--accent);
  font-size: 1.2em;
}
.folder-link .bi-chevron-right,
.folder-link .bi-chevron-down {
  color: var(--muted);
  font-size: 1.1em;
  margin-left: auto;
  transition: transform 0.18s;
}
.folder-link.active, .folder-link:focus {
  background: var(--soft);
  color: var(--accent);
  outline: none;
}
.folder-link:hover {
  background: var(--soft);
  color: var(--accent);
}

/* Plik: inna ikona, bez strzałki */
.file-link {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 14px;
  font-weight: 500;
  color: var(--text);
  background: none;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-size: 1rem;
  transition: background 0.13s, color 0.13s;
  text-decoration: none;
}
.file-link .bi-file-earmark-text {
  font-size: 1.1em;
}
.file-link.active, .file-link:focus {
  background: var(--soft);
  color: var(--accent);
  outline: none;
}
.file-link:hover {
  background: var(--soft);
  color: var(--accent);
}

/* Subfolder list: animacja rozwijania, mniejsze wcięcia */
.subfolder-list {
  max-height: 0;
  overflow: hidden;
  transition: max-height 260ms cubic-bezier(.4,0,.2,1);
  margin: 0;
  padding-left: 8px;
  border-left: 2px solid var(--soft);
  background: none;
}
.subfolder-list.expanded {
  max-height: 2000px;
}
.subfolder-list > li {
  margin: 0;
  padding: 0;
}

/* Usuwam stare gradienty i cienie z hover/active */
#folder-list .nav-link.folder-link:hover,
#folder-list .nav-link.folder-link.active,
#folder-list .nav-link.folder-link:focus {
  box-shadow: none;
  background: var(--soft);
  color: var(--accent);
}
/* Sidebar toggle button (flat) */
.sidebar-toggle{cursor:pointer;border:0;background:transparent;font-size:1.1rem;color:var(--muted);display:flex;align-items:center;gap:6px}
.sidebar-toggle i{display:inline-flex;border-radius:8px;padding:6px;background:transparent;box-shadow:0 3px 10px rgba(11,38,73,0.03);border:1px solid rgba(11,38,73,0.02);color:var(--text)}


/* iframe styling (flat) */
#report-frame{width:100%;height:100vh;border:none;background:var(--background);overflow:hidden}

/* helpers */
.hide_on_mobile{display:inline-block}
.badge-soft{background:#f5f8ff;color:var(--accent);border-radius:999px;padding:.25rem .5rem;font-weight:700;font-size:.85rem;border:1px solid rgba(11,102,255,0.06)}
#folder-list .nav-link.folder-link:focus{outline:3px solid rgba(11,102,255,0.12);outline-offset:3px}

/* CSS-only toggle behavior using #cssSidebarToggle (checkbox) */
#cssSidebarToggle{display:none}
#sidebar-backdrop{display:none}

/* Guzik menu obok logo na mobile */
#cssToggleMobile {
  display: none;
  align-items: center;
  font-size: 2rem;
  margin-left: 12px;
  background: none;
  border: none;
  color: var(--muted);
  cursor: pointer;
}

.sidebar-toggle-tablet {
  position: absolute;
  right: -35px;
  width: 35px;
  top: 22px;
  z-index: 1200;
  background: var(--panel);
  border-radius: 0 10px 10px 0;
  border: 1px solid var(--border);
  border-left: none;
  color: var(--muted);
  cursor: pointer;
  font-size: 1.5rem;
  display: none;
  align-items: center;
  transition: right 0.2s;
}

/* End */
.container-fluid > .row {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  height: 100vh;
}
#sidebar {
  position: relative;
  width: 300px;
  flex: 0 0 300px;
  max-width: 300px;
  height: 100%;
}
main {
  flex: 1 1 0%;
  width: auto !important;
  height: 100% !important;
  min-width: 0;
  padding: 0 !important;
}

/* Mobile */
@media (max-width: 767.98px){
  #sidebar{
    position:relative;
    height:auto;
    width:100% !important;
    max-width:100% !important;
    padding:.5rem 1rem;
    border-right:none;
    border-bottom:1px solid var(--border);
    flex: 0 0 auto;
    max-height: calc(100vh - 72px);
    margin: 0 auto;
  }
  #sidebar.open{box-shadow:none}
  #sidebar .selected-report{display:flex;align-items:center;gap:8px;padding:.4rem 0;font-weight:600;color:var(--text)}

  .container-fluid > .row {
    flex-direction: column;
    height: auto;
    align-items: center;
  }
  main {
    width: 100vw !important;
    height: calc(100vh - 72px - 64px) !important;
  }

  #report-frame{height:calc(100vh - 72px - 64px);}

  #cssToggleMobile {
    display: flex;
  }
  /* default: show selected-report, hide folder-list */
  .container-fluid .row #sidebar .selected-report{display:flex}
  .container-fluid .row #sidebar #folder-list{display:none}
  /* when checkbox checked: show folder-list and hide selected-report */
  #cssSidebarToggle:checked ~ .container-fluid .row #sidebar #folder-list{display:block}
  #cssSidebarToggle:checked ~ .container-fluid .row #sidebar .selected-report{display:none}

  #cssSidebarToggle:checked ~ .container-fluid .row #sidebar #folder-list{display:block !important}
  #cssSidebarToggle ~ .container-fluid .row #sidebar #folder-list{display:none !important}
  #cssSidebarToggle:checked ~ .container-fluid .row #sidebar .selected-report{display:none !important}
  #cssSidebarToggle ~ .container-fluid .row #sidebar .selected-report{display:flex !important}

  .container-fluid > .row {
    flex-direction: column;
    height: auto;
  }
}

/* Tablet */
@media (min-width:768px) and (max-width:991.98px){
  #cssSidebarToggle:checked ~ .container-fluid .row #sidebar{transform:translateX(0) !important}
  #cssSidebarToggle ~ .container-fluid .row #sidebar{transform:translateX(-100%) !important}
  #cssSidebarToggle:checked ~ #sidebar-backdrop{display:block !important}
  #cssSidebarToggle ~ #sidebar-backdrop{display:none !important}
  main{width:100vw !important;}
  #cssSidebarToggle {
    position: absolute;
    top: 16px;
    right: 30px;
    background: var(--panel);
    border: 1px solid var(--border);
    border-left: none;
    z-index: 1200;
  }
  .sidebar-toggle-tablet {
    display: flex;
  }
  /* hide sidebar by default (off-canvas to the left) */
  .container-fluid .row #sidebar{position:fixed;top:0;left:0;width:300px;height:100vh;transform:translateX(-100%);transition:transform .28s ease;z-index:1100}
  /* when checkbox is checked, show sidebar */
  #cssSidebarToggle:checked ~ .container-fluid .row #sidebar{transform:translateX(0)}
  /* backdrop sibling: must be placed after .container-fluid in DOM */
  #sidebar-backdrop{display:none;position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.35);z-index:1050}
  #cssSidebarToggle:checked ~ #sidebar-backdrop{display:block}
}

/* Desktop */
@media (min-width:992px){
  #sidebar{width:300px !important;flex:0 0 300px !important;max-width:300px !important}
  main{width:calc(100vw - 300px) !important; height:100vh !important;}
  .sidebar-toggle{display: none}
}