:root{
  --ink:#1c1c1c;
  --paper:#fdfcf7;
  --accent:#7a1f2b;
  --accent-light:#f4e6e2;
  --border:#ddd4c8;
  --muted:#7a746a;
  --ok:#2e7d32;
  --bad:#b3261e;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  font-family:Arial, Helvetica, sans-serif;
  background:var(--paper);
  color:var(--ink);
  direction:ltr;
  text-align:left;
  min-height:100vh;
}
a{color:var(--accent);}
.topbar{
  display:flex; align-items:center; justify-content:space-between;
  background:var(--accent); color:#fff; padding:12px 20px;
}
.topbar .brand{font-size:20px; font-weight:bold;}
.topbar nav a, .topbar nav button{
  color:#fff; text-decoration:none; margin-inline-start:14px; background:none; border:none;
  font-size:15px; cursor:pointer; font-family:Arial, sans-serif;
}
.topbar nav a:hover, .topbar nav button:hover{text-decoration:underline;}
.wrap{max-width:900px; margin:0 auto; padding:24px 16px 80px;}
.card{
  background:#fff; border:1px solid var(--border); border-radius:8px;
  padding:20px; margin-bottom:16px;
}
h1,h2,h3{font-family:Arial, sans-serif;}
.kvitel-title{text-align:center; font-size:26px; margin:10px 0 4px; letter-spacing:1px; font-family:"Times New Roman", "David", serif; direction:rtl;}
.kvitel-sub{text-align:center; color:var(--muted); font-size:13px; margin-bottom:20px;}

/* ---- Kvitel units (mirrors the printed layout) - content is Hebrew/Yiddish, so this block is RTL regardless of the page's own English/LTR chrome ---- */
.units-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:0 30px;
  direction:rtl; text-align:right;
  font-family:"Times New Roman", "David", "Frank Ruhl Libre", serif;
}
@media (max-width:700px){ .units-grid{grid-template-columns:1fr;} }
.unit{
  padding:10px 0;
  break-inside:avoid; page-break-inside:avoid;
}
.unit.group-start{
  border-top:4px solid var(--accent);
  margin-top:14px;
  padding-top:16px;
}
.unit .loc{font-weight:bold; font-size:14px; color:var(--accent); margin-bottom:2px;}
.unit .line{font-size:17px; line-height:1.5; font-weight:bold;}
.unit .child{font-size:16px; line-height:1.5; padding-inline-start:14px; font-weight:normal;}
.unit .admin-actions{margin-top:6px; font-family:Arial, sans-serif; font-size:12px; direction:ltr; text-align:left;}
.unit .admin-actions button{margin-inline-end:6px;}

/* ---- Forms ---- */
.form-row{margin-bottom:12px;}
.form-row label{display:block; font-size:13px; color:var(--muted); margin-bottom:4px;}
.form-row input, .form-row textarea, .form-row select{
  width:100%; padding:8px 10px; border:1px solid var(--border); border-radius:5px;
  font-size:15px; font-family:Arial, sans-serif;
}
/* Fields that hold Hebrew/Yiddish kvitel text - type naturally right-to-left even on this English form */
.he-input{ direction:rtl; text-align:right; font-family:"Times New Roman", serif; font-size:16px; }
.children-list .child-row{display:flex; gap:6px; margin-bottom:6px;}
.children-list .child-row input{flex:1;}
button, .btn{
  font-family:Arial, sans-serif; background:var(--accent); color:#fff; border:none;
  padding:8px 16px; border-radius:5px; cursor:pointer; font-size:14px;
}
button.secondary, .btn.secondary{background:#8a8578;}
button.danger, .btn.danger{background:var(--bad);}
button.ghost{background:transparent; color:var(--accent); border:1px solid var(--accent);}
button:disabled{opacity:.5; cursor:default;}
.msg{font-size:14px; margin:8px 0; padding:8px 12px; border-radius:5px;}
.msg.err{background:#fdecea; color:var(--bad);}
.msg.ok{background:#e8f5e9; color:var(--ok);}
.status-pill{font-size:12px; padding:2px 10px; border-radius:20px; display:inline-block;}
.status-pill.pending{background:#fff3cd; color:#8a6d00;}
.status-pill.approved{background:#e8f5e9; color:var(--ok);}
.status-pill.rejected{background:#fdecea; color:var(--bad);}
.status-pill.active{background:#e8f5e9; color:var(--ok);}
table{width:100%; border-collapse:collapse; font-size:14px;}
table th, table td{border-bottom:1px solid var(--border); padding:8px; text-align:left;}
.diff-box{display:flex; gap:16px; font-size:14px;}
@media (max-width:700px){.diff-box{flex-direction:column;}}
.diff-col{flex:1; border:1px solid var(--border); border-radius:6px; padding:10px;}
.diff-col h4{margin:0 0 8px; font-size:13px; color:var(--muted); font-family:Arial, sans-serif; direction:ltr; text-align:left;}
.tabs{display:flex; gap:8px; margin-bottom:16px;}
.tabs button{background:transparent; color:var(--ink); border:1px solid var(--border);}
.tabs button.active{background:var(--accent); color:#fff; border-color:var(--accent);}
.hidden{display:none !important;}
.print-btn-wrap{text-align:center; margin:10px 0 24px;}
.order-controls{font-size:12px;}
.order-controls button{padding:2px 8px; font-size:12px; margin-inline-end:4px;}
.checkbox-row{display:flex; align-items:center; gap:8px; margin-bottom:12px;}
.checkbox-row input{width:auto;}
.checkbox-row label{margin:0; font-size:14px; color:var(--ink);}
.hint{font-size:12px; color:var(--muted); margin:4px 0 8px;}
.child-row select{width:auto; flex:0 0 auto;}

@page{ margin:15mm; }
@media print{
  .topbar, .print-btn-wrap, .no-print{display:none !important;}
  html,body{height:auto; min-height:0; background:#fff;}
  .wrap{max-width:none; padding:0; margin:0;}
  .units-grid{
    display:block;
    column-count:2;
    column-gap:30px;
  }
  .unit{break-inside:avoid; page-break-inside:avoid; display:inline-block; width:100%;}
  .unit.group-start{margin-top:10px; padding-top:12px;}
}