/* ============================================================
   ATICO Contract Studio — app chrome (screen only).
   Brand tokens come from engines/catering.css (:root).
   Dyslexia-friendly: ≥16px text, high contrast, generous spacing,
   clear labels, no dense paragraphs.
   ============================================================ */

:root {
  --ui-bg: #f6f1e7;
  --ui-panel: #fffdf8;
  --ui-line: #e0d5bd;
  --ui-ink: #2b2620;
  --ui-gold: #8c734b;
  --ui-deep: #6F5A38;
  --ui-green: #2f6f3e;
  --ui-amber-bg: #fff3d6;
  --ui-amber-line: #e0b64f;
  --ui-fix-bg: #eef6ef;
  --ui-fix-line: #bcd9c0;
}

html, body { margin: 0; padding: 0; }
body { background: var(--ui-bg); font-family: var(--sans); color: var(--ui-ink); }

/* the hidden attribute must always win, even over display:flex rules */
[hidden] { display: none !important; }

/* ---------- Screen 1: outlet picker ---------- */
.picker {
  min-height: calc(100vh - 52px); /* leave room for the global top nav */
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
}
.picker-card {
  background: var(--ui-panel);
  border: 2px solid var(--ui-line);
  border-radius: 16px;
  padding: 48px 56px;
  max-width: 720px;
  text-align: center;
  box-shadow: 0 12px 40px rgba(60, 45, 20, 0.10);
}
.picker-brand {
  font-family: var(--serif);
  font-size: 34px;
  color: var(--ui-ink);
  margin-bottom: 6px;
}
.picker-brand em { color: var(--ui-gold); }
.picker-lead { font-size: 19px; margin: 18px 0 26px; }
.picker-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 14px;
}
.picker-btn {
  font-family: var(--sans);
  font-size: 18px; font-weight: 700; line-height: 1.35;
  color: #fff; background: var(--ui-gold);
  border: 0; border-radius: 12px;
  padding: 26px 12px;
  cursor: pointer;
  transition: transform .08s ease, background .15s ease;
}
/* each outlet button carries its own brand colour (from that outlet's contract engine) */
.picker-btn[data-outlet="catering"]   { background: #8c734b; }
.picker-btn[data-outlet="solaya"]     { background: #1b6775; }
.picker-btn[data-outlet="alqasr"]     { background: #709667; }
.picker-btn[data-outlet="fakhreldin"] { background: #3a3126; }
.picker-btn[data-outlet="renchai"]    { background: #b30838; }
.picker-btn:hover:not(:disabled) { filter: brightness(1.1); transform: translateY(-2px); }
.picker-btn:disabled {
  background: #eee7d8 !important; color: #a1957c; cursor: not-allowed; filter: none;
}
.picker-note { font-size: 15px; color: #7a6f5a; margin-top: 24px; }

/* ---------- Screen 2: app layout ---------- */
.app { display: flex; align-items: stretch; min-height: calc(100vh - 52px); }
.formpanel {
  width: 500px; flex: 0 0 500px;
  background: var(--ui-panel);
  border-right: 2px solid var(--ui-line);
  height: calc(100vh - 52px); overflow-y: auto;
  position: sticky; top: 52px;
  padding: 0 0 80px;
}
.previewpanel { flex: 1 1 auto; overflow-y: auto; height: calc(100vh - 52px); position: relative; }

/* ---------- Edit on page ---------- */
.preview-tools {
  position: sticky; top: 0; z-index: 15;
  display: flex; justify-content: flex-end;
  padding: 10px 14px; margin-bottom: -6px;
  pointer-events: none; /* let the page scroll; only the button is clickable */
}
.editbtn {
  pointer-events: auto;
  font: inherit; font-size: 14px; font-weight: 700; cursor: pointer;
  background: #fff; color: var(--ui-gold, #8c734b);
  border: 1.5px solid var(--ui-gold, #8c734b); border-radius: 100px;
  padding: 9px 18px; box-shadow: 0 2px 8px rgba(0,0,0,0.12);
  transition: background .15s, color .15s;
}
.editbtn:hover { background: #faf6ee; }
.editbtn.active { background: var(--ui-gold, #8c734b); color: #fff; }

/* fixed wording is tinted while editing so staff know it can't be changed */
body.editing #pages [data-locked] {
  background: rgba(240, 198, 60, 0.18);
  box-shadow: 0 0 0 1px rgba(190, 150, 20, 0.35);
  border-radius: 2px;
}
/* an empty custom-notes line shouldn't show unless you're editing */
body:not(.editing) #pages .notes-custom:empty { display: none; }
#pages .notes-custom { min-height: 0; }
#pages .notes-fixed { margin-top: 8px; }

/* ---------- AI reading status badge (import) ---------- */
.aistatus {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13.5px; font-weight: 700; border-radius: 100px;
  padding: 6px 14px; margin: 2px 0 10px;
}
.aistatus.on { background: #eef6ef; color: #245c31; }
.aistatus.off { background: #fdf3e2; color: #9a6a12; }
.aistatus .dot { width: 9px; height: 9px; border-radius: 50%; }
.aistatus.on .dot { background: #2f9e4f; box-shadow: 0 0 0 3px rgba(47,158,79,.2); }
.aistatus.off .dot { background: #d89a2a; box-shadow: 0 0 0 3px rgba(216,154,42,.2); }

/* ---------- Ask-AI chat bar (edit by chatting) ---------- */
.aichat {
  position: sticky; bottom: 0; z-index: 12;
  padding: 12px 14px 14px;
  background: linear-gradient(to top, #f6f1e7 78%, rgba(246,241,231,0));
}
.aichat-reply {
  margin: 0 auto 8px; max-width: 820px;
  background: #fffdf8; border: 1.5px solid var(--line, #e0d5bd); border-left: 4px solid var(--ui-gold, #8c734b);
  border-radius: 10px; padding: 10px 14px; font-size: 15px; color: #4a4230; line-height: 1.5;
  box-shadow: 0 3px 10px rgba(0,0,0,0.08);
}
.aichat-reply.err { border-left-color: #a03535; color: #7d2c2c; }
.aichat-reply.thinking { display: flex; align-items: center; gap: 11px; border-left-color: var(--ui-gold, #8c734b); }
.aichat-dots { display: inline-flex; gap: 5px; flex: 0 0 auto; }
.aichat-dots span { width: 8px; height: 8px; border-radius: 50%; background: var(--ui-gold, #8c734b); opacity: .35; animation: aichatBounce 1s infinite ease-in-out; }
.aichat-dots span:nth-child(2) { animation-delay: .15s; }
.aichat-dots span:nth-child(3) { animation-delay: .3s; }
@keyframes aichatBounce { 0%, 100% { transform: translateY(0); opacity: .35; } 50% { transform: translateY(-5px); opacity: 1; } }
.aichat-reply.thinking .tmsg { color: #6a5f49; }
.aichat-bar {
  display: flex; align-items: center; gap: 8px;
  max-width: 820px; margin: 0 auto;
  background: #fff; border: 2px solid var(--ui-gold, #8c734b); border-radius: 100px;
  padding: 6px 6px 6px 16px; box-shadow: 0 4px 16px rgba(0,0,0,0.12);
}
.aichat-ico { font-size: 18px; line-height: 1; }
.aichat-bar input {
  flex: 1 1 auto; border: 0; outline: none; background: transparent;
  font-family: inherit; font-size: 16px; color: #2b2620; padding: 8px 4px;
}
.aichat-send {
  flex: 0 0 auto; border: 0; cursor: pointer; font-family: inherit;
  font-size: 15px; font-weight: 700; color: #fff; background: var(--ui-gold, #8c734b);
  border-radius: 100px; padding: 10px 20px; transition: background .15s;
}
.aichat-send:hover { background: var(--ui-deep, #6F5A38); }
.aichat-send:disabled { opacity: .55; cursor: default; }
@media print { .aichat { display: none !important; } }

/* ---------- Menu-options editor (form side) ---------- */
.modetoggle {
  display: flex; align-items: center; gap: 10px; cursor: pointer;
  font-weight: 700; font-size: 15.5px; color: var(--ui-deep, #6F5A38);
  margin: 2px 0 14px; padding: 12px 14px; border-radius: 10px;
  background: #efe6d3;
}
.modetoggle input { width: 18px; height: 18px; cursor: pointer; }
.modetoggle .opt { font-weight: 400; color: #7a6f5a; }
.optpanel {
  border: 2px solid var(--ui-gold, #8c734b); border-radius: 12px;
  padding: 14px; margin: 0 0 16px; background: #fffdf8;
}
.opthead { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 10px; }
.optbadge {
  font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: #fff; background: var(--ui-gold, #8c734b); border-radius: 100px; padding: 5px 12px; white-space: nowrap;
}
.opthead .optname { flex: 1 1 200px; }
.opthead .optprice { flex: 0 1 190px; }
.optsecs { padding-left: 4px; border-left: 3px solid #efe6d3; }
.optsecs .msec { margin-bottom: 10px; }

/* ---------- Menu options (guest chooses one priced menu) ---------- */
#pages .opt-choose { margin-bottom: 4px; }
#pages .opt-band {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  margin: 18px 0 8px; padding: 10px 16px;
  border-top: 2px solid currentColor; border-bottom: 1px solid rgba(0,0,0,0.12);
}
#pages .opt-band .opt-label {
  display: flex; align-items: baseline; gap: 12px;
  font-weight: 700; font-size: 17px; letter-spacing: .01em;
}
#pages .opt-band .opt-tag {
  font-size: 11px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
  opacity: .7;
}
#pages .opt-band .opt-price {
  font-weight: 700; font-size: 16px; white-space: nowrap;
  padding: 4px 14px; border: 1.5px solid currentColor; border-radius: 100px;
}
body:not(.editing) #pages .opt-band .opt-price:empty { display: none; }

.topbar {
  position: sticky; top: 0; z-index: 20;
  background: var(--ui-gold); color: #fff;
  padding: 18px 24px 16px;
  display: flex; flex-direction: column; gap: 12px;
}
.steps { display: flex; gap: 8px; flex-wrap: wrap; }
.step {
  font-size: 14px; font-weight: 700;
  padding: 6px 12px; border-radius: 100px;
  background: rgba(255,255,255,.16); color: rgba(255,255,255,.85);
}
.step.active { background: #fff; color: var(--ui-deep); }
.step.done { background: rgba(255,255,255,.32); color: #fff; }
.btnrow { display: flex; gap: 10px; flex-wrap: wrap; }
.bigbtn {
  font-family: var(--sans);
  border: 0; border-radius: 8px;
  padding: 15px 18px;
  font-size: 17px; font-weight: 700;
  cursor: pointer; flex: 1 1 auto; min-width: 170px;
  letter-spacing: .02em;
}
.bigbtn.primary { background: var(--ui-green); color: #fff; }
.bigbtn.primary:hover { filter: brightness(1.08); }
.bigbtn.gold { background: #fff; color: var(--ui-deep); }
.bigbtn.gold:hover { filter: brightness(.96); }
.bigbtn:disabled { opacity: .55; cursor: default; }
.hint { font-size: 15.5px; line-height: 1.55; }

/* ---------- Import from email / PDF ---------- */
.importsec { background: #fbf7ee; }
.importsec textarea {
  width: 100%; box-sizing: border-box;
  min-height: 90px; resize: vertical; overflow-y: hidden;
  font-size: 16px; line-height: 1.5; padding: 12px 13px;
  border: 2px solid #d8cbb0; border-radius: 8px;
  background: #fff; color: #222; font-family: var(--sans);
  margin-bottom: 10px;
}
.importsec textarea:focus {
  outline: none; border-color: var(--ui-gold);
  box-shadow: 0 0 0 3px rgba(140, 115, 75, .18);
}
.dropzone {
  border: 2px dashed var(--ui-gold);
  border-radius: 10px;
  background: #fff;
  padding: 18px 14px;
  margin-bottom: 10px;
  display: flex; align-items: center; gap: 14px;
  cursor: pointer;
  transition: background .12s ease, border-color .12s ease;
}
.dropzone:hover, .dropzone:focus { background: #fdf7ea; outline: none; }
.dropzone.dragging {
  background: #f3ead4; border-color: var(--ui-deep);
  box-shadow: 0 0 0 3px rgba(140, 115, 75, .18);
}
.dz-icon { font-size: 26px; }
.dz-text { font-size: 15.5px; line-height: 1.4; color: #4a4234; }
.dz-or { color: #8a7f68; font-size: 14.5px; }
.filelist { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
.filelist:empty { display: none; }
.fileitem {
  display: flex; align-items: center; gap: 10px;
  background: #fff; border: 2px solid var(--ui-line);
  border-radius: 8px; padding: 9px 12px;
}
.fileitem .fi-icon { font-size: 18px; }
.fileitem .fi-name { flex: 1; min-width: 0; font-size: 15px; font-weight: 700;
  color: #3a342a; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fileitem .fi-kind { font-size: 13px; color: #8a7f68; white-space: nowrap; }
.fileitem .fi-x {
  background: #eadfca; border: 0; border-radius: 6px;
  width: 32px; height: 32px; font-size: 16px; font-weight: 800;
  color: #8a5a3a; cursor: pointer;
}
#btnImport { background: #e9dcc0; }
#btnImport:hover { background: #ddc99f; }
.missing {
  margin-top: 12px; padding: 12px 14px;
  background: var(--ui-amber-bg); border: 2px solid var(--ui-amber-line);
  border-radius: 10px;
}
.missing .mtitle { font-size: 15.5px; font-weight: 700; margin-bottom: 8px; }
.missing .chips { display: flex; flex-wrap: wrap; gap: 8px; }
.missing .chip {
  background: #fff; border: 2px solid var(--ui-amber-line);
  border-radius: 100px; padding: 6px 14px;
  font-family: var(--sans); font-size: 15px; font-weight: 700;
  color: var(--ui-deep); cursor: pointer;
}
.missing .chip:hover { background: #fff8e8; }
.fld.needsInfo input, .fld.needsInfo textarea {
  border-color: var(--ui-amber-line);
  background: #fffaf0;
}

/* ---------- Review panel ---------- */
.review {
  margin: 16px 20px 4px;
  border: 2px solid var(--ui-fix-line);
  background: var(--ui-fix-bg);
  border-radius: 12px;
  padding: 16px 18px;
}
.review-head { font-size: 17px; font-weight: 700; margin-bottom: 10px; }
.review-unmatched {
  background: var(--ui-amber-bg);
  border: 2px solid var(--ui-amber-line);
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 12px;
}
.review-unmatched-title { font-size: 15.5px; font-weight: 700; margin-bottom: 6px; }
.review-unmatched ul { margin: 0; padding-left: 22px; }
.review-unmatched li { font-size: 16px; padding: 2px 0; }
.fixes { list-style: none; margin: 0; padding: 0; }
.fixes li {
  font-size: 15.5px; line-height: 1.5;
  padding: 8px 0;
  border-top: 1px solid #d7e6d9;
}
.fixes li:first-child { border-top: 0; }
.fixes .fx-field { font-weight: 700; color: var(--ui-deep); }
.fixes .fx-before { text-decoration: line-through; color: #a05252; }
.fixes .fx-after { font-weight: 700; color: #245c31; }
.fixes .fx-reason { color: #6c6353; font-size: 14px; }
.fixes li.hiddenfix { display: none; }
.linkbtn {
  background: none; border: 0; padding: 8px 0;
  font-family: var(--sans); font-size: 15.5px; font-weight: 700;
  color: var(--ui-deep); text-decoration: underline; cursor: pointer;
}

/* ---------- Form ---------- */
.formsec { padding: 20px 24px; border-bottom: 1px solid #ece3d0; }
.formsec h2 {
  font-size: 16px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--ui-deep); margin: 0 0 14px; font-weight: 800;
}
.tip { font-size: 15px; color: #7a6f5a; margin: 0 0 14px; line-height: 1.5; }
.fld { margin-bottom: 16px; }
.fld label {
  display: block; font-size: 16px; font-weight: 700;
  color: #3a342a; margin-bottom: 6px;
}
.fld .opt { font-weight: 400; color: #8a7f68; }
.fld input, .fld textarea, .fld select {
  width: 100%; box-sizing: border-box;
  font-size: 17px; padding: 12px 13px;
  border: 2px solid #d8cbb0; border-radius: 8px;
  background: #fff; color: #222;
  font-family: var(--sans); line-height: 1.4;
}
.fld input:focus, .fld textarea:focus, .fld select:focus {
  outline: none; border-color: var(--ui-gold);
  box-shadow: 0 0 0 3px rgba(140, 115, 75, .18);
}
.fld textarea { min-height: 72px; resize: vertical; }
.row2 { display: flex; gap: 12px; }
.row2 .fld { flex: 1; }
.row2 .fld.grow2 { flex: 2; }

/* ---------- Menu paste box ---------- */
.pastebox {
  border: 2px dashed var(--ui-gold);
  background: #fdf9f1;
  border-radius: 10px;
  padding: 14px;
  margin-bottom: 18px;
}
.pastebox label {
  display: block; font-size: 16px; font-weight: 700;
  color: var(--ui-deep); margin-bottom: 8px;
}
.pastebox textarea {
  width: 100%; box-sizing: border-box;
  min-height: 130px; resize: vertical;
  overflow-y: hidden; /* auto-grows instead of scrolling inside */
  font-size: 16px; line-height: 1.5; padding: 12px 13px;
  border: 2px solid #d8cbb0; border-radius: 8px;
  background: #fff; color: #222;
  font-family: var(--sans);
  margin-bottom: 10px;
}
.pastebox textarea:focus {
  outline: none; border-color: var(--ui-gold);
  box-shadow: 0 0 0 3px rgba(140, 115, 75, .18);
}
.pastebox .tip { margin: 10px 0 0; }

/* ---------- Menu builder ---------- */
.msec {
  border: 2px solid var(--ui-line); border-radius: 10px;
  padding: 14px; margin-bottom: 16px; background: #fff;
}
.msec .mtitle { display: flex; gap: 8px; align-items: center; margin-bottom: 12px; }
.msec .mtitle input { font-weight: 800; }
.dish { display: flex; gap: 8px; align-items: flex-start; margin-bottom: 10px; }
.dish .dcol { flex: 1; display: flex; flex-direction: column; gap: 6px; }
.dish input { font-size: 16px; padding: 10px 11px; }
.xbtn {
  background: #eadfca; border: 0; border-radius: 8px;
  width: 42px; min-width: 42px; height: 44px;
  font-size: 20px; cursor: pointer; color: #8a5a3a; font-weight: 800;
}
.mvgroup { display: flex; gap: 4px; }
.mvbtn {
  background: #eadfca; border: 0; color: var(--ui-deep); border-radius: 8px;
  width: 36px; min-width: 36px; height: 44px;
  font-size: 15px; cursor: pointer; font-weight: 800;
}
.mvbtn:disabled { opacity: .35; cursor: default; }
.addbtn {
  background: #efe6d3; border: 0; color: var(--ui-deep); border-radius: 8px;
  padding: 12px 14px; font-size: 16px; font-weight: 700;
  cursor: pointer; width: 100%; margin-top: 4px;
}
.addbtn:hover { background: #e6d9bd; }
.addsec { margin-top: 0; }
.startover { text-align: center; border-bottom: 0; }

/* ---------- Busy overlay ---------- */
.busy {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(43, 38, 32, .45);
  display: flex; align-items: center; justify-content: center;
}
.busy-card {
  background: #fff; border-radius: 14px;
  padding: 26px 32px; min-width: 320px; max-width: 380px;
  box-shadow: 0 16px 60px rgba(0,0,0,.25);
}
.busy-msg { font-size: 19px; font-weight: 700; color: var(--ui-deep); margin-bottom: 16px; }
.busy-bar {
  height: 12px; background: #e8ddc6; border-radius: 100px; overflow: hidden;
}
.busy-bar-fill {
  height: 100%; width: 0%;
  background: linear-gradient(90deg, var(--ui-gold), #c0a068);
  border-radius: 100px;
  transition: width .3s ease;
}
.busy-sub { font-size: 14.5px; color: #7a6f5a; margin-top: 12px; }

/* ---------- Print: hide ALL app chrome ---------- */
@media print {
  .picker, .formpanel, .topbar, .busy, .review,
  .preview-tools, .edit-hint { display: none !important; }
  .app { display: block !important; }
  .previewpanel { height: auto !important; overflow: visible !important; }
  /* never print edit affordances even if edit mode was left on */
  #pages [data-locked] { background: none !important; box-shadow: none !important; }
}

/* ---- in-page confirm (replaces confirm(), which browsers can suppress) ---- */
.cs-ov {
  position: fixed; inset: 0; z-index: 900; padding: 20px;
  background: rgba(43, 38, 32, .5);
  display: flex; align-items: center; justify-content: center;
}
.cs-dlg {
  background: var(--ui-panel); border-radius: 14px; padding: 22px 24px;
  max-width: 430px; width: 100%; box-shadow: 0 18px 60px rgba(0, 0, 0, .3);
}
.cs-dlg h3 { margin: 0 0 10px; font-family: Georgia, serif; font-weight: 400; font-size: 20px; }
.cs-dlg p { margin: 0 0 10px; font-size: 15.5px; line-height: 1.55; color: #55503f; }
.cs-dlg p.cs-warn {
  background: #f9efe6; border-left: 4px solid #c07a2c;
  border-radius: 0 8px 8px 0; padding: 10px 13px; color: #6b4a1e;
}
.cs-row { display: flex; gap: 9px; margin-top: 16px; }
.cs-row button {
  border: 0; border-radius: 9px; padding: 12px 18px;
  font-family: inherit; font-size: 15.5px; font-weight: 700; cursor: pointer;
}
.cs-row .cs-ok { background: var(--ui-gold); color: #fff; }
.cs-row .cs-no { background: #efe6d3; color: var(--ui-deep); }