/* Operations-console layout from the user's Screenshot_2 reference, 2026-10-05.
   Doiteasy colors/artwork remain canonical; all card corners are 2px. */
:root {
  --workspace-radius: 2px;
  --console-sidebar: #0f1629;
  --console-sidebar-end: #080d1d;
  --console-muted: #586471;
}
body:has(.shell) { background: #111315; padding: 14px; }
.shell { display: grid; grid-template-columns: 250px minmax(0,1fr); max-width: 1920px; margin: auto; border-radius: 2px; overflow: clip; background: var(--console-sidebar); min-height: calc(100vh - 28px); box-shadow: none; }
.shell > aside { display: flex; flex-direction: column; background: linear-gradient(160deg,var(--console-sidebar),var(--console-sidebar-end)); color: #d9e2ed; padding: 25px 18px; border: 0; }
.shell > aside .brand { background: white; padding: 11px 8px; border-radius: 2px; margin-bottom: 23px; gap: 7px; justify-content: space-between; }
.shell > aside .brand img { width: 152px; }
.shell > aside .brand small { font-size: 9px; padding: 4px 5px; }
@media (min-width: 761px) {
  .shell > aside { position: sticky; top: 14px; height: calc(100vh - 28px); overflow-y: auto; align-self: start; overscroll-behavior: contain; }
  .shell > aside .brand { flex-shrink: 0; }
}
.shell .company { background: transparent; border: 0; border-bottom: 1px solid #ffffff12; border-radius: 0; padding: 0 9px 20px; margin-bottom: 21px; }
.shell .company small { color: #94a3b8; font-size: 9px; letter-spacing: 1.2px; }
.shell .company strong { color: #eef3f9; font-size: 12px; }
.shell .workspace-link { color: #a8e5c4; font-size: 10px; padding-top: 7px; }
.shell nav { gap: 21px; }
.shell .nav-group { gap: 5px; }
.shell .nav-group > small { color: #94a3b8; font-size: 9px; padding: 0 10px 5px; letter-spacing: 1.2px; }
.shell nav button { color: #cbd5e1; padding: 10px; border-radius: 2px; font-size: 12px; border: 1px solid transparent; gap: 10px; transition: background .15s; }
.shell nav button:hover { background: #ffffff08; }
.shell nav button .ui-icon { width: 18px; height: 18px; color: #a6b4c6; }
.shell nav button.active { color: #b7e8ca; background: #07924724; border-color: #07924712; box-shadow: none; font-weight: 700; }
.shell nav button.active .ui-icon { color: #b7e8ca; }
.sidebar-state { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 23px 10px 0; margin-top: auto; border-top: 1px solid #ffffff16; }
.sidebar-state strong { color: #b7e8ca; font-size: 10px; letter-spacing: 1px; }
.sidebar-state small { display: block; width: 100%; color: #94a3b8; font-size: 10px; margin-left: 16px; }
.shell .identity { color: #a6b4c6; padding: 15px 10px 0; margin: 0; font-size: 10px; line-height: 1.7; }
.shell .identity strong { color: #eef3f9; }
.shell .identity button { background: transparent; color: #d9e2ed; border: 1px solid #ffffff25; border-radius: 2px; font-size: 10px; padding: 6px 10px; margin-top: 10px; }
.shell .identity button:hover { background: #ffffff08; }
.shell > main { display: flex; flex-direction: column; background: var(--doiteasy-canvas); }
.shell header { height: 96px; padding: 21px 28px; background: white; border-bottom: 1px solid var(--doiteasy-border); }
.header-context { display: flex; align-items: center; gap: 11px; min-width: 0; }
.header-context > div { min-width: 0; }
.header-context strong { display: block; font-size: 23px; letter-spacing: -.5px; font-weight: 750; line-height: 1.25; color: #121a27; }
.header-context small { display: block; font-size: 11px; color: var(--console-muted); margin-top: 6px; }
.header-actions { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.profile-avatar { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: #edf1f4; color: #3c4b5d; font-weight: 700; font-size: 11px; }
.live { display: inline-flex; align-items: center; border: 1px solid #8bcbb0; border-radius: 25px; padding: 9px 12px; background: var(--doiteasy-mint); color: var(--doiteasy-brand-green-dark); font-size: 10px; letter-spacing: .3px; white-space: nowrap; }
.live::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--doiteasy-brand-green); margin-right: 7px; }
.shell .menu-toggle { display: none; padding: 7px; border-radius: 2px; }
.content { width: 100%; max-width: 1760px; margin: 0 auto; padding: 20px 28px 26px; flex: 1; background: var(--doiteasy-canvas); }
.page-head { margin-bottom: 22px; align-items: center; gap: 18px; }
.page-head h1 { font-size: 25px; letter-spacing: -.7px; font-weight: 700; margin-bottom: 5px; }
.page-head p { font-size: 12px; }
.eyebrow { font-size: 9px; }
.head-actions { gap: 8px; }
.head-actions button, .head-actions select { border-radius: 2px; min-height: 34px; font-size: 10px; padding: 8px 10px; }
.head-actions select { padding-right: 20px; }
.head-actions .ui-icon { width: 16px; height: 16px; }
.overview-controls { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 17px; }
.overview-controls h1 { font-size: 11px; color: var(--console-muted); text-transform: uppercase; letter-spacing: 1px; margin: 0; }
.stats { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 17px; margin: 0 0 20px; }
.stat { border: 1px solid var(--doiteasy-border); border-radius: 2px; padding: 18px; background: white; box-shadow: none; }
.stat-label span { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .85px; color: var(--console-muted); }
.stat-label .ui-icon { display: none; }
.stat strong { color: #121a27; font-size: 31px; letter-spacing: -.75px; font-weight: 750; margin: 12px 0 8px; }
.stat strong small { display: inline; color: var(--console-muted); font-size: 15px; letter-spacing: 0; font-weight: 400; margin-left: 3px; }
.stat > small { font-size: 9px; }
.stat-accent { background: white; border-color: var(--doiteasy-border); }
.stat-accent .stat-label, .stat-accent .stat-label span, .stat-accent .ui-icon, .stat-accent strong { color: inherit; }
.stat-accent > small { color: var(--console-muted); }
.stat .metric-note { display: inline-block; padding: 3px 9px; font-size: 9px; border-radius: 20px; font-weight: 650; line-height: 1.35; }
.metric-note.good { background: var(--doiteasy-mint); color: var(--doiteasy-brand-green-dark); }
.metric-note.warn { background: #fff6db; color: var(--doiteasy-warning); }
.metric-note.bad { background: #fdece9; color: var(--doiteasy-danger); }
.metric-note.neutral { background: #f0f3f5; color: #485462; }
.card { border: 1px solid var(--doiteasy-border); border-radius: 2px; padding: 22px; box-shadow: none; background: white; min-width: 0; }
.card-head { margin-bottom: 17px; align-items: flex-start; gap: 12px; }
.card-head h2 { font-size: 15px; font-weight: 750; letter-spacing: -.15px; margin-bottom: 5px; color: #121a27; }
.card-head p { font-size: 10px; line-height: 1.6; }
.text-button { font-size: 10px; }
.overview-charts { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 20px; align-items: stretch; }
.endpoint-card, .trend-card { display: flex; flex-direction: column; }
.endpoint-chart, .trend-card .health-chart { display: block; width: 100%; height: auto; min-height: 235px; flex: 1; }
.chart-grid { stroke: #e8edf0; stroke-dasharray: 0; stroke-width: 1; }
.chart-label { fill: var(--console-muted); font: 13px 'Segoe UI',Arial,sans-serif; }
.endpoint-bar.good { fill: var(--doiteasy-brand-green); }
.endpoint-bar.warn { fill: var(--doiteasy-accent-gold); }
.endpoint-bar.bad { fill: var(--doiteasy-danger); }
.endpoint-bar.unknown { fill: #f5f6f7; stroke: #a1abb6; stroke-dasharray: 4 4; }
.bar-value { fill: #121a27; font: 700 16px 'Segoe UI',Arial,sans-serif; }
.bar-label { fill: #425160; font: 600 13px 'Segoe UI',Arial,sans-serif; }
.chart-line { stroke: var(--doiteasy-brand-green); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; fill: none; filter: none; }
.chart-area { fill: #0792470a; stroke: none; }
.chart-point { fill: white; stroke: var(--doiteasy-brand-green); stroke-width: 2.5; }
.chart-key { display: inline-flex; align-items: center; gap: 6px; font-size: 9px; color: var(--console-muted); white-space: nowrap; margin-top: 5px; }
.chart-footer { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-top: 13px; margin-top: 12px; border-top: 1px solid #eef1f3; color: var(--console-muted); font-size: 9px; }
.chart-empty { display: grid; align-content: center; justify-items: center; min-height: 235px; color: var(--console-muted); text-align: center; font-size: 12px; line-height: 1.8; }
.chart-empty button { margin-top: 12px; font-size: 11px; border-radius: 2px; }
.overview-bottom { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.75fr); gap: 20px; margin-top: 20px; align-items: stretch; }
.fleet-card { display: flex; flex-direction: column; }
.fleet-layout { display: flex; align-items: center; gap: 8px; flex: 1; min-height: 205px; }
.donut-wrap { width: 170px; max-width: 52%; margin: 0 -8px 0 0; flex-shrink: 0; }
.donut-wrap svg { width: 100%; display: block; }
.donut-track, .donut-segment { fill: none; stroke-width: 23; }
.donut-track { stroke: #edf1f3; }
.donut-segment { transform: rotate(-90deg); transform-origin: 100px 100px; }
.donut-segment.good { stroke: var(--doiteasy-brand-green); }
.donut-segment.warn { stroke: var(--doiteasy-accent-gold); }
.donut-segment.bad { stroke: var(--doiteasy-danger); }
.donut-segment.neutral { stroke: var(--doiteasy-brand-silver); }
.donut-total { fill: #121a27; font: 750 29px 'Segoe UI',Arial,sans-serif; }
.donut-caption { fill: var(--console-muted); font: 9px 'Segoe UI',Arial,sans-serif; letter-spacing: 1px; }
.donut-legend { display: grid; gap: 15px; flex: 1; min-width: 0; }
.donut-legend > div { display: flex; align-items: center; gap: 7px; font-size: 10px; color: #3e4c5b; }
.donut-legend strong { margin-left: auto; color: #121a27; font-size: 10px; }
.donut-legend small { color: var(--console-muted); font-size: 9px; width: 28px; text-align: right; }
.status-dot { width: 8px; height: 8px; flex-shrink: 0; }
.donut-legend .status-dot { border-radius: 1px; }
.fleet-note { padding: 12px; background: #f8f9fa; border: 1px solid #e6ecef; border-radius: 2px; font-size: 9px; line-height: 1.8; color: var(--console-muted); display: flex; flex-direction: column; gap: 4px; text-align: center; margin-top: 12px; }
.fleet-note strong { color: var(--doiteasy-brand-green-dark); margin-left: 5px; }
.table-card { padding: 0; }
.table-top { padding: 22px 22px 13px; border-bottom: 0; }
.table-top h2 { font-size: 15px; font-weight: 750; letter-spacing: -.15px; }
.table-top p { font-size: 10px; }
.table-top > .text-button { font-size: 9px; }
th { font-size: 9px; padding: 12px 18px; background: #fafbfc; color: var(--console-muted); letter-spacing: .7px; }
td { font-size: 11px; padding: 17px 18px; border-color: #eef1f3; }
td small { font-size: 9px; }
.compact-device-table td:first-child small { white-space: normal; max-width: 205px; }
.table-wrap table tr:last-child td { border-bottom: 0; }
.pill { border-radius: 20px; font-size: 9px; padding: 4px 10px; }
.score { border-radius: 2px; font-size: 11px; padding: 4px 7px; }
.operations-card { display: flex; flex-direction: column; }
.operations-footer { display: flex; justify-content: space-between; flex-wrap: wrap; align-items: center; gap: 12px; font-size: 9px; color: var(--console-muted); border-top: 1px solid #eef1f3; padding: 15px 22px; margin-top: auto; }
.operations-footer strong { color: #121a27; margin-left: 6px; }
.toolbar input, .toolbar select { border-radius: 2px; font-size: 12px; }
.tabs button { font-size: 12px; }
.app-footer { border-top: 1px solid #e8edf0; padding: 16px 28px; font-size: 9px; color: var(--console-muted); }
.app-footer span { font-size: 9px; }
.health-note, dialog, .login, .issue, .metric-strip > div, .platform-summary > div, .callout, .coverage-grid > div { border-radius: 2px; }
.health-note { font-size: 11px; }
@media (min-width: 1650px) {
  .shell { grid-template-columns: 285px minmax(0,1fr); }
  .shell > aside { padding: 30px 23px; }
  .shell > aside .brand img { width: 175px; }
  .shell nav button { font-size: 14px; padding: 12px; }
  .shell .company strong { font-size: 14px; }
  .shell header { height: 110px; padding: 24px 34px; }
  .header-context strong { font-size: 28px; }
  .header-context small { font-size: 13px; }
  .content { padding: 23px 34px 30px; }
  .stats { gap: 22px; }
  .stat { padding: 21px; }
  .stat-label span { font-size: 12px; }
  .stat strong { font-size: 36px; }
  .stat .metric-note { font-size: 11px; }
  .card-head h2, .table-top h2 { font-size: 18px; }
  .card-head p, .table-top p { font-size: 12px; }
  .card { padding: 25px; }
  .table-card { padding: 0; }
  .table-top { padding: 25px 25px 17px; }
  .endpoint-chart, .trend-card .health-chart { min-height: 285px; }
  .donut-wrap { width: 205px; }
  .donut-legend > div { font-size: 12px; }
  .donut-legend strong, .donut-legend small { font-size: 11px; }
  td { font-size: 13px; }
}
@media (max-width: 1200px) {
  .shell { grid-template-columns: 220px minmax(0,1fr); }
  .shell > aside { padding: 23px 14px; }
  .shell > aside .brand img { width: 133px; }
  .header-context strong { font-size: 19px; }
  .content { padding: 20px; }
  .card { padding: 18px; }
  .table-card { padding: 0; }
  .stats { gap: 12px; }
  .stat { padding: 16px 13px; }
  .stat-label span { font-size: 9px; }
  .stat .metric-note { font-size: 8px; }
  .card-head h2, .table-top h2 { font-size: 13px; }
  .overview-bottom { grid-template-columns: minmax(0,1fr) minmax(0,1.35fr); }
  .fleet-layout { flex-direction: column-reverse; gap: 15px; }
  .donut-wrap { width: 170px; max-width: 100%; margin: 0; }
  .donut-legend { width: 100%; }
  .profile-avatar { display: none; }
}
@media (max-width: 1000px) {
  .stats { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .overview-charts, .overview-bottom { grid-template-columns: minmax(0,1fr); }
  .fleet-layout { flex-direction: row; gap: 25px; }
  .chart-key { margin-top: 3px; }
  .overview-controls { align-items: flex-start; flex-direction: column; }
  .page-head { flex-direction: column; }
  .card-head { flex-direction: row; }
}
@media (max-width: 760px) {
  body:has(.shell) { padding: 0; }
  .shell { display: block; border-radius: 0; min-height: 100vh; }
  .shell > aside { display: none; }
  .shell.nav-open > aside { display: flex; position: fixed; top: 76px; bottom: 0; left: 0; width: 265px; z-index: 20; overflow: auto; border-radius: 0; box-shadow: 15px 0 40px #080d1d40; }
  .shell nav, .shell .nav-group { display: grid; overflow: visible; }
  .shell .nav-group > small { display: block; }
  .sidebar-state { margin-top: 25px; }
  .shell .identity { display: block; }
  .shell .menu-toggle { display: inline-flex; flex-shrink: 0; }
  .shell header { height: 76px; position: sticky; top: 0; z-index: 15; padding: 14px; flex-wrap: nowrap; gap: 6px; }
  .header-context { gap: 10px; }
  .header-context strong { font-size: 13px; letter-spacing: -.15px; }
  .header-context small { font-size: 9px; line-height: 1.5; margin-top: 4px; }
  .header-actions { display: none; }
  .content { padding: 18px 14px; }
  .page-head h1 { font-size: 23px; }
  .head-actions { flex-wrap: wrap; gap: 7px; }
  .head-actions button, .head-actions select { min-height: 33px; font-size: 10px; padding: 8px 10px; }
  .overview-controls { margin-bottom: 16px; }
  .stats { gap: 10px; margin-bottom: 17px; }
  .stat { padding: 17px 12px; border-radius: 2px; }
  .stat strong { font-size: 28px; }
  .stat-label span { font-size: 9px; line-height: 1.5; }
  .stat .metric-note { font-size: 8px; padding: 3px 6px; }
  .card { padding: 18px; border-radius: 2px; }
  .card-head { flex-wrap: wrap; margin-bottom: 14px; }
  .card-head h2, .table-top h2 { font-size: 14px; }
  .card-head p { font-size: 10px; }
  .overview-charts, .overview-bottom { gap: 17px; }
  .overview-bottom { margin-top: 17px; }
  .endpoint-chart, .trend-card .health-chart { min-height: 170px; }
  .chart-footer { flex-wrap: wrap; font-size: 8px; }
  .fleet-layout { flex-direction: column-reverse; gap: 17px; }
  .donut-wrap { width: 180px; }
  .donut-legend { width: 100%; }
  .donut-legend > div { font-size: 11px; }
  .table-card { padding: 0; }
  .table-top { padding: 18px; flex-wrap: wrap; }
  .operations-footer { padding: 15px 18px; }
  .app-footer { padding: 16px 14px; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }
.choice { display:flex;align-items:flex-start;gap:10px;margin:12px 0; }
.choice input[type=checkbox] { width:18px;min-width:18px;margin:2px 0; }
.explanation { white-space:pre-wrap;line-height:1.7;margin-top:24px; }
.chat-log { max-height:350px;overflow:auto;border:1px solid var(--doiteasy-border);padding:16px;margin:18px 0;border-radius:2px; }
.chat-log p { border-bottom:1px solid var(--doiteasy-border);padding:10px 0;white-space:pre-wrap;overflow-wrap:anywhere; }
.chat-log small { float:right;color:var(--console-muted);font-size:11px; }
.support-client { margin:40px auto;padding:28px;background:white;max-width:760px;min-height:70vh; }
.support-client .brand { width:200px; }
.support-client form { display:grid;gap:10px;margin:24px 0; }
.support-client pre,dialog pre { max-height:300px;overflow:auto;white-space:pre-wrap;overflow-wrap:anywhere; }
.support-client textarea,dialog textarea { min-height:90px;width:100%; }