:root {

  --teal-700:#EBFDE7;
   --teal-600:#127A98;
   --teal-500:#2b9dba;
   --teal-100:#e1f5ee;

  --ink:#1c2b2f;
   --muted:#5f6b6d;
   --line:#e3e7e6;
   --bg:#000000;

  --amber-bg:#faeeda;
   --amber:#854f0b;

  --red-bg:#fbe6e6;
   --red:#a51818;

  --purple-bg:#eeedfe;
   --purple:#534ab7;

  --success-bg:#eaf3de;
   --success:#3b6d11;

  --gray-bg:#f1efe8;
   --gray:#5f5e5a;

  --danger:#b3261e;
   --danger-bg:#fcebeb;


}
* {
      box-sizing:border-box
      }
body {
      margin:0;
      font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
background:var(--bg);
color:var(--ink)
}

/* layout shells */
.page {
      padding:28px
      }
.wrap {
      max-width:820px;
      margin:0 auto
      }
.wrapNarrow {
      max-width:720px;
      margin:0 auto
      }
.centerScreen {
      display:flex;
      align-items:center;
justify-content:center;
min-height:100vh;
padding:24px
}

/* brand */
.brand  {
      padding: 15px 0px;
      display:flex;
      flex-direction: column;
      align-items:center;
      margin-bottom:20px;
      justify-content:center;
      border-radius: 14px;
}
.brand span  {
      font-weight:600;
      font-size:11px;
      letter-spacing:6px;
      color: white;
}
.brand img {
      width: 60%;
      margin-bottom: 7px;
}

/* headings */
h1 {
      font-size:19px;
      font-weight:600;
margin:0 0 2px
}
h1.small {
      font-size:35px;
      color: white;
      font-weight: bold;
      text-align: center;
      margin-bottom: 10px;
      }
.sub {
      font-size:13px;
      color:var(--muted);
margin:0
      }

/* notices / banners */
.notice {
      background:var(--red-bg);
      color:var(--red);
      border-radius:30px;
      padding:12px 14px;
      font-size:12.5px;

      line-height:1.6;
      margin-bottom:16px;
      display:flex;
      gap:10px;
      align-items:flex-start
      }
.notice b {
      color:var(--red)
      }
.notice a {
      color:var(--red);
      font-weight:600;
text-decoration:none
      }
.notice a:hover {
      text-decoration:underline
      }
.notice svg {
      flex-shrink:0;
      margin-top:2px
      }
.banner {
      background:#fff;
      border:1px solid var(--line);
border-radius:10px;
padding:12px 14px;
margin-bottom:18px;

      display:flex;
      gap:10px;
      align-items:flex-start;
      font-size:13px;
      color:var(--muted)
      }
.banner.blocked {
      background:var(--danger-bg);
      color:var(--danger);
border-color:var(--danger-bg)
}
.lockedField {
      background:var(--teal-100);
      border-radius:9px;
padding:10px 14px;
font-size:13.5px;

      display:flex;
      align-items:center;
      gap:8px;
      margin-bottom:18px;
      color:#0b3a44
      }

/* cards */
.card {
      /*background:#94b95d;*/
      background: #96bb5b;
      border-radius:30px;
      padding:24px;
      }

/* form fields */
label {
      display:block;
      font-size:14px;
      color: #DBFF8D;
      margin-bottom:6px;
      font-weight:500
}
.field {
      margin-bottom:12px
      }
input,select,textarea {
      width:100%;
      height:38px;
      border-radius:12px;
      border:1px solid #FFFFFF;
      padding:0 12px;
      font-size:16px;
      background: #94b95d;
      outline:none;
      transition: border 0.15s;
}
textarea {
      padding:10px 12px;
      height:auto
      }
input:focus,select:focus,textarea:focus {
      border: 2px solid #FFFFFF;
}
.err {
      font-size:12.5px;
      color:var(--danger);
margin:-4px 0 12px;
display:none
}
.ok {
      font-size:13px;
      color:var(--success);
margin-top:10px;
display:none
}

