/* Sidebar: sekcje główne, następnie zawsze dostępna lista projektów. */
.shell {
  display: grid;
  grid-template-columns: 254px minmax(0, 1fr);
  min-height: 100dvh;
}
.sidebar {
  position: sticky;
  top: 0;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  background: #0d1015;
  border-right: 1px solid var(--line);
  padding: 29px 16px 16px;
  gap: 30px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 10px;
  font-size: 21px;
  font-weight: 800;
  letter-spacing: 2px;
}
.brandmark {
  width: 29px;
  height: 29px;
  background: var(--blue);
  border-radius: 7px;
  display: grid;
  place-items: center;
  color: #fff;
  letter-spacing: 0;
  font-size: 20px;
}
.brand small {
  display: block;
  font-size: 9px;
  font-weight: 400;
  letter-spacing: 2.2px;
  margin-top: 3px;
}
.nav {
  display: grid;
  gap: 5px;
}
.nav-entry {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 54px;
  gap: 3px;
}
.nav-entry > button:first-child { min-width: 0; }
.nav-plus {
  align-self: center;
  height: 24px;
  padding: 0 !important;
  justify-content: center !important;
  font-size: 20px !important;
  line-height: 1;
  color: #8793a5 !important;
}
.nav-plus:hover { color: #a2ceff !important; }
.nav button,
.projectnav button {
  width: 100%;
  justify-content: flex-start;
  background: transparent;
  border-color: transparent;
  color: var(--muted);
  font-size: 15px;
  padding: 11px 12px;
}
.nav button.active,
.projectnav button.active {
  background: var(--blue-soft);
  border-color: #0080ff26;
  color: #a2ceff;
}
.nav button.active .icon {
  color: #389cff;
}
.projectnav {
  min-height: 0;
  overflow: auto;
  flex: 1;
}
.projectnav button {
  margin-top: 4px;
  gap: 10px;
}
.projectnav .count {
  margin-left: auto;
  font-size: 11px;
  color: var(--muted);
}
.navheading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 11px 12px;
  font-size: 10px;
  letter-spacing: 1.8px;
  color: #8491a3;
}
.navheading button {
  width: 25px;
  height: 25px;
  padding: 0;
  margin: 0;
  justify-content: center;
  color: #98b9de;
  border: 1px solid var(--line);
}
.profile {
  margin-top: auto;
  padding: 19px 6px 0;
  display: grid;
  gap: 13px;
}
.profile strong {
  font-size: 14px;
  font-weight: 600;
}
.profile small {
  font-size: 13px;
}
.profile button {
  font-size: 11px;
  padding: 7px;
}
.team-add { margin-top: 18px; }
.team-add-top { margin: 0 0 18px; }
.team-add-button {
  border-color: #0080ff45;
  background: #0080ff14;
  color: #a2ceff;
  font-weight: 600;
}
.team-add-button:hover { background: #0080ff24; }
.system-grid { display:grid; gap:12px; }
.system-card { display:flex; align-items:center; gap:16px; padding:18px 20px; }
.system-card h3 { margin:2px 0 4px; font-size:17px; }
.system-card p { margin:0; color:var(--muted); }
.system-card-mark { width:58px; height:58px; display:grid; place-items:center; overflow:hidden; flex:0 0 auto; border:1px solid #23598a; border-radius:10px; background:#082b4d; color:#7fc1ff; font-weight:750; }
.system-card-mark img { width:100%; height:100%; object-fit:cover; }
.lemans-icon { width:38px; height:38px; }
.system-tags { display:flex; gap:7px; flex-wrap:wrap; margin-top:10px; }
.system-tags span { padding:4px 8px; border:1px solid var(--line); border-radius:6px; color:#aebdce; font-size:11px; }
.system-card > .delete-row-button { width:54px; flex:0 0 54px; }
.system-details { margin-top:12px; }
.system-details summary,.system-form-details summary { cursor:pointer; color:#8fc8ff; font-size:13px; }
.system-details dl { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px 20px; margin:13px 0 0; }
.system-details dl div { display:grid; gap:2px; }
.system-details dt { color:var(--muted); font-size:11px; }
.system-details dd { margin:0; font-size:13px; }
.system-form-details { border-top:1px solid var(--line); padding-top:14px; }
.system-form-details > .stack { margin-top:14px; }
.system-attachments { margin-top:16px; padding-top:13px; border-top:1px solid var(--line); }
.system-attachments > small { color:var(--muted); }
.system-attachments ul { display:grid; gap:6px; margin:8px 0 0; padding:0; list-style:none; }
.system-attachments li { display:flex; align-items:center; justify-content:space-between; gap:12px; font-size:13px; }
.system-attachments li span { color:var(--muted); font-size:11px; white-space:nowrap; }
.system-image-preview { display:grid; place-items:center; width:100px; height:100px; overflow:hidden; margin-top:9px; border:1px dashed #3b4b60; border-radius:10px; background:#0f151d; color:#7fc1ff; }
.system-image-preview img { width:100%; height:100%; object-fit:cover; }
.system-file-preview { display:block; margin-top:7px; color:var(--muted); font-size:11px; word-break:break-word; }
.project-table-link {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: inherit;
  text-align: left;
}
.project-table-link:hover { background: transparent; color: #8bc8ff; }
.project-table-link:focus-visible { outline: 2px solid var(--blue); outline-offset: 4px; }
.member-table-link {
  width: 100%;
  padding: 0;
  border: 0;
  border-radius: 0;
  justify-content: flex-start;
  background: transparent;
  color: inherit;
  text-align: left;
}
.member-table-link:hover { background: transparent; color: #8bc8ff; }
.workspace {
  min-width: 0;
}
.topbar {
  height: 64px;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 36px;
  gap: 10px;
  font-size: 12px;
  color: var(--muted);
}
.live {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 11px;
}
.live:before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--blue);
}
.main {
  max-width: 1370px;
  margin: 0 auto;
  padding: 38px 36px 50px;
}
.pagehead {
  margin-bottom: 27px;
}
.pagehead .eyebrow {
  margin-bottom: 10px;
}
.pagehead p {
  margin-bottom: 0;
}
.stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 30px;
}
.stat {
  padding: 20px;
}
.stat .icon {
  color: #6896ca;
}
.stat strong {
  display: block;
  font-size: 32px;
  font-weight: 550;
  letter-spacing: -1px;
  margin: 15px 0 5px;
}
.sectionhead {
  margin: 28px 0 17px;
}
.sectionhead h2 {
  margin: 0;
  font-size: 17px;
}
.projects {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 18px;
}
.projectcard {
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-width: 0;
}
.projectcard h3 {
  font-size: 18px;
  margin: 0 0 6px;
  overflow-wrap: anywhere;
}
.projectcard p {
  margin: 0;
  font-size: 12px;
  color: var(--muted);
}
.projectcard .bottom {
  margin-top: auto;
  border-top: 1px solid var(--line);
  padding-top: 14px;
}
.projectcover {
  height: 75px;
  border-radius: 7px;
  background: linear-gradient(115deg, #0080ff12, #0080ff04);
  border: 1px solid #0080ff18;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
}
.miniunit {
  border: 1px solid #528cc650;
  background: #0080ff0a;
  width: 38px;
  height: 39px;
  position: relative;
}
.miniunit:after {
  content: "";
  position: absolute;
  right: 5px;
  top: 7px;
  width: 2px;
  height: 8px;
  background: #6394c4;
}
.miniunit.tall {
  height: 59px;
}
.miniunit.wide {
  width: 55px;
}
.tabs {
  display: flex;
  gap: 24px;
  border-bottom: 1px solid var(--line);
  margin: 25px 0;
}
.tabs button {
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  border-radius: 0;
  padding: 0 0 14px;
  color: var(--muted);
  font-size: 13px;
}
.tabs button.active {
  border-bottom-color: var(--blue);
  color: #7bbaff;
}
.projectbanner {
  display: flex;
  gap: 22px;
  padding: 16px 20px;
  align-items: center;
  flex-wrap: wrap;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #151a22;
  margin-bottom: 22px;
}
.projectbanner small {
  font-size: 11px;
}
.projectbanner strong {
  display: block;
  font-size: 12px;
  font-weight: 500;
  color: #d0daea;
  margin-top: 3px;
}
.cabinetgrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 18px;
}
.cabinetcard {
  padding: 0;
  overflow: hidden;
}
.cabinetimage {
  position: relative;
  height: 175px;
  background: radial-gradient(ellipse at center, #0080ff12, transparent 75%);
  display: grid;
  place-items: center;
  border-bottom: 1px solid var(--line);
}
.cabinetimage .badge {
  position: absolute;
  left: 16px;
  top: 15px;
}
.cabinetimage svg {
  height: 145px;
  width: 190px;
}
.cabinetbody {
  padding: 19px;
}
.cabinetbody h3 {
  font-size: 16px;
  margin: 0 0 6px;
}
.cabinetbody .actions {
  margin-top: 18px;
}
.actions button {
  font-size: 12px;
  padding: 8px 10px;
}
.cabinetbody progress {
  margin: 15px 0 8px;
}
.tablewrap {
  overflow: auto;
}
table {
  border-collapse: collapse;
  width: 100%;
  font-size: 14px;
}
th,
td {
  padding: 13px 10px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: middle;
}
th {
  font-size: 10px;
  letter-spacing: 0.7px;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 500;
}
td small {
  font-size: 10px;
}
td.check,
th.check {
  text-align: center;
}
.done-row {
  color: var(--green);
}
.techcard {
  margin-bottom: 20px;
}
.techcard h2 {
  margin: 0 0 6px;
}
.techcard header {
  margin-bottom: 20px;
}
.techcard .note {
  margin-top: 19px;
}
.notestatus {
  display: block;
  min-height: 20px;
  margin-top: 5px;
  font-size: 11px;
}
.barcode {
  width: 150px;
  text-align: center;
  color: #aebfd5;
}
.barcode svg {
  height: 36px;
  width: 150px;
  display: block;
}
.barcode small {
  font-size: 9px;
  letter-spacing: 1.3px;
}
.teamname {
  display: flex;
  align-items: center;
  gap: 11px;
}
.teamname strong {
  font-size: 15px;
}
.accessory-badge {
  width: 37px;
  height: 37px;
  display: grid;
  place-items: center;
  flex: 0 0 37px;
  border: 1px solid #0080ff35;
  border-radius: 10px;
  background: #0080ff22;
  color: #83beff;
  font-size: 12px;
  font-weight: 700;
}
.team-surname {
  font-size: 15px;
  font-weight: 400;
  color: #b8c4d4;
}
.project-list-name .project-street {
  display: inline;
  margin: 0 0 0 6px;
  color: #b8c4d4;
  font-size: 15px;
  font-weight: 400;
}
.team-table td { border-bottom: 0; }
.team-table tr:not(:last-child) td { border-bottom: 1px solid var(--line); }
.team-table td { transition: background .15s ease, color .15s ease; }
.team-table td:first-child:hover .teamname strong,
.team-table td:first-child:hover .team-surname,
.team-table td:first-child:hover .project-street { color: #9dceff; }
.team-edit {
  width: 46px;
  text-align: right;
}
.team-edit button,
.team-trash button {
  padding: 7px;
  border-color: transparent;
  background: transparent;
  color: var(--muted);
}
.team-edit button:hover { color: #a2ceff; background: #0080ff12; }
.team-trash {
  width: 54px;
  text-align: right;
}
.delete-row-button {
  width: 54px;
  height: 24px;
  padding: 0 !important;
  justify-content: center !important;
  font-size: 20px !important;
  line-height: 1;
  color: #8793a5 !important;
  border-color: transparent !important;
  background: transparent !important;
}
.delete-row-button .icon { width: 16px !important; height: 16px !important; }
.delete-row-button:hover { color: #a2ceff !important; background: #2a313c !important; }
.teamintro {
  margin-bottom: 20px;
}
.teamintro p {
  font-size: 12px;
  margin: 0;
  color: var(--muted);
}
.credential {
  padding: 20px;
  background: #0f141d;
  border: 1px solid #0080ff40;
  border-radius: 10px;
}
.credential code {
  display: block;
  font-size: 20px;
  color: #91c7ff;
  overflow-wrap: anywhere;
  margin-top: 7px;
}