@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,500&family=Josefin+Sans:wght@400;500;600&family=Montserrat:wght@300;400;500;600;700&display=swap');

* { box-sizing: border-box; }

/* The hidden attribute must always win over any class's own display
   value — otherwise a component that sets display:flex/grid on itself
   (the login card, the ceremony overlay) would stay visible even after
   JS sets element.hidden = true. */
[hidden] { display: none !important; }

html, body {
    margin: 0;
    padding: 0;
    font-family: 'Montserrat', 'Segoe UI', Helvetica, Arial, sans-serif;
    background: #f4f1ec;
    color: #2c2018;
}

button, input, textarea, select { font-family: inherit; }

.admin-app { min-height: 100vh; }

/* Topbar */
.admin-topbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 28px;
    background: #120a07;
    color: #fff;
}

.wordmark { color: #fff; text-decoration: none; display: flex; align-items: center; gap: 12px; }
.wordmark img { height: 34px; width: auto; display: block; }
.wordmark span { font-size: 0.72rem; color: #cc9c56; letter-spacing: 0.5px; font-family: 'Josefin Sans', sans-serif; text-transform: uppercase; }

.topbar-actions { display: flex; align-items: center; gap: 18px; }
.text-link { color: #e8dcd0; font-size: 0.82rem; text-decoration: none; }
.text-link:hover { text-decoration: underline; }
.text-button {
    background: none; border: 1px solid rgba(255,255,255,0.35); color: #fff;
    padding: 8px 16px; border-radius: 20px; font-size: 0.8rem; cursor: pointer;
}
.text-button:hover { background: rgba(255,255,255,0.1); }

/* Login */
.login-view { display: flex; align-items: center; justify-content: center; min-height: calc(100vh - 62px); padding: 40px 20px; }
.login-card {
    background: #fff; border-radius: 24px; padding: 40px 36px; max-width: 380px; width: 100%;
    box-shadow: 0 20px 50px rgba(59,43,32,0.1);
}
.login-card .eyebrow { letter-spacing: 3px; font-size: 11px; font-weight: 700; color: #a87b51; margin: 0 0 6px; }
.login-card h1 { font-family: 'Cormorant Garamond', serif; margin: 0 0 10px; font-size: 1.7rem; }
.login-copy { color: #6b5c4d; font-size: 0.88rem; margin: 0 0 22px; }
.login-card label { display: block; font-size: 0.78rem; font-weight: 600; color: #4a3c2e; margin: 14px 0 6px; }
.login-card input {
    width: 100%; padding: 13px 14px; border: 1px solid #ddd3c7; border-radius: 10px; font-size: 0.95rem; outline: none;
}
.login-card input:focus { border-color: #a87b51; }
.password-wrap { position: relative; }
.password-wrap input { padding-right: 60px; }
#togglePassword {
    position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
    background: none; border: none; color: #a87b51; font-size: 0.78rem; cursor: pointer; padding: 6px;
}
.primary-button {
    width: 100%; margin-top: 20px; background: #3b2b20; color: #fff; border: none;
    padding: 14px; border-radius: 10px; font-weight: 700; cursor: pointer; font-size: 0.92rem;
    transition: background 0.2s;
}
.primary-button:hover { background: #241811; }
.primary-button:disabled { background: #ccc; cursor: not-allowed; }
.form-message { margin-top: 12px; font-size: 0.84rem; min-height: 18px; }
.error-message { color: #c0392b; }
.form-message.is-success { color: #2e7d32; }

/* Tabs */
.comp-tabs {
    display: flex; flex-wrap: wrap; gap: 8px; padding: 18px 24px 0;
    background: #fff; border-bottom: 1px solid #e8e0d5;
}
.comp-tab {
    display: flex; align-items: center; gap: 8px; background: #f4f1ec; border: 2px solid transparent;
    border-bottom: none; padding: 10px 16px; border-radius: 12px 12px 0 0; cursor: pointer;
    font-weight: 600; font-size: 0.85rem; color: #6b5c4d; position: relative; top: 1px;
}
.comp-tab .tab-emoji { font-size: 16px; }
.comp-tab.is-active { background: #fff; border-color: var(--tab-accent, #a87b51); color: #2c2018; border-bottom: 2px solid #fff; }
.tab-badge {
    font-size: 0.68rem; font-weight: 700; padding: 1px 7px; border-radius: 10px; background: #e6e0d6; color: #6b5c4d;
}
.tab-badge.badge-open { background: #e6f6ea; color: #2e7d32; }
.tab-badge.badge-winner { background: var(--tab-accent, #a87b51); color: #fff; }

#compContent { max-width: 1180px; margin: 0 auto; padding: 28px 24px 60px; }

.dashboard-heading { display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 16px; margin-bottom: 22px; }
.dashboard-heading .eyebrow { letter-spacing: 2px; font-size: 11px; font-weight: 700; color: #a87b51; margin: 0 0 4px; }
.dashboard-heading h1 { font-family: 'Cormorant Garamond', serif; margin: 0; font-size: 1.8rem; }

.active-toggle { display: flex; align-items: center; gap: 10px; cursor: pointer; }
.active-toggle input { display: none; }
.toggle-track { width: 46px; height: 26px; background: #ddd3c7; border-radius: 20px; position: relative; transition: background 0.2s; }
.toggle-thumb { position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; background: #fff; border-radius: 50%; transition: transform 0.2s; box-shadow: 0 1px 3px rgba(0,0,0,0.3); }
.active-toggle input:checked + .toggle-track { background: #2e7d32; }
.active-toggle input:checked + .toggle-track .toggle-thumb { transform: translateX(20px); }
.toggle-label { font-weight: 700; font-size: 0.85rem; }

.stats-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; margin-bottom: 26px; }
.stat-card { background: #fff; border-radius: 16px; padding: 16px 18px; box-shadow: 0 4px 14px rgba(59,43,32,0.06); }
.stat-card span { display: block; font-size: 0.74rem; color: #8a7a68; font-weight: 600; text-transform: uppercase; letter-spacing: 0.4px; margin-bottom: 6px; }
.stat-card strong { font-size: 1.5rem; color: #2c2018; }
.status-card strong { color: #a87b51; }

.admin-grid { display: grid; grid-template-columns: 380px 1fr; gap: 24px; align-items: start; }
@media (max-width: 900px) { .admin-grid { grid-template-columns: 1fr; } }

.panel { background: #fff; border-radius: 18px; padding: 22px; box-shadow: 0 4px 14px rgba(59,43,32,0.06); margin-bottom: 18px; }
.panel-heading { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 14px; }
.panel-heading span { font-size: 0.75rem; font-weight: 700; color: #a87b51; background: #fdf5e6; border-radius: 50%; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.panel-heading h2 { margin: 0 0 2px; font-size: 1rem; }
.panel-heading p { margin: 0; font-size: 0.78rem; color: #8a7a68; }

.stack-form label { display: block; font-size: 0.76rem; font-weight: 600; color: #4a3c2e; margin: 10px 0 5px; }
.stack-form label small { font-weight: 400; color: #a89a8a; }
.stack-form input, .stack-form textarea, .stack-form select {
    width: 100%; padding: 11px 12px; border: 1px solid #ddd3c7; border-radius: 8px; font-size: 0.88rem; outline: none; resize: vertical;
}
.stack-form input:focus, .stack-form textarea:focus, .stack-form select:focus { border-color: #a87b51; }

.outline-button {
    background: #fff; border: 1.5px solid #a87b51; color: #a87b51; padding: 11px 18px; border-radius: 8px;
    font-weight: 700; cursor: pointer; font-size: 0.85rem;
}
.outline-button:hover { background: #fdf5e6; }
.full-button { width: 100%; margin-top: 14px; }

.draw-panel { border: 2px solid #fdf5e6; }
.draw-status-line { font-size: 0.85rem; color: #6b5c4d; margin: 0 0 14px; }
.start-draw-button {
    width: 100%; background: linear-gradient(135deg, #241811, #3b2b20); color: #f0dcc0; border: 1px solid #c8922a; padding: 16px;
    border-radius: 10px; font-weight: 700; font-size: 0.95rem; cursor: pointer; letter-spacing: 0.5px;
}
.start-draw-button:disabled { background: #ccc; border-color: #ccc; color: #888; cursor: not-allowed; }
.winner-drawn-box { background: #fdf5e6; border-radius: 12px; padding: 16px; text-align: center; }
.winner-drawn-box .name { font-family: 'Cormorant Garamond', serif; font-size: 1.5rem; color: #3b2b20; margin: 4px 0 12px; }
.winner-drawn-box .redraw-button {
    background: none; border: 1px solid #c0392b; color: #c0392b; padding: 9px 16px; border-radius: 8px;
    font-size: 0.8rem; font-weight: 600; cursor: pointer;
}
.history-list { margin-top: 14px; font-size: 0.8rem; color: #8a7a68; }
.history-list li { display: flex; justify-content: space-between; padding: 6px 0; border-bottom: 1px solid #f0ece4; }

/* Entries panel */
.entries-panel { display: flex; flex-direction: column; min-height: 400px; }
.list-toolbar { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; margin-bottom: 12px; }
.list-toolbar .eyebrow { letter-spacing: 2px; font-size: 10px; font-weight: 700; color: #a87b51; margin: 0 0 2px; }
.list-toolbar h2 { margin: 0; font-size: 1.1rem; }
#searchEntries { padding: 9px 14px; border: 1px solid #ddd3c7; border-radius: 20px; font-size: 0.84rem; min-width: 220px; outline: none; }
.list-actions { margin-bottom: 12px; }

.empty-state { text-align: center; padding: 40px 20px; color: #a89a8a; }
.empty-state strong { display: block; margin-bottom: 6px; color: #6b5c4d; }
.empty-state span { font-size: 0.85rem; }

.entry-list { display: flex; flex-direction: column; gap: 8px; max-height: 480px; overflow-y: auto; }
.entry-row { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid #f0ece4; border-radius: 10px; }
.entry-number { font-size: 0.72rem; font-weight: 700; color: #c9a584; width: 24px; flex-shrink: 0; }
.entry-details { flex-grow: 1; display: flex; flex-direction: column; }
.entry-details strong { font-size: 0.9rem; color: #2c2018; }
.entry-details .meta { font-size: 0.76rem; color: #a89a8a; }
.source-chip { display: inline-block; font-size: 0.68rem; font-weight: 700; padding: 2px 8px; border-radius: 10px; background: #f0ece4; color: #6b5c4d; margin-left: 6px; }
.delete-entry { background: none; border: none; color: #c9a584; font-size: 20px; cursor: pointer; padding: 4px 8px; flex-shrink: 0; }
.delete-entry:hover { color: #c0392b; }

.danger-zone {
    margin-top: 18px; display: flex; justify-content: space-between; align-items: center; gap: 12px;
    padding: 16px; background: #fdf5f0; border-radius: 12px; flex-wrap: wrap;
}
.danger-zone strong { display: block; font-size: 0.85rem; color: #8e1c10; }
.danger-zone span { font-size: 0.76rem; color: #a87b51; }
.danger-zone button { background: #c0392b; color: #fff; border: none; padding: 10px 18px; border-radius: 8px; font-weight: 600; cursor: pointer; font-size: 0.8rem; }

/* Ceremony overlay — matches the Ultimate Hair Transformation ceremony look */
.ceremony-overlay {
    position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 100; padding: 20px;
    display: flex; align-items: center; justify-content: center;
    overflow: hidden;
    background:
        radial-gradient(circle at 72% 38%, rgba(155, 99, 63, .25), transparent 33%),
        linear-gradient(145deg, #0d0705 0%, #24150e 48%, #120a07 100%);
}
.ceremony-box { position: relative; z-index: 2; text-align: center; color: #fff8f0; max-width: 520px; width: 100%; }

/* Ambassador photos flanking the wheel — fill the empty space either side
   with brand photography, faded into the background and tinted with the
   current competition's accent so it still reads as "that competition's"
   ceremony rather than a generic stock photo.
   NOTE: sized with plain percentage + max-width (not min()/vw) because
   this overlay is shown on browsers — including some smart-TV browsers —
   that don't support the CSS min() function. If min() fails to parse,
   the whole width declaration is dropped and the div falls back to the
   image's native pixel width, which is what caused the wheel to be
   squeezed off-screen. Percentage + max-width degrades safely everywhere. */
.ceremony-flank {
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 1;
    width: 22%;
    max-width: 300px;
    overflow: hidden;
    pointer-events: none;
}
.ceremony-flank-left { left: 0; }
.ceremony-flank-right { right: 0; }
.ceremony-flank img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 18%;
    filter: grayscale(12%) brightness(.68) saturate(.92);
}
.ceremony-flank::after {
    content: "";
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
}
.ceremony-flank-left::after {
    background-image:
        linear-gradient(rgba(var(--accent-rgb, 200,146,42), .18), rgba(var(--accent-rgb, 200,146,42), .18)),
        linear-gradient(to bottom, #120a07 0%, transparent 20%, transparent 78%, #120a07 100%),
        linear-gradient(to right, transparent 0%, #120a07 92%);
}
.ceremony-flank-right::after {
    background-image:
        linear-gradient(rgba(var(--accent-rgb, 200,146,42), .18), rgba(var(--accent-rgb, 200,146,42), .18)),
        linear-gradient(to bottom, #120a07 0%, transparent 20%, transparent 78%, #120a07 100%),
        linear-gradient(to left, transparent 0%, #120a07 92%);
}
@media (max-width: 1200px) {
    .ceremony-flank { display: none; }
}
.ceremony-kicker { letter-spacing: 3px; font-size: 0.8rem; font-weight: 600; color: #cc9c56; margin: 0 0 20px; text-transform: uppercase; font-family: 'Josefin Sans', sans-serif; }
.ceremony-wheel-wrap { position: relative; display: inline-block; margin-bottom: 20px; }
.ceremony-pointer { position: absolute; top: -22px; left: 50%; transform: translateX(-50%); font-size: 32px; color: #f0dcc0; z-index: 3; filter: drop-shadow(0 4px 6px rgba(0,0,0,.6)); }
#ceremonyCanvas { max-width: 100%; height: auto; border: 8px solid #1c100a; border-radius: 50%; background: #190e09;
    box-shadow: 0 24px 60px rgba(0,0,0,.65), 0 0 0 2px rgba(226,173,132,.8), 0 0 0 8px #2a1910, inset 0 0 42px rgba(0,0,0,.55); }
.ceremony-status { font-size: 0.85rem; color: rgba(255,244,232,.72); min-height: 26px; font-family: 'Josefin Sans', sans-serif; letter-spacing: .12em; text-transform: uppercase; }
.ceremony-winner { margin-top: 14px; }
.ceremony-winner .winner-kicker { letter-spacing: .5em; font-size: 0.72rem; color: #cc9c56; margin: 0 0 8px; font-weight: 600; font-family: 'Josefin Sans', sans-serif; }
.ceremony-winner h2 {
    font-family: 'Cormorant Garamond', serif; font-size: 2.6rem; font-weight: 500; margin: 0; color: #fff8f0;
    text-shadow: 0 0 12px rgba(255,255,255,.35), 0 0 36px rgba(217,153,105,.68), 0 12px 28px rgba(0,0,0,.8);
}
#ceremonyCloseButton { margin-top: 26px; max-width: 220px; background: linear-gradient(135deg, #241811, #3b2b20); border: 1px solid #c8922a; color: #f0dcc0; }

/* ===== v2 additions: sources + competition image ===== */
.source-card { grid-column: span 2; }
.source-breakdown { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.source-pill { padding: 6px 12px; border: 1px solid rgba(204,156,86,.35); border-radius: 999px; font-size: 12px; color: #f0dcc0; background: rgba(200,146,42,.08); }
.source-pill b { color: #cc9c56; margin-right: 3px; }
.source-empty { font-size: 12px; opacity: .55; }
.prize-image-block { margin-top: 22px; padding-top: 18px; border-top: 1px solid rgba(204,156,86,.18); }
.prize-image-block > label { display: block; margin-bottom: 10px; }
.prize-image-row { display: flex; gap: 16px; align-items: flex-start; }
.prize-image-preview { flex: 0 0 120px; height: 160px; display: flex; align-items: center; justify-content: center; overflow: hidden; border: 1px dashed rgba(204,156,86,.45); background: rgba(0,0,0,.25); text-align: center; }
.prize-image-preview span { padding: 10px; font-size: 11px; line-height: 1.5; opacity: .6; }
.prize-image-preview img { width: 100%; height: 100%; object-fit: cover; }
.prize-image-actions { display: flex; flex-direction: column; gap: 8px; flex: 1; }
.prize-image-actions button[hidden] { display: none; }
.hint { margin: 6px 0 0; font-size: 11px; line-height: 1.6; opacity: .65; }
.hint a { color: #cc9c56; }
a.start-draw-button { display: block; text-align: center; text-decoration: none; }
a.start-draw-button.is-disabled { pointer-events: none; opacity: .45; }

/* Draw date */
.draw-date-row { display: flex; gap: 10px; align-items: center; }
.draw-date-row input { flex: 1; }
.draw-date-row .outline-button { padding: 10px 14px; flex-shrink: 0; }
.draw-date-preview { margin-top: 6px; }

/* How to enter: room for step-by-step instructions */
.stack-form textarea.how-to-enter-input { min-height: 270px; line-height: 1.55; }
.how-to-enter-count { text-align: right; }

/* Main page (card) image */
.card-image-block .prize-image-preview { border-style: solid; }