:root{ --accent:#3b5bdb; --navy:#1b2440; }
*{ box-sizing:border-box; }
body{ margin:0; font-family:'Segoe UI',Arial,sans-serif; font-size:15px; color:#1d2939; background:#eef1f7; }
a{ color:var(--accent); }

/* login */
.login-body{ display:flex; align-items:center; justify-content:center; min-height:100vh; background:#eef1f7; }
.login-card{ background:#fff; border:1px solid #e4e7ec; border-radius:14px; padding:30px 34px; width:380px;
  text-align:center; box-shadow:0 10px 30px rgba(20,30,60,.08); }
.login-card h1{ margin:8px 0 0; color:var(--navy); }
.login-card .sub{ color:#667085; margin-bottom:14px; }
.login-card label{ display:block; text-align:left; margin-top:10px; font-weight:600; font-size:13px; }
.login-card input{ width:100%; padding:9px 10px; border:1px solid #d0d5dd; border-radius:8px; margin-top:4px; }
.login-card button{ width:100%; margin-top:18px; }
.err{ background:#fdecec; color:#b42318; padding:8px 12px; border-radius:8px; margin:8px 0; }
.ok{ background:#e7f6ec; color:#166534; padding:8px 12px; border-radius:8px; margin:8px 0; }

/* layout */
.app{ display:flex; min-height:100vh; }
.sidebar{ width:236px; background:var(--navy); color:#c7cede; display:flex; flex-direction:column; }
.brand{ text-align:center; padding:16px 10px 10px; }
.brand-name{ color:#fff; font-size:18px; font-weight:bold; margin-top:4px; }
.brand-sub{ color:#9fb0d6; font-size:12px; }
.sidebar nav{ margin-top:10px; display:flex; flex-direction:column; }
.sidebar nav a{ color:#c7cede; text-decoration:none; padding:13px 18px; font-size:15px; }
.sidebar nav a:hover{ background:#243056; color:#fff; }
.sidebar nav a.active{ background:var(--accent); color:#fff; font-weight:bold; }
.sidebar nav a .ic{ margin-right:8px; }
.side-foot{ margin-top:auto; padding:14px 18px; }
.side-foot .who{ color:#9fb0d6; font-size:13px; }
.side-foot .logout{ color:#8fb0ff; font-size:13px; }
.content{ flex:1; padding:22px 26px; overflow:auto; }

.title{ color:var(--navy); font-size:22px; margin:0 0 14px; }
.sub2{ color:var(--navy); margin:14px 0 8px; }
.muted{ color:#667085; margin-top:8px; }
.legend{ color:#667085; margin-bottom:10px; }
.legend .dot,.bulb{ font-size:16px; }
.bulb{ font-size:20px; }

.card{ background:#fff; border:1px solid #e4e7ec; border-radius:10px; padding:16px; margin-bottom:16px; }
.bar{ display:flex; gap:8px; margin-bottom:10px; align-items:center; }
.bar.wrap{ flex-wrap:wrap; }
.bar input[name=search]{ flex:1; }
input,select{ padding:8px 10px; border:1px solid #d0d5dd; border-radius:7px; font-size:14px; background:#fff; }
input:focus,select:focus{ outline:none; border-color:var(--accent); }
label{ display:flex; flex-direction:column; font-size:13px; font-weight:600; gap:4px; }
label.chk{ flex-direction:row; align-items:center; gap:6px; font-weight:500; }

button,.btn{ background:#eef0f5; border:1px solid #d0d5dd; border-radius:7px; padding:8px 14px;
  font-weight:600; cursor:pointer; text-decoration:none; color:#1d2939; display:inline-block; }
button:hover,.btn:hover{ background:#e2e6ef; }
.primary{ background:var(--accent); color:#fff; border:none; }
.primary:hover{ background:#2f4bc0; }
.success{ background:#2ea043; color:#fff; border:none; }
.success:hover{ background:#268a39; }
.btn.sm,.primary.sm{ padding:5px 10px; font-size:13px; }
button.link{ background:none; border:none; color:#d63031; cursor:pointer; padding:2px 4px; font-weight:bold; }
.toolbar{ display:flex; gap:8px; align-items:center; margin:10px 0; }
.pill{ background:#eef2ff; color:var(--accent); border-radius:12px; padding:2px 10px; font-size:12px; }
.inline{ display:inline-flex; gap:6px; align-items:center; margin:0; }

.tablewrap{ overflow:auto; background:#fff; border:1px solid #e4e7ec; border-radius:10px; }
table{ border-collapse:collapse; width:100%; }
th,td{ padding:8px 10px; border-bottom:1px solid #eef0f4; text-align:left; font-size:14px; white-space:nowrap; }
th{ background:#f0f2f7; color:var(--navy); font-weight:bold; }
tr:nth-child(even) td{ background:#f8f9fc; }
td.bad,.bad{ color:#d63031; font-weight:600; }
td.good,.good{ color:#2ea043; font-weight:600; }
.grnbtn{ font-weight:bold; text-decoration:none; }
table.mini th,table.mini td{ font-size:13px; padding:5px 7px; }

.two-col{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.grid2{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.grid3{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:16px; }
.form2 .grid2{ margin-bottom:12px; }
.kv{ display:grid; grid-template-columns:1fr 1fr; gap:6px 18px; }
.mlist{ list-style:none; padding:0; margin:6px 0; }
.mlist li{ display:flex; justify-content:space-between; align-items:center; padding:4px 0; border-bottom:1px solid #f0f2f4; }
.perms{ display:flex; flex-wrap:wrap; gap:8px 16px; margin:10px 0; }
hr{ border:none; border-top:1px solid #eef0f4; margin:12px 0; }

/* document scanner */
.scanform{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-top:10px; }
.scanform input[type=file]{ flex:1; min-width:200px; }
pre.ocr{ white-space:pre-wrap; max-height:220px; overflow:auto; background:#f6f7fb;
  border:1px solid #e4e7ec; border-radius:6px; padding:8px; font-size:12px; margin:6px 0 0; }
details summary{ cursor:pointer; color:var(--accent); }

@media (max-width:1100px){ .two-col,.grid3{ grid-template-columns:1fr; } }

/* --- mobile phones / small screens --- */
@media (max-width:820px){
  body{ font-size:15px; }
  .app{ flex-direction:column; min-height:100vh; }
  .sidebar{ width:100%; flex-direction:column; }
  .brand{ display:flex; align-items:center; gap:10px; padding:10px 14px; text-align:left; }
  .brand svg{ width:40px; height:40px; }
  .brand-name{ margin:0; font-size:16px; }
  .brand-sub{ display:none; }
  .sidebar nav{ flex-direction:row; overflow-x:auto; -webkit-overflow-scrolling:touch;
    border-top:1px solid #2a3557; }
  .sidebar nav a{ white-space:nowrap; padding:12px 15px; }
  .side-foot{ margin-top:0; display:flex; justify-content:space-between; align-items:center;
    padding:8px 14px; border-top:1px solid #2a3557; }
  .content{ padding:14px; }
  .two-col,.grid2,.grid3,.kv{ grid-template-columns:1fr; }
  .title{ font-size:19px; }
  .bar{ flex-wrap:wrap; }
  th,td{ font-size:13px; padding:6px 8px; }
  /* 16px inputs stop mobile browsers from auto-zooming on focus */
  input,select,button,.btn{ font-size:16px; }
  .card{ padding:12px; }
}