@import "../ui/t2b-index.css";

#s-monitor{
  --monitor-page-a:var(--t2b-bg-a);
  --monitor-page-b:var(--t2b-bg-b);
  --monitor-page-c:var(--t2b-bg-c);
  --monitor-surface:var(--t2b-surface-card);
  --monitor-control:var(--t2b-surface-control);
  --monitor-line:var(--t2b-line);
  --monitor-line-soft:var(--t2b-line-soft);
  --monitor-text:var(--t2b-text);
  --monitor-text-2:var(--t2b-text-2);
  --monitor-muted:var(--t2b-muted);
  --monitor-meta:var(--t2b-meta);
  --monitor-radius:var(--t2b-radius-card);
  --monitor-shadow:var(--t2b-shadow-card);
  background:linear-gradient(105deg,var(--monitor-page-a),var(--monitor-page-b) 50%,var(--monitor-page-c));
}

#monitor-content{
  min-height:100%;
  padding:10px 10px calc(96px + env(safe-area-inset-bottom));
  background:transparent;
}

#s-monitor .monitor-wrap{
  width:min(1120px,100%);
  margin:0 auto;
  display:grid;
  gap:10px;
}

#s-monitor .monitor-hero,
#s-monitor .monitor-filters,
#s-monitor .monitor-card:not(.t2b-card),
#s-monitor .monitor-stat,
#s-monitor .monitor-ux-stat,
#s-monitor .monitor-device-summary-item,
#s-monitor .monitor-server-metric,
#s-monitor .monitor-server-chart{
  background:var(--monitor-surface);
  border:1px solid var(--monitor-line);
  border-radius:var(--monitor-radius);
  box-shadow:var(--monitor-shadow);
}

#s-monitor .monitor-hero{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:14px;
}

#s-monitor .monitor-kicker{
  color:var(--t2b-brand-text-deep);
  font-size:var(--t2b-font-meta);
  font-weight:850;
  text-transform:uppercase;
  letter-spacing:.06em;
}

#s-monitor .monitor-hero h2{
  margin:2px 0 3px;
  color:var(--t2b-brand-text-deep);
  font-family:var(--t2b-font);
  font-size:calc(var(--t2b-font-title) * 1.22);
  line-height:1.05;
  font-weight:900;
  letter-spacing:0;
}

#s-monitor .monitor-hero p{
  margin:0;
  color:var(--monitor-muted);
  font-size:var(--t2b-font-meta);
  line-height:1.35;
  font-weight:650;
}

#s-monitor .monitor-refresh:not(.t2b-btn),
#s-monitor .monitor-filters button:not(.t2b-btn),
#s-monitor .monitor-chip,
#s-monitor .monitor-server-range button,
.monitor-chart-head button{
  min-height:34px;
  border:1px solid color-mix(in srgb,var(--t2b-brand) 24%,var(--t2b-surface-card));
  border-radius:999px;
  background:var(--t2b-brand-soft);
  color:var(--t2b-brand-text-deep);
  font-family:var(--t2b-font);
  font-size:var(--t2b-font-control);
  font-weight:850;
  letter-spacing:0;
  cursor:pointer;
  box-shadow:none;
}

#s-monitor .monitor-refresh:not(.t2b-btn){
  padding:0 13px;
  background:linear-gradient(135deg,var(--t2b-brand),var(--t2b-brand-deep));
  color:var(--t2b-on-accent);
  border-color:transparent;
}

#s-monitor .monitor-filters{
  display:grid;
  grid-template-columns:150px minmax(160px,1fr) minmax(150px,180px) auto;
  gap:8px;
  padding:9px;
}

#s-monitor .monitor-filters input:not(.t2b-input),
#s-monitor .monitor-filters select:not(.t2b-select){
  height:34px;
  min-width:0;
  border:1px solid var(--t2b-line-control);
  border-radius:999px;
  background:var(--monitor-control);
  color:var(--monitor-text-2);
  font-family:var(--t2b-font);
  font-size:var(--t2b-font-control);
  font-weight:750;
  padding:0 10px;
}

