/* static/css/style.css */
* { box-sizing: border-box; font-family: Consolas, monospace; }
body { background: #121212; color: #eee; font-size: 13px; margin: 0; padding: 16px; }
.sim-banner { background: #3a2a00; color: #ffcc00; padding: 6px 12px; text-align: center; font-weight: bold; }
.login-card { max-width: 360px; margin: 60px auto; background: #1a1a1a; padding: 24px; border-radius: 8px; }
.login-card h1 { text-align: center; font-size: 28px; color: #ffcc00; }
.login-card .subtitle { text-align: center; color: #888; }
.login-card input { width: 100%; padding: 8px; background: #111; color: #eee; border: 1px solid #333; margin: 8px 0; }
.login-card button { width: 100%; padding: 10px; background: #ffcc00; color: #000; border: none; font-weight: bold; }
.login-card .footer-note { text-align: center; color: #666; font-size: 11px; }
.topbar { display: flex; justify-content: space-between; align-items: center; padding: 8px; background: #1a1a1a; }
.topbar .brand { font-weight: bold; color: #ffcc00; }
.topbar a { color: #ffcc00; text-decoration: none; margin: 0 8px; }
.kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.kpi { background: #1a1a1a; border-radius: 8px; padding: 16px; }
.kpi-num { font-size: 28px; color: #ffcc00; display: block; }
.kpi-label { font-size: 11px; color: #888; }
table { width: 100%; border-collapse: collapse; margin-top: 8px; }
th, td { border: 1px solid #333; padding: 8px; text-align: left; }
th { background: #1a1a1a; color: #ffcc00; }
tr:hover { background: #222; cursor: pointer; }
.status-active { color: #0f0; } .status-maintenance { color: #ffa500; } .status-expired { color: #f00; }
.panel { background: #1a1a1a; border-radius: 8px; padding: 16px; margin: 16px 0; }
.panel h3 { color: #ffcc00; margin: 0 0 8px; }
.readings { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.reading { background: #222; padding: 8px; border-radius: 6px; }
.reading span:first-child { color: #888; display: block; font-size: 11px; }
.reading span:last-child { font-size: 18px; color: #ffcc00; }
.footnote { color: #666; font-size: 11px; }
.progress { background: #333; height: 16px; border-radius: 8px; }
.progress-bar { background: #ffcc00; height: 16px; border-radius: 8px; }
.badge { padding: 2px 8px; border-radius: 4px; font-size: 11px; }
.badge.active { background: #0a0; color: #fff; }
.badge.maintenance { background: #ffa500; color: #000; }
.badge.expired { background: #f00; color: #fff; }
.tabs { display: flex; gap: 4px; flex-wrap: wrap; margin: 12px 0; }
.tab { background: #1a1a1a; color: #eee; border: 1px solid #333; padding: 8px 14px; cursor: pointer; }
.tab.active { background: #ffcc00; color: #000; font-weight: bold; }
.tab-content { display: none; }
.tab-content:first-of-type { display: block; }
.inputs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.input-card { background: #222; border-radius: 8px; padding: 12px; }
.input-card h4 { color: #ffcc00; margin: 0 0 6px; }
.pay-option { background: #1a1a1a; border: 1px solid #333; border-radius: 8px; padding: 16px; margin: 12px 0; cursor: pointer; }
.pay-option h3 { color: #ffcc00; margin: 0 0 6px; }
.pay-option .tag { color: #888; font-size: 11px; }
.alert { color: #f00; background: #2a0000; padding: 6px 10px; border-radius: 4px; }
.weather-day { background: #222; padding: 8px; border-radius: 6px; margin: 4px 0; }