@charset "utf-8";
/* CSS Document */

:root{
  --bg:#0b0b0f;
  --panel:rgba(255,255,255,.06);
  --line:rgba(255,255,255,.12);
  --text:#f2f3f7;
  --muted:rgba(242,243,247,.75);
  --radius:16px;

  --field-bg: rgba(255,255,255,.06);
  --field-border: rgba(255,255,255,.14);
  --field-border-hover: rgba(255,255,255,.24);
  --field-border-focus: rgba(255,213,74,.35);

  --option-bg:#1a1a22;
  --option-hover:#242433;

  /* Status colors (soft) */
  --s-all: rgba(255,255,255,.10);
  --s-pending: rgba(255,213,74,.16);
  --s-confirmed: rgba(90,255,170,.16);
  --s-preparing: rgba(90,180,255,.16);
  --s-ready: rgba(255,255,255,.16);
  --s-declined: rgba(255,91,74,.16);

  /* NEW: completed (purple) */
  --s-completed: rgba(177,110,255,.18);

  --s-border-all: rgba(255,255,255,.22);
  --s-border-pending: rgba(255,213,74,.30);
  --s-border-confirmed: rgba(90,255,170,.30);
  --s-border-preparing: rgba(90,180,255,.30);
  --s-border-ready: rgba(255,255,255,.26);
  --s-border-declined: rgba(255,91,74,.30);

  /* NEW: completed border */
  --s-border-completed: rgba(177,110,255,.34);
}

*{box-sizing:border-box}

body{
  margin:0;
  font-family:system-ui,Arial;
  background:var(--bg);
  color:var(--text);
}

a{color:inherit;text-decoration:none}

.wrap{max-width:1200px;margin:28px auto;padding:0 18px}

.top{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  margin-bottom:14px;
}

.card{
  background:rgba(255,255,255,.05);
  border:1px solid var(--line);
  border-radius:22px;
  padding:14px;
}

.card--flush{ padding:14px; }

.grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.grid--filters{grid-template-columns:1fr 1fr 1fr;gap:12px}

table{
  width:100%;
  border-collapse:collapse;
  overflow:hidden;
  border-radius:16px;
}

th,td{
  padding:10px;
  border-bottom:1px solid rgba(255,255,255,.08);
  vertical-align:top;
}

th{
  background:rgba(255,255,255,.05);
  text-align:left;
}

.small{color:var(--muted);font-size:.92rem}

.badge{
  display:inline-flex;
  padding:6px 10px;
  border-radius:999px;
  font-weight:900;
  letter-spacing:.2px;
  border:1px solid rgba(255,255,255,.16);
  backdrop-filter: blur(6px);
}

.badge--pending{background:rgba(255,213,74,.12);border-color:rgba(255,213,74,.22)}
.badge--confirmed{background:rgba(90,255,170,.12);border-color:rgba(90,255,170,.22)}
.badge--preparing{background:rgba(90,180,255,.12);border-color:rgba(90,180,255,.22)}
.badge--ready{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.20)}
.badge--declined{background:rgba(255,91,74,.12);border-color:rgba(255,91,74,.22)}

/* NEW: completed badge */
.badge--completed{background:rgba(177,110,255,.14);border-color:rgba(177,110,255,.26)}

.btn{
  display:inline-flex;
  gap:8px;
  align-items:center;
  justify-content:center;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.07);
  font-weight:900;
  cursor:pointer;
  user-select:none;
}

.btn:hover{opacity:.95}

.btn--primary{
  background:linear-gradient(135deg, rgba(255,213,74,.20), rgba(255,91,74,.22));
  border-color:rgba(255,213,74,.22);
}

.btn--ghost{
  background:rgba(0,0,0,.18);
  border-color:rgba(255,255,255,.18);
}

.btnRow{display:flex;flex-wrap:wrap;gap:16px;margin-top:10px}

.filtersActions{
  display:flex;
  align-items:flex-end;
  gap:16px;
}

/* =========================
   FORM FIELDS
   ========================= */

