/* Operations views (Servisler, Konteynerler, Süreçler, Günlükler, Güvenlik, Donanım).
   Same language as app.css: hairlines, one accent, tabular numbers, calm. Only v1 tokens are
   used, so light/dark follow the theme. Class names are prefixed (ops-, o…) to stay clear of
   the shell's own components. Layout adapts to the view's width (container queries), not the
   viewport, so the sidebar/rail never squeezes a table. */

/* ---- View frame ----------------------------------------------------------------------------- */

.ops { container: ops / inline-size; min-width: 0; }
.ops > * + * { margin-top: 20px; }
.ops > .host-line { margin-top: 8px; }
.ops > .ops-back + .page-head { margin-top: 10px; }
.ops > .page-head + .segmented { margin-top: 18px; }
.ops .page-head { flex-wrap: wrap; row-gap: 12px; }
.ops .page-head > .page-title { flex: 1 1 200px; }
.ops .page-actions { align-items: center; flex-wrap: wrap; }
.ops-notices { display: flex; flex-direction: column; gap: 10px; }
.ops-notices:empty { display: none; }
.ops-foot { color: var(--text-3); font-size: 12.5px; }
.ops-foot:empty { display: none; }
.ops .ops-foot { margin-top: 10px; }
.ops-back { display: inline-flex; align-items: center; gap: 6px; }
.ops-inline-action { padding-top: 10px; }
.o-narrow-only { display: none !important; }
.is-danger-text { color: var(--crit); }
.is-danger-text:hover { color: var(--crit); }

/* ---- Toolbar -------------------------------------------------------------------------------- */

.ops-toolbar { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.ops-toolbar-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; }
.ops-toolbar .segmented, .ops .segmented.ops-seg { margin: 0; }
.ops-toolbar .input-sm, .ops-toolbar .btn-sm { height: 32px; }
.ops-select { width: auto; max-width: 260px; min-width: 0; }

.ops-search { position: relative; display: flex; align-items: center; flex: 1 1 220px; min-width: 0; max-width: 380px; }
.ops-search > .icon { position: absolute; left: 10px; color: var(--text-3); pointer-events: none; }
.ops-search-input { height: 32px; padding-left: 34px; font-size: 13.5px; }
.ops-search-input::-webkit-search-cancel-button { cursor: pointer; }

.seg[aria-pressed="true"] { background: var(--surface); color: var(--text); box-shadow: 0 0 0 1px var(--border), 0 1px 2px rgba(0, 0, 0, 0.05); }
.ops-seg .seg { padding: 5px 11px; }
.ops-seg .seg-count:not(:empty) { margin-left: 2px; }

.ops-toggle[aria-pressed="true"] { background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent) 34%, transparent); color: var(--accent-text); }
.ops-toggle:disabled { opacity: 0.45; }

.ops-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.otag {
  height: 28px; padding: 0 11px; border: 1px solid var(--border); border-radius: 999px;
  background: var(--surface); color: var(--text-2); font-size: 12.5px; font-weight: 500; cursor: pointer;
  transition: background-color 120ms var(--ease), color 120ms var(--ease), border-color 120ms var(--ease);
}
.otag:hover { border-color: var(--border-strong); color: var(--text); }
.otag[aria-pressed="true"] { background: var(--accent-soft); border-color: transparent; color: var(--accent-text); }

