/* Founder operations center (founder-noc.js) */
.noc { --crit: #ff6978; --warn: #f5c451; --ok: #3ddc97; --info: #6aa8ff; --idle: #8796ad; display: grid; gap: 14px; margin-top: 16px }
.noc-card { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 16px; min-width: 0 }
.noc-card h2 { margin: 0 0 12px; font-size: 16px; display: flex; align-items: center; gap: 8px; justify-content: space-between; flex-wrap: wrap }
.noc-strip { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 12px 16px; border-radius: 14px; border: 1px solid var(--line); background: #0b1a2f }
.noc-strip .state { font-weight: 800; font-size: 16px; display: flex; align-items: center; gap: 8px }
.noc-strip .spacer { flex: 1 }
.noc-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; background: var(--idle) }
.noc-dot.ok { background: var(--ok); box-shadow: 0 0 0 4px rgba(61,220,151,.15) }
.noc-dot.warning { background: var(--warn); box-shadow: 0 0 0 4px rgba(245,196,81,.15) }
.noc-dot.critical { background: var(--crit); box-shadow: 0 0 0 4px rgba(255,105,120,.18); animation: noc-pulse 1.6s infinite }
@keyframes noc-pulse { 50% { box-shadow: 0 0 0 8px rgba(255,105,120,0) } }
.noc-badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; background: rgba(255,255,255,.07); color: var(--muted); white-space: nowrap }
.noc-badge.ok { background: rgba(61,220,151,.13); color: #9ff0c8 }
.noc-badge.warning { background: rgba(245,196,81,.14); color: #ffe199 }
.noc-badge.critical { background: rgba(255,105,120,.16); color: #ffb3bb }
.noc-badge.info { background: rgba(106,168,255,.14); color: #bcd6ff }
.noc-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px }
@media (min-width: 1700px) { .noc-kpis { grid-template-columns: repeat(8, minmax(0, 1fr)) } }
@media (max-width: 760px) { .noc-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)) } }
.noc-kpi { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 14px; min-width: 0 }
.noc-kpi .label { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .06em }
.noc-kpi .value { font-size: 30px; font-weight: 800; margin-top: 4px; line-height: 1.1 }
.noc-kpi .sub { color: var(--muted); font-size: 12px; margin-top: 2px }
.noc-kpi.critical { border-color: rgba(255,105,120,.55); background: rgba(255,105,120,.09) }
.noc-kpi.warning { border-color: rgba(245,196,81,.45) }
.noc-kpi svg { width: 100%; height: 26px; margin-top: 6px; display: block }
.noc-row { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 14px }
.noc-row3 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 14px }
.noc-alerts { display: grid; gap: 8px; max-height: 430px; overflow: auto; padding-right: 4px }
.noc-alert { display: grid; grid-template-columns: 6px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 12px; border-radius: 10px; background: rgba(255,255,255,.03); border: 1px solid var(--line) }
.noc-alert .bar { align-self: stretch; border-radius: 4px; background: var(--idle) }
.noc-alert.critical .bar { background: var(--crit) } .noc-alert.warning .bar { background: var(--warn) } .noc-alert.info .bar { background: var(--info) }
.noc-alert .t { font-weight: 700 } .noc-alert .d { color: var(--muted); font-size: 12px; margin-top: 2px }
.noc-alert button { padding: 7px 10px; font-size: 12px }
.noc-filter { display: flex; gap: 6px; flex-wrap: wrap }
.noc-filter button { padding: 6px 10px; font-size: 12px; border-radius: 999px }
.noc-filter button.on { background: var(--accent); color: #06202a }
.noc-legend { display: flex; gap: 14px; flex-wrap: wrap; color: var(--muted); font-size: 12px; margin-top: 6px }
.noc-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px }
.noc-chart svg { width: 100%; display: block }
.noc-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px }
.noc-tile { border-radius: 12px; padding: 12px; border: 1px solid var(--line); background: rgba(255,255,255,.03); display: grid; gap: 4px; min-width: 0 }
.noc-tile .n { font-weight: 800; display: flex; align-items: center; gap: 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.noc-tile .o, .noc-tile .m { color: var(--muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.noc-tile .s { font-weight: 700; font-size: 13px }
.noc-tile.h-critical { border-color: rgba(255,105,120,.6); background: rgba(255,105,120,.1) } .noc-tile.h-critical .s { color: #ffb3bb }
.noc-tile.h-warning { border-color: rgba(245,196,81,.5); background: rgba(245,196,81,.07) } .noc-tile.h-warning .s { color: #ffe199 }
.noc-tile.h-ok .s { color: #9ff0c8 } .noc-tile.h-idle .s, .noc-tile.h-empty .s, .noc-tile.h-inactive .s { color: var(--muted) }
.noc-tile.h-inactive { opacity: .6 }
.noc-tile button { padding: 6px 9px; font-size: 12px; justify-self: start; margin-top: 4px }
.noc-feed { display: grid; gap: 2px }
.noc-feed div { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--line); font-size: 13px }
.noc-feed div:last-child { border-bottom: 0 }
.noc-feed .w { color: var(--muted) }
.noc-empty { color: var(--muted); padding: 18px 0; text-align: center }
.noc-hbar { display: grid; grid-template-columns: minmax(90px, 180px) minmax(0, 1fr) 70px; gap: 10px; align-items: center; padding: 5px 0; font-size: 13px }
.noc-hbar .track { height: 10px; background: rgba(255,255,255,.06); border-radius: 6px; overflow: hidden }
.noc-hbar .fill { height: 100%; background: var(--accent); border-radius: 6px }
.noc-hbar .lbl { overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.noc-hbar .num { text-align: right; color: var(--muted) }
/* Wall screen: no menu, bigger text, for a monitor on the wall */
body.noc-wall .side, body.noc-wall .top, body.noc-wall .context-bar { display: none !important }
body.noc-wall .main { max-width: none; padding: 18px }
body.noc-wall .noc-kpi .value { font-size: 40px }
body.noc-wall .noc-alerts { max-height: none }
@media (max-width: 1100px) { .noc-row, .noc-row3 { grid-template-columns: minmax(0, 1fr) } }