/* Offshore Aquaculture Simulation — namespaced CSS
 * All rules scoped under .aqsim-root to avoid clashing with themes. */

.aqsim-root { font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color: #222; max-width: 100%; box-sizing: border-box; }
.aqsim-root *, .aqsim-root *::before, .aqsim-root *::after { box-sizing: border-box; }
.aqsim-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

.aqsim-stage { position: relative; width: 100%; background: #04243f; border-radius: 12px; overflow: hidden; border: 0.5px solid rgba(0,0,0,0.1); }
.aqsim-sky { position: absolute; left:0; right:0; top:0; height: 28%; background: #0a3a5c; }
.aqsim-waterline { position: absolute; left:0; right:0; top:28%; height: 1px; background: rgba(255,255,255,0.25); }
.aqsim-sea { position: absolute; left:0; right:0; top:28%; bottom:0; background: #062f4f; }
.aqsim-floor { position: absolute; left:0; right:0; bottom:0; height: 10%; background: #021a2e; border-top: 1px dashed rgba(255,255,255,0.15); }
.aqsim-sun { position: absolute; top: 18px; right: 16px; width: 26px; height: 26px; border-radius: 50%; background: #FAC775; }
.aqsim-sat { position: absolute; top: 10px; width: 44px; height: 14px; background: #c0c4cc; border-radius: 3px; }
.aqsim-sat::before { content:""; position:absolute; left:-10px; top:2px; width:10px; height:10px; background:#888780; }
.aqsim-sat::after  { content:""; position:absolute; right:-10px; top:2px; width:10px; height:10px; background:#888780; }

.aqsim-perim { position: absolute; left: 8%; top: 30%; right: 8%; bottom: 12%; border: 1px dashed rgba(93,202,165,0.45); border-radius: 4px; }
.aqsim-label { position: absolute; font-size: 11px; color: rgba(255,255,255,0.85); background: rgba(4,36,63,0.7); padding: 2px 6px; border-radius: 3px; border: 0.5px solid rgba(255,255,255,0.2); pointer-events: none; }
.aqsim-label-site { left: 8%; top: calc(30% - 18px); }
.aqsim-label-sat  { right: 12px; top: 40px; }

.aqsim-buoy { position: absolute; width: 26px; height: 50px; }
.aqsim-buoy .panel { width: 22px; height: 8px; background: #185FA5; margin: 0 auto; border-radius: 1px; }
.aqsim-buoy .mast  { width: 2px;  height: 10px; background: #D3D1C7; margin: 0 auto; }
.aqsim-buoy .float { width: 18px; height: 14px; background: #EF9F27; margin: 0 auto; border-radius: 4px 4px 10px 10px; }
.aqsim-buoy .line  { width: 1px;  height: 220px; background: rgba(255,255,255,0.18); margin: 0 auto; }
.aqsim-beacon { position: absolute; top: -3px; left: 50%; transform: translateX(-50%); width: 4px; height: 4px; border-radius: 50%; background: #F09595; }

.aqsim-longline  { position: absolute; left: 10%; right: 10%; height: 2px; background: rgba(255,255,255,0.2); }
.aqsim-shellfish { position: absolute; width: 5px; height: 7px; background: #5DCAA5; border-radius: 2px; }

.aqsim-drone { position: absolute; width: 36px; height: 14px; background: #AFA9EC; border-radius: 6px; border: 1px solid #7F77DD; }
.aqsim-drone::before { content:""; position:absolute; left:4px; top:3px; width:6px; height:6px; background:#F09595; border-radius:50%; }
.aqsim-drone::after  { content:""; position:absolute; right:-6px; top:5px; width:6px; height:3px; background:#7F77DD; border-radius:1px; }
.aqsim-beam { position: absolute; left: 4px; top: 6px; width: 60px; height: 1px; background: linear-gradient(90deg, rgba(175,169,236,0.6), rgba(175,169,236,0)); }
.aqsim-signal { position: absolute; width: 1px; background: rgba(93,202,165,0.35); transform-origin: top; }

.aqsim-controls { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 14px 0; padding: 10px 12px; background: #f4f3ee; border-radius: 8px; }
.aqsim-controls label { font-size: 13px; color: #666; display: flex; align-items: center; gap: 8px; }
.aqsim-controls input[type=range] { width: 100px; }
.aqsim-toggle { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.aqsim-toggle button { font-size: 12px; padding: 4px 10px; border: 0.5px solid rgba(0,0,0,0.2); background: transparent; border-radius: 6px; cursor: pointer; color: #444; }
.aqsim-toggle button.on { background: #E6F1FB; color: #0C447C; border-color: #378ADD; }

.aqsim-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; margin: 14px 0; }
.aqsim-metric { background: #f4f3ee; border-radius: 8px; padding: 12px; }
.aqsim-metric .lbl { font-size: 12px; color: #666; margin-bottom: 4px; }
.aqsim-metric .val { font-size: 22px; font-weight: 500; }
.aqsim-metric .sub { font-size: 11px; color: #999; margin-top: 2px; }

.aqsim-twin { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 14px 0; }
.aqsim-panel { background: #fff; border: 0.5px solid rgba(0,0,0,0.1); border-radius: 12px; padding: 12px 14px; }
.aqsim-panel h3 { font-size: 14px; font-weight: 500; margin: 0 0 10px; }
.aqsim-bar { height: 6px; background: #f4f3ee; border-radius: 3px; overflow: hidden; margin: 4px 0 10px; }
.aqsim-bar > span { display: block; height: 100%; background: #378ADD; }
.aqsim-row { display: flex; justify-content: space-between; font-size: 12px; color: #666; }
.aqsim-strong { color: #222; font-weight: 500; }
.aqsim-sensor-row { font-size: 12px; color: #666; }
.aqsim-sensor-row > span { color: #222; font-weight: 500; float: right; }
.aqsim-chart { width: 100%; height: 140px; }

.aqsim-feed-panel { margin-bottom: 6px; }
.aqsim-feed { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; background: #04243f; color: #9FE1CB; border-radius: 8px; padding: 10px 12px; height: 140px; overflow: hidden; border: 0.5px solid rgba(0,0,0,0.1); }
.aqsim-feed .line { opacity: 0.9; margin-bottom: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.aqsim-feed .tag-sat  { color: #FAC775; }
.aqsim-feed .tag-drn  { color: #AFA9EC; }
.aqsim-feed .tag-buoy { color: #F0997B; }
.aqsim-feed .tag-fog  { color: #5DCAA5; }
.aqsim-feed .ts { color: #888780; }

@media (max-width: 560px) { .aqsim-twin { grid-template-columns: 1fr; } }