.ftth-fiber-tech {
  display:grid;
  gap:13px;
  margin-top:13px;
}

.ftth-fiber-length-summary {
  display:grid;
  grid-template-columns:minmax(0,1fr) auto minmax(0,1fr) auto minmax(0,1.2fr);
  align-items:center;
  gap:5px;
  padding:10px;
  border:1px solid var(--border);
  border-radius:11px;
  background:var(--panel);
}

.ftth-fiber-length-summary > div {
  min-width:0;
  text-align:center;
}

.ftth-fiber-length-summary small,
.ftth-fiber-length-summary strong {
  display:block;
}

.ftth-fiber-length-summary small {
  color:var(--muted);
  font-size:8px;
}

.ftth-fiber-length-summary strong {
  margin-top:3px;
  font-size:10px;
  white-space:nowrap;
}

.ftth-fiber-length-summary > span {
  color:var(--accent);
  font-weight:800;
}

.ftth-fiber-length-summary .total {
  padding:7px 3px;
  border-radius:8px;
  background:rgba(16,163,111,.1);
}

.ftth-fiber-length-summary .total strong {
  color:#07875c;
}

.ftth-fiber-tech-card {
  display:grid;
  gap:10px;
  padding:12px;
  border:1px solid var(--border);
  border-radius:12px;
  background:var(--panel);
}

.ftth-fiber-tech-title {
  display:flex;
  align-items:center;
  gap:8px;
}

.ftth-fiber-tech-title > span {
  display:grid;
  place-items:center;
  width:31px;
  height:31px;
  border-radius:9px;
  background:rgba(59,130,246,.12);
  color:#2563eb;
  font-size:16px;
  font-weight:800;
}

.ftth-fiber-tech-title > span.identity {
  background:rgba(139,92,246,.12);
  color:#7c3aed;
}

.ftth-fiber-tech-title > span.strands {
  background:rgba(16,163,111,.12);
  color:#07875c;
}

.ftth-fiber-tech-title small {
  color:var(--muted);
  font-size:9px;
}

.ftth-fiber-tech-title h4 {
  margin:2px 0 0;
  color:var(--accent);
  font-size:13px;
}

.ftth-fiber-type-options {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:7px;
}

.ftth-fiber-type-options button {
  display:flex;
  align-items:center;
  gap:7px;
  min-width:0;
  padding:9px;
  border:1px solid var(--border);
  border-radius:9px;
  background:var(--bg);
  color:var(--muted);
  cursor:pointer;
}

.ftth-fiber-type-options button i {
  width:22px;
  height:4px;
  flex:0 0 22px;
  border-radius:5px;
  background:var(--fiber-type-color);
}

.ftth-fiber-type-options button b {
  overflow:hidden;
  font-size:10px;
  text-overflow:ellipsis;
}

.ftth-fiber-type-options button.active {
  border-color:var(--fiber-type-color);
  color:var(--text);
  box-shadow:0 0 0 2px color-mix(
    in srgb,var(--fiber-type-color) 12%,transparent
  );
}

.ftth-fiber-tech-grid {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;
}

.ftth-fiber-tech label {
  display:grid;
  gap:5px;
  min-width:0;
  color:var(--muted);
  font-size:9px;
  font-weight:650;
}

.ftth-fiber-tech input,
.ftth-fiber-tech select,
.ftth-fiber-tech textarea {
  width:100%;
  min-width:0;
  min-height:39px;
  box-sizing:border-box;
  padding:7px 9px;
  border:1px solid var(--border);
  border-radius:8px;
  outline:none;
  background:var(--bg);
  color:var(--text);
  font-size:10px;
}

.ftth-fiber-tech input:focus,
.ftth-fiber-tech select:focus,
.ftth-fiber-tech textarea:focus {
  border-color:var(--accent);
  box-shadow:0 0 0 3px color-mix(
    in srgb,var(--accent) 12%,transparent
  );
}

.ftth-fiber-tech textarea {
  min-height:60px;
  resize:vertical;
}

.ftth-fiber-tech-unit {
  position:relative;
}

.ftth-fiber-tech-unit input {
  padding-right:45px;
}

.ftth-fiber-tech-unit span {
  position:absolute;
  top:50%;
  right:8px;
  transform:translateY(-50%);
  color:var(--muted);
  font-size:8px;
}

.ftth-fiber-strand-kpis {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:5px;
}

.ftth-fiber-strand-kpis > div {
  min-width:0;
  padding:7px 3px;
  border:1px solid var(--border);
  border-radius:7px;
  background:var(--bg);
  text-align:center;
}

.ftth-fiber-strand-kpis small,
.ftth-fiber-strand-kpis b {
  display:block;
}

.ftth-fiber-strand-kpis small {
  overflow:hidden;
  color:var(--muted);
  font-size:7px;
  text-overflow:ellipsis;
}

.ftth-fiber-strand-kpis b {
  margin-top:2px;
  font-size:11px;
}

.ftth-fiber-strand-details summary {
  padding:9px;
  border:1px solid var(--border);
  border-radius:8px;
  background:var(--bg);
  color:var(--accent);
  font-size:10px;
  font-weight:700;
  cursor:pointer;
}

.ftth-fiber-strand-list {
  display:grid;
  gap:7px;
  margin-top:8px;
}

.ftth-fiber-strand {
  display:grid;
  grid-template-columns:42px minmax(0,1fr);
  gap:7px;
  padding:7px;
  border:1px solid var(--border);
  border-radius:9px;
  background:var(--bg);
}

.ftth-fiber-strand-number {
  display:grid;
  place-items:center;
  align-content:center;
  min-height:76px;
  border-radius:8px;
  border:2px solid var(--strand-color);
  color:var(--text);
}

.ftth-fiber-strand-number strong,
.ftth-fiber-strand-number small {
  display:block;
}

.ftth-fiber-strand-number small {
  color:var(--muted);
  font-size:8px;
}

.ftth-fiber-strand-data {
  display:grid;
  gap:5px;
  min-width:0;
}

.ftth-fiber-strand-name {
  display:flex;
  align-items:center;
  gap:6px;
  font-size:9px;
}

.ftth-fiber-strand-name i {
  width:10px;
  height:10px;
  border:1px solid var(--border);
  border-radius:50%;
}

.ftth-fiber-strand-data input,
.ftth-fiber-strand-data select {
  min-height:32px;
  padding:5px 7px;
}

.ftth-fiber-strand-pagination {
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:6px;
  margin-top:8px;
}

.ftth-fiber-strand-pagination button {
  min-height:32px;
  border:1px solid var(--border);
  border-radius:7px;
  background:var(--bg);
  color:var(--text);
  cursor:pointer;
}

.ftth-fiber-strand-pagination span {
  color:var(--muted);
  font-size:9px;
}

.ftth-fiber-tech-save {
  width:100%;
  min-height:42px;
}

@media (max-width:450px) {
  .ftth-fiber-tech-grid {
    grid-template-columns:1fr;
  }

  .ftth-fiber-length-summary {
    grid-template-columns:1fr;
  }

  .ftth-fiber-length-summary > span {
    transform:rotate(90deg);
  }
}