:root {
    --blue:#1f4e78;
    --light:#eef5fa;
    --border:#d7e2ea;
    --green:#2e7d32;
    --orange:#b26a00;
    --red:#b00020;
}
* { box-sizing:border-box; }
body { margin:0; font-family:Arial, sans-serif; background:#f5f7f9; color:#1f2933; }
.topbar { background:var(--blue); color:#fff; padding:12px 18px; display:flex; gap:20px; align-items:center; justify-content:space-between; flex-wrap:wrap; }
.brand { font-weight:bold; font-size:1.1rem; }
nav { display:flex; gap:12px; flex-wrap:wrap; }
nav a { color:#fff; text-decoration:none; }
.container { max-width:1150px; margin:20px auto; padding:0 14px; }
.card-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:16px; }
.card { background:#fff; border:1px solid var(--border); border-radius:12px; padding:16px; box-shadow:0 2px 8px rgba(0,0,0,.04); }
.status { padding:6px 10px; border-radius:999px; display:inline-block; font-weight:bold; }
.status.ok { background:#dff3e2; color:var(--green); }
.status.warning { background:#fff0d6; color:var(--orange); }
.status.none { background:#eceff1; color:#607d8b; }
.measure-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:12px; }
.measure { background:var(--light); padding:10px; border-radius:8px; }
.measure strong { display:block; font-size:1.15rem; margin-top:4px; }
form { background:#fff; border:1px solid var(--border); padding:16px; border-radius:12px; }
.form-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
label { display:block; font-weight:bold; margin-bottom:5px; }
input, select, textarea, button { width:100%; padding:12px; border:1px solid #b8c6d1; border-radius:8px; font-size:16px; }
textarea { min-height:100px; }
button { background:var(--blue); color:white; border:0; font-weight:bold; cursor:pointer; }
.table-wrap { overflow:auto; background:#fff; border-radius:12px; border:1px solid var(--border); }
table { width:100%; border-collapse:collapse; min-width:1050px; }
th, td { padding:10px; border-bottom:1px solid var(--border); text-align:left; white-space:nowrap; }
th { background:var(--blue); color:#fff; }
.alert { padding:12px; border-radius:8px; margin-bottom:12px; }
.alert.success { background:#dff3e2; color:var(--green); }
.alert.error { background:#fde3e8; color:var(--red); }
.filters { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-bottom:14px; }
.stat { font-size:2rem; font-weight:bold; color:var(--blue); }
footer { text-align:center; padding:30px; color:#607d8b; }
@media (max-width:700px) {
    .form-grid, .filters { grid-template-columns:1fr; }
    .measure-grid { grid-template-columns:repeat(2,1fr); }
    .topbar { align-items:flex-start; }
    nav { flex-direction:column; }
}

.settings-card { display:block; color:inherit; text-decoration:none; transition:transform .15s ease, box-shadow .15s ease; }
.settings-card:hover { transform:translateY(-2px); box-shadow:0 5px 14px rgba(0,0,0,.09); }
.button-row { display:flex; gap:10px; align-items:center; margin-top:16px; }
.button { display:inline-block; width:auto; padding:10px 14px; border-radius:8px; background:var(--blue); color:#fff; text-decoration:none; font-weight:bold; border:0; }
.button.small, button.small { padding:8px 10px; font-size:14px; width:auto; }
.button.secondary, button.secondary { background:#607d8b; }
.inline-form { display:inline-block; background:none; border:0; padding:0; margin:0 0 0 6px; }
.actions { white-space:nowrap; }
.checkbox-line input, .threshold-table input[type="checkbox"] { width:auto; }
.checkbox-line { display:flex; align-items:center; }
.checkbox-line label { margin:0; }
.compact-table { min-width:760px; }
.threshold-table { min-width:650px; }
.threshold-table input { min-width:110px; }
.threshold-table td.center { text-align:center; }
.notice { background:#fff2cc; color:#6b5500; padding:12px; border-radius:8px; border:1px solid #ead68a; }

.history-flag { display:inline-block; width:14px; height:14px; border-radius:50%; vertical-align:middle; box-shadow:0 0 0 2px rgba(0,0,0,.07); }
.history-flag.ok { background:#2e7d32; }
.history-flag.error { background:#c62828; }
.history-state-text { margin-left:7px; font-weight:bold; }
.row-ok .history-state-text { color:#2e7d32; }
.row-warning .history-state-text { color:#c62828; }
.row-warning { background:#fff7f7; }
.state-cell { min-width:125px; }


.tooltip-cell { max-width:220px; }
.cell-tooltip {
    display:inline-block;
    max-width:200px;
    overflow:hidden;
    text-overflow:ellipsis;
    vertical-align:middle;
    cursor:pointer;
    border-bottom:1px dotted #607d8b;
}
.cell-tooltip:focus {
    outline:2px solid #5b9bd5;
    outline-offset:2px;
}
.empty-value { color:#90a4ae; }