/* KPM-4 UI Theme (non-destructive, UI-only) */
:root{
  --bg:#fbfcfd;
  --panel:#ffffff;
  --text:#0e172a;
  --muted:#6b7280;
  --brand:#1ba6a0;
  --bad-red:#e88f8f;
  --line:#e6e9ee;
  --radius:6px;
  --shadow:0 1px 1.5px rgba(0,0,0,.05);
}

/* Body & container */
html,body{height:100%;}
body{background:var(--bg); color:var(--text); font:14px/1.4 system-ui, -apple-system, Segoe UI, Roboto, "Noto Sans", Ubuntu, Cantarell, "Helvetica Neue", Arial;}
.kpm-container, .container, .wrap, .page-wrap{max-width:1100px; margin:0 auto; padding:0 12px;}

/* Header / Navbar look */
header{background:#fff; border-bottom:1px solid var(--line); position:sticky; top:0; z-index:10;}
header .container, header .kpm-container{display:flex; align-items:center; gap:12px; padding:10px 0;}
header nav{margin-left:auto; display:flex; gap:4px; flex-wrap:wrap;}
header nav a, header nav button{appearance:none; border:0; background:transparent; padding:8px 10px; border-radius:6px; cursor:pointer; color:var(--muted); text-decoration:none;}
header nav a:hover, header nav button:hover, header nav .active{background:#f3f4f6; color:var(--text);}

/* Panels */
.panel, .card, .box, .kpm-panel{background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); padding:10px;}
.cards{display:grid; grid-template-columns:repeat(3, 1fr); gap:12px; margin:12px 0;}
.card h4{margin:0; font-size:12px; color:var(--muted); text-transform:uppercase; letter-spacing:.5px;}
.card .val{font-size:20px; font-weight:700; margin-top:6px;}

/* Filters / Form grid */
.filters, .kpm-filters{background:#fff; border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); padding:10px; display:grid; gap:8px; grid-template-columns:repeat(12, 1fr); align-items:end;}
label.fi{display:flex; flex-direction:column; gap:4px;}
label.fi>span{font-size:11px; color:var(--muted);}
input[type=date], select, input[type=number], input[type=text], input[type=file]{height:32px; border:1px solid var(--line); border-radius:6px; padding:0 8px; background:#fff; width:100%;}
input[type=file]{height:auto; padding:6px 8px;}
.btn, .button{height:32px; padding:0 10px; border-radius:6px; border:1px solid var(--line); cursor:pointer;}
.btn.primary, .button.primary{background:var(--brand); color:#fff; border-color:transparent;}
.btn.ghost{background:transparent;}
.actions{display:flex; gap:8px; justify-content:flex-end;}

/* Tables */
.table-wrap{background:#fff; border:1px solid var(--line); border-radius:6px; box-shadow:var(--shadow); overflow:auto;}
table{border-collapse:separate; border-spacing:0; width:100%; font-size:13px;}
thead th{position:sticky; top:0; z-index:1; text-align:left; border-bottom:1px solid var(--line); padding:8px; font-weight:600;}
tbody td{padding:7px 10px; border-bottom:1px solid var(--line); white-space:nowrap; text-overflow:ellipsis; overflow:hidden;}
tbody tr:nth-child(even){background:#eef2f7;}
tfoot td{padding:8px; border-top:1px solid var(--line); font-weight:700;}
.kpm-in{background:color-mix(in oklab, var(--brand) 40%, white); color:#065f46; padding:2px 8px; border-radius:999px; font-size:12px; display:inline-block;}
.kpm-out{background:color-mix(in oklab, var(--bad-red) 40%, white); color:#7f1d1d; padding:2px 8px; border-radius:999px; font-size:12px; display:inline-block;}

/* Pagination */
.pager{display:flex; gap:6px; align-items:center; padding:8px;}
.pager button{height:28px; padding:0 8px; border:1px solid var(--line); background:#fff; border-radius:6px;}
.pager .info{color:var(--muted); font-size:12px;}

/* Modal (generic) */
.modal-root[open]{display:block;}
.modal-root{position:fixed; inset:0; display:none;}
.modal-root .backdrop{position:absolute; inset:0; background:rgba(0,0,0,.35);}
.modal-root .modal{position:absolute; inset:auto; left:50%; top:10%; transform:translateX(-50%); width:min(880px, 92vw); background:#fff; border-radius:12px; box-shadow:0 10px 30px rgba(0,0,0,.2); overflow:hidden;}
.modal-root .modal header{padding:10px 14px; border-bottom:1px solid var(--line);} 
.modal-root .modal .body{padding:12px;}
.modal-root .modal footer{padding:10px 14px; border-top:1px solid var(--line); display:flex; justify-content:flex-end; gap:8px;}

/* Responsive: phone compact rows */
@media (max-width:480px){
  table{font-size:12px;}
  tbody td, thead th, tfoot td{padding:5px 6px; line-height:1.2;}
  .btn{height:30px;}
}