input, select, textarea{
  width:100%;
  padding:10px;
  border-radius:14px;
  border:1px solid var(--field-border);
  background:var(--field-bg);
  color:var(--text);
  outline:none;
}

input:hover, select:hover, textarea:hover{
  border-color: var(--field-border-hover);
}

input:focus, select:focus, textarea:focus{
  border-color: var(--field-border-focus);
  box-shadow: 0 0 0 3px rgba(255,213,74,.14);
}

input::placeholder, textarea::placeholder{
  color: rgba(242,243,247,.55);
}


/* Select Styling + Pfeil */
select{
  appearance:none;
  -webkit-appearance:none;
  -moz-appearance:none;

  background-color: var(--field-bg);

  background-image:
    linear-gradient(45deg, transparent 50%, rgba(242,243,247,.85) 50%),
    linear-gradient(135deg, rgba(242,243,247,.85) 50%, transparent 50%),
    linear-gradient(to right, rgba(255,255,255,.10), rgba(255,255,255,0));
  background-position:
    calc(100% - 18px) calc(50% - 3px),
    calc(100% - 12px) calc(50% - 3px),
    calc(100% - 44px) 50%;
  background-size:
    6px 6px,
    6px 6px,
    1px 18px;
  background-repeat:no-repeat;

  padding-right: 52px;
  cursor:pointer;
}

select option{
  background: var(--option-bg);
  color: var(--text);
}

select option:hover{
  background: var(--option-hover);
  color: var(--text);
}

select option:checked{
  background: var(--option-bg);
  color: var(--text);
}

input:disabled, select:disabled, textarea:disabled{
  opacity:.6;
  cursor:not-allowed;
}

label{
  display:grid;
  gap:6px;
  font-weight:900;
  margin-top:10px;
}

hr{
  border:0;
  border-top:1px solid rgba(255,255,255,.10);
  margin:14px 0;
}

.notice{
  padding:10px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(0,0,0,.22);
}

.alert{
  padding:10px;
  border-radius:14px;
  border:1px solid rgba(255,91,74,.22);
  background:rgba(255,91,74,.10);
}

/* =========================
   STATUS COLOR SELECT (reliable + keeps arrow)
   ========================= */

.statusSelect{ border-color: var(--s-border-all); }
.statusSelect--all{ border-color: var(--s-border-all); background-color: var(--s-all); }
.statusSelect--pending{ border-color: var(--s-border-pending); background-color: var(--s-pending); }
.statusSelect--confirmed{ border-color: var(--s-border-confirmed); background-color: var(--s-confirmed); }
.statusSelect--preparing{ border-color: var(--s-border-preparing); background-color: var(--s-preparing); }
.statusSelect--ready{ border-color: var(--s-border-ready); background-color: var(--s-ready); }
.statusSelect--declined{ border-color: var(--s-border-declined); background-color: var(--s-declined); }

/* NEW: completed select style */
.statusSelect--completed{ border-color: var(--s-border-completed); background-color: var(--s-completed); }

/* =========================
   DASHBOARD: HEAD
   ========================= */

.ordersHead{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:12px;
  margin-bottom:10px;
}

.ordersTitle{
  font-weight:950;
  font-size:1.05rem;
}

.ordersGrid{
  display:grid;
  grid-template-columns:1fr;
  gap:14px;
}

/* =========================
   NEW DASHBOARD ORDER BOXES
   ========================= */

.orderCard2{
  display:block;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.14);
  padding:14px;
  transition: transform .08s ease, border-color .08s ease, box-shadow .08s ease, filter .08s ease;
  box-shadow: 0 0 0 rgba(0,0,0,0);
  position:relative;
  overflow:hidden;
}

.orderCard2:hover{
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(0,0,0,.22);
  filter: brightness(1.02);
}

/* TOP full width */
.orderCard2__top{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:12px;
}

.orderCard2__topLeft{
  display:grid;
  gap:6px;
  min-width:0;
}

.orderCard2__id{
  font-weight:950;
  letter-spacing:.2px;
  font-size:1.02rem;
}