#s-monitor .monitor-stats,
#s-monitor .monitor-ux-stats,
#s-monitor .monitor-device-summary,
#s-monitor .monitor-server-grid,
#s-monitor .monitor-server-charts{
  display:grid;
  gap:8px;
}

#s-monitor .monitor-stats{grid-template-columns:repeat(5,minmax(0,1fr));}
#s-monitor .monitor-ux-stats{grid-template-columns:repeat(9,minmax(92px,1fr));padding:10px;border-bottom:1px solid var(--monitor-line-soft);overflow-x:auto;}
#s-monitor .monitor-device-summary{grid-template-columns:repeat(5,minmax(0,1fr));padding:10px;border-bottom:1px solid var(--monitor-line-soft);}
#s-monitor .monitor-server-grid{grid-template-columns:repeat(4,minmax(0,1fr));padding:8px 10px;}
#s-monitor .monitor-server-charts{grid-template-columns:repeat(5,minmax(0,1fr));padding:0 10px 10px;}

#s-monitor .monitor-device-day-summary{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;
  padding:10px;
  border-bottom:1px solid var(--monitor-line-soft);
}

#s-monitor .monitor-device-day-summary button{
  min-width:0;
  padding:10px 12px;
  border:1px solid var(--monitor-line-soft);
  border-radius:var(--t2b-radius-control);
  background:var(--t2b-surface-soft);
  text-align:left;
  cursor:pointer;
  box-shadow:var(--t2b-shadow-soft);
  font-family:var(--t2b-font);
}

#s-monitor .monitor-device-day-summary button.active{
  border-color:color-mix(in srgb,var(--t2b-brand) 45%,var(--monitor-line-soft));
  background:color-mix(in srgb,var(--t2b-brand) 8%,var(--t2b-surface-soft));
}

#s-monitor .monitor-device-day-summary b{
  display:block;
  color:var(--t2b-brand);
  font-family:var(--t2b-font);
  font-size:var(--t2b-font-score);
  line-height:1;
  font-weight:950;
}

#s-monitor .monitor-device-day-summary span{
  display:block;
  margin-top:4px;
  color:var(--monitor-meta);
  font-size:var(--t2b-font-meta);
  font-weight:850;
}

#s-monitor .monitor-stat,
#s-monitor .monitor-ux-stat,
#s-monitor .monitor-device-summary-item,
#s-monitor .monitor-server-metric{
  min-width:0;
  padding:10px 8px;
  text-align:center;
  box-shadow:var(--t2b-shadow-soft);
}

#s-monitor .monitor-stat b,
#s-monitor .monitor-ux-stat b,
#s-monitor .monitor-device-summary-item b,
#s-monitor .monitor-server-metric b,
#s-monitor .monitor-device-right b{
  display:block;
  color:var(--t2b-brand);
  font-family:var(--t2b-font);
  font-size:var(--t2b-font-score);
  line-height:1;
  font-weight:950;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

#s-monitor .monitor-stat span,
#s-monitor .monitor-ux-stat span,
#s-monitor .monitor-device-summary-item span,
#s-monitor .monitor-server-metric span,
#s-monitor .monitor-server-metric em{
  display:block;
  margin-top:5px;
  color:var(--monitor-meta);
  font-size:var(--t2b-font-meta);
  line-height:1.18;
  font-weight:800;
  text-transform:none;
  letter-spacing:0;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

#s-monitor .monitor-stat.warn b,
#s-monitor .monitor-ux-stat.warn b{color:var(--t2b-warn);}
#s-monitor .monitor-stat.danger b,
#s-monitor .monitor-ux-stat.danger b{color:var(--t2b-hot);}

#s-monitor .monitor-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
}

#s-monitor .monitor-card:not(.t2b-card){
  overflow:hidden;
}

#s-monitor .monitor-card.wide{
  grid-column:1/-1;
}

