:root {
  --ink: #f5f5f2;
  --muted: #a7aaa5;
  --paper: #111212;
  --card: #1c1d1d;
  --line: #323433;
  --green: #91c11e;
  --green-dark: #719b11;
  --mint: #253019;
  --amber: #d2a43b;
  --rose: #c96868;
  --shadow: 0 22px 60px rgba(0, 0, 0, .28);
}
* { box-sizing: border-box; }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: "DM Sans", sans-serif; min-height: 100vh; }
button, input, select { font: inherit; }
button { cursor: pointer; }
.hidden { display: none !important; }
.ambient {
  position: fixed;
  pointer-events: none;
  background: url("/opsys-mark.png") center / contain no-repeat;
  opacity: .1;
  filter: blur(.3px);
}
.ambient-one { width: 44rem; height: 31rem; top: -4rem; right: 5%; transform: rotate(-8deg); }
.ambient-two { width: 26rem; height: 18rem; bottom: -4rem; left: 8%; transform: rotate(14deg); opacity: .06; }
.login-shell { min-height: 100vh; display: grid; place-items: center; padding: 2rem; position: relative; }
.login-card { width: min(31rem, 100%); padding: 3.2rem; background: var(--card); border: 1px solid var(--line); border-radius: 1.1rem; box-shadow: var(--shadow); text-align: center; }
.login-logo { display: block; width: 19rem; max-width: 100%; margin: 0 auto 2rem; }
.eyebrow { margin: 1.5rem 0 .35rem; color: var(--green); font-size: .72rem; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; }
h1, h2 { margin: 0; font-family: "DM Sans", sans-serif; font-weight: 600; }
.login-card h1 { font-size: clamp(2.4rem, 7vw, 3.5rem); line-height: 1.02; letter-spacing: -.055em; margin-bottom: 2.2rem; }
.muted { color: var(--muted); line-height: 1.65; margin: 1.3rem 0 2rem; }
form { display: grid; gap: 1rem; }
.login-card form { text-align: left; }
.login-note { color: var(--muted); line-height: 1.55; margin: 0 0 1.2rem; text-align: center; }
.full-width { width: 100%; margin-top: .75rem; }
label { display: grid; gap: .45rem; color: var(--muted); font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
input, select { width: 100%; padding: .78rem .85rem; border: 1px solid var(--line); border-radius: .45rem; background: #242626; color: var(--ink); outline: none; transition: .2s; }
input:focus, select:focus { border-color: var(--green); box-shadow: 0 0 0 3px rgba(14,107,85,.1); }
button { border: 0; border-radius: .45rem; padding: .85rem 1rem; background: var(--green); color: #10110f; font-weight: 700; display: flex; justify-content: space-between; gap: 1rem; }
button:hover { background: var(--green-dark); }
button:disabled { cursor: not-allowed; opacity: .45; }
.error { color: #a14343; min-height: 1rem; }
.app-shell { position: relative; display: grid; grid-template-columns: 15rem 1fr; min-height: 100vh; }
.sidebar { background: #181919; color: white; padding: 1.8rem 1.3rem; display: flex; flex-direction: column; position: fixed; inset: 0 auto 0 0; width: 15rem; border-right: 1px solid var(--line); }
.logo { display: grid; justify-items: center; gap: .7rem; line-height: 1.05; margin-bottom: 3rem; text-align: center; }
.logo img { width: 12.4rem; max-width: 100%; }
.logo strong { width: 100%; color: var(--green); text-transform: uppercase; letter-spacing: .2em; font-size: .74rem; font-weight: 800; }
nav { display: grid; gap: .45rem; }
nav a { padding: .8rem; border-radius: .6rem; color: #b7ccc5; text-decoration: none; display: flex; align-items: center; gap: .7rem; font-size: .86rem; }
nav a.active { background: rgba(255,255,255,.1); color: white; }
nav a.disabled { opacity: .55; pointer-events: none; }
nav small { margin-left: auto; font-size: .55rem; text-transform: uppercase; }
.sidebar-foot { margin-top: auto; padding: .85rem; border-top: 1px solid rgba(255,255,255,.12); display: flex; gap: .7rem; align-items: center; font-size: .72rem; }
.sidebar-foot small { display: block; color: #8fb0a6; margin-top: .2rem; }
.health-dot { width: .55rem; height: .55rem; background: #7acaa5; border-radius: 50%; box-shadow: 0 0 0 4px rgba(122,202,165,.12); }
.workspace { grid-column: 2; padding: 2.2rem clamp(1.5rem, 4vw, 4rem) 4rem; max-width: 1500px; width: 100%; }
.topbar { display: flex; justify-content: space-between; align-items: end; margin-bottom: 2rem; }
.topbar .eyebrow, .panel-heading .eyebrow { margin-top: 0; }
.topbar h1 { font-size: 3rem; letter-spacing: -.055em; }
.top-actions { display: flex; align-items: center; gap: 1rem; color: var(--muted); font-size: .72rem; }
.ghost { background: transparent; color: var(--green); padding: .5rem; }
.ghost:hover { background: var(--mint); }
.filter-panel { display: grid; grid-template-columns: minmax(13rem, 1.8fr) repeat(4, minmax(8rem, 1fr)) minmax(10rem, auto) auto; gap: .85rem; align-items: end; padding: 1rem; background: var(--card); border: 1px solid var(--line); border-radius: .65rem; box-shadow: var(--shadow); }
.filter-panel button { margin-bottom: 1px; white-space: nowrap; }
.internal-filters { grid-template-columns: minmax(18rem, 1fr) auto; justify-content: start; }
.history-filters { grid-template-columns: minmax(18rem, 1fr) minmax(9rem, auto) minmax(9rem, auto) auto; }
.monthly-filters { grid-template-columns: minmax(18rem, 1fr) minmax(10rem, auto) auto; }
.live-copy { display: flex; align-items: center; gap: .8rem; }
.live-copy small { display: block; color: var(--muted); margin-top: .2rem; }
.check-field { display: flex; align-items: center; gap: .55rem; min-height: 2.8rem; padding-bottom: .15rem; color: var(--muted); line-height: 1.3; }
.check-field input { width: 1rem; height: 1rem; accent-color: var(--green); }
.banner { padding: 1rem; background: #f9e5e4; border-radius: .7rem; margin-top: 1rem; }
.success { background: rgba(122,202,165,.13); color: #9be3c3; border: 1px solid rgba(122,202,165,.25); }
.metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin: 1.4rem 0; }
.internal-summary { grid-template-columns: repeat(6, 1fr); }
#internal-workspace .internal-summary,
.helpdesk-summary { grid-template-columns: repeat(5, 1fr); }
.internal-secondary { grid-template-columns: repeat(2, minmax(16rem, 1fr)); margin-top: -.4rem; }
.internal-periods { grid-template-columns: repeat(2, minmax(18rem, 1fr)); margin-top: -.4rem; }
.metrics article, .panel { background: var(--card); border: 1px solid var(--line); border-radius: .65rem; box-shadow: var(--shadow); }
.metrics article { padding: 1.25rem; position: relative; overflow: hidden; }
.metrics article::after { content: ""; position: absolute; width: 5rem; height: 5rem; border-radius: 50%; background: var(--green); opacity: .16; right: -2.5rem; top: -2.5rem; }
.metrics p { margin: 0; color: var(--muted); font-size: .73rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; }
.metrics strong { display: block; font-size: 2.6rem; margin: .45rem 0 .1rem; color: white; }
.metrics small { color: var(--muted); font-size: .68rem; }
.mini-metrics { display: flex; flex-wrap: wrap; gap: .55rem; margin-top: .9rem; color: var(--muted); font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; }
.mini-metrics span { padding: .32rem .5rem; border-radius: 999px; background: #242725; border: 1px solid #343733; }
.mini-metrics b { color: white; }
.metric-trend { display: inline-block; font-weight: 800; }
.metric-trend.up { color: var(--amber); }
.metric-trend.down { color: #7acaa5; }
.metric-trend.neutral { color: var(--muted); }
.sdm-trend-panel { margin-bottom: 1rem; }
.trend-grid { display: grid; grid-template-columns: repeat(3, minmax(12rem, 1fr)); gap: 1rem; }
.trend-card { padding: 1rem; border: 1px solid #303230; border-radius: .65rem; background: #202221; }
.trend-card h3 { margin: 0 0 .85rem; font-size: 1rem; letter-spacing: -.02em; }
.trend-metrics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
.trend-metrics span { display: block; color: var(--muted); font-size: .62rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.trend-metrics strong { display: block; margin-top: .15rem; color: white; font-size: 1.15rem; }
.trend-card.current { border-color: rgba(145,193,30,.5); box-shadow: inset 0 0 0 1px rgba(145,193,30,.12); }
.visual-grid { display: grid; grid-template-columns: 1.6fr 1fr; gap: 1rem; margin-bottom: 1rem; }
.admin-grid { grid-template-columns: minmax(20rem, .9fr) 1.1fr; margin-top: 1.4rem; }
.panel { padding: 1.25rem; }
.panel-heading { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.2rem; }
.panel-heading h2 { font-size: 1.45rem; }
.panel-heading input { width: 16rem; padding: .55rem .7rem; }
.status-chart { min-height: 14rem; display: grid; align-content: center; gap: .8rem; }
.status-row { display: grid; grid-template-columns: 8rem 1fr 2rem; gap: .8rem; align-items: center; font-size: .76rem; }
.bar-track { height: .55rem; background: #303330; border-radius: 999px; overflow: hidden; }
.bar { height: 100%; border-radius: inherit; background: var(--green); min-width: 3px; }
.status-row:nth-child(2n) .bar { background: var(--amber); }
.status-row:nth-child(3n) .bar { background: var(--rose); }
.flow-chart { display: grid; gap: .85rem; min-height: 24rem; align-content: start; }
.flow-row { display: grid; grid-template-columns: 1.4rem minmax(8rem, 1.1fr) minmax(10rem, 2fr) 4rem minmax(11rem, auto); gap: .85rem; align-items: center; padding: .75rem .85rem; background: #181a19; border: 1px solid #303230; border-radius: .55rem; }
.flow-rank { width: 1.4rem; height: 1.4rem; display: grid; place-items: center; border-radius: 50%; background: rgba(145,193,30,.14); color: var(--green); font-size: .65rem; font-weight: 800; }
.flow-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; font-size: .78rem; }
.flow-bars { display: grid; gap: .38rem; }
.flow-bar-track { height: .72rem; background: #303330; border-radius: 999px; overflow: hidden; }
.flow-bar { height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--green), #c3df44); box-shadow: 0 0 16px rgba(145,193,30,.18); }
.flow-activity { display: grid; gap: .25rem; }
.activity { display: block; height: .22rem; border-radius: 999px; min-width: 0; }
.activity.in { background: #7acaa5; }
.activity.out { background: #d2a43b; }
.flow-values { text-align: right; }
.flow-values strong { display: block; font-size: 1.25rem; line-height: 1; }
.flow-values span { color: var(--muted); font-size: .58rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }
.flow-badges { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .35rem; }
.flow-badges span { padding: .24rem .42rem; background: #242725; border: 1px solid #343733; border-radius: 999px; color: var(--muted); font-size: .62rem; font-weight: 700; white-space: nowrap; }
.flow-badges .net-good { color: #7acaa5; border-color: rgba(122,202,165,.35); }
.flow-badges .net-watch { color: var(--amber); border-color: rgba(210,164,59,.4); }
.insights { display: grid; align-content: start; gap: .7rem; min-height: 14rem; }
.insight { padding: .9rem; background: #242725; border-left: 3px solid var(--green); border-radius: .3rem; line-height: 1.45; font-size: .78rem; }
.insight strong { color: var(--green); }
.ticket-panel { overflow: hidden; padding-bottom: 0; }
.table-wrap { overflow: auto; margin: 0 -1.25rem; max-height: 32rem; }
.ticket-panel .table-wrap { max-height: 44rem; }
.compact-table { max-height: 26rem; }
.ops-table { margin-top: 1rem; }
.risk-breached { color: #ff8989; font-weight: 700; }
.risk-warning { color: #e3bd56; font-weight: 700; }
table { border-collapse: collapse; width: 100%; font-size: .75rem; }
th { position: sticky; top: 0; z-index: 1; background: #262827; color: var(--muted); text-align: left; text-transform: uppercase; letter-spacing: .07em; font-size: .62rem; }
th, td { padding: .8rem 1rem; border-bottom: 1px solid #303230; }
.sort-header { appearance: none; width: 100%; padding: 0; border: 0; border-radius: 0; background: transparent; color: inherit; display: inline-flex; align-items: center; justify-content: flex-start; gap: .35rem; text-align: left; text-transform: inherit; letter-spacing: inherit; font-size: inherit; font-weight: 800; }
.sort-header:hover, .sort-header.active { background: transparent; color: var(--green); }
.sort-header::after { content: "↕"; color: #6f746d; font-size: .68rem; }
.sort-header.active::after { content: "↑"; color: var(--green); }
.sort-header.active[data-direction="desc"]::after { content: "↓"; }
tbody tr:hover { background: #242625; }
td:nth-child(2) { min-width: 18rem; }
.ticket-summary { display: block; font-weight: 600; color: var(--ink); }
td small { display: block; color: var(--muted); margin-top: .25rem; white-space: nowrap; }
.comment { display: grid; gap: .3rem; min-width: 22rem; max-width: 46rem; }
.comment span:last-child { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.4; }
.comment-meta { color: var(--green); font-size: .62rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.muted-cell { color: var(--muted); }
.merge-parent-row { background: #202221; }
.merge-parent-row:hover { background: #232625; }
.merge-parent-toggle {
  width: 100%;
  padding: 0;
  background: transparent;
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: .7rem;
  text-align: left;
}
.merge-parent-toggle:hover { background: transparent; color: var(--green); }
.merge-toggle-icon {
  display: inline-grid;
  place-items: center;
  width: 1.1rem;
  color: var(--green);
  font-size: .85rem;
  flex: 0 0 auto;
}
.pill { display: inline-block; padding: .25rem .5rem; background: var(--mint); color: var(--green); border-radius: 999px; font-size: .66rem; font-weight: 700; }
.pill.status-updated { background: rgba(79, 156, 255, .16); color: #7bb7ff; }
.pill.status-closed { background: rgba(122, 202, 165, .15); color: #7acaa5; }
.pill.status-on-hold { background: rgba(210, 164, 59, .18); color: #e3bd56; }
.pill.danger { background: rgba(201,104,104,.14); color: #ff9e9e; }
.admin-form { display: grid; gap: 1rem; }
.admin-settings-panel { margin: 1rem 0; }
.settings-form { grid-template-columns: repeat(3, minmax(12rem, 1fr)) auto; align-items: end; }
.settings-status { grid-column: 1 / -1; padding: .85rem; background: #242725; border: 1px solid #343733; border-radius: .45rem; color: var(--muted); font-size: .78rem; line-height: 1.45; }
.settings-status .pill { margin-right: .45rem; }
.halo-test-output { margin-top: 1rem; padding: 1rem; background: #121413; border: 1px solid #343733; border-radius: .7rem; color: var(--ink); box-shadow: inset 0 0 0 1px rgba(255,255,255,.015); }
.halo-test-output.success { border-color: rgba(111, 205, 155, .45); }
.halo-test-output.failure { border-color: rgba(189, 79, 79, .55); }
.halo-test-output h3 { margin: 0 0 .75rem; font-size: 1rem; }
.halo-test-output .diag-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: .6rem; margin-bottom: .85rem; }
.halo-test-output .diag-grid div { background: #202321; border: 1px solid #30332f; border-radius: .45rem; padding: .7rem; }
.halo-test-output span { display: block; color: var(--muted); font-size: .62rem; letter-spacing: .08em; text-transform: uppercase; font-weight: 800; }
.halo-test-output strong { display: block; margin-top: .25rem; word-break: break-word; }
.halo-test-output ol { margin: .75rem 0 0; padding-left: 1.2rem; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; color: #d6ddd7; font-size: .78rem; line-height: 1.55; }
.halo-test-output li + li { margin-top: .4rem; }
.admin-check { padding: 0; min-height: auto; }
.admin-role-select { min-width: 12rem; padding: .48rem .6rem; font-size: .72rem; }
.admin-actions { display: flex; flex-wrap: wrap; gap: .35rem; min-width: 18rem; }
.admin-actions .ghost { border: 1px solid #343733; color: var(--muted); padding: .38rem .55rem; font-size: .68rem; }
.admin-actions .ghost:hover { color: var(--green); border-color: rgba(145,193,30,.35); }
.empty-state { color: var(--muted); text-align: center; align-content: center; }
.animated-dashboard {
  position: relative;
  max-width: none;
  overflow: hidden;
  isolation: isolate;
}
.animated-dashboard::before {
  content: "";
  position: fixed;
  inset: -20%;
  z-index: 0;
  background:
    radial-gradient(circle at 16% 22%, rgba(140, 198, 63, .07), transparent 25%),
    radial-gradient(circle at 82% 74%, rgba(140, 198, 63, .055), transparent 24%),
    radial-gradient(circle at 50% 48%, rgba(167, 238, 69, .025), transparent 34%),
    linear-gradient(135deg, #000201, #000302 48%, #010604);
  animation: helpdeskBackgroundDrift 20s ease-in-out infinite alternate;
}
#internal-network,
#helpdesk-network {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: 0;
  pointer-events: none;
}
.dashboard-grid-layer,
.helpdesk-grid-layer {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(140,198,63,.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(140,198,63,.02) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: radial-gradient(circle at center, black 0%, transparent 72%);
  animation: helpdeskGridSlide 26s linear infinite;
}
.animated-dashboard .filter-panel,
.animated-dashboard .metrics article,
.helpdesk-dashboard .filter-panel,
.helpdesk-dashboard .metrics article {
  position: relative;
  z-index: 1;
  background: rgba(28, 29, 29, .82);
  backdrop-filter: blur(8px);
}
.animated-dashboard .topbar,
.animated-dashboard .banner,
.helpdesk-dashboard .topbar,
.helpdesk-dashboard .banner { position: relative; z-index: 1; }
.animated-dashboard .internal-summary,
.helpdesk-summary { position: relative; z-index: 1; }
@keyframes helpdeskBackgroundDrift {
  from { transform: translate3d(-1.5%, -1%, 0) scale(1); }
  to { transform: translate3d(1.5%, 1%, 0) scale(1.04); }
}
@keyframes helpdeskGridSlide {
  from { background-position: 0 0; }
  to { background-position: 72px 72px; }
}
.tv-mode { overflow: auto; }
.tv-mode .ambient { opacity: .28; }
.tv-mode .sidebar { display: none; }
.tv-mode .app-shell { display: block; }
.tv-mode .workspace { display: none; }
.tv-mode.tv-workspace-internal #internal-workspace,
.tv-mode.tv-workspace-helpdesk #helpdesk-workspace { display: block !important; max-width: none; padding: 2rem 2.4rem 3rem; }
.tv-mode.tv-workspace-helpdesk #helpdesk-workspace { padding-top: clamp(3rem, 8vh, 6rem); }
.tv-mode.tv-workspace-helpdesk #helpdesk-workspace .topbar,
.tv-mode.tv-workspace-helpdesk #helpdesk-workspace .helpdesk-status-panel { display: none; }
.tv-mode.tv-workspace-helpdesk #helpdesk-workspace .helpdesk-summary { margin-top: clamp(2rem, 7vh, 5rem); }
.tv-mode #toggle-tv-mode { position: fixed; right: 1.4rem; bottom: 1.4rem; z-index: 20; background: var(--green); color: #10110f; box-shadow: var(--shadow); }
.tv-mode #internal-workspace .topbar,
.tv-mode #helpdesk-workspace .topbar { padding-right: 8rem; }
.tv-mode #internal-workspace .topbar h1,
.tv-mode #helpdesk-workspace .topbar h1 { font-size: clamp(3rem, 5vw, 5.2rem); }
@media (max-width: 1100px) {
  .app-shell { display: block; }
  .sidebar { position: static; width: auto; height: auto; flex-direction: row; align-items: center; }
  .logo { margin: 0 2rem 0 0; }
  nav { display: flex; }
  .sidebar-foot { display: none; }
  .workspace { padding: 1.5rem; }
  .filter-panel { grid-template-columns: repeat(3, 1fr); }
  .internal-summary { grid-template-columns: repeat(3, 1fr); }
  .flow-row { grid-template-columns: 1.4rem minmax(8rem, 1fr) minmax(10rem, 1.4fr) 4rem; }
  .flow-badges { grid-column: 3 / -1; }
}
@media (max-width: 760px) {
  .sidebar { align-items: flex-start; gap: 1rem; overflow-x: auto; }
  .sidebar nav { display: flex; width: max-content; }
  .topbar { align-items: start; }
  .top-actions span { display: none; }
  .filter-panel, .metrics, .visual-grid { grid-template-columns: 1fr; }
  .admin-grid { grid-template-columns: 1fr; }
  .internal-summary { grid-template-columns: repeat(2, 1fr); }
  .metrics { grid-template-columns: repeat(2, 1fr); }
  .flow-row { grid-template-columns: 1.4rem 1fr 3.5rem; }
  .flow-bars, .flow-badges { grid-column: 2 / -1; }
  .panel-heading { align-items: start; gap: 1rem; }
  .panel-heading input { width: 10rem; }
}