@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&display=swap');

:root{
  --navy:#283D65; --navy2:#1c2c49; --navy3:#3f5a88;
  --gold:#F39221; --gold-deep:#D97A0F;
  --red:#E51A28; --red-deep:#B81420;
  --green:#8CC044; --green-bg:#EAF6DC; --amber-bg:#FCEBD9;
  --bg:#eef1f6; --panel:#ffffff; --line:#e2e6ed; --ink:#122036; --muted:#6d7789;
}
*{box-sizing:border-box;}
body{margin:0;font-family:'Poppins',sans-serif;background:var(--bg);color:var(--ink);font-size:14px;}
h1,h2,h3,b,strong,button{font-weight:700;}
a{color:inherit;}

.app{display:grid;grid-template-columns:240px 1fr;min-height:100vh;}
.side{background:var(--navy);color:#fff;padding:18px 14px;}
.side .brand{display:flex;align-items:center;gap:10px;margin-bottom:22px;padding:0 6px;}
.side .brand img{height:30px;}
.side .brand b{font-size:14px;}
.side a.nav{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:8px;color:rgba(255,255,255,.85);text-decoration:none;font-size:13px;font-weight:600;margin-bottom:2px;}
.side a.nav:hover, .side a.nav.active{background:rgba(255,255,255,.12);color:#fff;}
.side .sec-label{font-size:10.5px;text-transform:uppercase;letter-spacing:.08em;color:rgba(255,255,255,.45);margin:16px 0 6px;padding:0 12px;}

.main{padding:26px 30px;}
.topbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;}
.topbar h1{font-size:20px;margin:0;color:var(--navy);}
.crumbs{font-size:12px;color:var(--muted);margin-bottom:4px;}

.panel{background:var(--panel);border:1px solid var(--line);border-radius:12px;margin-bottom:20px;overflow:hidden;}
.panel-head{padding:16px 20px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;}
.panel-head h3{margin:0;font-size:15px;}
.panel-body{padding:20px;}

.table-tools{padding:14px 20px;border-bottom:1px solid var(--line);display:flex;gap:10px;flex-wrap:wrap;align-items:center;}
input[type=text], input[type=date], input[type=email], input[type=tel], input[type=password], input[type=number], input[type=file], select, textarea{
  width:100%;padding:9px 11px;border:1px solid var(--line);border-radius:7px;font-family:inherit;font-size:13px;color:var(--ink);background:#fbfcfd;
}
label{display:block;font-weight:700;font-size:12.5px;color:var(--navy);margin-bottom:5px;}
.field{margin-bottom:14px;}
.field-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px 20px;}

table{width:100%;border-collapse:collapse;font-size:13px;}
th{text-align:left;background:#f7f8fa;padding:10px 12px;border-bottom:2px solid var(--line);color:#555;font-size:11.5px;text-transform:uppercase;letter-spacing:.03em;}
td{padding:10px 12px;border-bottom:1px solid #eee;}
tr:hover td{background:#fafcfe;}

.btn{display:inline-flex;align-items:center;gap:7px;border:none;border-radius:8px;padding:10px 16px;font-size:13px;font-weight:700;cursor:pointer;text-decoration:none;}
.btn-primary{background:var(--navy);color:#fff;}
.btn-primary:hover{background:var(--navy2);}
.btn-ghost{background:#fff;border:1px solid var(--line);color:var(--ink);}
.btn-ghost:hover{border-color:var(--navy3);}
.btn-red{background:var(--red);color:#fff;}
.btn-green{background:var(--green);color:#fff;}

.badge{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border-radius:20px;font-size:11px;font-weight:700;}
.badge .dot{width:6px;height:6px;border-radius:50%;}
.badge.ok{background:var(--green-bg);color:#3d6b1a;}
.badge.ok .dot{background:#3d6b1a;}
.badge.warn{background:var(--amber-bg);color:var(--gold-deep);}
.badge.warn .dot{background:var(--gold-deep);}
.badge.off{background:#eceef0;color:var(--muted);}
.badge.off .dot{background:var(--muted);}

.alert{padding:12px 16px;border-radius:8px;font-size:13px;margin-bottom:16px;}
.alert.error{background:#fdeceb;color:var(--red-deep);border:1px solid #f6c7c3;}
.alert.ok{background:var(--green-bg);color:#3d6b1a;border:1px solid #cfe8ae;}

.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:20px;}
.stat{background:#fff;border:1px solid var(--line);border-radius:10px;padding:14px 16px;}
.stat label{font-size:11px;color:var(--muted);text-transform:uppercase;}
.stat .val{font-size:22px;font-weight:800;color:var(--navy);}

.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#eef1f6,#e4e9f2);}
.login-card{background:#fff;border-radius:18px;padding:36px;width:100%;max-width:380px;box-shadow:0 30px 60px -20px rgba(15,44,76,.3);text-align:center;}
.login-card img{height:48px;margin-bottom:14px;}

.empty-state{padding:30px;text-align:center;color:var(--muted);font-size:13px;}