/* ─────────────────────────────────────────────────────────────────────────────────────────────────
   ExpoBeacon CMS.

   Built on the APP head's design-token model, not the Portal's stylesheet: the Portal's CSS is 188 KB
   with 135 hard-coded ExpoBeacon pinks and no custom properties, so re-skinning it per client is not
   possible. These tokens carry the VentureFest palette; swapping the :root block re-skins the whole CMS.
   ───────────────────────────────────────────────────────────────────────────────────────────────── */

:root {
    --brand: #831b54;
    --brand-dark: #6b1644;
    --brand-tint: #f4e6ee;
    --secondary: #d96838;
    --accent: #c8cd49;
    --ink: #14090f;
    --on-brand: #ffffff;

    --page: #faf8f9;
    --surface: #ffffff;
    --muted: #6f6570;
    --line: #e8e2e6;
    --danger: #b3261e;
    --ok: #1e7a4d;

    --font-heading: 'Poppins', system-ui, sans-serif;
    --font-body: 'Work Sans', system-ui, sans-serif;

    --radius: 10px;
    --column: 1100px;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    background: var(--page);
    color: var(--ink);
    font-family: var(--font-body);
    font-size: 15px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { font-family: var(--font-heading); font-weight: 600; line-height: 1.25; margin: 0; }
h1 { font-size: 28px; letter-spacing: -0.01em; }
h2 { font-size: 20px; }
a { color: var(--brand); }
code { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 13px; }

.muted { color: var(--muted); }

/* ── Chrome ───────────────────────────────────────────────────────────────────────────────────── */

.cms { min-height: 100vh; display: flex; flex-direction: column; }

.cms-header {
    display: flex;
    align-items: center;
    gap: 32px;
    padding: 0 28px;
    height: 64px;
    background: var(--ink);
    color: var(--on-brand);
}

.cms-brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: inherit; }
.cms-brand img { height: 34px; display: block; }
.cms-brand-label {
    font-family: var(--font-heading);
    font-size: 12px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    opacity: 0.75;
    border-left: 1px solid rgba(255, 255, 255, 0.25);
    padding-left: 12px;
}

