/* /dashboard/css/dashboard.css */ :root{ /* UI 스케일 조절(4K 대응) - 1.00 : 기본(FHD) - 1.15~1.35 : 4K 전체화면에서 글자 크게 */ --ui-scale: 1.20; /* 컨테이너 좌우 여백(px). 4K에서 더 넓게/좁게 조절 */ --container-pad: 12px; --bg:#f5f7fb; --card:#ffffff; --text:#1f2937; --muted:#6b7280; --line:#e5e7eb; --brand:#2563eb; --ok:#10b981; --warn:#ef4444; --off:#9ca3af; } *{box-sizing:border-box} html{font-size:calc(16px * var(--ui-scale));} body{ margin:0; font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", sans-serif; background:var(--bg); color:var(--text); } a{color:var(--brand); text-decoration:none} a:hover{text-decoration:underline} .container{max-width:none; width:100%; margin:0 auto; padding:18px var(--container-pad)} .header{ display:flex; align-items:flex-end; justify-content:space-between; gap:12px; margin-bottom:14px; } .header h1{margin:0; font-size:1.5rem} .header .sub{color:var(--muted); margin-top:4px; font-size:0.8125rem} .header .right{ display:flex; align-items:center; gap:10px; color:var(--muted); font-size:0.8125rem; } /* Dark mode: set */ html[data-theme="dark"]{ --bg:#0b1220; --card:#111827; --card2:#0f172a; --text:#e5e7eb; --muted:#9ca3af; --line:#1f2937; --brand:#60a5fa; --good:#34d399; --warn:#fbbf24; --danger:#f87171; --off:#6b7280; --input-bg:#0f172a; --btn-bg:#0f172a; --btn-hover:#111827; --notice-bg: rgba(251,191,36,.12); --notice-border: rgba(251,191,36,.28); --notice-text:#fcd34d; --shadow: 0 12px 34px rgba(0,0,0,.35); } .badge{ display:inline-flex; align-items:center; gap:6px; padding:6px 10px; border-radius:999px; background:#eef2ff; color:#3730a3; } .card{ background:var(--card); border:1px solid var(--line); border-radius:14px; box-shadow:0 8px 20px rgba(0,0,0,.04); } .card .title{ padding:12px 14px; border-bottom:1px solid var(--line); font-weight:700; } .card .content{padding:14px} .filters{ display:flex; flex-wrap:wrap; gap:10px; padding:12px 14px; } .filters label{font-size:var(--font-ui-label,0.75rem); color:var(--muted); display:block; margin-bottom:6px} .filters .field{min-width:170px} .filters input,.filters select{ width:100%; padding:9px 10px; border:1px solid var(--line); border-radius:10px; background:var(--input-bg); } .btn{ padding:10px 14px; border:1px solid var(--line); border-radius:10px; background:var(--btn-bg); cursor:pointer; font-weight:600; } .btn.primary{ background:var(--brand); color:#fff; border-color:var(--brand); } .btn:active{transform:translateY(1px)} .kpis{ display:grid; grid-template-columns: repeat(4, minmax(160px, 1fr)); gap:10px; margin:12px 0 14px; } .kpi{ padding:12px 14px; display:flex; flex-direction:column; gap:6px; } .kpi .label{font-size:var(--font-ui-label,0.75rem); color:var(--muted)} .kpi .value{ font-size: var(--font-kpi-value, 2.0rem); font-weight:800; } .grid2{ display:grid; grid-template-columns: 1fr 1fr; gap:12px; align-items:start; } @media (max-width: 1100px){ .kpis{grid-template-columns: repeat(2, minmax(160px, 1fr))} .grid2{grid-template-columns:1fr} } #map{width:100%; height:800px; border-radius:12px; position:relative} /* ============================= Open-Meteo (Dalat) Weather Overlay Card (inside Google Map) - 진한 배경 카드박스로 온도/습도/풍속을 표시 ============================= */ .map-weather-card{ position:absolute; top:12px; left:12px; z-index: 5; min-width: 220px; max-width: 320px; padding: 12px 14px; border-radius: 14px; border: 1px solid rgba(255,255,255,0.18); background: rgba(15, 23, 42, 0.78); /* slate-900 느낌 */ color: rgba(255,255,255,0.95); box-shadow: 0 10px 24px rgba(0,0,0,0.35); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); pointer-events: auto; } .map-weather-card .w-title{ font-weight: 900; font-size: 0.95rem; letter-spacing: 0.2px; margin-bottom: 8px; } .map-weather-card .w-row{ display:flex; justify-content:space-between; gap:12px; margin: 6px 0; } .map-weather-card .w-k{ color: rgba(255,255,255,0.78); font-size: 0.80rem; } .map-weather-card .w-v{ font-weight: 800; font-size: 0.92rem; } .map-weather-card .w-sub{ margin-top: 8px; font-size: 0.72rem; color: rgba(255,255,255,0.70); } .map-weather-card .w-err{ margin-top: 8px; font-size: 0.78rem; color: #fecaca; } /* ================================ Main page only: Map/Latest card height match - 오른쪽(최근 센서 데이터) 높이에 맞춰 좌측 지도 카드가 늘어나도록 처리 - device.html(page-device)에는 영향 없음 ================================ */ body.page-main .grid2{ align-items: stretch; } body.page-main .grid2 > .card{ display:flex; flex-direction:column; } body.page-main .grid2 > .card > .content{ flex:1; display:flex; flex-direction:column; } /* 메인(index.html)에서는 지도 높이를 줄여 '현장 스냅샷' UI와 함께 보이도록 */ body.page-main #map{ flex:1; height:380px; min-height:360px; } /* ============================= Google Maps Marker InfoWindow (카드박스) 가독성 개선 - 다크모드에서 기본 InfoWindow 배경(흰색) + 전역 텍스트(밝은색) 조합으로 글자가 잘 안보이는 문제를 방지 ============================= */ .gm-style .gm-style-iw-c{ background: var(--card) !important; color: var(--text) !important; border-radius: 14px !important; } .gm-style .gm-style-iw-d{ color: var(--text) !important; } .gm-style .gm-style-iw-t::after{ background: var(--card) !important; } /* 닫기(X) 버튼이 다크모드에서 흐리게 보일 수 있어 보정 */ html[data-theme="dark"] .gm-style .gm-ui-hover-effect{ filter: invert(1) hue-rotate(180deg); } .map-iw{min-width:230px; padding:10px 12px; color:var(--text); font-size:0.78rem; line-height:1.5} .map-iw-title{font-weight:800; font-size:0.9rem; margin-bottom:6px; color:var(--text)} /* ============================= Main page: Today Snapshots (index.html) - 장치별 "오늘 전송된 최신 이미지" 썸네일 갤러리 ============================= */ .today-snap-head{ display:flex; justify-content:space-between; align-items:center; gap:12px; } .today-snap-sub{ font-size: 0.80rem; color: var(--muted); } .today-snap-grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; } .snap-tile{ border: 1px solid var(--border); border-radius: 14px; overflow:hidden; background: rgba(0,0,0,0.02); position:relative; } html[data-theme="dark"] .snap-tile{ background: rgba(255,255,255,0.04); } .snap-img{ width:100%; height: 140px; object-fit: cover; display:block; } .snap-meta{ padding: 10px 10px; display:flex; justify-content:space-between; align-items:center; gap:10px; } .snap-name{ font-weight: 900; font-size: 0.86rem; color: var(--text); } .snap-time{ font-size: 0.78rem; color: var(--muted); white-space:nowrap; } .snap-badge{ display:inline-block; margin-left:6px; padding:2px 6px; border-radius:999px; border:1px solid var(--border); font-size:0.70rem; color: var(--muted); background: rgba(0,0,0,0.03); } html[data-theme="dark"] .snap-badge{ background: rgba(255,255,255,0.06); } .snap-link{ text-decoration:none; color: inherit; display:block; } .snap-empty{ padding: 18px 12px; text-align:center; color: var(--muted); font-size: 0.90rem; } .map-iw-time{color:var(--muted); margin-bottom:6px} .map-iw-body{color:var(--text)} .map-iw-footer{margin-top:10px} .map-iw-link{color:var(--brand); font-weight:700} .latest-wrap{ display:grid; grid-template-columns: repeat(3, 1fr); gap:10px; } .latest-item{ border:1px solid var(--line); border-radius:12px; padding:10px; background:var(--card); } .latest-item .k{font-size:var(--font-ui-label,0.75rem); color:var(--muted)} .latest-item .v{ font-size: var(--font-mid-value, 1.0rem); font-weight:800; margin-top:4px; } .status-dot{width:10px; height:10px; border-radius:999px; display:inline-block} .dot-ok{background:var(--ok)} .dot-warn{background:var(--warn)} .dot-off{background:var(--off)} .chartbox{height:280px} .small{font-size:var(--font-ui-label,0.75rem); color:var(--muted)} .table-wrap{padding:14px} .table-wrap table{width:100%} .img-panel{ display:flex; gap:12px; align-items:flex-start; flex-wrap:wrap; } .img-panel img{ width:520px; max-width:100%; border-radius:12px; border:1px solid var(--line); background:var(--card); } .thumb-list{ display:flex; flex-direction:column; gap:8px; } .thumb-list img{ width:140px; height:90px; object-fit:cover; border-radius:10px; border:1px solid var(--line); cursor:pointer; } .notice{ padding:10px 14px; background:var(--notice-bg); border:1px solid var(--notice-border); border-radius:12px; color:var(--notice-text); font-size:0.8125rem; } /* ================================ 공통 데이터 테이블 스타일 (메인 / 상세 페이지 공용) ================================ */ .data-table { width: 100%; border-collapse: separate; border-spacing: 0; /* font-size: 13px; */ font-size: var(--font-list-value,0.95rem); background:var(--card); border-radius: 10px; overflow: hidden; box-shadow: 0 4px 12px rgba(0,0,0,0.06); } /* 헤더 */ .data-table thead th { background: #f1f5f9; color: #1f2937; font-weight: 600; font-size: var(--font-list-header, calc(var(--font-list-value,0.95rem) * 0.95)); padding: 10px 12px; text-align: center; border-bottom: 2px solid #e5e7eb; white-space: nowrap; } /* 본문 셀 */ .data-table tbody td { padding: 9px 12px; text-align: center; border-bottom: 1px solid #e5e7eb; color: #374151; font-size: var(--font-list-value,0.95rem); white-space: nowrap; } /* 줄무늬 (zebra) */ .data-table tbody tr:nth-child(even) { background-color: #f9fafb; } /* hover 효과 */ .data-table tbody tr:hover { background-color: #e0f2fe; transition: background-color 0.15s ease-in-out; } /* 마지막 줄 border 제거 */ .data-table tbody tr:last-child td { border-bottom: none; } /* ================================ Live Dashboard Add-ons - 미니 라이브 차트 / 상태 스트림 ==================================*/ .mini-chart-wrap{ margin-top:12px; padding-top:10px; border-top:1px solid var(--line); } .mini-chart-title{ font-size:var(--font-status-title,1rem); font-weight:700; margin-bottom:6px; display:flex; gap:8px; align-items:baseline; } #miniChart{ width:100%; height:140px; display:block; border:1px solid var(--line); border-radius:10px; background:var(--card); } .activity-wrap{ margin-top:12px; padding-top:10px; border-top:1px solid var(--line); } .activity-title{ font-size:var(--font-status-title,1rem); font-weight:700; margin-bottom:6px; } .activity-feed{ height: 160px; overflow:auto; border:1px solid var(--line); border-radius:10px; padding:10px; background:var(--card); font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-size:var(--font-status-text,0.85rem); line-height: 1.35; } body.page-main .activity-feed{ font-size:var(--font-status-text,0.85rem); } .activity-row{ display:flex; gap:10px; padding:3px 0; border-bottom:1px dashed rgba(0,0,0,0.08); } .activity-row:last-child{ border-bottom:none; } .activity-time{ opacity:0.65; white-space:nowrap; } .activity-msg{ flex:1; } .elapsed-time{ font-weight:800; } /* activity level colors */ .activity-ok{ color: var(--ok); font-weight:700; } .activity-warn{ color: var(--warn); font-weight:700; } .activity-off{ color: var(--muted); } /* ================================ DataTables 글자 크기/폼 요소도 전체 스케일 적용 ==================================*/ .dataTables_wrapper, table.dataTable, .dataTables_wrapper .dataTables_length, .dataTables_wrapper .dataTables_filter, .dataTables_wrapper .dataTables_info, .dataTables_wrapper .dataTables_paginate { font-size: 1rem; } .dataTables_wrapper select, .dataTables_wrapper input { font-size: 1rem; padding: 6px 10px; } .mini-chart-summary { font-size: 0.95rem; font-weight: 600; color: #374151; margin-bottom: 6px; } /* device.html only */ body.device-page .map-wrap, body.device-page .sensor-wrap{height:100%;} /* ================================ Device page only ================================ */ .page-device .grid2{ align-items: stretch; } .page-device .grid2 > .card{ height: 100%; display:flex; flex-direction:column; } .page-device .grid2 > .card > .content{ flex:1; display:flex; flex-direction:column; } .page-device .map-wrap{ flex:1; min-height:320px; } .page-device #map{ width:100%; height:100%; min-height:320px; border-radius:12px; } .page-device .range-tabs{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:12px; } .page-device .range-btn{ border:1px solid var(--line); background:var(--btn-bg); color:#111827; padding:8px 10px; border-radius:10px; font-weight:800; cursor:pointer; } .page-device .range-btn:hover{ filter:brightness(0.98); } .page-device .range-btn.active{ background:#111827; color:#fff; border-color:#111827; } /* === Device image gallery (thumbnails) - added without changing existing styles === */ .img-gallery{ display:flex; gap:12px; align-items:flex-start; width:100%; } .img-main{ flex: 1 1 auto; min-width: 280px; } .img-main img{ width:100%; height:auto; max-height: 520px; object-fit: contain; border-radius: 10px; } .img-thumbs{ flex: 0 0 240px; display:none; gap:10px; grid-template-columns: repeat(2, minmax(0, 1fr)); } .img-thumb{ border:1px solid var(--line); background:var(--card); border-radius:10px; padding:4px; cursor:pointer; } .img-thumb img{ width:100%; height:74px; object-fit: cover; border-radius:8px; display:block; } .img-thumb.active{ outline:2px solid rgba(37,99,235,.7); border-color: rgba(37,99,235,.7); } @media (max-width: 900px){ .img-gallery{ flex-direction:column; } .img-thumbs{ flex: 1 1 auto; grid-template-columns: repeat(4, minmax(0, 1fr)); } .img-thumb img{ height:64px; } } /* ===== NS40 custom additions ===== */ .topKpis{ display:grid; grid-template-columns: repeat(6, minmax(180px, 1fr)); gap:12px; margin:12px 0 14px; } @media (max-width: 1400px){ .topKpis{grid-template-columns: repeat(4, minmax(160px, 1fr));} } .kpiBig{ padding:14px 16px; display:flex; flex-direction:column; gap:6px; min-height:96px; position:relative; } .kpiBig .labelRow{display:flex; align-items:baseline; justify-content:space-between; gap:10px;} .kpiBig .label{font-size:0.82rem; color:var(--muted); letter-spacing:0.06em; font-weight:800} .kpiBig .unit{font-size:0.78rem; color:var(--muted); font-weight:700} .kpiBig .value{font-size:var(--font-kpi-value, 2.0rem); font-weight:900; line-height:1;} .kpiBig .sub{font-size:0.78rem; color:var(--muted)} .kpiBig .flag{ position:absolute; right:12px; top:12px; padding:4px 8px; border-radius:999px; font-size:0.72rem; font-weight:900; border:1px solid var(--line); background:var(--card); } .kpiBig.ok .flag{color:var(--muted);} .kpiBig.warn{border:2px solid rgba(245, 158, 11, .65);} .kpiBig.warn .flag{color:#b45309; border-color:rgba(245,158,11,.45); background:rgba(245,158,11,.08);} .kpiBig.crit{border:2px solid rgba(239, 68, 68, .75); box-shadow:0 0 0 4px rgba(239, 68, 68, .10);} .kpiBig.crit .flag{color:#b91c1c; border-color:rgba(239,68,68,.45); background:rgba(239,68,68,.08);} .kpiBig.crit .value{animation:ns40Pulse 1.05s infinite;} @keyframes ns40Pulse{ 0%{transform:scale(1);} 50%{transform:scale(1.03);} 100%{transform:scale(1);} } .rightControls{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; } .chipBtn{ border:1px solid var(--line); background:var(--btn-bg); color:var(--text); padding:8px 10px; border-radius:999px; font-weight:800; font-size:0.85rem; cursor:pointer; } .chipBtn.active{border-color:rgba(37,99,235,.45); background:rgba(37,99,235,.08); color:var(--brand);} .tableWrap{overflow:auto; max-height:calc(100vh - 520px);} @media (min-width: 1900px){ .tableWrap{max-height:calc(100vh - 560px);} .kpiBig .value{font-size:2.15rem;} } .clockBig{ font-size:1.05rem; font-weight:900; display:flex; align-items:center; gap:10px; } .clockDot{ width:10px; height:10px; border-radius:999px; background:var(--ok); box-shadow:0 0 0 6px rgba(34,197,94,.12); animation:dotBlink 1.0s infinite; } @keyframes dotBlink{ 0%{opacity:.35} 50%{opacity:1} 100%{opacity:.35} } .agePill{ display:inline-flex; align-items:center; gap:8px; padding:8px 10px; border-radius:999px; border:1px solid var(--line); background:var(--btn-bg); font-weight:900; } .ageBar{ width:90px; height:8px; border-radius:999px; background:var(--line); overflow:hidden; } .ageBar > i{display:block; height:100%; width:0%;} #kpiWrap.flash{filter:brightness(1.02);} /* ================================ NS40 Dashboard additions - 상단 타이틀/섹션 헤더/카드 헤더 스타일 보강 - 작은 화면에서 그래프 잘림 방지(반응형) ================================ */ .title{ font-size: calc(26px * var(--ui-scale)); font-weight: 800; letter-spacing: -0.02em; color: var(--text); line-height: 1.05; margin: 0; } .subtitle{ font-size: calc(14px * var(--ui-scale)); color: var(--muted); font-weight: 600; margin-top: 4px; } .cardHeader{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; padding: 12px 14px; border-bottom: 1px solid var(--line); } .cardTitle{ font-size: calc(16px * var(--ui-scale)); font-weight: 800; color: var(--text); letter-spacing: -0.01em; } .cardSub{ margin-top: 4px; font-size: calc(12px * var(--ui-scale)); color: var(--muted); font-weight: 600; } .card .content{ padding: 12px 14px; } .footer{ padding: 10px 2px; font-size: calc(12px * var(--ui-scale)); } /* KPI value + unit */ .kpiBig .valueRow{ display:flex; align-items:flex-end; gap:8px; } .kpiBig .value{ font-size: calc(34px * var(--ui-scale)); font-weight: 900; letter-spacing: -0.03em; line-height: 1.0; } .kpiBig .valueUnit{ font-size: calc(16px * var(--ui-scale)); font-weight: 700; color: rgba(107,114,128,0.85); transform: translateY(-2px); } /* grid2: 작은 화면에서 자동 줄바꿈/축소 */ .grid2{ display:grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: stretch; } @media (max-width: 1500px){ .grid2{ grid-template-columns: 1fr; } } /* Chart responsiveness */ .chartBox{ width:100%; max-width:100%; min-width:0; overflow:hidden; } .chartCanvasWrap{ position: relative; width:100%; height: 420px; max-width:100%; min-width:0; } @media (min-width: 2200px){ .chartCanvasWrap{ height: 520px; } } @media (max-width: 1100px){ .chartCanvasWrap{ height: 340px; } } .chartCanvasWrap canvas{ width:100% !important; height:100% !important; } /* ================================ List Table 강화(구분선/제목 색상/가독성) ==================================*/ :root{ --tableHeadBg: rgba(11,18,32,1); --tableHeadColor: #ffffff; --tableHeadLine: rgba(255,255,255,.18); --tableRowLine: rgba(2,6,23,.14); --tableColLine: rgba(2,6,23,.10); } .table{ width:100%; border-collapse:separate; border-spacing:0; font-size:var(--font-list-value, 0.95rem); } .table thead th{ position:sticky; top:0; background:var(--tableHeadBg); color:var(--tableHeadColor); border-bottom:2px solid var(--tableHeadLine); padding:10px 10px; text-align:left; font-weight:800; } .table tbody td{ padding:10px 10px; border-bottom:1px solid var(--tableRowLine); } .table th:not(:last-child), .table td:not(:last-child){ border-right:1px solid var(--tableColLine); } .table tbody tr:hover td{ background:rgba(2,6,23,.04); } .tableWrap{ border-top:1px solid rgba(2,6,23,.12); } /* Header Buttons */ .topbarBtns{ display:flex; gap:8px; justify-content:flex-end; margin-left:12px; flex-wrap:wrap; } .btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:10px 14px; border-radius:14px; border:1px solid rgba(0,0,0,.16); background:#0b1220; color:#fff; text-decoration:none; font-weight:800; cursor:pointer; } .btn:hover{ filter:brightness(1.05); } .btnSmall{ padding:8px 10px; border-radius:12px; font-size:0.92rem; } /* Slim select for list header */ .selectSlim{ padding:6px 10px; border-radius:12px; border:1px solid var(--line); background:var(--input-bg); font-weight:800; } /* Theme toggle */ .themeToggle{ display:inline-flex; gap:6px; align-items:center; } .themeToggle .seg{ display:inline-flex; border:1px solid var(--line); border-radius:999px; overflow:hidden; background:var(--btn-bg); } .themeToggle .seg button{ border:0; background:transparent; color:var(--muted); padding:6px 10px; font-size:0.85rem; cursor:pointer; } .themeToggle .seg button.active{ color:var(--text); background:var(--btn-hover); font-weight:700; } /* =============================== Dark Mode : form controls fix =============================== */ html[data-theme="dark"] input, html[data-theme="dark"] select, html[data-theme="dark"] textarea { background-color: #0f172a; /* 다크 배경 */ color: #e5e7eb; /* 텍스트 흰색 */ border: 1px solid #334155; } /* placeholder 색상 */ html[data-theme="dark"] input::placeholder { color: #94a3b8; } /* date / time picker 아이콘 */ html[data-theme="dark"] input[type="date"]::-webkit-calendar-picker-indicator, html[data-theme="dark"] input[type="time"]::-webkit-calendar-picker-indicator { filter: invert(1); opacity: 0.8; } /* select dropdown 옵션 */ html[data-theme="dark"] select option { background-color: #0f172a; color: #e5e7eb; } /* focus 상태 */ html[data-theme="dark"] input:focus, html[data-theme="dark"] select:focus, html[data-theme="dark"] textarea:focus { outline: none; border-color: #38bdf8; box-shadow: 0 0 0 1px rgba(56,189,248,0.6); } /* Font scaling (via /inc/font_config.html) */ #dataTable tbody td{ font-size: var(--font-list-value, 0.95rem); } #dataTable thead th{ font-size: var(--font-list-header, calc(var(--font-list-value,0.95rem) * 0.95)); } /* ===== Dark mode fixes for device page ===== */ html[data-theme="dark"] .data-table tbody tr:nth-child(even), html[data-theme="dark"] .data-table tbody tr:nth-child(odd){ background-color: var(--card2); } html[data-theme="dark"] .data-table tbody tr:hover{ background-color: #1e293b; } html[data-theme="dark"] .page-device .range-btn{ background: var(--card2); color: var(--muted); border-color: var(--line); } html[data-theme="dark"] .page-device .range-btn.active{ background: #020617; color: #e5e7eb; } /* device.html 최근 데이터 리스트 메인페이지 스타일 통일 */ body.page-device .data-table thead th { background:#1f2933; color:#ffffff; } body.page-device .data-table tbody td { color:#ffffff; } /* ========================================================= AI Report (index.html) ========================================================= */ .ai-head{display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap;} .ai-title{display:inline-flex; align-items:center; gap:10px;} .ai-icon{display:inline-flex; align-items:center; justify-content:center; width:30px; height:30px; border-radius:10px; background:rgba(37,99,235,0.10); color:var(--brand); border:1px solid rgba(37,99,235,0.18); } html[data-theme="dark"] .ai-icon{background:rgba(96,165,250,0.12); border-color:rgba(96,165,250,0.24);} .ai-badge{font-size:0.72rem; font-weight:800; letter-spacing:0.6px; padding:3px 8px; border-radius:999px; background:rgba(37,99,235,0.12); color:var(--brand); border:1px solid rgba(37,99,235,0.18); } html[data-theme="dark"] .ai-badge{background:rgba(96,165,250,0.12); border-color:rgba(96,165,250,0.24);} .ai-sub{color:var(--muted); font-size:0.82rem;} .ai-grid{display:grid; grid-template-columns:repeat(3, minmax(220px, 1fr)); gap:10px;} @media (max-width: 1100px){ .ai-grid{grid-template-columns:repeat(2, minmax(220px, 1fr));} } @media (max-width: 720px){ .ai-grid{grid-template-columns:1fr;} } .ai-item{border:1px solid var(--line); border-radius:14px; overflow:hidden; background:linear-gradient(180deg, rgba(37,99,235,0.05), rgba(37,99,235,0.01));} html[data-theme="dark"] .ai-item{background:linear-gradient(180deg, rgba(96,165,250,0.10), rgba(96,165,250,0.02));} .ai-item-head{display:flex; justify-content:space-between; align-items:flex-start; gap:10px; padding:12px 12px 10px;} .ai-item-title{display:flex; flex-direction:column; gap:3px;} .ai-device{font-weight:800; font-size:1.02rem;} .ai-meta{color:var(--muted); font-size:0.80rem;} .ai-status{display:inline-flex; align-items:center; gap:6px; padding:6px 10px; border-radius:999px; font-weight:800; font-size:0.78rem; border:1px solid var(--line); background:var(--card); } .ai-dot{width:8px; height:8px; border-radius:50%; background:var(--off);} .ai-status.ok .ai-dot{background:var(--ok);} .ai-status.warn .ai-dot{background:var(--warn);} .ai-status.danger .ai-dot{background:var(--warn);} .ai-summary{padding:0 12px 12px; font-size:var(--font-status-text,0.85rem); color:var(--text); line-height:1.35;} .ai-actions{display:flex; gap:8px; padding:0 12px 12px;} .ai-actions button{padding:8px 12px; border-radius:10px; border:1px solid var(--brand); background:var(--brand); color:#fff; cursor:pointer; font-weight:700;} .ai-actions button:hover{filter:brightness(1.03);} .ai-details{border-top:1px dashed var(--line); padding:10px 12px 12px; display:none;} .ai-details.open{display:block;} .ai-details .ai-block-title{font-weight:800; margin:6px 0 6px; font-size:0.92rem;} .ai-details .ai-text{color:var(--text); font-size:var(--font-status-text,0.85rem); line-height:1.4;} .ai-reco{margin:6px 0 0; padding-left:18px; color:var(--text); font-size:var(--font-status-text,0.85rem);} .ai-pulse{position:relative;} .ai-pulse:after{content:""; position:absolute; inset:0; border-radius:14px; border:2px solid rgba(37,99,235,0.55); animation:aiPulse 1.2s ease-out 0s 2; pointer-events:none;} html[data-theme="dark"] .ai-pulse:after{border-color:rgba(96,165,250,0.65);} @keyframes aiPulse{0%{transform:scale(0.98); opacity:0.0;} 20%{opacity:0.9;} 100%{transform:scale(1.01); opacity:0.0;}} .ai-empty{color:var(--muted); padding:8px 2px;}