/* ---------- Fonts used by the slide renderer (defaults; Settings can override) ---------- */
@font-face { font-family: 'Smilez Heading Default'; src: url('../fonts/Anton-Regular.ttf') format('truetype'); font-weight: 400; font-display: block; }
@font-face { font-family: 'Smilez Body Default'; src: url('../fonts/Nunito-Variable.ttf') format('truetype'); font-weight: 200 1000; font-display: block; }
@font-face { font-family: 'Smilez Body Alt'; src: url('../fonts/OpenSans-Variable.ttf') format('truetype'); font-weight: 300 800; font-display: block; }

/* ---------- App chrome ---------- */
:root {
  --bg: #f3f5f8; --panel: #ffffff; --ink: #14181f; --muted: #667085; --line: #e2e6ec;
  --purple: #A92AFE; --pink: #FF13F0; --blue: #39C7FF; --yellow: #FFFF00; --red: #FA1C00; --green: #1f9d55; --navy: #285166;
  --radius: 10px; --shadow: 0 1px 2px rgba(16,24,40,.06), 0 1px 3px rgba(16,24,40,.1);
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { font: 14px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; color: var(--ink); background: var(--bg); display: flex; flex-direction: column; }
a { color: inherit; }
button { font: inherit; }
h1 { font-size: 22px; margin: 0 0 12px; }
h2 { font-size: 17px; margin: 0; }
h3 { font-size: 14px; margin: 0 0 8px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }

#topbar { display: flex; align-items: center; gap: 24px; padding: 0 20px; height: 52px; background: #0f1320; color: #fff; flex: 0 0 auto; }
#topbar .brand { font-weight: 800; letter-spacing: .06em; display: flex; align-items: center; gap: 8px; }
.brand-logo { height: 34px; width: auto; display: block; }
#topbar .brand span { padding-top: 2px; }
#nav { display: flex; gap: 4px; }
#nav a { color: #c8cdd8; text-decoration: none; padding: 8px 12px; border-radius: 6px; font-weight: 600; }
#nav a:hover { background: #222a3d; color: #fff; }
#nav a.active { background: var(--purple); color: #fff; }
#userbox { margin-left: auto; color: #c8cdd8; font-size: 13px; }

/* Slide editor: the location name doubles as a switcher across the week's stores. */
.loc-switch { display: flex; align-items: center; gap: 8px; margin-bottom: 2px; }
.loc-switch h2 { margin: 0; flex: 1; text-align: center; }
.loc-switch .btn { padding: 4px 9px; }
.loc-switch .btn:disabled { opacity: .35; cursor: default; }

/* Netlify injects a "Powered by Netlify" badge on hosted pages: a 202x64 iframe
   pinned flush to the bottom-right at z-index 2147483645, above anything the app
   can draw.  That corner is exactly where the approve buttons and the dialog confirm
   buttons live, so while it is present, keep both out of it.  It can be
   switched off in Netlify, so this keys on the badge itself, not on hosting. */
body.has-host-badge .ws-bottom { padding-right: 218px; }
body.has-host-badge .modal-overlay { padding-bottom: 80px; }
body.has-host-badge .modal { max-height: calc(100vh - 100px); }

/* Campaigns list: a heading row per week, since a week ships as one set. */
.tbl tr.week-row td { background: #eef1f6; font-size: 13px; padding: 8px 10px; border-top: 1px solid var(--line); }
.tbl tr.week-row:first-child td { border-top: none; }

/* Settings sub-tabs: Brand Library / Archive / Audit Log live under Settings. */
.subtabs { display: flex; gap: 4px; padding: 10px 24px 0; border-bottom: 1px solid var(--line); background: #fff; flex: 0 0 auto; }
.subtabs a { color: var(--muted); text-decoration: none; padding: 8px 14px; border-radius: 8px 8px 0 0; font-weight: 600; border: 1px solid transparent; border-bottom: none; margin-bottom: -1px; }
.subtabs a:hover { background: #f5f7fa; color: var(--ink); }
.subtabs a.active { background: #fff; color: var(--purple); border-color: var(--line); }

#view { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.page { padding: 20px 24px; overflow: auto; }
.loading { padding: 40px; color: var(--muted); }

/* ---------- Buttons / forms ---------- */
.btn { border: 1px solid var(--line); background: #fff; color: var(--ink); padding: 7px 14px; border-radius: 8px; cursor: pointer; font-weight: 600; display: inline-flex; align-items: center; gap: 6px; }
.btn:hover { background: #f5f7fa; }
.btn.primary { background: var(--purple); border-color: var(--purple); color: #fff; }
.btn.primary:hover { background: #8f13e0; }
.btn.success { background: var(--green); border-color: var(--green); color: #fff; }
.btn.danger { background: #fff; color: var(--red); border-color: #f2b8b0; }
.btn.danger:hover { background: #fff2f0; }
.btn.small { padding: 4px 9px; font-size: 12px; }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.icon-btn { border: none; background: transparent; cursor: pointer; font-size: 16px; padding: 4px 8px; border-radius: 6px; color: var(--muted); }
.icon-btn:hover { background: #eef0f4; color: var(--ink); }
.input, select, textarea { font: inherit; border: 1px solid var(--line); border-radius: 8px; padding: 7px 10px; background: #fff; color: var(--ink); width: 100%; }
textarea { min-height: 220px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; }
.field { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; }
.field > span { font-size: 12px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.row.between { justify-content: space-between; }
.radio-group label { display: flex; align-items: center; gap: 6px; margin-right: 14px; cursor: pointer; }
.hint { color: var(--muted); font-size: 12px; }
.muted { color: var(--muted); }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; }

.badge { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; }
.badge.draft { background: #e7e9ef; color: #4a5266; }
.badge.approved { background: #d9f7e5; color: #157347; }
.badge.warn { background: #fff4d6; color: #8a5a00; }
.badge.fail { background: #ffe1dd; color: #a11d0b; }
.badge.pass { background: #d9f7e5; color: #157347; }
.badge.UNCHANGED { background: #e7e9ef; color: #4a5266; }
.badge.CHANGED { background: #fff4d6; color: #8a5a00; }
.badge.NEW { background: #dcf2ff; color: #075985; }
.badge.REMOVED { background: #ffe1dd; color: #a11d0b; }

/* ---------- Cards / tables ---------- */
.card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 16px; }
.grid { display: grid; gap: 14px; }
.grid.cols-3 { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
table.tbl { width: 100%; border-collapse: collapse; background: #fff; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); }
.tbl th, .tbl td { text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
.tbl th { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); background: #f8f9fb; }
.tbl tr:last-child td { border-bottom: none; }
.tbl tr.clickable { cursor: pointer; }
.tbl tr.clickable:hover td { background: #f7f2ff; }

/* ---------- Editor workspace ---------- */
.workspace { display: grid; grid-template-columns: 300px 1fr 380px; grid-template-rows: 1fr auto; flex: 1 1 auto; min-height: 0; }
.workspace.no-right { grid-template-columns: 300px 1fr; }
.ws-left { border-right: 1px solid var(--line); background: #fff; overflow: auto; padding: 14px; }
.ws-center { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.ws-right { border-left: 1px solid var(--line); background: #fff; overflow: auto; padding: 14px; }
.ws-bottom { grid-column: 1 / -1; border-top: 1px solid var(--line); background: #fff; padding: 10px 16px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.preview-wrap { flex: 1 1 auto; min-height: 0; overflow: auto; display: flex; align-items: center; justify-content: center; padding: 16px; background: #dfe3ea; }
.preview-wrap svg { max-width: 100%; max-height: 100%; height: auto; box-shadow: 0 4px 24px rgba(0,0,0,.25); background: #39C7FF; display: block; }
.preview-toolbar { display: flex; gap: 10px; align-items: center; padding: 8px 14px; background: #fff; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.slide-svg .hit-group { cursor: pointer; }
.slide-svg .hit-group:hover .hit-rect { stroke: rgba(169,42,254,.6); }
.slide-svg .hit-group.selected .hit-rect { stroke: #A92AFE; }
.slide-svg text { user-select: none; }

.cat-list { display: flex; flex-direction: column; gap: 4px; }
.cat-item { display: flex; align-items: center; justify-content: space-between; padding: 7px 10px; border-radius: 8px; cursor: pointer; border: 1px solid transparent; }
.cat-item:hover { background: #f5f7fa; }
.cat-item.active { background: #f3e8ff; border-color: #d9b8ff; }
.cat-item .sw { width: 10px; height: 10px; border-radius: 3px; display: inline-block; margin-right: 8px; }
.cat-item .count { font-size: 12px; color: var(--muted); }
.cat-item .count.warn { color: #b45309; font-weight: 700; }

.promo-list { display: flex; flex-direction: column; gap: 6px; }
.promo-row { border: 1px solid var(--line); border-radius: 8px; padding: 8px; background: #fff; display: grid; grid-template-columns: 18px 1fr; gap: 6px 8px; }
.promo-row.dragging { opacity: .4; }
.promo-row.over { border-color: var(--purple); box-shadow: 0 -2px 0 var(--purple); }
.promo-row.inactive { opacity: .55; background: #fafafa; }
.promo-row.needs { border-color: #f6c343; background: #fffbeb; }
.promo-row .handle { cursor: grab; color: #aab; user-select: none; grid-row: 1 / span 3; padding-top: 6px; text-align: center; }
.promo-row input.text { width: 100%; font-size: 13px; }
.promo-row .controls { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; font-size: 12px; }
.promo-row .controls select { width: auto; padding: 3px 6px; font-size: 12px; }
.promo-row .orig { font-size: 11px; color: var(--muted); }
.promo-row.style-highlight input.text { background: #ffffd0; font-weight: 700; }
.promo-row.style-emphasis input.text { color: #d000c4; font-weight: 800; }

.checks { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 16px; }
.check { display: flex; gap: 8px; align-items: flex-start; padding: 5px 0; border-bottom: 1px dashed var(--line); }
.check .ico { width: 18px; text-align: center; font-weight: 800; }
.check.pass .ico { color: var(--green); }
.check.fail .ico { color: var(--red); }
.check.warn .ico { color: #b45309; }
.check .lbl { font-weight: 600; }
.check .det { font-size: 12px; color: var(--muted); }
.check .ov { font-size: 11px; }

.status-pill { padding: 6px 12px; border-radius: 999px; font-weight: 700; }
.status-pill.ok { background: #d9f7e5; color: #157347; }
.status-pill.bad { background: #ffe1dd; color: #a11d0b; }

.brand-picker { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; }
.brand-tile { border: 2px solid var(--line); border-radius: 8px; padding: 6px; cursor: pointer; text-align: center; font-size: 12px; background: #fff; }
.brand-tile img { width: 100%; aspect-ratio: 1; object-fit: contain; border-radius: 6px; background: #f0f0f0; }
.brand-tile.selected { border-color: var(--purple); background: #f7efff; }
.brand-tile .num { position: relative; display: inline-block; background: var(--purple); color: #fff; border-radius: 999px; padding: 0 7px; font-size: 11px; margin-top: 4px; }
.brand-tile.inactive { opacity: .45; }
.brand-tile select { width: 100%; font-size: 11px; padding: 2px 4px; margin-top: 4px; }

.logo-preview { display: flex; gap: 12px; align-items: center; }
.logo-preview img { max-width: 220px; max-height: 120px; background: repeating-conic-gradient(#e6e6e6 0 25%, #fff 0 50%) 0 0 / 16px 16px; border: 1px solid var(--line); border-radius: 6px; }

.diff-row td.prev { color: #a11d0b; text-decoration: line-through; }
.diff-row td.next { color: #157347; font-weight: 600; }

.archive-tree ul { list-style: none; padding-left: 18px; margin: 4px 0; }
.archive-tree > ul { padding-left: 0; }
.archive-tree li { padding: 2px 0; }
.archive-tree .folder { font-weight: 700; }
.archive-tree .file a { color: #5b21b6; }

/* ---------- Modal / toast ---------- */
.modal-overlay { position: fixed; inset: 0; background: rgba(15,19,32,.55); display: flex; align-items: center; justify-content: center; z-index: 50; padding: 20px; }
.modal { background: #fff; border-radius: 12px; width: min(640px, 100%); max-height: 92vh; display: flex; flex-direction: column; box-shadow: 0 20px 60px rgba(0,0,0,.35); }
.modal.wide { width: min(1100px, 100%); }
.modal-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid var(--line); }
.modal-body { padding: 16px 18px; overflow: auto; }
.modal-foot { padding: 12px 18px; border-top: 1px solid var(--line); display: flex; justify-content: flex-end; gap: 8px; }
/* Top-right, just under the header: the bottom-right corner holds the approve buttons,
   every dialog's confirm button and, when hosted, Netlify's badge — a toast there covers
   the one control you need next (an error toast lands on the button you must retry). */
#toasts { position: fixed; right: 16px; top: 80px; display: flex; flex-direction: column; gap: 8px; z-index: 60; }
.toast { background: #0f1320; color: #fff; padding: 10px 14px; border-radius: 8px; box-shadow: var(--shadow); max-width: 380px; transition: opacity .3s; }
.toast.success { background: #157347; }
.toast.error { background: #a11d0b; }
.toast.warn { background: #8a5a00; }
.toast.out { opacity: 0; }

.export-results a { display: block; padding: 4px 0; }
.kbd { font-family: ui-monospace, Menlo, monospace; background: #eef0f4; border-radius: 4px; padding: 1px 5px; font-size: 12px; }
.sep { height: 1px; background: var(--line); margin: 12px 0; }

/* ---------- CSV drag & drop ---------- */
.dropzone { border: 2px dashed #b9c0cc; border-radius: 10px; padding: 14px; text-align: center; color: var(--muted); background: #fff; transition: all .15s; cursor: pointer; }
.dropzone strong { color: var(--ink); }
.dropzone.drop-active, .workspace.drop-active .preview-wrap { outline: 3px dashed var(--purple); outline-offset: -6px; background: #f3e8ff; }
.csv-preview { max-height: 50vh; overflow: auto; border: 1px solid var(--line); border-radius: 8px; padding: 8px 12px; background: #fafbfc; font-size: 13px; }
.csv-cat { font-weight: 800; text-transform: uppercase; letter-spacing: .04em; margin: 10px 0 4px; color: #5b21b6; }
.csv-cat.muted { color: var(--muted); }
.csv-line { padding: 2px 0 2px 12px; border-left: 3px solid #e2e6ec; }
.csv-line.style-highlight { background: #ffffd0; font-weight: 700; }
.csv-line.style-emphasis { color: #d000c4; font-weight: 800; }
.csv-line.hidden { opacity: .5; text-decoration: line-through; }
.csv-line.muted { color: var(--muted); }
.extra-sections { font-size: 12px; margin-top: 10px; }
.extra-sections .csv-cat { margin-top: 6px; }

/* ---------- Campaigns ---------- */
.camp-ws { display: grid; grid-template-columns: 420px 1fr; grid-template-rows: 1fr auto; flex: 1 1 auto; min-height: 0; }
.camp-left { border-right: 1px solid var(--line); background: #fff; overflow: auto; padding: 14px; }
.camp-center { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.camp-tabs { display: flex; gap: 4px; padding: 8px 14px; background: #fff; border-bottom: 1px solid var(--line); flex-wrap: wrap; align-items: center; }
.camp-tabs button { border: 1px solid var(--line); background: #fff; padding: 5px 10px; border-radius: 6px; cursor: pointer; font-weight: 600; font-size: 12px; }
.camp-tabs button.active { background: var(--purple); color: #fff; border-color: var(--purple); }
.camp-preview { flex: 1 1 auto; min-height: 0; overflow: auto; display: flex; align-items: center; justify-content: center; padding: 16px; background: #dfe3ea; }
.camp-preview svg { max-width: 100%; max-height: 100%; height: auto; box-shadow: 0 4px 24px rgba(0,0,0,.3); display: block; }
.camp-section { border: 1px solid var(--line); border-radius: 10px; margin-bottom: 10px; background: #fff; }
.camp-section > .head { display: flex; align-items: center; justify-content: space-between; padding: 8px 12px; cursor: pointer; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; font-size: 12px; color: #4a5266; background: #f8f9fb; border-radius: 10px 10px 0 0; }
.camp-section > .body { padding: 10px 12px; }
.camp-section.collapsed > .body { display: none; }
.swatches { display: flex; gap: 6px; flex-wrap: wrap; }
.swatch { width: 26px; height: 26px; border-radius: 6px; border: 2px solid #fff; box-shadow: 0 0 0 1px #ccc; cursor: pointer; }
.swatch.selected { box-shadow: 0 0 0 3px var(--purple); }
.deal-row { display: grid; grid-template-columns: 110px 1fr auto; gap: 6px; align-items: center; margin-bottom: 4px; }
.deal-row input { font-size: 12px; padding: 4px 6px; }
.deal-row.bulk { grid-template-columns: 70px 110px 1fr auto; }
.deal-row select { font-size: 12px; padding: 3px 4px; }
.checklist div { padding: 3px 0; }
.output-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 10px; font-size: 12px; }
.output-grid label { display: flex; align-items: center; gap: 6px; }
.output-grid .sub { margin-left: 22px; color: var(--muted); font-size: 11px; }

/* ---------- Slide designs ---------- */
.design-preview svg { width: 100%; height: auto; display: block; border-radius: 6px; box-shadow: 0 1px 4px rgba(0,0,0,.25); }

.grid.design-grid { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.design-grid .card img { max-height: 90px; object-fit: contain; }

/* Design cycler: flip through slide / campaign designs from the preview toolbar. */
.design-cycle { gap: 6px; align-items: center; padding: 2px 8px; border: 1px solid var(--line);
                border-radius: 999px; background: #faf7ff; }
.design-cycle .btn.small { padding: 2px 8px; line-height: 1.1; }
.design-cycle .design-name { font-weight: 700; font-size: 12px; min-width: 130px; text-align: center;
                             white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.camp-tabs .design-cycle button { font-weight: 700; }
.camp-tabs .design-cycle button.active { background: #fff; color: inherit; border-color: var(--line); }

/* Design importer: drag the deal panel onto the uploaded artwork. */
.zone-pick { position: relative; background-size: 100% 100%; border-radius: 6px;
             border: 1px solid var(--line); cursor: move; user-select: none; }
.zone-box { position: absolute; border: 2px solid #ff2d55; background: rgba(255,45,85,.14); box-sizing: border-box; }
.zone-box .h { position: absolute; width: 11px; height: 11px; background: #fff; border: 2px solid #ff2d55; border-radius: 2px; }
.zone-box .h.nw { left: -6px; top: -6px; cursor: nwse-resize; }
.zone-box .h.ne { right: -6px; top: -6px; cursor: nesw-resize; }
.zone-box .h.sw { left: -6px; bottom: -6px; cursor: nesw-resize; }
.zone-box .h.se { right: -6px; bottom: -6px; cursor: nwse-resize; }