.cms-nav { display: flex; gap: 4px; margin-left: auto; }
.cms-nav a {
    color: rgba(255, 255, 255, 0.72);
    text-decoration: none;
    font-size: 14px;
    padding: 8px 14px;
    border-radius: 100px;
}
.cms-nav a:hover { color: #fff; background: rgba(255, 255, 255, 0.08); }
.cms-nav a.active { color: var(--ink); background: var(--accent); font-weight: 600; }

.cms-user { display: flex; align-items: center; gap: 12px; font-size: 13px; color: rgba(255, 255, 255, 0.7); }

.cms-main { flex: 1; padding: 32px 28px 64px; }
.cms-column { max-width: var(--column); margin: 0 auto; }
.cms-footer { padding: 18px 28px; color: var(--muted); font-size: 12px; border-top: 1px solid var(--line); }

.page-head { display: flex; align-items: baseline; gap: 16px; margin-bottom: 20px; }
.page-head .btn { margin-left: auto; }

/* ── Surfaces ─────────────────────────────────────────────────────────────────────────────────── */

.card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 22px 24px;
    margin-bottom: 20px;
}
.card h2 { margin-bottom: 6px; }
.card-live { border-color: #e4c9c7; }

.stat-row { display: flex; gap: 16px; margin-bottom: 24px; }
.stat {
    flex: 1;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 18px 20px;
}
.stat-value { display: block; font-family: var(--font-heading); font-size: 30px; font-weight: 600; }
.stat-label { color: var(--muted); font-size: 13px; }

/* ── Forms ────────────────────────────────────────────────────────────────────────────────────── */

label { display: block; font-size: 13px; font-weight: 600; margin: 16px 0 6px; }
label .muted { font-weight: 400; }

input[type="text"], input:not([type]), input[type="password"], input[type="time"],
input[type="url"], input[type="email"], input[type="number"], input[type="search"],
textarea, select {
    width: 100%;
    padding: 9px 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    font: inherit;
    background: #fff;
    color: inherit;
}
input:focus, textarea:focus, select:focus {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
    border-color: var(--brand);
}
textarea { resize: vertical; }
select:disabled { background: var(--page); color: var(--muted); }

.field-row { display: flex; gap: 16px; }
.field-row > * { flex: 1; }

.radio-row { display: flex; gap: 18px; }
.radio { display: flex; align-items: center; gap: 6px; font-weight: 400; margin: 0; }
.radio input { width: auto; }

.colour { width: 64px; padding: 2px; height: 34px; }

.toolbar { display: flex; gap: 12px; margin-bottom: 16px; }
.toolbar .search { flex: 1; }
.toolbar select { max-width: 220px; }

/* ── Buttons ──────────────────────────────────────────────────────────────────────────────────── */

.btn {
    display: inline-block;
    font: inherit;
    font-weight: 600;
    padding: 9px 18px;
    border-radius: 100px;
    border: 1px solid transparent;
    cursor: pointer;
    text-decoration: none;
}
.btn:disabled { opacity: 0.5; cursor: default; }
.btn-primary { background: var(--brand); color: var(--on-brand); }
.btn-primary:hover:not(:disabled) { background: var(--brand-dark); }
.btn-quiet { background: transparent; border-color: var(--line); color: var(--ink); }
.btn-quiet:hover { border-color: var(--brand); color: var(--brand); }
.btn-danger { background: var(--danger); color: #fff; }
.btn-block { width: 100%; margin-top: 20px; }

.cms-linkbutton {
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    color: inherit;
    text-decoration: underline;
    cursor: pointer;
}

.actions { display: flex; gap: 12px; margin-top: 8px; }

/* ── Tables ───────────────────────────────────────────────────────────────────────────────────── */

.grid { width: 100%; border-collapse: collapse; }
.grid th {
    text-align: left;
    font-size: 11px;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--muted);
    font-weight: 600;
    padding: 0 12px 8px;
}
.grid td { padding: 11px 12px; border-top: 1px solid var(--line); vertical-align: middle; }
.grid tbody tr:hover { background: var(--brand-tint); cursor: pointer; }

.col-logo { width: 52px; }
.col-logo img { width: 36px; height: 36px; object-fit: contain; display: block; }
.col-desc { color: var(--muted); font-size: 13px; }
.col-time { width: 110px; font-variant-numeric: tabular-nums; color: var(--muted); }
.col-stage { width: 190px; color: var(--muted); }
.col-type { width: 100px; }
.col-swatch { width: 40px; }

/* The zone's own colour, used as data rather than decoration. */
.zone-card { border-left: 4px solid var(--zone, var(--brand)); }
.zone-head { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.zone-head .btn { margin-left: auto; }
.swatch { width: 18px; height: 18px; border-radius: 4px; display: inline-block; border: 1px solid rgba(0,0,0,.12); }

/* ── Notices ──────────────────────────────────────────────────────────────────────────────────── */

.notice { border-radius: 8px; padding: 12px 16px; margin-bottom: 18px; font-size: 14px; }
.notice ul { margin: 6px 0 0; padding-left: 20px; }
.notice-ok { background: #e8f5ee; color: var(--ok); }
.notice-warn { background: #fdf3e7; color: #8a5a1b; }
.notice-error { background: #fdeceb; color: var(--danger); }

.pill {
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 3px 10px;
    border-radius: 100px;
}
.pill-ok { background: #e8f5ee; color: var(--ok); }
.pill-pending { background: #fdf3e7; color: #8a5a1b; }

.publish-state { list-style: none; margin: 0; padding: 0; }
.publish-state li { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); }
.publish-state li:first-child { border-top: 0; }

.url { display: block; background: var(--page); border: 1px solid var(--line); border-radius: 6px; padding: 8px 12px; margin: 10px 0; }

.logo-row { display: flex; gap: 24px; align-items: flex-start; }

/* ── Login ────────────────────────────────────────────────────────────────────────────────────── */

.cms-bare { min-height: 100vh; display: grid; place-items: center; background: var(--ink); padding: 24px; }

.login-card {
    width: 100%;
    max-width: 380px;
    background: var(--surface);
    border-radius: 14px;
    padding: 36px 34px 40px;
}
.login-logo { display: block; width: 190px; margin: 0 auto 26px; }
.login-card h1 { font-size: 21px; text-align: center; }
.login-event { text-align: center; color: var(--muted); font-size: 13px; margin: 4px 0 8px; }
.form-error { background: #fdeceb; color: var(--danger); border-radius: 8px; padding: 10px 14px; margin-top: 16px; font-size: 14px; }

/* ── Modal + image cropper ────────────────────────────────────────────────────────────────────────
   Both components are copied verbatim from the Portal, so their class names come from the CRM popup
   template. The Portal's stylesheet is NOT copied, so every one of those names is restyled here
   against the CMS tokens. Renaming them in the components would fork them from the Portal's copies.
   ─────────────────────────────────────────────────────────────────────────────────────────────── */

.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(20, 9, 15, 0.55);
    display: grid;
    place-items: center;
    padding: 24px;
    z-index: 50;
}

.popup {
    position: relative;
    background: var(--surface);
    border-radius: 14px;
    padding: 30px 32px 32px;
    max-width: 640px;
    width: 100%;
    max-height: 90vh;
    overflow: auto;
}
.popup-edit { max-width: 480px; }
.popup h2 { color: var(--brand); margin-bottom: 14px; }

.lity-close, .popup-close {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 0;
    background: var(--brand);
    color: var(--on-brand);
    font-size: 17px;
    line-height: 1;
    cursor: pointer;
}

.task-form { display: block; }
.form-buttons { display: flex; gap: 12px; margin-top: 22px; }
.save-button button, .cancel-button button {
    font: inherit;
    font-weight: 600;
    padding: 9px 22px;
    border-radius: 25px;
    cursor: pointer;
}
.save-button button { background: var(--brand); color: var(--on-brand); border: 1px solid var(--brand); }
.cancel-button button { background: transparent; color: var(--ink); border: 1px solid var(--line); }
.save-button button:disabled, .cancel-button button:disabled { opacity: 0.5; cursor: default; }

.pill-btn {
    font: inherit;
    font-weight: 600;
    padding: 8px 16px;
    border-radius: 100px;
    border: 1px solid var(--line);
    background: #fff;
    cursor: pointer;
}
.pill-btn:hover { border-color: var(--brand); color: var(--brand); }

.img-cropper { width: 160px; flex: none; }
.ic-file { display: none; }
.ic-preview {
    width: 160px;
    height: 160px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
    display: grid;
    place-items: center;
    overflow: hidden;
}
.ic-preview img { max-width: 100%; max-height: 100%; object-fit: contain; }
.ic-placeholder { color: var(--muted); font-size: 13px; }
.ic-actions { margin-top: 12px; }

.ic-task-form { display: grid; justify-items: center; }
.ic-canvas-wrap { position: relative; background: var(--page); border-radius: 8px; overflow: hidden; }
.ic-canvas { display: block; margin: 0 auto; touch-action: none; cursor: grab; }
/* The crop frame is drawn over the canvas, so it must not swallow the drag. */
.ic-frame-mask { position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 0 1px rgba(0,0,0,.18); }
.ic-zoom { width: 100%; margin-top: 14px; display: flex; align-items: center; gap: 12px; font-size: 13px; }
.ic-zoom input { flex: 1; }
.ic-hint { color: var(--muted); font-size: 13px; text-align: center; margin: 10px 0 0; }

.upload-progress { width: 100%; }
.up-bar { height: 6px; background: var(--line); border-radius: 100px; overflow: hidden; margin-top: 12px; }
.up-fill { height: 100%; background: var(--brand); transition: width .15s linear; }
.up-label { font-size: 13px; color: var(--muted); margin-top: 6px; text-align: center; }
/* ── Checkboxes ─────────────────────────────────────────────────────────────── */
/* The base `label { display:block }` would stack the box above its text. */
.check {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 400;
    margin: 16px 0 6px;
}

.check input[type="checkbox"] {
    width: auto;
    margin: 0;
}

/* ── Reordering ─────────────────────────────────────────────────────────────── */
/* Order in the document IS the order the app renders, so these buttons are data, not decoration. */
.col-order { width: 74px; white-space: nowrap; }

.col-actions { width: 96px; text-align: right; }

.order-btn {
    width: 26px;
    height: 26px;
    padding: 0;
    line-height: 1;
    font-size: 11px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: var(--surface);
    color: var(--muted);
    cursor: pointer;
}

.order-btn:hover:not(:disabled) { border-color: var(--brand); color: var(--brand); }

.order-btn:disabled { opacity: .35; cursor: default; }

.icon-preview { width: 22px; height: 22px; object-fit: contain; vertical-align: middle; }

.icon-sample { display: flex; align-items: flex-end; padding-bottom: 8px; }

.pill-external { background: var(--brand-tint); color: var(--brand); }

/* ── Rich text ──────────────────────────────────────────────────────────────── */
.rte {
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
    overflow: hidden;
}

.rte-bar {
    display: flex;
    align-items: stretch;
    gap: 4px;
    padding: 6px;
    background: var(--page);
    border-bottom: 1px solid var(--line);
}

.rte-bar button {
    min-width: 32px;
    height: 30px;
    padding: 0 8px;
    font: inherit;
    font-size: 13px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 6px;
    cursor: pointer;
}

.rte-bar button:hover { background: var(--surface); border-color: var(--line); }

.rte-bar button.on {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--ink);
    font-weight: 600;
}

.rte-sep { width: 1px; background: var(--line); margin: 4px 2px; }

.rte-body {
    min-height: 300px;
    max-height: 60vh;
    overflow: auto;
    padding: 14px 18px;
    outline: none;
}

.rte-body:focus { outline: 2px solid var(--accent); outline-offset: -2px; }

/* Cosmetic only: browsers drop a <br> into an empty contenteditable, so :empty rarely holds. */
.rte-body:empty::before { content: attr(data-placeholder); color: var(--muted); }

.rich-preview {
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 14px 18px;
    background: var(--page);
}

.rte-body p, .rich-preview p { margin: 0 0 12px; }

.rte-body h2, .rich-preview h2 { font-size: 19px; margin: 22px 0 8px; }

.rte-body h3, .rich-preview h3 { font-size: 16px; margin: 18px 0 6px; }

.rte-body ul, .rte-body ol,
.rich-preview ul, .rich-preview ol { margin: 0 0 12px; padding-left: 22px; }

.rte-body a, .rich-preview a { color: var(--brand); }

/* Places: a narrow numeric column, right-aligned so the counts line up down the table. */
.col-places {
    width: 84px;
    text-align: right;
    white-space: nowrap;
}

.col-places input[type="number"] {
    width: 72px;
    text-align: right;
    margin: 0;
}

/* ── Two-factor sign-in ─────────────────────────────────────────────────────── */
.totp-intro {
    font-size: 14px;
    color: var(--muted);
    line-height: 1.5;
    margin: 0 0 18px;
}

.totp-qr {
    display: block;
    margin: 0 auto 18px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
    padding: 8px;
}

.totp-secret {
    font-size: 13px;
    color: var(--muted);
    text-align: center;
    line-height: 1.7;
    margin: 0 0 18px;
}

.totp-secret code {
    display: inline-block;
    margin-top: 4px;
    padding: 6px 10px;
    background: var(--page);
    border: 1px solid var(--line);
    border-radius: 6px;
    font-size: 14px;
    letter-spacing: 1px;
}

/* A six-digit code is easier to check when the digits do not jostle. */
#code {
    font-size: 22px;
    letter-spacing: 6px;
    text-align: center;
}

.totp-restart {
    text-align: center;
    font-size: 13px;
    margin: 16px 0 0;
}

.totp-restart a { color: var(--muted); }