:root{
  --paper:#f6f1e4;
  --ink:#1f2a24;
  --brass:#8a6d3b;
  --brass-dark:#6b5228;
  --stub-line:#c9bd9e;
  --accent:#a8442f;
  --green-felt:#233b2e;
}
*{box-sizing:border-box;}
body{
  margin:0;
  background:var(--green-felt);
  font-family:'Courier New', Consolas, monospace;
  color:var(--ink);
  min-height:100vh;
}
a{color:inherit;}
h1,h2,h3{font-family:Georgia,'Times New Roman',serif;}

/* ---------- Top bar / nav ---------- */
.topbar{
  background:#1a2b22; color:#f6f1e4; padding:12px 20px;
  display:flex; align-items:center; justify-content:space-between;
  border-bottom:2px solid var(--brass); flex-wrap:wrap; gap:8px;
}
.topbar .brand{font-size:15px; letter-spacing:2px; text-transform:uppercase;}
.topbar .who{font-size:12px; color:#cfd9d1;}
.topbar nav{display:flex; gap:14px; flex-wrap:wrap;}
.topbar nav a{
  font-size:11px; text-transform:uppercase; letter-spacing:1px; color:#cfd9d1;
  text-decoration:none; padding:6px 10px; border:1px solid transparent;
}
.topbar nav a:hover, .topbar nav a.active{ border-color:var(--brass); color:#fff; background:rgba(255,255,255,0.06); }
.topbar .logout{ color:#e2a58f; }

/* ---------- Layout ---------- */
.container{ max-width:1100px; margin:0 auto; padding:24px 20px 60px; }

.panel{
  background:var(--paper);
  border:1px solid var(--brass);
  box-shadow:0 6px 18px rgba(0,0,0,0.35);
  padding:18px; margin-bottom:20px;
}
.panel h2{
  font-size:14px; letter-spacing:2px; text-transform:uppercase; margin:0 0 14px;
  border-bottom:2px solid var(--brass); padding-bottom:8px; color:var(--brass-dark);
}

label{
  display:block; font-size:11px; text-transform:uppercase; letter-spacing:1px;
  margin:12px 0 4px; color:#4a4234;
}
input[type=text], input[type=tel], input[type=password], input[type=date], select{
  width:100%; padding:9px 10px; border:1px solid #b8ac8c; background:#fffdf7;
  font-family:inherit; font-size:14px; color:var(--ink);
}
input:focus, select:focus{outline:2px solid var(--accent);}
.row{display:flex; gap:10px; flex-wrap:wrap;}
.row > div{flex:1; min-width:140px;}

button, .btn{
  font-family:inherit; font-size:12px; letter-spacing:1px; text-transform:uppercase;
  padding:9px 14px; border:none; cursor:pointer; display:inline-block; text-decoration:none;
}
.btn-save, .btn-primary{ background:var(--brass-dark); color:#fff; }
.btn-save:hover, .btn-primary:hover{ background:var(--brass); }
.btn-add{ background:#3f6b4c; color:#fff; margin-top:10px; }
.btn-add:hover{ background:#345a3f; }
.btn-del{ background:var(--accent); color:#fff; padding:4px 10px; font-size:10px; }
.btn-del:hover{ background:#8f3626; }
.btn-print{ background:var(--accent); color:#fff; width:100%; margin-top:16px; padding:13px; font-size:14px; }
.btn-print:hover{ background:#8f3626; }
.btn-block{ width:100%; }

.status{ font-size:12px; margin-top:10px; padding:8px 10px; }
.status.ok{ background:#e3efe6; color:#245b39; border:1px solid #a9d3b6; }
.status.err{ background:#f6e3e0; color:#8f3626; border:1px solid #e2a58f; }

table.data{ width:100%; border-collapse:collapse; margin-top:12px; font-size:13px; }
table.data th, table.data td{ padding:8px 10px; border-bottom:1px solid var(--stub-line); text-align:left; }
table.data th{ text-transform:uppercase; font-size:10px; letter-spacing:1px; color:#7a6f56; }
table.data tr:hover{ background:#efe7d2; }

.badge{ display:inline-block; padding:2px 8px; font-size:10px; text-transform:uppercase; letter-spacing:1px; }
.badge.admin{ background:#a8442f; color:#fff; }
.badge.operator{ background:#3f6b4c; color:#fff; }
.badge.active{ background:#3f6b4c; color:#fff; }
.badge.inactive{ background:#8a806a; color:#fff; }

/* ---------- Login ---------- */
.login-wrap{
  min-height:100vh; display:flex; align-items:center; justify-content:center; padding:20px;
}
.login-box{
  background:var(--paper); border:1px solid var(--brass); box-shadow:0 8px 20px rgba(0,0,0,0.4);
  padding:30px; width:100%; max-width:360px;
}
.login-box h1{
  text-align:center; font-size:18px; letter-spacing:2px; text-transform:uppercase;
  color:var(--brass-dark); margin:0 0 4px;
}
.login-box .sub{ text-align:center; font-size:11px; color:#7a6f56; margin-bottom:20px; letter-spacing:1px; text-transform:uppercase; }

/* ---------- Operator / ticket view (reused from original design) ---------- */
.wrap{
  max-width:1120px; margin:0 auto; display:grid;
  grid-template-columns:minmax(320px,380px) minmax(320px,1fr);
  align-items:start; gap:24px;
}
@media (max-width:880px){ .wrap{grid-template-columns:1fr; max-width:480px;} }

.clock-box{
  margin-top:12px; padding:10px; background:#0e1a13; color:#8fe2b0;
  text-align:center; font-size:16px; letter-spacing:2px; border:1px solid var(--brass);
}
.clock-box .lbl{ font-size:9px; letter-spacing:2px; color:#6fa583; text-transform:uppercase; margin-bottom:2px; }

.ticket-area{ display:flex; flex-direction:column; align-items:center; }
@media (min-width:881px){ .ticket-area{ position:sticky; top:24px; } }
.ticket{
  width:100%; max-width:420px; background:var(--paper); border:2px solid var(--brass);
  position:relative; box-shadow:0 8px 20px rgba(0,0,0,0.4);
}
.ticket-top{ padding:18px 22px 14px; text-align:center; border-bottom:2px dashed var(--stub-line); }
.ticket-top .brand{ font-family:Georgia,serif; font-size:16px; letter-spacing:2px; text-transform:uppercase; color:var(--brass-dark); margin-bottom:2px; }
.ticket-top .kind{ font-size:10px; letter-spacing:2px; color:#7a6f56; text-transform:uppercase; }
.ticket-body{ padding:16px 22px 10px; }
.field{ display:flex; justify-content:space-between; align-items:baseline; padding:6px 0; border-bottom:1px dotted var(--stub-line); font-size:13px; }
.field .k{ color:#7a6f56; text-transform:uppercase; font-size:10px; letter-spacing:1px; }
.field .v{ font-weight:bold; color:var(--ink); text-align:right; }
.serial-box{ text-align:center; padding:14px 0 18px; }
.serial-box .lbl{ font-size:10px; letter-spacing:2px; color:#7a6f56; text-transform:uppercase; }
.serial-box .num{ font-family:Georgia,serif; font-size:22px; letter-spacing:2px; color:var(--accent); font-weight:bold; margin-top:2px; }
.ticket-foot{ text-align:center; font-size:9px; color:#8a806a; padding:8px 0 14px; letter-spacing:1px; }

.history{ margin-top:20px; width:100%; max-width:420px; font-size:11px; color:#dbe4dd; }
.history h3{ font-size:11px; letter-spacing:1px; text-transform:uppercase; color:#cfd9d1; margin-bottom:6px; }
.history table{ width:100%; border-collapse:collapse; }
.history td, .history th{ padding:4px 6px; border-bottom:1px solid rgba(255,255,255,0.15); text-align:left; }
.history th{ color:#a9b7ae; font-weight:normal; text-transform:uppercase; font-size:9px; letter-spacing:1px; }

.printer-note{
  max-width:420px; width:100%; margin-top:16px; font-size:11px; color:#cfd9d1;
  background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.15); padding:10px 12px; line-height:1.6;
}
.printer-note b{ color:#fff; }

#printArea{ display:none; }

@media print{
  @page{ size:80mm auto; margin:0; }
  body *{ visibility:hidden; }
  #printArea, #printArea *{ visibility:visible; }
  #printArea{ display:block; position:absolute; top:0; left:0; width:80mm; }
  .slipwrap{ width:100%; padding:4mm 3mm; font-family:'Courier New',monospace; font-size:11px; color:#000; box-sizing:border-box; }
  .slip .center{ text-align:center; }
  .slip .divider{ border-top:1px dashed #000; margin:5px 0; }
  .slip .solid{ border-top:1px solid #000; margin:5px 0; }
  .slip .row2{ display:flex; justify-content:space-between; gap:6px; margin:3px 0; }
  .slip .row2 .v{ font-weight:bold; text-align:right; }
  .slip .brandline{ font-size:14px; font-weight:bold; letter-spacing:1px; }
  .slip .kindline{ font-size:9px; letter-spacing:1px; }
  .slip .serial{ font-size:15px; font-weight:bold; letter-spacing:1px; margin:4px 0; }
  .slip .copytag{ font-size:11px; font-weight:bold; letter-spacing:2px; margin-top:6px; }
  .slip .footnote{ font-size:9px; margin-top:6px; }
  .cutline{ text-align:center; font-size:10px; letter-spacing:2px; margin:10px 0; border-top:1px dashed #000; padding-top:6px; }
}