:root{
  font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color:#17202a;
  background:#f5f7f8;
  font-size:16px;
}
*{box-sizing:border-box}
body{margin:0;line-height:1.45;-webkit-text-size-adjust:100%}
header{background:#17202a;color:#fff;padding:14px 22px;display:flex;justify-content:space-between;gap:20px;align-items:center;position:sticky;top:0;z-index:10}
header>strong{font-size:1.1rem;white-space:nowrap}
nav{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
a{color:#075985}
header a{color:#fff;text-decoration:none;padding:8px 10px;border-radius:6px}
header a:hover,header a:focus{background:#ffffff1a}
main{max-width:1200px;margin:24px auto;padding:0 16px}
h1{font-size:clamp(1.45rem,4vw,2rem);margin-top:0}
h2{font-size:clamp(1.2rem,3vw,1.55rem)}
.card{background:#fff;padding:18px;border-radius:10px;box-shadow:0 1px 5px #0002;margin-bottom:18px;overflow-wrap:anywhere}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px}
label{display:block;font-weight:600;margin-bottom:10px}
input,select,textarea,button{width:100%;box-sizing:border-box;padding:11px 12px;margin-top:5px;border:1px solid #aaa;border-radius:7px;font:inherit;min-height:44px;background:#fff}
textarea{min-height:110px;resize:vertical}
button,.btn{display:inline-flex;width:auto;min-height:44px;align-items:center;justify-content:center;background:#075985;color:#fff;border:0;padding:10px 15px;border-radius:7px;text-decoration:none;cursor:pointer;font-weight:600}
button:hover,.btn:hover,button:focus,.btn:focus{filter:brightness(.9)}
table{width:100%;border-collapse:collapse;background:#fff}
th,td{padding:11px;border-bottom:1px solid #ddd;text-align:left;vertical-align:top;overflow-wrap:anywhere}
th{background:#f1f5f9}
.status-open{background:#fecaca}.status-alerted{background:#fef08a}.status-completed{background:#bfdbfe}.status-fdisk{background:#d1d5db}
.flash{padding:12px;border-radius:7px;margin-bottom:12px}.success{background:#dcfce7}.error{background:#fee2e2}
.actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:8px}.actions form{margin:0}
.muted{color:#555;font-size:.9rem}
.phone-link{font-weight:700;white-space:nowrap;text-decoration-thickness:2px;text-underline-offset:3px}


@media (max-width: 820px){
  header{position:static;display:block;padding:14px 16px}
  header>strong{display:block;margin-bottom:10px}
  nav{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}
  header a{text-align:center;background:#ffffff12;border:1px solid #ffffff24;padding:10px 8px}
  main{margin:16px auto;padding:0 12px}
  .card{padding:15px;border-radius:9px}
  .grid{grid-template-columns:1fr 1fr}
  table,thead,tbody,tr,th,td{display:block;width:100%}
  thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  table{background:transparent}
  tbody{display:grid;gap:12px}
  tr{border-radius:10px;box-shadow:0 1px 5px #0002;padding:6px 12px;overflow:hidden}
  td{border-bottom:1px solid #00000018;padding:10px 0}
  td:last-child{border-bottom:0}
  td::before{content:attr(data-label);display:block;font-size:.78rem;text-transform:uppercase;letter-spacing:.04em;color:#4b5563;font-weight:700;margin-bottom:3px}
  .actions{display:grid;grid-template-columns:1fr;gap:8px}
  .actions form,.actions button,.actions .btn,td>.btn,td>form,td>form button{width:100%}
}

@media (max-width: 560px){
  :root{font-size:17px}
  nav{grid-template-columns:1fr}
  .grid{grid-template-columns:1fr}
  main{padding:0 9px}
  .card{padding:13px}
  input,select,textarea,button,.btn{font-size:16px}
}