/* buttons */
button.primary {
      width:100%;
      height:40px;
      border-radius:9px;
      border:none;
      color:#96bb5b;
      font-weight:600;
      font-size:17px;
      cursor:pointer;
      transition:opacity .12s
      }
button.primary:hover {
      background: rgba(0, 0, 0, 0.2), #EBFDE7;
      }
button.primary:disabled {
      opacity:.5;
      cursor:default
      }
.tealBtn {
      background:var(--teal-700);
      }
.tealBtn:hover {
      background: rgba(0, 0, 0, 0.2), #EBFDE7;
}
.inkBtn {
      background:var(--ink)
      }
.linkBtn {
      background:none;
      border:none;
color:var(--teal-600);
font-size:12.5px;
cursor:pointer;
text-decoration:underline;
padding:0
}
.newBtn {
      background:var(--teal-700);
      color:#fff;
border:none;
border-radius:9px;
padding:10px 18px;

      font-size:14px;
      font-weight:600;
      cursor:pointer;
      white-space:nowrap
      }
.newBtn:hover {
      opacity:.92
      }
.ghostBtn {
      background:#fff;
      border:1px solid var(--line);
border-radius:9px;
padding:9px 14px;

      font-size:13px;
      cursor:pointer;
      color:var(--muted)
      }
.addBtn {
      font-size:13px;
      padding:8px 14px;
border-radius:9px;
border:1px solid var(--line);
background:#fff;
cursor:pointer;
margin-bottom:18px
}

/* top bars */
.top {
      display:flex;
      justify-content:space-between;
align-items:flex-start;
margin-bottom:6px;
gap:16px
}
.topRight {
      display:flex;
      gap:8px;
align-items:center;
flex-shrink:0
}
.back {
      font-size:13px;
      color:var(--muted);
text-decoration:none
}
.back:hover {
      text-decoration:underline
      }

/* tabs */
.tabs {
      display:flex;
      gap:6px;
margin-bottom:16px
}
.tab {
      font-size:13px;
      padding:6px 14px;
border-radius:8px;
border:1px solid var(--line);
background:#fff;
cursor:pointer;
color:var(--muted)
}
.tab.active {
      background:var(--teal-700);
      color:#fff;
border-color:var(--teal-700)
}

/* order list rows */
.list {
      display:flex;
      flex-direction:column;
gap:10px
}
.row {
      background:#fff;
      border:1px solid var(--line);
border-radius:12px;
padding:14px 16px
}
.rowMain {
      display:grid;
      grid-template-columns:1fr auto auto auto;
gap:16px;
align-items:center
}
.oid,.branch {
      font-weight:600;
      font-size:14px;
margin:0 0 3px
}
.meta {
      font-size:12.5px;
      color:var(--muted);
margin:0
}
.badge {
      font-size:12px;
      padding:4px 10px;
border-radius:999px;
font-weight:500;
white-space:nowrap;
text-align:center
}
.amount {
      font-size:14px;
      font-weight:600;
text-align:right;
white-space:nowrap
}
.actions {
      display:flex;
      gap:6px
      }
.actions button {
      font-size:12.5px;
      padding:6px 12px;
border-radius:8px;
border:1px solid var(--line);
background:#fff;
cursor:pointer
}
.actions button.reorder,.actions button.confirm {
      background:var(--teal-700);
      color:#fff;
border-color:var(--teal-700)
}
.actions button.reorder:hover,.actions button.confirm:hover {
      opacity:.92
      }
.actions button.cancel:hover {
      background:var(--danger-bg);
      color:var(--danger);
border-color:var(--danger-bg)
}
.expand {
      cursor:pointer;
      color:var(--teal-600);
font-size:12.5px;
text-decoration:underline;
background:none;
border:none;
padding:0
}
.detail {
      display:none;
      border-top:1px solid var(--line);
margin-top:12px;
padding-top:12px;
font-size:13px;
color:var(--muted)
}
.detail table {
      width:100%;
      border-collapse:collapse
      }
