*,*::before,*::after{box-sizing:border-box}
body,h1,h2,h3,p{margin:0}
body{font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;line-height:1.5;color:#111827;background:#f9fafb;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
button,input{font:inherit;color:inherit}
svg{display:block;flex-shrink:0}
[hidden]{display:none!important}
:focus-visible{outline:2px solid #fff;outline-offset:2px;box-shadow:0 0 0 4px #4f46e5}
.container{max-width:80rem;margin:0 auto;padding:0 1rem}
.app{min-height:100vh;min-height:100dvh;background:#f9fafb}
.skip{position:absolute;left:-999px;top:0;background:#fff;color:#4338ca;padding:.5rem 1rem;z-index:50}
.skip:focus{left:0}

/* landing */
.landing{display:flex;align-items:center;justify-content:center;min-height:100vh;min-height:100dvh;padding:1rem;background:linear-gradient(to bottom right,#eff6ff,#eef2ff)}
.landing-card{background:#fff;padding:2rem;border-radius:.5rem;box-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -4px rgba(0,0,0,.1);max-width:28rem}
.landing-card h1{font-size:1.5rem;font-weight:700;margin-bottom:1rem}
.landing-card p{color:#4b5563;margin-bottom:1.5rem}
.btn-block{width:100%;background:#4f46e5;color:#fff;padding:.5rem 1rem;border:0;border-radius:.25rem;cursor:pointer}
.btn-block:hover{background:#4338ca}

/* nav */
.nav{background:linear-gradient(to right,#4f46e5,#2563eb);color:#fff;box-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -4px rgba(0,0,0,.1)}
.nav-row{display:flex;justify-content:space-between;align-items:center;height:4rem}
.brand{display:flex;align-items:center;gap:.5rem}
.brand-text{font-weight:700;font-size:1.125rem;display:none}
.nav-desktop{display:none;gap:2rem}
.nav-link{display:flex;align-items:center;font-size:.875rem;padding:.5rem .75rem;border-radius:.25rem;transition:background-color .15s}
.nav-link:hover,.nav-link[aria-current=page]{background:#4338ca}
.nav-ico{margin-right:.25rem}
.nav-actions{display:flex;align-items:center;gap:1rem}
.user{display:none;align-items:center;gap:.5rem;font-size:.875rem}
.avatar{width:2rem;height:2rem;background:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#4f46e5;font-weight:700}
.menu-btn,.logout-btn{background:none;border:0;color:#fff;cursor:pointer;display:flex;padding:0}
.logout-btn{padding:.5rem;border-radius:.25rem;transition:background-color .15s}
.logout-btn:hover{background:#4338ca}
.inline-form{margin:0;display:flex}
.nav-mobile{padding-bottom:1rem;display:flex;flex-direction:column;gap:.5rem}
.nav-mobile[hidden]{display:none}

/* demo warning */
.demo-warning{background:#fffbeb;border-bottom:1px solid #fde68a;color:#78350f;padding:.75rem 1rem;text-align:center;font-size:.875rem}
.main{padding-top:2rem;padding-bottom:2rem}
.stack-8>*+*{margin-top:2rem}
.stack-6>*+*{margin-top:1.5rem}

/* hero */
.hero{background:linear-gradient(to right,#2563eb,#4f46e5);color:#fff;border-radius:.5rem;padding:2rem;box-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -4px rgba(0,0,0,.1)}
.hero.state-operational{background:#166534}
.hero.state-attention{background:#9a3412}
.hero.state-critical{background:#991b1b}
.hero-top{display:flex;align-items:center;justify-content:space-between;gap:1rem}
.hero h1{font-size:1.875rem;line-height:2.25rem;font-weight:700;margin-bottom:.5rem}
.hero-sub{color:#dbeafe}
.hero-icon{display:flex}
.hero-grid{margin-top:1.5rem;display:grid;grid-template-columns:repeat(2,1fr);gap:1rem}
.hero-stat{background:rgba(255,255,255,.2);border-radius:.25rem;padding:1rem}
.hero-stat p:first-child{color:#dbeafe;font-size:.875rem}
.hero-stat .num{font-size:1.5rem;line-height:2rem;font-weight:700}
.chart-card{min-width:0}
.bar-chart{list-style:none;padding:0;margin:0;display:grid;gap:1rem}
.bar-chart li{display:grid;gap:.35rem}
.chart-label{display:flex;justify-content:space-between;gap:1rem;color:#334155;font-size:.9rem}
.chart-label strong{font-variant-numeric:tabular-nums}
.chart-bar{display:block;appearance:none;-webkit-appearance:none;width:100%;height:.75rem;border:0;border-radius:999px;overflow:hidden;background:#e2e8f0}
.chart-bar::-webkit-progress-bar{background:#e2e8f0;border-radius:999px}
.chart-bar::-webkit-progress-value{background:var(--chart-color,#2563eb);border-radius:999px}
.chart-bar::-moz-progress-bar{background:var(--chart-color,#2563eb);border-radius:999px}
.chart-bar.tone-blue{--chart-color:#1f74ad}
.chart-bar.tone-cyan{--chart-color:#61a9bd}
.chart-bar.tone-green{--chart-color:#44986d}
.chart-bar.tone-orange{--chart-color:#e98e2e}
.chart-bar.tone-red{--chart-color:#d8524f}
.chart-bar.tone-gray{--chart-color:#979797}

/* kpis */
.grid-kpi{display:grid;grid-template-columns:1fr;gap:1.5rem}
.kpi{color:#fff;border-radius:.5rem;padding:1.5rem;box-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -4px rgba(0,0,0,.1);transition:box-shadow .15s}
.kpi:hover{box-shadow:0 20px 25px -5px rgba(0,0,0,.1),0 8px 10px -6px rgba(0,0,0,.1)}
.kpi-orange{background:linear-gradient(to bottom right,#fb923c,#ea580c)}
.kpi-red{background:linear-gradient(to bottom right,#f87171,#dc2626)}
.kpi-darkred{background:linear-gradient(to bottom right,#ef4444,#b91c1c)}
.kpi-yellow{background:linear-gradient(to bottom right,#facc15,#ca8a04)}
.kpi-head{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:1rem}
.kpi-head h3{font-size:.875rem;font-weight:500;opacity:.9}
.kpi-val{font-size:1.875rem;line-height:2.25rem;font-weight:700;margin-bottom:.5rem}
.kpi-note{font-size:.75rem;opacity:.75}

/* cards */
.card{background:#fff;border-radius:.5rem;box-shadow:0 1px 3px rgba(0,0,0,.1),0 1px 2px rgba(0,0,0,.06);padding:1.5rem;display:block}
.card-head{display:flex;align-items:center;justify-content:space-between;gap:.75rem;flex-wrap:wrap;margin-bottom:1rem}
.card h2{font-size:1.25rem;line-height:1.75rem;font-weight:700;display:flex;align-items:center;gap:.5rem}
.h-ico{display:inline-block;vertical-align:middle;margin-right:.5rem;flex-shrink:0}
.btn{background:#4f46e5;color:#fff;padding:.5rem 1rem;border:0;border-radius:.25rem;font-size:.875rem}
.btn:disabled,.link-btn:disabled{opacity:.5;cursor:not-allowed}
.link-btn{background:none;border:0;color:#4f46e5;font-weight:500;padding:0}
.table-wrap{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:.875rem}
thead{background:#f9fafb;border-bottom:1px solid #e5e7eb}
th{padding:.5rem 1rem;text-align:left;color:#374151;font-weight:600;white-space:nowrap}
td{padding:.75rem 1rem;white-space:nowrap}
tbody tr+tr{border-top:1px solid #e5e7eb}
tbody tr:hover{background:#f9fafb}
.center{text-align:center}
th.center{font-weight:400}
.badge-red{background:#fee2e2;color:#991b1b;padding:.25rem .5rem;border-radius:.25rem;font-size:.75rem}
.small-note{font-size:.75rem;color:#6b7280;margin-top:1rem}
.grid-2{display:grid;grid-template-columns:1fr;gap:1.5rem}
.quick{transition:box-shadow .15s}
.quick:hover{box-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -4px rgba(0,0,0,.1)}
.quick h3{font-size:1.125rem;line-height:1.75rem;font-weight:700;margin-bottom:.5rem;display:flex;align-items:center}
.quick p{color:#4b5563;font-size:.875rem;margin-bottom:1rem}
.quick-link{color:#4f46e5;font-weight:500}
.quick:hover .quick-link{color:#312e81}
.quick:focus-visible{outline-color:#4f46e5}

/* modules */
.mod-head{display:flex;justify-content:space-between;align-items:center;gap:.75rem;flex-wrap:wrap}
.mod-head h1{font-size:1.875rem;line-height:2.25rem;font-weight:700;color:#111827;display:flex;align-items:center}
.muted{color:#4b5563}
.grid-reg{display:grid;grid-template-columns:1fr;gap:1rem;margin-bottom:1.5rem}
.reg{border:1px solid;border-radius:.25rem;padding:1rem}
.reg .l{font-size:.875rem}
.reg .v{font-size:1.5rem;line-height:2rem;font-weight:700}
.reg-green{background:#f0fdf4;border-color:#bbf7d0}.reg-green .l{color:#15803d}.reg-green .v{color:#14532d}
.reg-yellow{background:#fefce8;border-color:#fef08a}.reg-yellow .l{color:#a16207}.reg-yellow .v{color:#713f12}
.reg-gray{background:#f9fafb;border-color:#e5e7eb}.reg-gray .l{color:#374151}.reg-gray .v{color:#111827}
.reg-blue{background:#eff6ff;border-color:#bfdbfe}.reg-blue .l{color:#1d4ed8}.reg-blue .v{color:#1e3a8a}
.search-row{margin-bottom:1rem}
.search-row input{width:100%;padding:.5rem 1rem;border:1px solid #e5e7eb;border-radius:.25rem;background:#fff}
.search-row input:disabled{cursor:not-allowed}

@media(min-width:640px){
  .container{padding:0 1.5rem}
  .brand-text,.user{display:flex}
}
@media(min-width:768px){
  .nav-desktop{display:flex}
  .menu-btn,.nav-mobile{display:none!important}
  .hero-grid{grid-template-columns:repeat(4,1fr)}
  .grid-kpi{grid-template-columns:repeat(2,1fr)}
  .grid-2{grid-template-columns:repeat(2,1fr)}
  .grid-reg{grid-template-columns:repeat(4,1fr)}
}
@media(min-width:1024px){
  .container{padding:0 2rem}
  .grid-kpi{grid-template-columns:repeat(4,1fr)}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}

.login-shell{min-height:100vh;display:grid;place-items:center;padding:1rem;background:#f4f7fb}
.login-card{width:min(100%,28rem);display:grid;gap:.85rem;padding:2rem;background:#fff;border:1px solid #d9e2ec;border-radius:1rem;box-shadow:0 16px 50px #12243a12}
.login-card h1{font-size:1.45rem;margin:0;color:#17324d}
.login-card p{margin:0 0 .5rem;color:#526174}
.login-card label,.form-field label,.filters label{font-weight:650;color:#25364a}
.login-card input,.form-field input,.form-field select,.form-field textarea,.filters input,.filters select{width:100%;min-width:0;padding:.65rem .75rem;border:1px solid #b9c6d4;border-radius:.45rem;background:#fff;color:#172536;font:inherit}
.login-card input:focus,.form-field input:focus,.form-field select:focus,.form-field textarea:focus,.filters input:focus,.filters select:focus{outline:3px solid #3b82f633;border-color:#2871ca}
.form-error{padding:.75rem;border-left:4px solid #bd2935;background:#fff1f1;color:#86202a!important}
.record-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem;margin-top:1rem}
.form-field{display:grid;align-content:start;gap:.4rem;min-width:0}
.field-wide{grid-column:1/-1}
.form-field textarea{resize:vertical}
.form-actions{display:flex;align-items:center;gap:.75rem;flex-wrap:wrap}
.filters{display:flex;align-items:center;gap:.65rem;flex-wrap:wrap;margin:1rem 0}
.filters input{max-width:18rem}
.filters select{width:auto;min-width:10rem}
.dashboard-filters{margin:.5rem 0 1rem}
.dashboard-filters input[type=search]{min-width:min(18rem,100%)}
.row-actions{white-space:nowrap}
.row-actions form{display:inline}
.row-actions a,.row-actions .link-btn{margin-right:.5rem}
.row-actions .link-btn{border:0;background:none;color:#1759a6;text-decoration:underline;cursor:pointer;font:inherit;padding:0}
.attachment-list{padding-left:1.25rem}
.attachment-form{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:.75rem;margin-top:1rem}
.attachment-form label{grid-column:1/-1;font-weight:650}
.attachment-form input[type=file]{min-width:0;max-width:100%}
@media(max-width:640px){.record-form{grid-template-columns:1fr}.field-wide{grid-column:auto}.filters>*{width:100%!important;max-width:none!important}.login-card{padding:1.35rem}}