* { box-sizing: border-box; }
body { margin: 0; font-family: 'Segoe UI', Arial, sans-serif; font-size: 14px; color: #1b2733; background: #f2f5f8; }
.muted { color: #6b7a89; }
.err { color: #b3261e; min-height: 18px; font-size: 13px; }
button, input, select, textarea { font: inherit; }
input, select, textarea { border: 1px solid #b9c4cf; border-radius: 6px; padding: 6px 8px; background: #fff; max-width: 100%; }
input:focus, select:focus, textarea:focus { outline: 2px solid #5aa7e0; border-color: #5aa7e0; }
textarea { width: 100%; resize: vertical; }

.btn { border: 1px solid #9fb0c1; background: #fff; border-radius: 6px; padding: 7px 14px; cursor: pointer; }
.btn:hover { background: #eaf1f8; }
.btn.primary { background: #0b6bcb; border-color: #0b6bcb; color: #fff; }
.btn.primary:hover { background: #0a5cb0; }
.btn.danger { background: #b3261e; border-color: #b3261e; color: #fff; }
.btn.small { padding: 4px 10px; font-size: 13px; }
.btn:disabled { opacity: .5; cursor: not-allowed; }

.login-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; }
.login-card { background: #fff; padding: 30px 34px; border-radius: 12px; box-shadow: 0 6px 24px rgba(0,0,0,.12); width: 340px; display: flex; flex-direction: column; gap: 12px; }
.login-card h1 { margin: 0; font-size: 22px; }
.login-card label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; }

header { display: flex; align-items: center; gap: 18px; padding: 8px 18px; background: #0d3b66; color: #fff; flex-wrap: wrap; }
.brand { display: flex; flex-direction: column; line-height: 1.15; }
.brand b { font-size: 16px; } .brand span { font-size: 12px; opacity: .8; }
nav { display: flex; gap: 4px; flex: 1; }
nav button { background: transparent; border: 0; color: #cfe0f2; padding: 8px 14px; border-radius: 6px; cursor: pointer; font-size: 14px; }
nav button.active, nav button:hover { background: #164f88; color: #fff; }
.hdr-right { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.hdr-right .btn { background: #164f88; color: #fff; border-color: #2a6aa8; }
.sync { font-size: 12px; opacity: .85; }
.sync.bad { color: #ffb4a8; opacity: 1; }
main { padding: 16px 18px; max-width: 1500px; margin: 0 auto; }

.cards { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.card-stat { background: #fff; border-radius: 10px; padding: 10px 16px; min-width: 140px; cursor: pointer; border: 2px solid transparent; box-shadow: 0 1px 3px rgba(0,0,0,.08); }
.card-stat.active { border-color: #0b6bcb; }
.card-stat .n { font-size: 24px; font-weight: 700; } .card-stat .l { font-size: 12px; color: #6b7a89; }
.card-stat.crit .n { color: #b3261e; }

.toolbar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 10px; }
.toolbar .grow { flex: 1; min-width: 200px; }

table.grid { width: 100%; border-collapse: collapse; background: #fff; border-radius: 10px; overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,.08); }
table.grid th { background: #e3ebf3; text-align: left; padding: 8px 10px; font-size: 12px; text-transform: uppercase; letter-spacing: .3px; color: #3b4a59; }
table.grid td { padding: 7px 10px; border-top: 1px solid #e6ecf2; vertical-align: middle; }
table.grid tr.visit-head td { background: #f6f9fc; font-weight: 600; border-top: 2px solid #cfdae5; }
table.grid tr.cancelled td { opacity: .5; text-decoration: line-through; }
.badge { display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: 12px; font-weight: 600; background: #e5e9ee; color: #334; white-space: nowrap; }
.badge.s-Awaiting { background: #fff1d6; color: #8a5a00; }
.badge.s-Collected { background: #dcecff; color: #0b4d99; }
.badge.s-Saved { background: #e6e0ff; color: #4a2c9a; }
.badge.s-Final { background: #d9f3e1; color: #14602f; }
.badge.due { background: #fde2e0; color: #9b1c15; }
.badge.crit { background: #b3261e; color: #fff; }

.modal-back { position: fixed; inset: 0; background: rgba(15,30,45,.55); display: flex; align-items: flex-start; justify-content: center; padding: 24px 12px; overflow: auto; z-index: 50; }
.modal { background: #fff; border-radius: 12px; width: 100%; max-width: 980px; box-shadow: 0 10px 40px rgba(0,0,0,.35); }
.modal.narrow { max-width: 520px; } .modal.wide { max-width: 1180px; }
.modal-head { display: flex; justify-content: space-between; align-items: center; padding: 12px 18px; border-bottom: 1px solid #e0e7ee; position: sticky; top: 0; background: #fff; border-radius: 12px 12px 0 0; z-index: 2; }
.modal-head h2 { margin: 0; font-size: 18px; }
.modal-body { padding: 14px 18px; }
.modal-foot { padding: 12px 18px; border-top: 1px solid #e0e7ee; display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; position: sticky; bottom: 0; background: #fff; border-radius: 0 0 12px 12px; }
.x { background: none; border: 0; font-size: 22px; cursor: pointer; color: #6b7a89; }

.locked { background: #eef1f4; border: 1px dashed #98a6b4; border-radius: 8px; padding: 10px 14px; margin-bottom: 12px; }
.locked .lk { font-size: 12px; color: #5a6978; margin-bottom: 6px; }
.locked .kv { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 4px 14px; }
.locked .kv div span { color: #6b7a89; font-size: 12px; display: block; }
.locked .kv div b { font-weight: 600; }

.res-table { width: 100%; border-collapse: collapse; }
.res-table th { text-align: left; font-size: 12px; background: #e3ebf3; padding: 6px 8px; }
.res-table td { padding: 5px 8px; border-top: 1px solid #e8eef4; vertical-align: top; }
.res-table .grp td { background: #f3f6f9; font-weight: 600; font-size: 12px; }
.res-table input.v, .res-table select.v { width: 190px; }
.res-table textarea.v { width: 100%; min-height: 60px; }
.res-table tr.crit td { background: #fdecea; }
.res-table tr.crit input, .res-table tr.crit select { border: 2px solid #b3261e; font-weight: 700; }
.res-table tr.abn input, .res-table tr.abn select { border-color: #d98a00; font-weight: 700; }
.flagcell { font-weight: 700; white-space: nowrap; }
.flagcell.crit { color: #b3261e; }
.flagcell.abn { color: #b36b00; }
.warn-inline { color: #b3261e; font-weight: 700; font-size: 12px; display: block; }

.crit-banner { background: #b3261e; color: #fff; padding: 10px 14px; border-radius: 8px; margin-bottom: 10px; font-weight: 600; }
.crit-banner small { font-weight: 400; display: block; }
.notice { background: #fff7e0; border: 1px solid #f0d58a; padding: 8px 12px; border-radius: 8px; margin-bottom: 10px; font-size: 13px; }

.timeline { font-size: 12px; max-height: 220px; overflow: auto; border: 1px solid #e0e7ee; border-radius: 8px; }
.timeline div { padding: 4px 10px; border-bottom: 1px solid #eef2f6; }
.timeline .t { color: #6b7a89; margin-right: 8px; }

.pdf-frame { width: 100%; height: 76vh; border: 1px solid #b9c4cf; border-radius: 6px; }
.tabs { display: flex; gap: 4px; margin-bottom: 12px; border-bottom: 2px solid #cfdae5; }
.tabs button { background: none; border: 0; padding: 8px 16px; cursor: pointer; border-bottom: 3px solid transparent; margin-bottom: -2px; font-size: 14px; }
.tabs button.active { border-color: #0b6bcb; color: #0b6bcb; font-weight: 600; }
.form-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.form-grid label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; }
.panel { background: #fff; border-radius: 10px; padding: 16px; box-shadow: 0 1px 3px rgba(0,0,0,.08); }
.pcard { border: 1px solid #cfdae5; border-radius: 8px; padding: 10px; margin-bottom: 10px; background: #fbfdff; }
.pcard.inactive { opacity: .55; }
.pcard .row { display: flex; gap: 8px; flex-wrap: wrap; align-items: flex-end; margin-bottom: 6px; }
.pcard .row label { display: flex; flex-direction: column; font-size: 12px; gap: 2px; }
table.rng { border-collapse: collapse; font-size: 12px; }
table.rng td, table.rng th { padding: 2px 3px; } table.rng input { width: 70px; padding: 3px 5px; } table.rng input.wide { width: 220px; }
#toast { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); background: #1b2733; color: #fff; padding: 10px 18px; border-radius: 8px; opacity: 0; transition: opacity .25s; pointer-events: none; z-index: 99; max-width: 80vw; white-space: pre-line; }
#toast.show { opacity: 1; } #toast.bad { background: #b3261e; }