/* assets/css/monitor.css — split from index.html */

.menu-badge {
  flex-shrink:0; min-width:18px; height:18px; padding:0 5px; border-radius:9px;
  background:#F53F3F; color:#fff; font-size:11px; font-weight:600; line-height:18px; text-align:center;
}

.monitor-tabs { display:flex; gap:0; border-bottom:1px solid #E5E6EB; margin:0 0 16px; }

.monitor-tab {
  border:none; background:transparent; padding:12px 4px; margin:0 20px 0 0;
  font-size:14px; color:#4E5969; cursor:pointer; position:relative; line-height:22px;
}

.monitor-tab:hover { color:var(--primary); }

.monitor-tab.on { color:var(--primary); font-weight:500; }

.monitor-tab.on::after {
  content:''; position:absolute; left:0; right:0; bottom:-1px; height:2px;
  background:var(--primary); border-radius:1px;
}

.monitor-card-tabs { display:flex; align-items:flex-end; gap:0; margin:0; }

.monitor-card-tab {
  border:1px solid #E5E6EB; border-bottom-color:#E5E6EB; background:#F2F3F5;
  height:36px; padding:0 16px; margin:0 0 -1px; border-radius:6px 6px 0 0;
  font-size:14px; color:#4E5969; cursor:pointer; line-height:34px; position:relative; z-index:0;
}

.monitor-card-tab + .monitor-card-tab { margin-left:10px; }

.monitor-card-tab:hover { color:var(--primary); }

.monitor-card-tab.on {
  background:#fff; color:var(--primary); font-weight:500; z-index:2;
  border-color:#E5E6EB; border-bottom-color:#fff;
  border-top:2px solid var(--primary); line-height:32px;
}

.monitor-panel {
  border:1px solid #E5E6EB; border-radius:0; background:#fff; overflow:hidden; position:relative; z-index:1;
}

.monitor-panel .table-wrap { margin:0; border:none; border-radius:0 !important; }

.monitor-panel .table-wrap thead th:first-child,
.monitor-panel .table-wrap thead th:last-child,
.monitor-panel .table-wrap tbody tr:last-child td:first-child,
.monitor-panel .table-wrap tbody tr:last-child td:last-child { border-radius:0 !important; }

.monitor-filter {
  display:flex; flex-wrap:wrap; gap:12px 16px; align-items:center;
  padding:14px 16px; border-bottom:1px solid #E5E6EB; background:#fff;
}

.monitor-filter .mf-item { display:flex; align-items:center; gap:8px; }

.monitor-filter .mf-item > span { color:#4E5969; font-size:14px; white-space:nowrap; }

.monitor-filter .form-select { min-width:240px; width:240px; }

.monitor-filter .form-select-btn {
  height:32px; border-radius:2px; border-color:#E5E6EB; padding:0 28px 0 10px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; display:block;
  line-height:30px;
}

.monitor-filter .form-select-caret {
  right:8px; top:50%; transform:translateY(-50%);
}

.monitor-filter .form-select.open .form-select-caret {
  transform:translateY(-50%) rotate(180deg);
}

.monitor-filter .form-select-menu {
  top:calc(100% + 4px); bottom:auto; max-height:240px; overflow:auto;
  min-width:100%; width:max-content; max-width:360px;
}

.monitor-filter .form-select-menu button {
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

.monitor-filter .dr-input {
  display:flex; align-items:center; min-width:240px; height:32px; border:1px solid #E5E6EB; border-radius:2px;
  background:#fff; cursor:pointer; padding:0 32px 0 10px; position:relative; box-sizing:border-box;
}

.monitor-filter .dr-input:hover { border-color:#C9CDD4; }

.monitor-filter .dr-input.open { border-color:var(--primary); }

.monitor-filter .dr-input .dr-text {
  flex:1; min-width:0; font-size:14px; color:#1D2129; line-height:30px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}

.monitor-filter .dr-input .dr-text.ph { color:#C0C4CC; }

.monitor-filter .dr-input .dr-ico {
  position:absolute; right:8px; top:50%; transform:translateY(-50%);
  width:14px; height:14px; color:#C0C4CC; pointer-events:none;
}

.dr-panel {
  position:fixed; z-index:3100; width:552px; background:#fff; border:1px solid #E5E6EB;
  border-radius:4px; box-shadow:0 8px 24px rgba(0,0,0,.12); box-sizing:border-box; overflow:hidden;
}

.dr-panel-body { display:flex; padding:8px 4px 4px; }

.dr-month { flex:1; min-width:0; padding:0 8px; }

.dr-month + .dr-month { border-left:1px solid #EBEEF5; }

.dr-month-hd { display:flex; align-items:center; justify-content:space-between; height:36px; margin-bottom:4px; }

.dr-month-hd .dr-nav { display:flex; align-items:center; gap:0; flex:0 0 auto; }

.dr-month-hd button {
  border:none; background:transparent; color:#4E5969; cursor:pointer;
  width:28px; height:28px; border-radius:4px; padding:0; font-size:16px; line-height:1;
  display:inline-flex; align-items:center; justify-content:center;
}

.dr-month-hd button:hover { color:var(--primary); background:#F2F3F5; }

.dr-month-title { flex:1; text-align:center; font-size:14px; font-weight:500; color:#1D2129; line-height:28px; }

.dr-week {
  display:grid; grid-template-columns:repeat(7,1fr); text-align:center;
  color:#86909C; font-size:12px; line-height:28px; margin-bottom:2px;
}

.dr-days { display:grid; grid-template-columns:repeat(7,1fr); }

.dr-day {
  height:44px; display:block; cursor:pointer; position:relative; box-sizing:border-box; padding:0;
}

.dr-day .dr-bg {
  display:none; position:absolute; left:0; right:0; top:4px; height:32px;
  background:#E8F3FF; z-index:1; pointer-events:none; box-sizing:border-box;
}

.dr-day.in-range .dr-bg,
.dr-day.range-start .dr-bg,
.dr-day.range-end .dr-bg { display:block; }

.dr-day.range-start .dr-bg { border-radius:16px 0 0 16px; }

.dr-day.range-end .dr-bg { border-radius:0 16px 16px 0; }

.dr-day.range-start.range-end .dr-bg { border-radius:16px; }

.dr-day .dr-num {
  position:absolute; left:50%; top:8px; margin-left:-12px;
  width:24px; height:24px; line-height:24px; text-align:center; border-radius:50%;
  font-size:14px; color:#1D2129; z-index:2; box-sizing:border-box;
}

.dr-day.other .dr-num { color:#C9CDD4; }

.dr-day:hover .dr-num { color:var(--primary); }

.dr-day.range-start .dr-num, .dr-day.range-end .dr-num {
  background:var(--primary); color:#fff;
}

.dr-day.range-start:hover .dr-num, .dr-day.range-end:hover .dr-num { color:#fff; }

.dr-day.today:not(.range-start):not(.range-end) .dr-num { color:var(--primary); font-weight:600; }

.dr-day.today .dr-dot {
  position:absolute; left:50%; bottom:2px; transform:translateX(-50%);
  width:4px; height:4px; border-radius:50%; background:var(--primary);
  z-index:3; pointer-events:none;
}

.dr-panel-ft { display:flex; align-items:center; gap:8px; padding:10px 12px; border-top:1px solid #EBEEF5; }

.dr-panel-ft .dr-quick {
  height:28px; padding:0 12px; border:1px solid var(--primary); border-radius:2px;
  background:#fff; color:var(--primary); font-size:13px; cursor:pointer; line-height:26px;
}

.dr-panel-ft .dr-quick:hover { background:#E8F3FF; }

.monitor-type-grid { display:flex; gap:12px; }

.monitor-type-card {
  flex:1; border:1px solid #E5E6EB; border-radius:8px; padding:16px; cursor:pointer; text-align:left;
  background:#fff; transition:border-color .15s, box-shadow .15s;
}

.monitor-type-card:hover { border-color:#94BFFF; }

.monitor-type-card.on { border-color:var(--primary); box-shadow:0 0 0 1px var(--primary); }

.monitor-type-card .mt-title { font-size:15px; font-weight:600; color:var(--text); margin:0 0 6px; display:flex; align-items:center; gap:8px; }

.monitor-type-card .mt-desc { font-size:12px; color:var(--text3); margin:0; line-height:1.5; }

.monitor-type-card .mt-radio {
  width:14px; height:14px; border-radius:50%; border:1px solid #C9CDD4; display:inline-block; position:relative; flex-shrink:0;
}

.monitor-type-card.on .mt-radio { border-color:var(--primary); }

.monitor-type-card.on .mt-radio::after {
  content:''; position:absolute; left:3px; top:3px; width:6px; height:6px; border-radius:50%; background:var(--primary);
}

.alert-unread { color:#F53F3F; font-weight:600; }

.alert-level-danger { color:#F53F3F; }

.alert-level-warn { color:#FF7D00; }