:root { --bg:#F4F1EA; --ink:#1B3A4B; --line:#D9D3C7; --alert:#8a3b32; }
* { box-sizing:border-box; }
body { margin:0; font-family:Arial, sans-serif; background:var(--bg); color:var(--ink); }
header, main { max-width:860px; margin:0 auto; padding:16px; }
h1, h2 { margin:0 0 12px; }
.card { background:#fff; border:1px solid var(--line); border-radius:12px; padding:16px; margin:12px 0; }
label { display:block; margin:10px 0 4px; }
input, select, button, textarea { font:inherit; padding:10px; border:1px solid var(--line); border-radius:8px; width:100%; }
button { background:var(--ink); color:#fff; cursor:pointer; width:auto; margin:8px 4px 0 0; }
.note { color:#667; font-size:14px; }
.alert { color:var(--alert); }
table { width:100%; border-collapse:collapse; }
td, th { border-bottom:1px solid var(--line); text-align:right; padding:8px; }
.row { display:flex; gap:8px; }
.row > * { flex:1; }
a { color:var(--ink); }
/* mobile */
html { direction:rtl; }
input, select, textarea { font-size:16px; } /* stops iPhone zoom on focus */
.card { overflow-x:auto; }
td form { margin:4px 0; }
@media (max-width:600px) {
  header, main { padding:8px; }
  .row { flex-wrap:wrap; }
  .row > * { flex:1 1 140px; }
  td, th { padding:6px 4px; font-size:14px; }
}
/* v3 */
.btn { display:inline-block; background:var(--ink); color:#fff; padding:10px 14px; border-radius:8px; text-decoration:none; margin:4px 0; }
.btn.light { background:#fff; color:var(--ink); border:1px solid var(--ink); }
button.light { background:#fff; color:var(--ink); border:1px solid var(--ink); }
.overdue, tr.overdue td { color:var(--alert); font-weight:bold; }
.sub { border:1px dashed var(--line); border-radius:8px; padding:8px; margin:6px 0; }
.legend span { display:inline-block; margin-left:12px; font-size:14px; }
.legend i { display:inline-block; width:12px; height:12px; margin-left:4px; vertical-align:middle; }
.thumbs img { max-width:90px; max-height:90px; border-radius:6px; margin:2px; }
.filters { display:flex; flex-wrap:wrap; gap:8px; align-items:end; }
.filters > * { flex:1 1 130px; }