.orderCard2__timeLine{
  display:flex;
  align-items:baseline;
  gap:8px;
  flex-wrap:wrap;
}

.orderCard2__label{
  color:var(--muted);
  font-size:.92rem;
  font-weight:800;
}

.orderCard2__time{
  font-weight:950;
  font-size:1rem;
}

.orderCard2__topRight{
  flex:0 0 auto;
}

.orderCard2__badge{
  white-space:nowrap;
}

/* MIDDLE: 2 columns desktop, stacked mobile */
.orderCard2__mid{
  margin-top:12px;
  display:grid;
  grid-template-columns: 1fr 1.35fr;
  gap:12px;
}

.orderCard2__block{
  background: rgba(0,0,0,.16);
  border: 1px solid rgba(255,255,255,.10);
  border-radius:16px;
  padding:12px;
  min-width:0;
}

.orderCard2__blockTitle{
  font-weight:950;
  font-size:.95rem;
  margin-bottom:8px;
}

.orderCard2__kv{
  display:grid;
  grid-template-columns: 110px 1fr;
  gap:8px 10px;
  align-items:baseline;
}

.orderCard2__k{
  color:var(--muted);
  font-weight:850;
  font-size:.92rem;
}

.orderCard2__v{
  font-weight:900;
  word-break:break-word;
}

/* Items list */
.orderItems{
  margin:0;
  padding-left:18px;
  line-height:1.35;
}

.orderItems li{
  margin:4px 0;
}

.orderNotes{
  margin-top:10px;
  padding-top:10px;
  border-top:1px solid rgba(255,255,255,.10);
}

.orderNotes__title{
  font-weight:950;
  font-size:.92rem;
  margin-bottom:6px;
}

.orderNotes__text{
  color:rgba(242,243,247,.92);
  line-height:1.35;
  word-break:break-word;
}

/* BOTTOM with divider */
.orderCard2__bottom{
  margin-top:12px;
  padding-top:12px;
  border-top:1px solid rgba(255,255,255,.12);
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
}

.orderCard2__loc{
  display:flex;
  align-items:baseline;
  gap:8px;
  min-width:0;
}

.orderCard2__locText{
  font-weight:900;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width: 720px;
}

.orderCard2__open{
  flex:0 0 auto;
}

/* full-card status colors */
.orderCard2--pending{
  background: var(--s-pending);
  border-color: var(--s-border-pending);
}
.orderCard2--confirmed{
  background: var(--s-confirmed);
  border-color: var(--s-border-confirmed);
}
.orderCard2--preparing{
  background: var(--s-preparing);
  border-color: var(--s-border-preparing);
}
.orderCard2--ready{
  background: var(--s-ready);
  border-color: var(--s-border-ready);
}
.orderCard2--declined{
  background: var(--s-declined);
  border-color: var(--s-border-declined);
}

/* NEW: completed card */
.orderCard2--completed{
  background: var(--s-completed);
  border-color: var(--s-border-completed);
}

/* =========================
   Responsive helpers
   ========================= */

.tableWrap{
  overflow-x:auto;
  -webkit-overflow-scrolling: touch;
  border-radius:16px;
}

@media (max-width: 980px){
  .ordersGrid{ grid-template-columns:1fr; }
}

@media (max-width: 860px){
  .orderCard2__mid{
    grid-template-columns: 1fr;
  }
  .orderCard2__kv{
    grid-template-columns: 100px 1fr;
  }
  .orderCard2__locText{
    max-width: 420px;
  }
}

@media (max-width: 820px){
  .top{flex-wrap:wrap;align-items:flex-start}
  .grid--filters{grid-template-columns:1fr; }
  .filtersActions{align-items:stretch}
  .filtersActions .btn{width:100%}
}

@media (max-width: 520px){
  .wrap{margin:18px auto}
  th,td{padding:9px}
  .orderCard2{ padding:12px; }
  .orderCard2__locText{ max-width: 220px; }
}