#s-monitor .monitor-card-head:not(.t2b-card-head),
.monitor-chart-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:11px 12px;
  border-bottom:1px solid var(--t2b-line-soft);
  background:var(--t2b-surface-soft);
}

#s-monitor .monitor-card-head:not(.t2b-card-head) b,
.monitor-chart-head b{
  color:var(--t2b-text);
  font-family:var(--t2b-font);
  font-size:var(--t2b-font-title);
  line-height:1.15;
  font-weight:850;
}

#s-monitor .monitor-card-head:not(.t2b-card-head) span,
.monitor-chart-head span{
  color:var(--t2b-meta);
  font-size:var(--t2b-font-meta);
  font-weight:750;
  text-align:right;
}

#s-monitor .monitor-chip-row,
#s-monitor .monitor-server-range{
  display:flex;
  flex-wrap:wrap;
  gap:7px;
  padding:10px 12px;
}

#s-monitor .monitor-chip{
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:0 10px;
}

#s-monitor .monitor-chip b{font:inherit;color:inherit;}
#s-monitor .monitor-chip span{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:20px;
  height:20px;
  border-radius:999px;
  background:var(--monitor-surface);
  color:var(--t2b-brand-text-deep);
  font-size:var(--t2b-font-meta);
  font-weight:850;
}

#s-monitor .monitor-chip.active,
#s-monitor .monitor-server-range button.active{
  background:linear-gradient(135deg,var(--t2b-brand),var(--t2b-brand-deep));
  color:var(--t2b-on-accent);
  border-color:transparent;
}

#s-monitor .monitor-device-row,
#s-monitor .monitor-ux-row,
#s-monitor .monitor-log-row{
  border-bottom:1px solid var(--monitor-line-soft);
  background:var(--monitor-surface);
}

#s-monitor .monitor-device-row{
  display:grid;
  grid-template-columns:auto minmax(0,1fr) minmax(96px,150px);
  align-items:center;
  gap:9px;
  padding:10px 12px;
}

#s-monitor .monitor-device-avatar{
  width:34px;
  height:34px;
  border-radius:999px;
  display:grid;
  place-items:center;
  background:linear-gradient(145deg,var(--t2b-brand),var(--t2b-good));
  color:var(--t2b-on-accent);
  font-size:calc(var(--t2b-font-meta) * .95);
  font-weight:900;
  flex:0 0 auto;
}

#s-monitor .monitor-device-main,
#s-monitor .monitor-device-right{min-width:0;}

#s-monitor .monitor-device-main b,
#s-monitor .monitor-ux-row b,
#s-monitor .monitor-log-main b{
  display:block;
  color:var(--monitor-text);
  font-size:var(--t2b-font-body);
  line-height:1.2;
  font-weight:850;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

#s-monitor .monitor-device-main span,
#s-monitor .monitor-device-right span,
#s-monitor .monitor-ux-row span,
#s-monitor .monitor-log-sub,
#s-monitor .monitor-log-main em{
  display:block;
  margin-top:3px;
  color:var(--monitor-meta);
  font-size:var(--t2b-font-meta);
  line-height:1.3;
  font-weight:650;
}

#s-monitor .monitor-device-right{text-align:right;}

#s-monitor .monitor-ux-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:10px 12px;
}

#s-monitor .monitor-ux-row strong{
  color:var(--t2b-brand-text-deep);
  font-size:var(--t2b-font-score);
  font-weight:900;
  white-space:nowrap;
}

#s-monitor .monitor-ux-row.warn{background:var(--t2b-warn-soft);}
#s-monitor .monitor-ux-row.danger,
#s-monitor .monitor-log-row.error{background:var(--t2b-hot-soft);}

#s-monitor .monitor-log-row{
  display:grid;
  gap:4px;
  padding:10px 12px;
  cursor:pointer;
}

#s-monitor .monitor-log-main{
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;
  gap:8px;
  min-width:0;
}

