/* Extends the existing mobile-first dark LLD theme. */
.content,.page-grid,.detail-card,.entity-card,.switch-face { min-width:0; }
.field-links { display:flex; flex-wrap:wrap; gap:.65rem; margin-block:1rem; }
.field-links .button { white-space:normal; text-align:center; }
.field-port-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:.45rem; direction:ltr; }
.field-port { min-height:92px; min-width:0; border:2px solid var(--line); border-radius:8px; background:var(--surface-2); color:var(--text); display:flex; flex-direction:column; align-items:center; justify-content:center; padding:.4rem .15rem; gap:.15rem; cursor:pointer; }
.field-port strong { font-size:1.3rem; }
.field-port span,.field-port small { font-size:.75rem; overflow-wrap:anywhere; }
.field-port.verified { border-color:var(--green); }
.field-port.problem { background:var(--red-soft); border-color:var(--red); }
.switch-face { border:1px solid var(--line); border-radius:12px; padding:1rem; background:var(--surface); }
.switch-face h2 { overflow-wrap:anywhere; font-size:1.1rem; }
.muted { color:var(--muted); font-size:.875rem; }
.panel-ports { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,235px),1fr)); gap:.75rem; }
.panel-port { min-height:90px; display:flex; flex-direction:column; gap:.3rem; color:var(--text); background:var(--surface-2); border:1px solid var(--line); border-radius:10px; text-align:start; padding:.8rem; overflow-wrap:anywhere; }
.comparison { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); margin-block:1rem; border:1px solid var(--line); border-radius:12px; overflow:hidden; }
.comparison>div { padding:.7rem; border-bottom:1px solid var(--line); overflow-wrap:anywhere; min-width:0; }
.comparison>div:nth-child(2n) { border-inline-start:1px solid var(--line); }
.comparison small { display:block; font-size:.75rem; color:var(--muted); margin-bottom:.3rem; }
.comparison .changed { background:var(--amber-soft); }
.compare-heading { font-weight:700; background:var(--surface-3); }
.field-route { list-style:none; padding:0; display:grid; gap:.5rem; }
.field-route li { border-inline-start:3px solid var(--cyan); padding:.6rem 1rem; background:var(--surface); overflow-wrap:anywhere; }
.field-route small,.field-route strong { display:block; }
.field-route small { color:var(--muted); }
progress { display:block; width:100%; accent-color:var(--cyan); height:12px; margin-block:.6rem; }
.progress-line { display:grid; grid-template-columns:1fr auto; gap:.5rem; padding-block:.75rem; }
.progress-line progress { grid-column:1/-1; }
.progress-line strong { font-size:.875rem; }
details>summary { cursor:pointer; min-height:44px; padding:.65rem 0; }
.photo-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr)); gap:1rem; }
.photo-grid figure { margin:0; overflow-wrap:anywhere; }
.photo-grid img { width:100%; max-height:280px; object-fit:contain; border-radius:10px; }
.fiber-row { display:grid; padding-block:.6rem; border-bottom:1px solid var(--line); overflow-wrap:anywhere; }
.modal-open { overflow:hidden; position:fixed; inset:0; width:100%; }
.field-sheet { color:var(--text); background:var(--surface); border:1px solid var(--line); border-radius:18px 18px 0 0; padding:0; width:100%; max-width:680px; height:auto; max-height:calc(100dvh - env(safe-area-inset-top)); margin:auto auto 0; overscroll-behavior:contain; overflow:hidden; transition:transform 220ms var(--ease-out),opacity 180ms ease; }
.field-sheet[open] { transform:translateY(0); opacity:1; }
@starting-style { .field-sheet[open] { transform:translateY(18px); opacity:0; } }
.field-sheet::backdrop { background:#000b; }
.field-sheet form { margin:0; display:flex; flex-direction:column; max-height:calc(100dvh - env(safe-area-inset-top)); overflow:hidden; }
.sheet-head { position:sticky; top:0; background:var(--surface); z-index:1; display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.7rem 1rem; border-bottom:1px solid var(--line); }
.sheet-head h2 { font-size:1rem; margin:0; overflow-wrap:anywhere; }
.sheet-body { padding:1rem 1rem calc(1rem + env(safe-area-inset-bottom)); overflow-y:auto; overscroll-behavior:contain; min-height:0; scroll-padding-block:80px 140px; }
.field-sheet footer { position:sticky; bottom:0; background:var(--surface); padding:.75rem 1rem calc(.75rem + env(safe-area-inset-bottom)); border-top:1px solid var(--line); display:flex; align-items:center; gap:1rem; }
.field-sheet footer span { font-size:.75rem; color:var(--muted); }
.form-grid { display:grid; grid-template-columns:minmax(0,1fr); gap:.8rem; }
.field-sheet .field { display:flex; flex-direction:column; gap:.4rem; margin-bottom:.7rem; }
.field-sheet input,.field-sheet select,.field-sheet textarea { width:100%; min-height:48px; font-size:16px; color:var(--text); background:var(--bg); border:1px solid var(--line); border-radius:8px; padding:.6rem; }
.field-sheet textarea { font-family:inherit; resize:vertical; }
.verify-toggle { display:flex; gap:1rem; align-items:center; min-height:56px; padding:.5rem; border:1px solid var(--green); border-radius:10px; margin-block:1rem; }
.verify-toggle input { width:26px; min-height:26px; accent-color:var(--green); }
#field-error { color:var(--red); }
#field-toast { position:fixed; bottom:calc(90px + env(safe-area-inset-bottom)); inset-inline:1rem; margin:auto; max-width:600px; background:var(--surface-3); color:var(--text); border:1px solid var(--cyan); border-radius:12px; padding:1rem; z-index:9999; }
#cabinet-qr { background:white; padding:1rem; max-width:300px; margin:1rem auto; }
#cabinet-qr svg { display:block; width:100%; height:auto; }
.break-any,.source-box { overflow-wrap:anywhere; }
@media (min-width:520px) { .field-port-grid { grid-template-columns:repeat(6,minmax(0,1fr)); }.form-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (min-width:820px) { .field-port-grid { grid-template-columns:repeat(12,minmax(0,1fr)); }.field-sheet { margin:auto; border-radius:18px; max-height:90dvh; }.field-sheet form{max-height:90dvh;} }
@media (max-width:819px) { .mobile-search { position:sticky; top:76px; z-index:3; background:var(--bg); }.progress-line { grid-template-columns:1fr; }.progress-line progress { grid-column:auto; }.page-head h1 { overflow-wrap:anywhere; }.detail-grid { grid-template-columns:minmax(0,1fr); } }
@media (max-width:819px) {
 .field-sheet{max-height:calc(100dvh - env(safe-area-inset-top));}
 .field-sheet form{max-height:calc(100dvh - env(safe-area-inset-top));}
 .field-sheet footer{gap:.55rem}.field-sheet footer .button{flex:1;min-height:52px}.field-sheet footer span{max-width:42%}
 .quick-edit-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.5rem;position:sticky;bottom:0;background:linear-gradient(transparent,var(--surface) 16px);padding:22px 0 4px}
 .quick-edit-actions .button{min-height:48px}
}
.port-summary-head{display:flex;gap:.5rem;align-items:center;justify-content:space-between;flex-wrap:wrap;margin-bottom:.8rem}.status-chip{display:inline-flex;align-items:center;min-height:32px;padding:.3rem .65rem;border:1px solid var(--line);border-radius:999px;font-size:.78rem}.status-chip.warning{color:#ffd59b;border-color:#8d6537;background:#3a2918}.status-chip.verified{color:#9aebcf;border-color:#326d5b;background:#15352c}.quick-edit-actions{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1rem}.quick-edit-actions .button{flex:1 1 110px}