/* --- Communication System --- */
.commHeader{
  display:flex;
  gap:12px;
  align-items:flex-start;
  padding:10px 12px;
  border:1px solid var(--line);
  border-radius:12px;
  background: var(--panel);
  margin-bottom:12px;
}
.commBadge{
  min-width:56px;
  text-align:center;
  font-weight:800;
  letter-spacing:.5px;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid var(--line);
  color: var(--text);
}
.commBadge--wa{ background: rgba(37, 211, 102, .18); border-color: rgba(37, 211, 102, .35); }
.commBadge--sms{ background: rgba(0, 122, 255, .18); border-color: rgba(0, 122, 255, .35); }
.commBadge--mail{ background: rgba(255, 149, 0, .18); border-color: rgba(255, 149, 0, .35); }
.commBadge--phone{ background: rgba(175, 82, 222, .18); border-color: rgba(175, 82, 222, .38); }

.phoneBig{ font-size:22px; font-weight:800; letter-spacing:.2px; padding:6px 10px; border-radius:12px; border:1px solid rgba(255,255,255,.14); background: rgba(0,0,0,.22); display:inline-block; }
.commInfo{ font-size:14px; line-height:1.35; color: var(--text); }
.msgBox{ margin-top:10px; }
.msgTextarea{
  width:100%;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid var(--line);
  background: var(--field-bg);
  color: var(--text);
  resize:vertical;
  margin-top:8px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size:13px;
}
.phoneBox{
  border:1px solid var(--line);
  border-radius:16px;
  padding:14px;
  background: var(--panel);
}
.phoneNumber{
  font-size:28px;
  font-weight:900;
  letter-spacing:.5px;
  margin-bottom:12px;
  color: var(--text);
}

/* --- Dashboard: never-opened orders marker --- */
.orderCard2--new{
  border-color: rgba(90,255,170,.45) !important;
  box-shadow: 0 0 0 1px rgba(90,255,170,.18), 0 0 18px rgba(90,255,170,.10);

  animation: mkBlink 1.2s infinite;
}

.newPill{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-weight:800;
  font-size:12px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(90,255,170,.35);
  background: rgba(90,255,170,.14);
  color: #fff;
  margin-left:8px;
}
.newDot{
  width:8px;
  height:8px;
  border-radius:50%;
  background: rgba(90,255,170,.95);
  box-shadow: 0 0 10px rgba(90,255,170,.55);
}
.btn--big{
  font-size:18px;
  padding:12px 16px;
  border-radius:14px;
}