#s-monitor .monitor-log-type,
#s-monitor .monitor-server-status{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:22px;
  border-radius:999px;
  padding:0 8px;
  background:var(--t2b-brand-soft);
  color:var(--t2b-brand-text-deep);
  font-size:var(--t2b-font-meta);
  font-weight:850;
}

#s-monitor .monitor-log-row pre{
  display:none;
  margin:4px 0 0;
  max-height:220px;
  overflow:auto;
  border-radius:10px;
  background:var(--t2b-surface-control);
  color:var(--monitor-text-2);
  font-size:calc(var(--t2b-font-meta) * .92);
  line-height:1.35;
  padding:8px;
  white-space:pre-wrap;
}

#s-monitor .monitor-log-row.open pre{display:block;}

#s-monitor .monitor-muted,
#s-monitor .monitor-empty,
#s-monitor .monitor-loading{
  padding:18px 12px;
  color:var(--monitor-muted);
  font-size:var(--t2b-font-body);
  font-weight:700;
  text-align:center;
}

#s-monitor .monitor-server-sub{
  padding:9px 12px 0;
  color:var(--monitor-meta);
  font-size:var(--t2b-font-meta);
  font-weight:850;
}

#s-monitor .monitor-server-alerts{
  display:grid;
  gap:7px;
  padding:0 10px 10px;
}

#s-monitor .monitor-server-alerts div{
  border:1px solid color-mix(in srgb,var(--t2b-warn) 28%,var(--monitor-surface));
  border-radius:12px;
  background:var(--t2b-warn-soft);
  color:var(--t2b-warn-text-deep);
  font-size:var(--t2b-font-body);
  font-weight:750;
  padding:8px 9px;
}

.monitor-chart-modal{
  position:fixed;
  inset:0;
  z-index:2000;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:16px;
  background:rgba(15,23,42,.52);
}

.monitor-chart-sheet{
  width:min(1120px,96vw);
  max-height:88vh;
  overflow:auto;
  border:1px solid var(--t2b-line);
  border-radius:18px;
  background:var(--t2b-surface-card);
  box-shadow:0 24px 80px rgba(15,23,42,.26);
}

.monitor-chart-summary{
  padding:10px 12px;
  color:var(--t2b-meta);
  font-size:var(--t2b-font-meta);
  font-weight:750;
  border-bottom:1px solid var(--t2b-line-soft);
}

.monitor-chart-body{
  padding:10px 12px 12px;
  color:var(--t2b-text);
}

@media (max-width:767px){
  #monitor-content{padding:8px 7px calc(90px + env(safe-area-inset-bottom));}
  #s-monitor .monitor-wrap{gap:8px;}
  #s-monitor .monitor-hero{align-items:flex-start;padding:12px;}
  #s-monitor .monitor-hero h2{font-size:calc(var(--t2b-font-title) * 1.06);}
  #s-monitor .monitor-refresh:not(.t2b-btn){min-height:32px;padding:0 10px;}
  #s-monitor .monitor-filters{grid-template-columns:1fr 1fr;gap:7px;}
  #s-monitor .monitor-filters button:not(.t2b-btn){grid-column:1/-1;}
  #s-monitor .monitor-stats{grid-template-columns:repeat(2,minmax(0,1fr));}
  #s-monitor .monitor-stats .monitor-stat:last-child{grid-column:1/-1;}
  #s-monitor .monitor-grid{grid-template-columns:1fr;}
  #s-monitor .monitor-server-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  #s-monitor .monitor-server-charts{grid-template-columns:1fr;}
  #s-monitor .monitor-device-summary{grid-template-columns:repeat(2,minmax(0,1fr));}
  #s-monitor .monitor-device-summary .monitor-device-summary-item:last-child{grid-column:1/-1;}
  #s-monitor .monitor-device-row{grid-template-columns:auto minmax(0,1fr);}
  #s-monitor .monitor-device-right{grid-column:2;text-align:left;}
  #s-monitor .monitor-log-main{grid-template-columns:auto minmax(0,1fr);}
  #s-monitor .monitor-log-main em{grid-column:2;}
}