/* Live status pill: a dot that breathes while data flows. */
.olive { display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 2px; color: var(--text-3); font-size: 12.5px; white-space: nowrap; }
.olive-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--text-4); flex: none; }
.olive[data-kind="live"] { color: var(--text-2); }
.olive[data-kind="live"] .olive-dot { background: var(--ok); animation: olive-pulse 2s var(--ease) infinite; }
.olive[data-kind="wait"] .olive-dot { background: var(--warn); }
.olive[data-kind="bad"] { color: var(--crit); }
.olive[data-kind="bad"] .olive-dot { background: var(--crit); }
@keyframes olive-pulse { 0% { box-shadow: 0 0 0 0 var(--ok-soft); } 70% { box-shadow: 0 0 0 6px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }

/* ---- Keyed tables ------------------------------------------------------------------------------ */

.otbl-wrap { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.card > .otbl-wrap { border: 0; border-radius: 0; }
.otbl { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13px; table-layout: fixed; }
.otbl th {
  padding: 9px 10px 8px; text-align: left; vertical-align: bottom;
  color: var(--text-3); font-size: 12px; font-weight: 500; white-space: nowrap;
  border-bottom: 1px solid var(--border); background: var(--surface);
  overflow: hidden; text-overflow: ellipsis;
}
.otbl td { padding: 9px 10px; vertical-align: middle; border-top: 1px solid var(--border); min-width: 0; overflow: hidden; }
.otbl tbody tr:first-child td { border-top: 0; }
.otbl th:first-child, .otbl td:first-child { padding-left: 16px; }
.otbl th:last-child, .otbl td:last-child { padding-right: 12px; }
.otbl .is-num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.otbl tbody tr { transition: background-color 120ms var(--ease); }
.otbl tbody tr:hover { background: color-mix(in srgb, var(--surface-2) 70%, transparent); }
.otbl tr.is-clickable { cursor: pointer; }
.otbl tr:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.otbl tr.is-failed { background: color-mix(in srgb, var(--crit-soft) 55%, transparent); }
.otbl tr.is-selected { background: var(--accent-soft); }
.otbl tr.is-context { opacity: 0.55; }
.otbl-empty { border: 0; }

.oth-sort {
  display: inline-flex; align-items: center; gap: 4px; max-width: 100%;
  padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer;
}
.oth-sort:hover { color: var(--text); }
.oth-sort .icon { opacity: 0; transition: opacity 120ms var(--ease), transform 120ms var(--ease); flex: none; }
.oth-sort:hover .icon { opacity: 0.4; }
th.is-sorted .oth-sort { color: var(--text); }
th.is-sorted .oth-sort .icon { opacity: 1; }
th.is-sorted:not(.is-desc) .oth-sort .icon { transform: rotate(180deg); }
th.is-num .oth-sort { flex-direction: row-reverse; }

/* Column widths by id (the name/command column takes the rest). */
.otbl .c-sel { width: 40px; }
.otbl .c-dot, .otbl .c-exp { width: 30px; }
.otbl .c-act { width: 48px; text-align: right; }
.otbl .c-cpu { width: 76px; }
.otbl .c-mem, .otbl .c-rss { width: 88px; }
.otbl .c-restarts { width: 128px; }
.otbl .c-tags { width: 128px; }
.otbl .c-state { width: 158px; }
.otbl .c-pid { width: 84px; }
.otbl .c-user { width: 92px; }
.otbl .c-threads { width: 72px; }
.otbl .c-start { width: 64px; }
.otbl .c-owner { width: 150px; }
.otbl .c-status { width: 180px; }
.otbl .c-ports { width: 180px; }
.otbl .c-proc { width: 38%; }
.otbl-procs .c-state { width: 100px; }
.otbl-procs td { padding-top: 7px; padding-bottom: 7px; }
.otbl-procs .oc-main { flex-direction: row; align-items: baseline; gap: 10px; }
.otbl-procs .oc-line { flex: none; max-width: 45%; }
.otbl-procs .oc-sub { flex: 1 1 auto; }
.otbl-procs .oc-cpu { flex-direction: row-reverse; align-items: center; gap: 8px; }
.otbl-procs .obar { width: 32px; flex: none; }
.otbl-procs .c-cpu { width: 108px; }
.ops-security .otbl .c-exp { width: 120px; }

.oc-main { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.oc-line { display: flex; align-items: center; gap: 6px; min-width: 0; }
.oc-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); font-weight: 500; text-decoration: none; }
a.oc-title:hover { text-decoration: underline; text-underline-offset: 3px; }
.oc-title.mono { font-size: 12.5px; }
.oc-sub { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-3); font-size: 12px; }
.oc-sub.mono { font-size: 11.5px; }
.oc-state { display: flex; flex-direction: column; gap: 1px; min-width: 0; white-space: nowrap; }
.oc-state-label { font-weight: 500; }
.oc-state .oc-sub { overflow: hidden; text-overflow: ellipsis; }
.oc-tags { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.oc-ports { display: inline-flex; flex-direction: column; gap: 1px; font-size: 12px; color: var(--text-2); }
.oc-link { display: inline-flex; align-items: center; gap: 4px; max-width: 100%; color: var(--text-2); font-size: 12.5px; text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.oc-link:hover { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
.oc-link > span { overflow: hidden; text-overflow: ellipsis; }
.oc-tree { color: var(--text-4); white-space: pre; flex: none; font-size: 12px; }
.oc-pstate { font-size: 12.5px; white-space: nowrap; }
.oc-cpu { display: inline-flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.obar { display: block; width: 44px; height: 3px; border-radius: 999px; background: var(--track); overflow: hidden; }
.obar > span { display: block; width: calc(var(--v, 0) * 100%); height: 100%; border-radius: inherit; background: var(--bar); transition: width 180ms var(--ease); }
.ocheck { width: 16px; height: 16px; margin: 0; vertical-align: middle; accent-color: var(--accent); cursor: pointer; }

/* A skeleton shaped like rows. */
.otbl-skel { padding: 6px 0; }
.otbl-skel-row { display: grid; grid-template-columns: 1.6fr 1fr 0.6fr; gap: 24px; padding: 13px 16px; }
.otbl-skel-row + .otbl-skel-row { border-top: 1px solid var(--border); }
.otbl-skel-row > span { height: 10px; border-radius: 5px; background: var(--surface-2); animation: pulse 1.4s ease-in-out infinite; }

/* Plain (static) tables: packages, UFW rules. */
.otbl-plain { table-layout: auto; }
.otbl-plain td { vertical-align: top; }
.otbl-plain td .chip { margin-left: 6px; }

/* ---- Menu (popover in the top layer: above drawers too) ----------------------------------------- */

.omenu {
  position: fixed; inset: auto; margin: 0; z-index: 70;
  min-width: 232px; max-width: min(340px, calc(100vw - 16px)); max-height: calc(100dvh - 16px); overflow: auto;
  padding: 6px; border: 1px solid var(--border); border-radius: 12px;
  background: var(--surface); color: var(--text); box-shadow: var(--shadow-pop);
  animation: omenu-in 120ms var(--ease);
}
.omenu:focus { outline: none; }
@keyframes omenu-in { from { opacity: 0; transform: translateY(-3px); } }
.omenu-item {
  display: flex; align-items: flex-start; gap: 10px; width: 100%;
  padding: 7px 10px; border: 0; border-radius: 8px; background: none;
  color: var(--text); font-size: 13.5px; text-align: left; cursor: pointer;
}
.omenu-item > .icon { margin-top: 2px; color: var(--text-3); }
.omenu-item:hover, .omenu-item:focus-visible { background: var(--surface-2); outline: none; }
.omenu-item:focus-visible { box-shadow: inset 0 0 0 1px var(--border-strong); }
.omenu-item.is-danger, .omenu-item.is-danger > .icon { color: var(--crit); }
.omenu-item.is-warn > .icon { color: var(--warn); }
.omenu-item[aria-disabled="true"] { color: var(--text-4); cursor: not-allowed; }
.omenu-item[aria-disabled="true"] > .icon { color: var(--text-4); }
.omenu-item[aria-disabled="true"]:hover { background: none; }
.omenu-label { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.omenu-sub { color: var(--text-3); font-size: 12px; }
.omenu-kbd { margin-left: auto; color: var(--text-4); font-size: 12px; }
.omenu-icon-gap { width: 16px; flex: none; }
.omenu-sep { height: 1px; margin: 5px 6px; background: var(--border); }
.omenu-heading { padding: 6px 10px 4px; color: var(--text-3); font-size: 12px; }
.omenu-title { padding: 6px 12px 8px; color: var(--text-3); font-size: 12.5px; }
.omenu-trigger[aria-expanded="true"] { background: var(--surface-2); color: var(--text); }
.omenu.is-sheet {
  left: 8px; right: 8px; top: auto; bottom: calc(8px + env(safe-area-inset-bottom));
  width: auto; max-width: none; padding: 8px; border-radius: 16px;
  animation: omenu-sheet 160ms var(--ease);
}
.omenu.is-sheet::backdrop { background: var(--backdrop); }
.omenu.is-sheet .omenu-item { min-height: 46px; padding: 11px 12px; font-size: 15px; align-items: center; }
.omenu.is-sheet .omenu-item > .icon { margin-top: 0; }
.omenu-cancel { margin-top: 6px; height: 44px; }
@keyframes omenu-sheet { from { transform: translateY(16px); opacity: 0; } }

/* ---- Drawer (side panel; bottom sheet on phones) ----------------------------------------------- */

.odrawer {
  position: fixed; inset: 0 0 0 auto; margin: 0;
  width: min(600px, 100vw); max-width: 100vw; height: 100dvh; max-height: 100dvh;
  padding: 0; border: 0; border-left: 1px solid var(--border); border-radius: 0;
  background: var(--surface); color: var(--text); box-shadow: var(--shadow-pop);
  overflow: hidden;
}
.odrawer[open] { display: flex; flex-direction: column; animation: odrawer-in 180ms var(--ease); }
.odrawer::backdrop { background: color-mix(in srgb, var(--backdrop) 70%, transparent); }
.odrawer-wide { width: min(780px, 100vw); }
@keyframes odrawer-in { from { transform: translateX(28px); opacity: 0; } }
.odrawer-head { display: flex; align-items: flex-start; gap: 10px; flex: none; padding: 16px 14px 14px 20px; border-bottom: 1px solid var(--border); padding-top: max(16px, env(safe-area-inset-top)); }
.odrawer-titles { flex: 1 1 auto; min-width: 0; }
.odrawer-title { font-size: 16px; font-weight: 600; letter-spacing: -0.01em; overflow-wrap: anywhere; }
.odrawer-sub { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-top: 3px; color: var(--text-3); font-size: 12.5px; }
.odrawer-sub > span { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.odrawer-sub:empty { display: none; }
.odrawer-actions { display: flex; align-items: center; gap: 6px; flex: none; }
.odrawer-body { container: drawer / inline-size; flex: 1 1 auto; overflow: auto; overscroll-behavior: contain; padding: 18px 20px calc(28px + env(safe-area-inset-bottom)); }
.odrawer-body > * + * { margin-top: 18px; }
.odrawer-body > .segmented { margin-bottom: 0; }
.odrawer-section > * + * { margin-top: 8px; }
.odrawer-stack > * + * { margin-top: 20px; }
.odrawer-stack > .odrawer-section + .odrawer-section { padding-top: 18px; border-top: 1px solid var(--border); }
.odrawer-h { color: var(--text-2); font-size: 13px; font-weight: 600; }
.odrawer-btns { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.odrawer .stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@container drawer (max-width: 520px) {
  .odrawer .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.oconfirm-note { color: var(--text-2); font-size: 13px; line-height: 1.5; }

/* Key/value lists inside cards and drawers. */
.ops-kv { grid-template-columns: minmax(96px, max-content) minmax(0, 1fr); }
.ops-kv dd { overflow-wrap: anywhere; min-width: 0; }
.ops-kv dd.mono { font-size: 12.5px; }
.oproc-cmd { display: flex; align-items: flex-start; gap: 2px; min-width: 0; }
.oproc-cmd code { flex: 1 1 auto; min-width: 0; padding-top: 6px; font-size: 12.5px; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--text); }
.oproc-kids .row { min-height: 46px; }
.oproc-kids .link-btn { text-align: left; }

/* ---- Unit file viewer ------------------------------------------------------------------------------ */

.ocode-card { overflow: hidden; }
.ocode-file + .ocode-file { border-top: 1px solid var(--border); }
.ocode-path { padding: 8px 14px; border-bottom: 1px solid var(--border); background: var(--surface-2); color: var(--text-3); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ocode-pre { margin: 0; padding: 10px 0; max-height: 520px; overflow: auto; background: var(--code-bg); font: 12.5px/20px var(--mono); counter-reset: oline; }
.ocode-pre:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.ocode-pre code { display: block; min-width: max-content; font: inherit; }
.ocl { display: block; padding-right: 16px; white-space: pre; color: var(--text); }
.ocl::before {
  counter-increment: oline; content: counter(oline);
  display: inline-block; width: 3em; margin-right: 14px; padding-right: 10px;
  border-right: 1px solid var(--border); color: var(--text-4); text-align: right; user-select: none;
}
.ocl.k-comment { color: var(--text-3); }
.ocl.k-section { color: var(--accent-text); font-weight: 600; }
.ocl.k-text { color: var(--text-2); }

/* ---- Log viewer ------------------------------------------------------------------------------------ */

.logv {
  container: logv / inline-size;
  position: relative; display: flex; flex-direction: column; min-height: 220px;
  background: var(--code-bg); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden;
  --logv-t: 15ch;
}
.logv.ofit { height: max(340px, calc(100dvh - var(--fit-top, 260px) - var(--tabbar, 0px) - 28px)); }
.logv.is-compact { height: auto; max-height: 360px; min-height: 120px; }
.logv.is-compact .logv-scroll { min-height: 0; }
.logv.is-compact .logv-list { padding-bottom: 8px; }
.logv.is-compact:has(.logv-pill:not([hidden])) .logv-list { padding-bottom: 44px; }
.logv.is-rel { --logv-t: 16.5ch; }
.logv-scroll { flex: 1 1 auto; overflow: auto; overscroll-behavior: contain; outline: none; font: 12.5px/20px var(--mono); transition: opacity 120ms var(--ease); }
.logv-scroll:focus-visible { box-shadow: inset 0 0 0 2px var(--accent); }
.logv.is-loading .logv-scroll { opacity: 0.5; }
.logv-list { min-width: max-content; padding: 6px 0 44px; }
.logv.is-wrap .logv-list { min-width: 0; }
.logv-chunk { content-visibility: auto; contain-intrinsic-size: auto 4000px; }
.logl {
  display: grid; grid-template-columns: var(--logv-t) 8ch minmax(9ch, 18ch) minmax(0, 1fr);
  column-gap: 12px; padding: 0 14px; white-space: pre; cursor: default;
}
.logv.no-src .logl { grid-template-columns: var(--logv-t) 8ch minmax(0, 1fr); }
.logv.no-src.no-prio .logl { grid-template-columns: var(--logv-t) minmax(0, 1fr); }
.logv.no-prio:not(.no-src) .logl { grid-template-columns: var(--logv-t) minmax(9ch, 18ch) minmax(0, 1fr); }
.logl:hover { background: color-mix(in srgb, var(--surface-2) 75%, transparent); }
.logl.is-active { background: var(--accent-soft); }
.logl-t { color: var(--text-3); }
.logl-p { color: var(--text-4); overflow: hidden; }
.logl-s { color: var(--text-2); overflow: hidden; text-overflow: ellipsis; }
.logl-m { color: var(--text); }
.logv.is-wrap .logl-m { white-space: pre-wrap; overflow-wrap: anywhere; }
.logl.p-emerg, .logl.p-alert, .logl.p-crit, .logl.p-err { box-shadow: inset 2px 0 0 var(--crit); }
.logl.p-emerg .logl-p, .logl.p-alert .logl-p, .logl.p-crit .logl-p, .logl.p-err .logl-p { color: var(--crit); }
.logl.p-warning { box-shadow: inset 2px 0 0 var(--warn); }
.logl.p-warning .logl-p { color: var(--warn); }
.logl.p-notice .logl-p { color: var(--accent-text); }
.logl.p-info .logl-p { color: var(--text-3); }
.logl.p-debug .logl-m, .logl.p-debug .logl-p { color: var(--text-3); }
.logl.s-err .logl-p { color: var(--warn); }
.logl mark { border-radius: 2px; background: var(--warn-soft); color: inherit; box-shadow: 0 0 0 1px color-mix(in srgb, var(--warn) 40%, transparent); }
.logv-empty { position: absolute; inset: 0; display: grid; place-items: center; padding: 24px; color: var(--text-3); font-size: 13.5px; text-align: center; pointer-events: none; }
.logv-pill {
  position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 13px;
  border: 0; border-radius: 999px; background: var(--text); color: var(--bg);
  font-size: 12.5px; font-weight: 500; white-space: nowrap; box-shadow: var(--shadow-pop); cursor: pointer;
}
.logv-pill.is-paused { border: 1px solid var(--border-strong); background: var(--surface); color: var(--text); }
.logv-pill:focus-visible { outline-offset: 3px; }

/* Narrow viewers: meta on one line, the message below it. */
@container logv (max-width: 560px) {
  .logv-scroll { font-size: 12px; line-height: 18px; }
  .logv-list { min-width: 0; }
  .logl, .logv.no-src .logl, .logv.no-src.no-prio .logl, .logv.no-prio:not(.no-src) .logl {
    grid-template-columns: auto auto minmax(0, 1fr); grid-template-areas: "t p s" "m m m";
    column-gap: 8px; padding: 5px 12px; border-bottom: 1px solid color-mix(in srgb, var(--border) 55%, transparent);
  }
  .logl-t { grid-area: t; }
  .logl-p { grid-area: p; }
  .logl-s { grid-area: s; }
  .logl-m { grid-area: m; overflow-x: auto; }
  .logl-p:empty, .logl-s:empty { display: none; }
}

/* ---- Günlükler ---------------------------------------------------------------------------------------- */

.ops-target-box { display: flex; flex: 1 1 240px; min-width: 0; max-width: 380px; }
.ops-target-box > * { flex: 1 1 auto; max-width: none; }
.ops-unit { position: relative; display: flex; align-items: center; min-width: 0; }
.ops-unit > .icon { position: absolute; left: 10px; color: var(--text-3); pointer-events: none; }
.ops-unit-input { height: 32px; padding-left: 34px; padding-right: 34px; font-size: 13px; }
.ops-unit > .btn { position: absolute; right: 1px; }
.ops-range { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.ops-custom { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.ops-custom .input-sm { max-width: 200px; }
.ops-count { color: var(--text-3); font-size: 12.5px; white-space: nowrap; }
.ops-logframe > * + * { margin-top: 8px; }
.ops-older-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.ops-older-note:empty { display: none; }

.oprio-row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; min-width: 0; }
.oprio-label { margin-right: 4px; color: var(--text-3); font-size: 12.5px; }
.oprio {
  display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px;
  border: 1px solid var(--border); border-radius: 999px; background: var(--surface);
  color: var(--text-3); font-size: 12.5px; cursor: pointer; white-space: nowrap;
  transition: background-color 120ms var(--ease), color 120ms var(--ease), border-color 120ms var(--ease);
}
.oprio:hover { border-color: var(--border-strong); color: var(--text); }
.oprio[aria-pressed="true"] { border-color: var(--border-strong); background: var(--surface-2); color: var(--text); }
.oprio.is-edge { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
.oprio-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--text-4); flex: none; }
.oprio[aria-pressed="false"] .oprio-dot { opacity: 0.4; }
.oprio.p-emerg .oprio-dot, .oprio.p-alert .oprio-dot, .oprio.p-crit .oprio-dot, .oprio.p-err .oprio-dot { background: var(--crit); }
.oprio.p-warning .oprio-dot { background: var(--warn); }
.oprio.p-notice .oprio-dot { background: var(--accent); }
.oprio.p-info .oprio-dot { background: var(--text-3); }
.oprio.p-debug .oprio-dot { background: transparent; box-shadow: inset 0 0 0 1.5px var(--text-4); }

.oline-msg-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.oline-msg {
  margin: 0; padding: 12px 14px; max-height: 50vh; overflow: auto;
  border: 1px solid var(--border); border-radius: 10px; background: var(--code-bg);
  color: var(--text); font: 12.5px/1.6 var(--mono); white-space: pre-wrap; overflow-wrap: anywhere;
}
.oline-msg.is-json { color: var(--text-2); }
.oline-cursor { font-size: 11.5px; color: var(--text-2); overflow-wrap: anywhere; }
.oline-actions { padding-top: 2px; }
.oline-raw summary, .oprops-all summary, .ossh-last summary {
  width: fit-content; color: var(--text-2); font-size: 13px; cursor: pointer; border-radius: 6px;
}
.oline-raw summary:hover, .oprops-all summary:hover, .ossh-last summary:hover { color: var(--text); }
.oline-raw-body { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; margin-top: 10px; }
.oline-raw-body > .oline-msg { width: 100%; }

/* ---- Servisler ----------------------------------------------------------------------------------------- */

.obulk-bar {
  position: sticky; top: calc(var(--ops-sticky-top, 64px)); z-index: 5;
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  padding: 8px 10px 8px 16px; border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--border));
  border-radius: var(--radius); background: color-mix(in srgb, var(--accent-soft) 100%, var(--surface));
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.obulk-count { color: var(--accent-text); font-size: 13.5px; font-weight: 600; }
.obulk-list { display: flex; flex-direction: column; gap: 2px; max-height: 180px; overflow: auto; padding: 8px 12px; border-radius: 8px; background: var(--surface-2); font-size: 13px; }
.obulk-skipped > * + * { margin-top: 6px; }

/* Service detail */
.osvc-title { display: flex; align-items: center; gap: 12px; font-size: 20px; overflow-wrap: anywhere; min-width: 0; }
.osvc-dot { display: inline-flex; flex: none; }
.osvc-actions { justify-content: flex-end; }
.osvc-stats { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.osvc-charts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.osvc-charts > .card:only-child { grid-column: 1 / -1; }
.osvc-split { align-items: start; }
.oprops-all { margin-top: 14px; }
.oprops-all .kv { margin-top: 12px; }
.oprop-list { display: flex; flex-direction: column; gap: 2px; }
.ops .section-actions { flex-wrap: wrap; justify-content: flex-end; min-width: 0; }
.ops .range { max-width: 100%; }
.ops .range-presets { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.ops .range-presets::-webkit-scrollbar { display: none; }

/* ---- Konteynerler ---------------------------------------------------------------------------------------- */

.octr-list { display: flex; flex-direction: column; gap: 4px; font-size: 13px; overflow-wrap: anywhere; }
.octr-env { display: flex; flex-wrap: wrap; gap: 4px 12px; color: var(--text-2); font-size: 12px; }
.octr-labels dt { font-family: var(--mono); font-size: 12px; }
.octr-logbar { margin-bottom: 10px; }
.octr-logs .logv.is-compact { height: min(460px, 58dvh); }

/* ---- Güvenlik (host) ---------------------------------------------------------------------------------- */

.ohost-summary { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.ohost-summary .stat-sub { white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; }
.job.is-folded .job-head { border-bottom: 0; }
.ohost .section-actions { flex-wrap: wrap; justify-content: flex-end; }
.ohost-job + div { margin-top: 12px; }
.ohost-job:not([hidden]) + div { margin-top: 12px; }
.ohost-log { max-height: 320px; }
.ohost-pkgs { overflow: hidden; }
.ohost-ver { white-space: nowrap; font-size: 12px; }
.ohost-unattended { margin-top: 10px; }
.ohost-ufw-line { margin-bottom: 10px; }
.ohost .callout + .card, .ohost .callout + .hint { margin-top: 12px; }

.of2b { overflow: hidden; }
.of2b-jail { padding: 12px 12px 12px 16px; }
.of2b-jail + .of2b-jail { border-top: 1px solid var(--border); }
.of2b-head { display: flex; flex-direction: column; gap: 1px; }
.of2b-ips { display: flex; flex-direction: column; margin-top: 8px; }
.of2b-ips li { display: flex; align-items: center; gap: 10px; min-height: 36px; font-size: 13px; }
.of2b-ips li + li { border-top: 1px dashed transparent; }
.of2b .hint { margin-top: 6px; }

.ossh > * + * { margin-top: 12px; }
.ossh .stats-3 .stat-sub { white-space: nowrap; }
.ossh-top { padding: 12px 12px 8px 16px; }
.ossh-top-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.ossh-top li { display: flex; align-items: center; gap: 8px; min-height: 30px; font-size: 13px; min-width: 0; }
.ossh-users { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ossh-count { font-weight: 600; font-variant-numeric: tabular-nums; }
.ossh-events .row { min-height: 48px; padding-top: 8px; padding-bottom: 8px; }
.ossh-sessions > * + * { margin-top: 8px; }
.ossh-list li { display: flex; align-items: center; gap: 6px; min-height: 28px; font-size: 13px; min-width: 0; }
.ossh-list time, .ossh-list .faint { white-space: nowrap; }
.ossh-last summary { margin-top: 4px; }
.ossh-last .ossh-list { margin-top: 6px; }
.oufw td:first-child { width: 44px; }

/* ---- Donanım ----------------------------------------------------------------------------------------------- */

.ohw-top { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.ohw-card-head { display: flex; align-items: center; gap: 8px; color: var(--text-3); }
.ohw-card-head h2 { color: var(--text-2); font-size: 13px; font-weight: 600; }
.ohw-model { margin-top: 10px; font-size: 16px; font-weight: 600; letter-spacing: -0.01em; overflow-wrap: anywhere; }
.ohw-meta { margin-top: 2px; color: var(--text-3); font-size: 12.5px; }
.ohw-gauges { display: flex; flex-direction: column; gap: 14px; margin-top: 18px; }
.ohw-gauges-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 0; }
.ogauge-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 7px; font-size: 13px; }
.ogauge-label { color: var(--text-2); }
.ogauge-value { font-weight: 600; white-space: nowrap; }
.ogauge .meter { height: 5px; }
.ohw-disks { display: flex; flex-direction: column; gap: 16px; }
.ohw-disk { padding: 16px 18px; }
.ohw-disk-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.ohw-disk-title { display: flex; align-items: flex-start; gap: 10px; min-width: 0; color: var(--text-3); }
.ohw-disk-title h3 { color: var(--text); font-size: 15px; font-weight: 600; }
.ohw-disk-title .ohw-meta { overflow-wrap: anywhere; }
.ohw-health { display: inline-flex; align-items: center; gap: 8px; flex: none; font-size: 13px; font-weight: 500; }
.ohw-smart-missing { color: var(--text-3); font-size: 13px; }
.ohw-facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px 18px; margin: 20px 0 0; }
.ohw-fact dt { color: var(--text-3); font-size: 12px; }
.ohw-fact dd { margin: 2px 0 0; font-size: 14px; font-weight: 500; }
.ohw-disk-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--border); color: var(--text-3); font-size: 12.5px; }
.ohw-sensor .row-end { min-width: 70px; }
.ohw-temp { color: var(--text); font-size: 14px; font-weight: 600; white-space: nowrap; }
.ohw-spark { display: block; flex: none; width: 96px; height: 26px; color: var(--text-3); }
.ospark { display: block; overflow: visible; }
.ospark-line { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.ospark-dot { fill: currentColor; }

/* ---- Width-driven layouts ------------------------------------------------------------------------------ */

@container ops (max-width: 900px) {
  .otbl-procs .c-threads, .otbl-procs .c-start { display: none; }
  .ops-services .c-restarts { display: none; }
  .ohost-summary { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .osvc-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@container ops (max-width: 760px) {
  .otbl-procs .c-owner, .ops-services .c-tags, .ops-ctrs .c-ports { display: none; }
  .osvc-charts { grid-template-columns: minmax(0, 1fr); }
  .ohw-top { grid-template-columns: minmax(0, 1fr); }
}

/* Phones and narrow panes: tables become stacked rows (lead · main · menu, then meta). */
@container ops (max-width: 640px) {
  .o-narrow-only { display: inline-flex !important; }
  select.o-narrow-only { display: inline-block !important; }
  .ops-search { flex: 1 1 180px; max-width: none; }
  .ops-target-box { flex-basis: 100%; max-width: none; }
  .ops-toolbar .segmented { display: flex; width: 100%; }
  .ops-toolbar .segmented .seg { flex: 1; justify-content: center; }
  .ops-select { flex: 1 1 140px; max-width: none; }

  .otbl { table-layout: auto; }
  .otbl thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .otbl, .otbl tbody { display: block; }
  .otbl tr { display: flex; flex-wrap: wrap; align-items: center; column-gap: 10px; row-gap: 5px; padding: 12px 12px 12px 14px; }
  .otbl tbody tr + tr { border-top: 1px solid var(--border); }
  .otbl td, .otbl tbody tr:first-child td, .otbl td:first-child, .otbl td:last-child { display: block; padding: 0; border: 0; overflow: visible; }
  .otbl tbody td { width: auto !important; }
  .otbl td.is-meta.is-empty { display: none; }
  .otbl td.is-lead { order: 0; flex: none; }
  .otbl td.is-primary { order: 1; flex: 1 0 calc(100% - 96px); min-width: 0; overflow: hidden; }
  .otbl td.is-end { order: 2; flex: none; margin-left: auto; }
  .otbl td.is-meta { order: 3; flex: 0 1 auto; text-align: left; color: var(--text-2); font-size: 12.5px; }
  .otbl td.is-meta[data-label]::before { content: attr(data-label) " "; color: var(--text-3); }
  .otbl td.is-meta:empty { display: none; }
  .otbl td.is-hide, .otbl td.c-sel { display: none !important; }
  .otbl .oc-cpu { flex-direction: row; align-items: center; gap: 6px; }
  .otbl .oc-cpu .obar { display: none; }
  .otbl .oc-state { flex-direction: row; gap: 6px; flex-wrap: wrap; white-space: normal; }
  .otbl .oc-ports { flex-direction: row; flex-wrap: wrap; gap: 2px 8px; }
  .otbl-plain thead { position: static; width: auto; height: auto; clip: auto; }
  .otbl-plain, .otbl-plain tbody { display: table; }
  .otbl-plain tbody { display: table-row-group; }
  .otbl-plain tr { display: table-row; padding: 0; }
  .otbl-plain td, .otbl-plain tbody tr:first-child td, .otbl-plain td:first-child, .otbl-plain td:last-child { display: table-cell; padding: 8px 8px; border-top: 1px solid var(--border); }
  .otbl-plain td:first-child { padding-left: 12px; }
  .otbl-plain tbody tr:first-child td { border-top: 0; }
  .ohost-pkgs, .ohost .card:has(> .oufw) { overflow-x: auto; }

  .obulk-bar { display: none; }
  .ops .stats, .ohost-summary, .osvc-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ops .stats-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ohost-summary > :last-child:nth-child(odd), .osvc-stats > :last-child:nth-child(odd) { grid-column: 1 / -1; }
  .ohw-gauges-3 { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .ohw-spark { display: none; }
  .ops-logs-toolbar:not(.is-open) .ops-logs-filters { display: none; }
  .ops-toolbar:not(.is-open) .o-foldable { display: none !important; }
  .ops-more { flex: none; }
  .ops-more[aria-expanded="true"] .icon { transform: rotate(180deg); }
  .oprio-row { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 2px; scrollbar-width: none; }
  .oprio-row::-webkit-scrollbar { display: none; }
  .ops-range { width: 100%; }
  .ops-range > select { flex: 1 1 auto; }
  .ops-custom { width: 100%; }
  .ops-custom .input-sm { flex: 1 1 140px; max-width: none; }
  .osvc-title { font-size: 17px; }
  .o-compact > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .o-compact { padding: 0; width: 38px; }
  .ops .section-head { align-items: flex-start; }
  .ops .section-head > .section-actions { flex: 1 1 100%; justify-content: flex-start; }
  .ops .range { width: 100%; }
}

/* Phones: drawers become bottom sheets; bigger touch targets like the rest of the app. */
@media (max-width: 719px) {
  .odrawer, .odrawer-wide {
    inset: auto 0 0 0; width: 100vw; height: 92dvh; max-height: 92dvh;
    border-left: 0; border-top: 1px solid var(--border); border-radius: 16px 16px 0 0;
  }
  .odrawer[open] { animation-name: odrawer-up; }
  .odrawer-head { padding: 14px 10px 12px 16px; }
  .odrawer-body { padding: 16px 16px calc(28px + env(safe-area-inset-bottom)); }
  .ops-search-input, .ops-unit-input { height: 38px; font-size: 16px; }
  .ops-toolbar .input-sm, .ops-toolbar .btn-sm { height: 38px; }
  .otag, .oprio { height: 34px; }
  .omenu-item { min-height: 44px; }
  .ops-kv { grid-template-columns: minmax(0, 1fr); gap: 2px 0; }
  .ops-kv dd + dt { margin-top: 10px; }
}
@keyframes odrawer-up { from { transform: translateY(32px); opacity: 0; } }

@media (pointer: coarse) {
  .omenu-trigger::before { content: ""; position: absolute; inset: -6px; }
}

@media (prefers-reduced-motion: reduce) {
  .olive[data-kind="live"] .olive-dot { animation: none; }
}