.detail td {
      padding:4px 0;
      font-size:13px
      }
.detail td:last-child {
      text-align:right;
      color:var(--ink)
      }
.row.open .detail {
      display:block
      }
.empty {
      text-align:center;
      padding:60px 20px;
color:var(--muted);
font-size:13px
}
.empty .newBtn {
      margin-top:14px
      }

/* order form item rows */
.grid2 {
      display:grid;
      grid-template-columns:1fr 1fr;
gap:12px;
margin-bottom:18px
}
.sectionLabel {
      font-size:13px;
      font-weight:600;
      color:var(--muted);
      margin:0 0 8px
}
.itemRow {
      display:grid;
      grid-template-columns:1fr 70px 90px 30px;
gap:8px;
align-items:center;
margin-bottom:8px
}
.lineTotal {
      font-size:13px;
      text-align:right;
color:var(--muted)
}
.rmBtn {
      width:30px;
      height:30px;
border-radius:8px;
border:1px solid var(--line);
background:#fff;
cursor:pointer;
color:var(--muted)
}
.summary {
      display:flex;
      flex-direction:column;
gap:6px;
font-size:13.5px;
border-top:1px solid var(--line);
padding-top:14px;
margin-bottom:18px
}
.summary .sline {
      display:flex;
      justify-content:space-between
      }
.summary .muted {
      color:var(--muted)
      }
.summary .total {
      font-size:16px;
      font-weight:700;
padding-top:4px
}
.submitBtn {
      width:100%;
      background:var(--teal-700);
color:#fff;
border:none;
font-weight:700;
padding:12px;

      border-radius:9px;
      font-size:14.5px;
      cursor:pointer
      }
.submitBtn:hover {
      opacity:.92
      }
.submitBtn:disabled {
      opacity:.5;
      cursor:default
      }

/* queue edit rows */
.itemEditRow {
      display:grid;
      grid-template-columns:1fr 70px 90px;
gap:8px;
align-items:center;
margin-bottom:6px;
font-size:13px
}
.itemEditRow input {
      width:100%;
      height:30px;
border-radius:7px;
border:1px solid var(--line);
padding:0 8px;
font-size:13px
}
.editActions {
      display:flex;
      gap:6px;
margin-top:10px
}
.editActions button {
      font-size:12.5px;
      padding:6px 12px;
border-radius:8px;
border:1px solid var(--line);
background:#fff;
cursor:pointer
}
.editActions button.save {
      background:var(--ink);
      color:#fff;
border-color:var(--ink)
}

/* toast */
.toast {
      position:fixed;
      bottom:20px;
left:50%;
transform:translateX(-50%);
background:var(--ink);
color:#fff;

      padding:10px 18px;
      border-radius:8px;
      font-size:13px;
      opacity:0;
      pointer-events:none;
      transition:opacity .2s;
      z-index:50
      }
.toast.show {
      opacity:1
      }

/* login page specifics */
.wrapLogin {
      width:100%;
      max-width:400px
      }
.staffToggle {
      text-align:center;
      margin-top:14px
      }
.overlay {
      position:fixed;
      inset:0;
background:rgba(20,30,32,.45);
display:none;
align-items:center;
justify-content:center;
z-index:100;
padding:20px
}
.overlay.show {
      display:flex
      }
.modalCard {
      background:#fff;
      border-radius:14px;
padding:24px;
width:100%;
max-width:360px;
position:relative;

      box-shadow:0 12px 32px rgba(0,0,0,.18)
      }
.modalClose {
      position:absolute;
      top:14px;
right:14px;
background:none;
border:none;
font-size:18px;
color:var(--muted);
cursor:pointer;
line-height:1
}