.commMini{ margin-left:6px; font-weight:800; padding:6px 10px; border-radius:999px; border:1px solid rgba(0,0,0,.12); background:#fff; font-size:12px; }
.commMini--wa{ background: rgba(37, 211, 102, .10); }
.commMini--sms{ background: rgba(0, 122, 255, .10); }
.commMini--mail{ background: rgba(255, 149, 0, .10); }
.commMini--phone{ background: rgba(175, 82, 222, .10); }


/* ---------- Blink animation (used for new orders & new mails) ---------- */
@keyframes mkBlink {
  0%   { transform: translateZ(0); }
  50%  { transform: translateZ(0) scale(1.01); }
  100% { transform: translateZ(0); }
}

/* ---------- Notifications (new incoming message) ---------- */
.orderCard2--notify{
  position: relative;
  box-shadow: 0 0 0 2px rgba(46, 204, 113, .55);
  animation: mkBlink 1.2s infinite;
}

/* ---------- New order (any channel) ---------- */
.orderCard2--neworder{
  /* Disabled (we only use the regular “Nouveau”/unopened highlight now) */
  box-shadow: none;
  animation: none;
}

.orderCard2--neworder .orderCard2__summary{
  box-shadow: none;
}

.notifyDot{
  display:inline-block;
  width:10px;
  height:10px;
  border-radius:50%;
  background: rgba(46, 204, 113, .95);
  margin-left:8px;
  vertical-align: middle;
  box-shadow: 0 0 10px rgba(46, 204, 113, .7);
}

/* Make “Nouveau Mail” look exactly like “Nouveau” */
.mailPill{
  /* The element already has class .newPill; keep the exact same look */
  border: 1px solid rgba(90,255,170,.35);
  background: rgba(90,255,170,.14);
  color: #fff;
}

/* “Nouveau SMS” same look as “Nouveau” */
.smsPill{
  border: 1px solid rgba(90,255,170,.35);
  background: rgba(90,255,170,.14);
  color: #fff;
}

.msgList{ margin: 8px 0 0 16px; }
.msgList li{ margin: 10px 0; }


/* Delete icon on dashboard cards */
.trashBtn{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:10px;border:1px solid rgba(0,0,0,.22);background:rgba(0,0,0,.18);cursor:pointer;font-size:16px;line-height:1;margin-left:0;color:#fff;}
.trashBtn:hover{filter:brightness(1.08);}
.trashBtn:active{transform:translateY(1px);}



/* Toggle (open/close) button on dashboard cards */
.toggleBtn{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:10px;border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.10);cursor:pointer;font-size:18px;line-height:1;margin-left:0;color:#fff;}
.toggleBtn:hover{filter:brightness(1.08);}
.toggleBtn:active{transform:translateY(1px);}

/* Trash + toggle button colors follow status */
.orderCard2--pending .trashBtn, .orderCard2--pending .toggleBtn{background:rgba(255,213,74,.22);border-color:rgba(255,213,74,.38);}
.orderCard2--confirmed .trashBtn, .orderCard2--confirmed .toggleBtn{background:rgba(90,255,170,.22);border-color:rgba(90,255,170,.38);}
.orderCard2--preparing .trashBtn, .orderCard2--preparing .toggleBtn{background:rgba(90,180,255,.22);border-color:rgba(90,180,255,.38);}
.orderCard2--ready .trashBtn, .orderCard2--ready .toggleBtn{background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.28);}
.orderCard2--completed .trashBtn, .orderCard2--completed .toggleBtn{background:rgba(177,110,255,.22);border-color:rgba(177,110,255,.38);}
.orderCard2--declined .trashBtn, .orderCard2--declined .toggleBtn{background:rgba(255,91,74,.22);border-color:rgba(255,91,74,.38);}

/* Collapsible cards (dashboard) */
.orderCard2{overflow:hidden;}
.orderCard2__summary{
  list-style:none;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:14px 14px;
}
.orderCard2__summary::-webkit-details-marker{display:none;}
.orderCard2__sumLeft{min-width:0;}
.orderCard2__metaLine{margin-top:6px;display:flex;flex-wrap:wrap;gap:8px;align-items:center;color:rgba(242,243,247,.90);font-size:13px;}
.orderCard2__sep{opacity:.6;}
.orderCard2__sumCenter{
  flex:0 0 auto;
  min-width:140px;
  text-align:center;
  padding:0 6px;
}
.orderCard2__pickupLabel{
  font-size:11px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:rgba(242,243,247,.70);
  margin-bottom:2px;
}
.orderCard2__pickupTime{
  font-size:30px;
  font-weight:900;
  line-height:1.0;
  letter-spacing:.5px;
  color:#fff;
  text-shadow:0 2px 10px rgba(0,0,0,.35);
}
.orderCard2__sumRight{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end;;gap:10px;}
.orderCard2__total{font-weight:900;font-size:15px;white-space:nowrap;}
.orderCard2[open] .orderCard2__summary{border-bottom:1px solid rgba(0,0,0,.08);}

@media (max-width: 820px){
  .orderCard2__summary{flex-wrap:wrap;}
  .orderCard2__sumCenter{order:3;width:100%;min-width:0;padding-top:8px;}
  .orderCard2__sumRight{order:2;width:100%;justify-content:flex-start;}
}

.orderCard2__details{padding:12px 14px 14px 14px;}

.itemsTable{width:100%;border-collapse:collapse;margin-top:8px;font-size:13px;}
.itemsTable th,.itemsTable td{padding:8px 8px;border-bottom:1px solid rgba(0,0,0,.08);}
.itemsTable thead th{font-size:12px;text-transform:uppercase;letter-spacing:.02em;color:rgba(0,0,0,.6);}
.itemsTable .num{text-align:right;white-space:nowrap;}
.itemsTable tfoot td{border-bottom:none;padding-top:10px;}

.orderCard2__actions{margin-top:10px;display:flex;justify-content:flex-end;}

.orderCard2[open] .toggleBtn{transform:rotate(180deg);}

/* Ensure action buttons stay visible even on light status backgrounds */
.orderCard2--ready .trashBtn, .orderCard2--ready .toggleBtn{background:rgba(0,0,0,.18);border-color:rgba(0,0,0,.22);}

/* ------------------------------------------------------------
   Notices (small feedback boxes)
------------------------------------------------------------ */
.notice{padding:10px 12px;border-radius:10px;margin:10px 0;font-size:14px;font-weight:600}
.notice--ok{background:#e9f7ef;color:#156e2f;border:1px solid #bfe9cc}
.notice--err{background:#fdecec;color:#8a1f1f;border:1px solid #f6b9b9}

/* ------------------------------------------------------------
   Utilities (CSP friendly: replaces inline styles)
------------------------------------------------------------ */
.textRight{text-align:right;}
.formInline{display:inline;}
.mt6{margin-top:6px;}
.mt8{margin-top:8px;}
.mt10{margin-top:10px;}
.mt12{margin-top:12px;}
.mb6{margin-bottom:6px;}
.mb10{margin-bottom:10px;}
.pad10_2{padding:10px 2px;}
.h8{height:8px;}
.h10{height:10px;}
.h12{height:12px;}
.h14{height:14px;}
.op75{opacity:.75;}
.op85{opacity:.85;}
.op9{opacity:.9;}
.noticeLeftWarn{border-left:6px solid #f39c12;}
.noticeLeftErr{border-left:6px solid #c0392b;}
.w100{width:100%;}
.mw340{max-width:340px;}
.mw520{max-width:520px;}
.mw680{max-width:680px;}
.mono{font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;}
.preWrap{white-space:pre-wrap;word-wrap:break-word;}
.preBox{border:1px solid rgba(255,255,255,.12);padding:10px;border-radius:10px;overflow:auto;}
.m0{margin:0;}
.block{display:block;}
.my6{margin:6px 0;}
.fw800{font-weight:800;}

/* Live mail banner (order detail) */
.liveMailBar{position:sticky;top:0;z-index:9999;padding:10px 12px;background:#1f8f3a;color:#fff;font-weight:700;border-radius:10px;margin-bottom:12px;display:flex;align-items:center;justify-content:space-between;gap:12px;}
.liveMailBtn{background:#fff;color:#111;border:0;border-radius:8px;padding:8px 10px;font-weight:700;cursor:pointer;}

.textErr{color:#c0392b;}

/* ------------------------------------------------------------
   SMS thread bubbles (order detail)
------------------------------------------------------------ */
.smsThread{display:flex;flex-direction:column;gap:10px;margin-top:8px}
.smsBubble{max-width:92%;padding:10px 12px;border-radius:14px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.06)}
.smsBubble--out{align-self:flex-end;background:rgba(90,255,170,.10);border-color:rgba(90,255,170,.24)}
.smsBubble--in{align-self:flex-start;background:rgba(255,255,255,.06)}
.smsMeta{opacity:.75;margin-bottom:6px}
.smsBody{white-space:normal;line-height:1.35}


/* Option B: dashboard quick controls */
.dashQuickStatus{
  margin-top:10px;
  display:flex;
  gap:8px;
  align-items:center;
}
.dashQuickStatus select{
  padding:8px 10px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,0.15);
  background: rgba(0,0,0,0.15);
  color: inherit;
}
.dashQuickStatus .dashStatusSave{
  padding:8px 10px;
  border-radius:10px;
  border:0;
  cursor:pointer;
}
.dashQuickStatus--saved{
  opacity:0.65;
}

.waDecisionBtns{
  margin-top:10px;
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
}


/* Option B: top controls (visible even when card collapsed) */
.cardTopActions{
  margin-top:8px;
  display:flex;
  gap:8px;
  align-items:center;
  flex-wrap:wrap;
}
.dashStatusSelect{
  padding:6px 8px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,0.18);
  background: rgba(0,0,0,0.18);
  color: inherit;
  font-size: 12px;
  line-height: 1.2;
}
.dashStatusSelect--saved{
  outline: 2px solid rgba(255,255,255,0.35);
}
.btn--xs{
  padding:6px 8px;
  border-radius:10px;
  font-size: 12px;
  line-height: 1.2;
}


/* Option B: make dashboard status select compact */
.cardTopActions .dashStatusSelect{
  padding: 2px 4px !important;
  border-radius: 8px !important;
  font-size: 10px !important;
  line-height: 1.1 !important;
  max-width: 120px;
}
.cardTopActions .btn--xs{
  padding: 3px 6px !important;
  border-radius: 8px !important;
  font-size: 10px !important;
  line-height: 1.1 !important;
}


/* ===== Option B final: header row layout ===== */
.orderCard2__idLine{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.orderCard2__idLine .idLineLeft{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  min-width:0;
}
.orderCard2__idLine .cardTopActions{
  margin-top:0 !important;
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  justify-content:flex-end;
}

/* Normal size controls */
.orderCard2__idLine .dashStatusSelect{
  padding:6px 10px !important;
  border-radius:10px !important;
  font-size:13px !important;
  line-height:1.2 !important;
  max-width:none !important;
}
.orderCard2__idLine .btn--xs{
  padding:6px 10px !important;
  border-radius:10px !important;
  font-size:13px !important;
  line-height:1.2 !important;
}

/* ===== Finish: dropdown white arrow + same line ===== */
.orderCard2__idLine .cardTopActions{ flex-wrap: nowrap; }
.orderCard2__idLine .dashStatusSelect{
  -webkit-appearance:none;
  -moz-appearance:none;
  appearance:none;
  padding-right:28px !important;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24'%3E%3Cpath fill='%23ffffff' d='M7 10l5 5l5-5z'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 10px center;
  background-size:14px 14px;
}
@media (max-width: 520px){
  .orderCard2__idLine .cardTopActions{ flex-wrap: wrap; }
}


/* ===== Finish: WA buttons consistent + white text ===== */
.cardTopActions .btn--xs{
  min-width: 86px;
  text-align: center;
  color: #fff !important;
}
.cardTopActions .waBtnNok{
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.18);
  color: #fff !important;
}
.cardTopActions .waBtnOk{
  color: #fff !important;
}

/* Ensure WA decision buttons are same size and white text */
.cardTopActions .waBtnOk,
.cardTopActions .waBtnNok{
  min-width: 96px;
  color: #fff !important;
}

/* Important message box */
.adminCard--importantMessage textarea{
  width: 100%;
  resize: vertical;
  min-height: 64px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.16);
  background: rgba(0,0,0,0.18);
  color: inherit;
  font-family: inherit;
  line-height: 1.3;
}
.adminCard__hint{
  opacity: .85;
  font-size: 12px;
  margin-top: 4px;
}
.adminTiny{
  font-size: 12px;
  opacity: .9;
  margin-left: 10px;
}


/* Message important (dashboard) */
#importantMessageCard textarea{
  width: 100%;
  resize: vertical;
  min-height: 70px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.16);
  background: rgba(0,0,0,0.18);
  color: inherit;
  font-family: inherit;
  line-height: 1.3;
  margin-top: 10px;
}


/* === Monkey Balanced Blur Upgrade === */

/* Slightly darker moon overlay */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.30);
    pointer-events: none;
    z-index: -1;
}

/* Main Monkey video box keeps stronger blur */
.monkey-menu {
    backdrop-filter: blur(12px);
}

/* All other boxes get elegant lighter blur */
.box,
.card,
.panel,
.order-box,
.info-box,
[class*="box"]:not(.monkey-menu),
[class*="card"]:not(.monkey-menu) {
    backdrop-filter: blur(6px);
    background: rgba(0, 0, 0, 0.68);
}