/* Lipstick Society panel design system.
   Same language as the landing page (pink, yellow, thick black borders, hard offset shadows) and the mobile app.
   Tokens below intentionally equal those in landing.css. */
:root {
    --pink: #ff1493;
    --yellow: #ffd700;
    --green: #c5e1a5;
    --blush: #ffe6f3;
    --sky: #cdefff;
    --lilac: #e8cef8;
    --cream: #fff9e9;
    --ink: #101828;
    --danger: #ff5a5f;
    --muted: #5b6472;
    --line: 3px solid #000;
    --shadow: 4px 4px 0 #000;
    --radius: 14px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; color: var(--ink); background: var(--cream); font-family: Arial, Helvetica, sans-serif; font-weight: 700; line-height: 1.4; min-height: 100vh; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
h1, h2, h3, h4 { margin: 0 0 8px; line-height: 1.15; }
p { margin: 0 0 12px; }
button { font-family: inherit; }
[v-cloak] { display: none !important; }
:focus-visible { outline: 3px solid var(--pink); outline-offset: 2px; }
.icon { width: 20px; height: 20px; flex: none; }
.muted { color: var(--muted); font-weight: 400; }
.hint { color: var(--muted); font-weight: 400; font-size: 12px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.stack { display: grid; gap: 16px; }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 8px 20px; border: var(--line); border-radius: 999px; background: #fff; color: #000; font-size: 13px; font-weight: 900; letter-spacing: .5px; text-transform: uppercase; cursor: pointer; box-shadow: var(--shadow); transition: transform .08s, box-shadow .08s; }
.btn:hover { transform: translate(-1px, -1px); box-shadow: 5px 5px 0 #000; }
.btn:active { transform: translate(4px, 4px); box-shadow: 0 0 0 #000; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; transform: none; box-shadow: var(--shadow); }
.btn.primary { background: var(--yellow); }
.btn.success { background: var(--green); }
.btn.pink { background: var(--pink); color: #fff; }
.btn.danger { background: var(--danger); color: #fff; }
.btn.ghost { background: transparent; box-shadow: none; }
.btn.small { min-height: 34px; padding: 4px 14px; font-size: 11px; box-shadow: 3px 3px 0 #000; }
.btn.block { width: 100%; }
.btn .icon { width: 16px; height: 16px; }

/* ---------- forms ---------- */
.field { display: grid; gap: 6px; border: 0; padding: 0; margin: 0; min-width: 0; }
.field > span, .field > legend { font-size: 13px; text-transform: uppercase; letter-spacing: .4px; padding: 0; }
.input, .select, .textarea { width: 100%; min-height: 46px; padding: 10px 16px; border: var(--line); border-radius: 999px; background: #fff; color: var(--ink); font: inherit; font-weight: 700; }
.textarea { border-radius: var(--radius); resize: vertical; min-height: 120px; }
.input:focus, .select:focus, .textarea:focus { outline: 3px solid var(--pink); outline-offset: 0; }
.input[aria-invalid="true"] { border-color: var(--danger); }
.field-error { color: #b00020; font-weight: 700; font-size: 13px; }
.form-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.grid-2 { display: grid; gap: 16px; }
select.input { appearance: none; -webkit-appearance: none; }
/* Date of birth on the general-user admin edit page: Day/Month/Year side by side, same pattern
   (and the same reasoning -- a fixed px row overflowed a narrow layout) as member-form.css's own
   .dob-row on Register/Account. */
.dob-row { display: grid; grid-template-columns: 1fr 1.3fr 1fr; gap: 8px; }

/* ---------- surfaces ---------- */
.card { background: #fff; border: var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 16px; }
.tint-blush { background: var(--blush); }
.tint-sky { background: var(--sky); }
.tint-lilac { background: var(--lilac); }
.tint-yellow { background: #f7e448; }
.tint-green { background: var(--green); }
.alert { padding: 12px 14px; border: 2px solid #000; border-radius: 12px; font-weight: 700; }
.alert.error { background: #ffd9dc; }
.alert.info { background: var(--sky); }
.alert.success { background: var(--green); }

/* Generic confirm popup (change request, 2026-10-07: Logout needed a "are you sure?" step) -- opt-in
   via [data-confirm-dialog] on a trigger button + a <dialog id> it points at (see confirm-dialog.js),
   so any future destructive action (delete, revoke, etc.) can reuse the same markup/JS, not just
   Logout. Same <dialog>+::backdrop pattern already used by the landing page's mobile menu. */
.confirm-dialog { width: min(360px, calc(100% - 32px)); padding: 24px; border: var(--line); border-radius: var(--radius); box-shadow: var(--shadow); background: #fff; color: var(--ink); }
.confirm-dialog::backdrop { background: #000b; }
.confirm-dialog-message { font-size: 15px; font-weight: 700; margin: 0 0 20px; }
.confirm-dialog-actions { display: flex; justify-content: flex-end; gap: 10px; }

.chip { display: inline-flex; align-items: center; gap: 4px; padding: 3px 12px; border: 2px solid #000; border-radius: 999px; background: var(--yellow); font-size: 12px; font-weight: 800; }
.chip.more { background: #fff; }
.chip.pick { background: #fff; cursor: pointer; font: inherit; font-size: 13px; padding: 6px 14px; }
.chip.pick.on { background: var(--pink); color: #fff; }
.chip.pick.off { opacity: .6; }
.chip.pick[disabled] { cursor: not-allowed; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.picker { display: flex; flex-wrap: wrap; gap: 8px; }
.combobox { position: relative; display: grid; gap: 6px; }
.chip-remove { border: 0; background: transparent; color: inherit; font: inherit; font-size: 14px; line-height: 1; cursor: pointer; padding: 0; }
.dropdown-list { position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 10; max-height: 220px; overflow-y: auto; margin: 0; padding: 6px; list-style: none; background: #fff; border: var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.dropdown-list li { padding: 8px 10px; border-radius: 8px; cursor: pointer; font-weight: 700; }
.dropdown-list li:hover { background: var(--sky); }
.badge { display: inline-block; padding: 2px 12px; border: 2px solid #000; border-radius: 999px; font-size: 11px; font-weight: 900; text-transform: uppercase; letter-spacing: .5px; background: #ddd; white-space: nowrap; }
.badge.active { background: var(--green); }
.badge.inactive { background: #e5e7eb; }
.badge.current { background: var(--yellow); }
/* .account header block (Job/Company/Event details): name, muted company line and status/publish
   badges sit as sibling inline elements with no markup gap between them -- without this they run
   together, e.g. "Genius Farmes LimitedACTIVE". Scoped to .account's inner text column so it never
   touches unrelated badges (list rows, chips). */
.account > div > span { margin-right: 8px; display: inline-block; }
.account > div > span:last-child { margin-right: 0; }

/* ---------- list rows ---------- */
.list { display: grid; gap: 12px; }
.row { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: center; padding: 12px; background: #fff; border: var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.row .badge { justify-self: start; grid-column: 1 / -1; }
.row-main { min-width: 0; display: grid; gap: 6px; }
.row-title { font-size: 16px; font-weight: 900; overflow-wrap: anywhere; }
a.row-title:hover { text-decoration: underline; }
.row-sub { color: var(--muted); font-weight: 400; font-size: 13px; }
.row-actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px; }
.avatar { width: 44px; height: 44px; display: grid; place-items: center; border: 2px solid #000; border-radius: 50%; background: var(--yellow); font-size: 15px; font-weight: 900; }
img.avatar { object-fit: cover; }   /* a company logo standing in for the initials circle */
.avatar.lg { width: 64px; height: 64px; font-size: 20px; }   /* details page: bigger than the list row's */

/* ---------- Company logo picker (create/edit form) ---------- */
.logo-picker { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.logo-preview { width: 72px; height: 72px; border: var(--line); border-radius: var(--radius); object-fit: cover; background: #fff; }
.logo-preview.placeholder { display: grid; place-items: center; color: var(--muted); background: var(--cream); }
.logo-preview.placeholder .icon { width: 30px; height: 30px; }

.page-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.page-title { margin: 0; font-size: 24px; }
.toolbar { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 16px; align-items: center; }
.search { position: relative; flex: 1 1 220px; }
.search .icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); pointer-events: none; }
.search .input { padding-left: 42px; }
.segmented { display: inline-flex; border: var(--line); border-radius: 999px; overflow: hidden; background: #fff; }
.segmented button { border: 0; background: transparent; padding: 10px 18px; font-size: 13px; font-weight: 900; cursor: pointer; text-transform: uppercase; }
.segmented button + button { border-left: var(--line); }
.segmented button.on { background: var(--yellow); }
.pager { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 16px; font-size: 13px; }
.state { padding: 32px 16px; text-align: center; border: 3px dashed #000; border-radius: var(--radius); background: #fff; }
.state.error { background: #ffd9dc; }
.kv { display: grid; gap: 12px; margin: 0; }
.kv dt { font-size: 12px; text-transform: uppercase; letter-spacing: .4px; color: var(--muted); }
.kv dd { margin: 2px 0 0; overflow-wrap: anywhere; white-space: pre-wrap; }

.skeleton { position: relative; overflow: hidden; min-height: 76px; border: var(--line); border-radius: var(--radius); background: #eee; }
.skeleton.block { min-height: 220px; }
.skeleton::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .7), transparent); animation: shimmer 1.2s infinite; }
@keyframes shimmer { from { transform: translateX(-100%); } to { transform: translateX(100%); } }

/* ---------- stats (dashboard) ---------- */
.stats { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); margin: 16px 0; }
.stat { display: grid; gap: 4px; padding: 16px; border: var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.stat b { font-size: 34px; line-height: 1; }
.stat span, .stat button { font-size: 13px; }

/* ---------- modal + toast ---------- */
.modal-backdrop { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 16px; background: rgba(16, 24, 40, .55); }
.modal { width: min(440px, 100%); display: grid; gap: 14px; padding: 20px; background: #fff; border: var(--line); border-radius: var(--radius); box-shadow: 6px 6px 0 #000; }
.modal-actions { display: flex; justify-content: flex-end; gap: 10px; flex-wrap: wrap; }
.toast-root { position: fixed; z-index: 60; left: 50%; bottom: 20px; transform: translateX(-50%); display: grid; gap: 8px; width: min(420px, calc(100% - 32px)); pointer-events: none; }
.toast { padding: 12px 16px; border: var(--line); border-radius: 12px; background: var(--green); box-shadow: var(--shadow); font-weight: 800; }
.toast.error { background: #ffd9dc; }

/* ---------- tabs ---------- */
.tabs { display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; }
.tabs button { padding: 8px 18px; border: var(--line); border-radius: 999px; background: #fff; font-weight: 900; font-size: 13px; cursor: pointer; }
.tabs button.on { background: var(--yellow); }

/* ---------- auth pages ---------- */
.auth-page { display: grid; place-items: center; padding: 24px 16px; }
.auth-card { width: min(440px, 100%); display: grid; gap: 12px; padding: 24px; background: #fff; border: 4px solid #000; border-radius: 18px; box-shadow: 8px 8px 0 #000; }
.auth-brand img { width: 96px; height: auto; }
.auth-card h1 { font-size: 28px; }
.back-link { font-size: 13px; text-decoration: underline; }

/* ---------- panel shell ---------- */
.shell { display: flex; min-height: 100vh; }
.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.sidebar { display: none; }
.sidebar [hidden] { display: none !important; }
.sidebar-search { flex: none; margin-bottom: 12px; }
.sidebar-search input { width: 100%; min-width: 0; padding: 10px 12px; border: 2px solid #111; border-radius: 10px; font: inherit; font-size: 13px; background: var(--cream); }
.sidebar-group { margin-top: 10px; padding-bottom: 8px; border-bottom: 1px solid #ddd; }
.sidebar-group summary { cursor: pointer; padding: 10px 4px; font-size: 13px; font-weight: 900; }
.sidebar-group.current-group summary { color: #b00062; }
.sidebar-group .side-link { font-size: 13px; padding: 9px 8px; margin: 3px 0; border-radius: 12px; }
.sidebar-empty { padding: 12px 4px; }
.topbar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 12px; height: 64px; padding: 0 16px; background: var(--pink); color: #fff; border-bottom: var(--line); }
.topbar .brand { display: flex; align-items: center; gap: 8px; font-weight: 900; font-size: 18px; letter-spacing: -.3px; }
.topbar .brand img { width: 118px; height: 58px; object-fit: contain; }
.topbar .top-title { flex: 1; margin: 0; font-size: 16px; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topbar .who { display: none; font-size: 13px; }
.topbar .avatar { width: 36px; height: 36px; color: #000; }
.topbar form { margin: 0; }
.tabbar { position: sticky; top: 64px; z-index: 15; display: flex; background: #fff; border-bottom: var(--line); overflow-x: auto; }
.tab { flex: 1 0 auto; min-width: 76px; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 6px; font-size: 11px; font-weight: 900; text-transform: uppercase; border-right: 2px solid #000; }
.tab:last-child { border-right: 0; }
.tab.active { background: var(--yellow); }
.content { width: 100%; max-width: 1200px; margin: 0 auto; padding: 16px; }
.side-link { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border: 3px solid transparent; border-radius: 999px; font-weight: 900; font-size: 14px; }
.side-link:hover { border-color: #000; }
.side-link.active { background: var(--yellow); border-color: #000; box-shadow: 3px 3px 0 #000; }
.settings-links { display: grid; gap: 12px; margin-top: 16px; }
.settings-links a { display: flex; align-items: center; gap: 12px; }

@media (min-width: 769px) {
    .sidebar { display: flex; flex-direction: column; gap: 6px; width: 240px; flex: none; padding: 16px; background: #fff; border-right: var(--line); position: sticky; top: 0; height: 100vh; height: 100dvh; overflow: hidden; }
    .sidebar .brand { display: flex; flex: none; align-items: center; width: 132px; height: 73px; margin-bottom: 16px; }
    .sidebar > nav { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; overscroll-behavior-y: contain; scrollbar-width: thin; scrollbar-gutter: stable; padding: 4px 6px 8px 4px; }
    .sidebar .brand img { width: 100%; height: 100%; object-fit: contain; }
    .tabbar { display: none; }
    .topbar .brand { display: none; }
    .topbar .top-title { text-align: left; font-size: 20px; }
    .topbar .who { display: inline; }
    .content { padding: 24px; }
    .grid-2 { grid-template-columns: 1fr 1fr; }
    .row { grid-template-columns: auto 1fr auto auto; }
    .row .badge { justify-self: end; grid-column: auto; }
    .row-actions { grid-column: auto; flex-wrap: nowrap; }
}
.topbar .brand span { display: none; }
.logout-text { display: none; }
.account { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
@media (min-width: 769px) { .logout-text { display: inline; } }
.section-title { margin: 24px 0 12px; }
.when { grid-column: 1 / -1; }
@media (min-width: 769px) { .when { grid-column: auto; } }

/* ---------- CKEditor (Company Details) ----------
   ClassicEditor.create(el) hides `el` (display:none) once it starts and inserts its own
   ".ck.ck-editor" wrapper as the NEXT SIBLING, with the toolbar/editable inside THAT -- so the
   design-system border/shadow/height have to target the CKEditor-generated markup, not `.editor`
   itself. `.editor` only matters for the brief instant before that swap (loading) and as the
   fallback textarea's neighbour if the editor never loads. !important overrides CKEditor's own
   theme, which is injected after panel.css and would otherwise win the tie. */
.editor { border: var(--line); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; background: #fff; min-height: 400px; }
/* No overflow:hidden here (unlike .editor above): a dropdown toolbar item (e.g. Privacy Policy's
   "heading") renders its option panel as an absolutely-positioned child of this element -- clipping
   it made the panel's own click-outside-to-close handling misbehave, leaving it stuck open on every
   click into the content. Company/Job/Event never hit this because their toolbars are plain buttons
   with no floating panel. ck-rounded-corners (CKEditor's own theme class) already rounds the visible
   corners without needing the wrapper to clip. */
.ck.ck-editor { border: var(--line) !important; border-radius: var(--radius) !important; box-shadow: var(--shadow) !important; }
.ck.ck-editor .ck.ck-editor__editable { min-height: 360px; padding: 10px 16px; font-family: Arial, Helvetica, sans-serif; border: 0 !important; box-shadow: none !important; }
.ck.ck-editor .ck.ck-toolbar { border: 0; border-bottom: 2px solid #000; background: var(--cream); }
.rich-text p { margin: 0 0 8px; }
.rich-text ul, .rich-text ol { margin: 0 0 8px; padding-left: 20px; }
.checkbox { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; cursor: pointer; }
.checkbox input { width: 18px; height: 18px; accent-color: var(--pink); }

/* Event editor: scoped panel styling, including tier/question builders. */
#event-form-app .panel-event-editor { padding:clamp(18px,3vw,32px); gap:24px; }
#event-form-app .panel-event-editor > .field { min-width:0; gap:10px; }
#event-form-app .panel-event-editor > .field > span { font-size:14px; font-weight:900; }
#event-form-app .input,#event-form-app .select,#event-form-app .textarea { box-sizing:border-box; border-radius:10px; min-width:0; min-height:46px; }
#event-form-app .hint { line-height:1.6; margin:0; }
#event-form-app .event-editor-section { padding:22px; border:2px solid #111; border-radius:14px; background:#fff9e9; }
#event-form-app .event-editor-section > span { padding-bottom:10px; border-bottom:1px solid #ddd3c4; }
#event-form-app .event-editor-prices > .row-actions { display:grid; grid-template-columns:minmax(0,2fr) minmax(110px,1fr) auto; gap:12px; align-items:start; padding:14px; background:#fff; border:1px solid #d8d0c6; border-radius:10px; }
#event-form-app .event-editor-section > .btn { justify-self:start; width:fit-content; background:#ffd700; color:#111; }
#event-form-app .event-question-card { padding:20px; border:1px solid #bfb4ba; border-radius:12px; box-shadow:none; gap:14px; }
#event-form-app .event-question-card > .btn { align-self:start; width:fit-content; }
#event-form-app .event-question-card .row-actions { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:10px; margin-bottom:10px; }
#event-form-app .field > .row-actions { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
#event-form-app .event-editor-prices > .row-actions { grid-template-columns:minmax(0,2fr) minmax(110px,1fr) auto; }
#event-form-app .checkbox { min-height:44px; align-items:center; line-height:1.5; }
#event-form-app .logo-picker { display:flex; flex-wrap:wrap; align-items:center; gap:20px; padding:18px; border:2px dashed #b3a6ad; border-radius:12px; background:#fff9e9; }
#event-form-app .logo-preview { width:min(320px,100%); height:auto; aspect-ratio:16/9; object-fit:contain; border-radius:10px; background:#ffe3ef; }
#event-form-app input[type=file] { max-width:100%; }
#event-form-app .form-actions { border-top:2px solid #eee5e9; padding-top:22px; justify-content:flex-end; }
#event-form-app .form-actions .btn { min-width:180px; min-height:48px; }
@media(min-width:1000px) {
 #event-form-app .panel-event-editor { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); }
 #event-form-app .panel-event-editor > * { grid-column:1/-1; }
 #event-form-app .panel-event-editor > label.field:first-of-type,#event-form-app .panel-event-editor > .event-editor-company { grid-column:auto; }
 #event-form-app .event-question-card { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); }
 #event-form-app .event-question-card > div { grid-column:1/-1; }
}
@media(max-width:640px) {
 #event-form-app .event-editor-section,#event-form-app .event-question-card { padding:14px; }
 #event-form-app .event-editor-prices > .row-actions,#event-form-app .field > .row-actions { grid-template-columns:minmax(0,1fr); }
 #event-form-app .event-editor-prices .row-actions .btn { justify-self:start; }
 #event-form-app .form-actions .btn { width:100%; }
}
/* Admin Event details; isolated from all other panel detail screens. */
#event-details-app .panel-event-details { background:#fff; padding:clamp(18px,3vw,32px); gap:28px; }
#event-details-app .panel-event-hero { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); align-items:center; gap:28px; padding:20px; background:#fff9e9; border:2px solid #111; border-radius:16px; }
#event-details-app .panel-event-poster { display:block; width:100%; height:auto; aspect-ratio:16/9; object-fit:contain; background:#ffe3ef; border:2px solid #111; border-radius:12px; box-sizing:border-box; }
#event-details-app .panel-event-poster-empty { display:grid; place-items:center; }
#event-details-app .panel-event-poster-empty .icon { width:48px; height:48px; color:#ff1493; }
#event-details-app .panel-event-hero > div { min-width:0; }
#event-details-app .panel-event-hero h3 { font-size:clamp(24px,2.5vw,36px); line-height:1.2; margin:0 0 12px; overflow-wrap:anywhere; }
#event-details-app .panel-event-hero .muted { display:block; margin:0 0 16px; font-size:15px; overflow-wrap:anywhere; }
#event-details-app .panel-event-hero .badge { display:inline-flex; margin:0 6px 8px 0; padding:6px 12px; }
#event-details-app .panel-event-facts { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; margin:0; }
#event-details-app .panel-event-facts > div { display:flex; flex-direction:column; gap:10px; min-width:0; padding:20px; border:1px solid #dfd6dc; border-radius:12px; background:#fff9e9; }
#event-details-app .panel-event-facts dt { font-size:12px; font-weight:900; color:#a90060; text-transform:uppercase; letter-spacing:.5px; }
#event-details-app .panel-event-facts dd { margin:0; min-width:0; font-size:15px; line-height:1.65; overflow-wrap:anywhere; }
#event-details-app .panel-event-facts .panel-event-wide { grid-column:1/-1; background:#fff; border:2px solid #111; }
#event-details-app .panel-event-wide > dt { padding-bottom:12px; border-bottom:1px solid #eadde4; }
#event-details-app .panel-event-prices ul { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:12px; padding:0; margin:0; list-style:none; }
#event-details-app .panel-event-prices li { padding:14px 16px; background:#ffe3ef; border-radius:10px; font-weight:800; }
#event-details-app .panel-event-questions ul { margin:0; padding-left:22px; }
#event-details-app .panel-event-questions li { padding:8px 0; }
#event-details-app .rich-text img { max-width:100%; height:auto; }
#event-details-app .form-actions { display:flex; gap:12px; border-top:2px solid #eee5e9; padding-top:24px; flex-wrap:wrap; }
#event-details-app .form-actions .btn { min-height:46px; }
#event-details-app .form-actions .btn.danger { margin-left:auto; }
@media(max-width:1000px) {
 #event-details-app .panel-event-hero { grid-template-columns:minmax(0,1fr); gap:20px; }
 #event-details-app .panel-event-facts { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media(max-width:600px) {
 #event-details-app .panel-event-details { padding:14px; gap:20px; }
 #event-details-app .panel-event-hero { padding:14px; }
 #event-details-app .panel-event-facts { grid-template-columns:minmax(0,1fr); }
 #event-details-app .panel-event-facts > div { padding:16px; }
 #event-details-app .form-actions .btn { flex:1 1 100%; margin-left:0; }
}
/* Event management list: panel palette and responsive event previews. */
#event-list-app .toolbar { display:grid; grid-template-columns:minmax(220px,1.5fr) minmax(180px,1fr); gap:16px; padding:22px; margin-bottom:26px; background:#fff9e9; border:3px solid #111; border-radius:14px; box-shadow:4px 4px 0 #111; }
#event-list-app .toolbar .search { width:100%; min-width:0; }
#event-list-app .toolbar .input { width:100%; min-width:0; box-sizing:border-box; border-radius:10px; min-height:46px; }
#event-list-app .toolbar .segmented { display:flex; width:fit-content; max-width:100%; border-radius:10px; }
#event-list-app .toolbar .segmented button { min-height:42px; padding:10px 16px; }
#event-list-app .toolbar .segmented button.on { background:#ff1493; color:#111; }
#event-list-app .panel-event-list { gap:18px; }
#event-list-app .panel-event-row { display:grid; grid-template-columns:180px minmax(0,1fr) auto; gap:18px; align-items:center; padding:20px; background:#fff; border:2px solid #111; border-radius:14px; box-shadow:4px 4px 0 #111; }
#event-list-app .event-list-poster { width:180px; height:auto; aspect-ratio:16/9; object-fit:contain; border:2px solid #111; border-radius:10px; background:#ffe3ef; box-sizing:border-box; grid-column:1; grid-row:1 / span 2; }
#event-list-app div.event-list-poster { display:grid; place-items:center; }
#event-list-app .row-main { grid-column:2; min-width:0; }
#event-list-app .row-title { font-size:19px; line-height:1.35; overflow-wrap:anywhere; }
#event-list-app .row-sub { display:block; margin-top:8px; font-size:13px; line-height:1.6; overflow-wrap:anywhere; }
#event-list-app .event-list-statuses { grid-column:3; display:flex; flex-wrap:wrap; justify-content:flex-end; gap:7px; max-width:240px; }
#event-list-app .panel-event-row .row-actions { grid-column:2 / -1; display:flex; flex-wrap:wrap; gap:10px; padding-top:14px; border-top:1px solid #eadfe5; }
#event-list-app .row-actions .btn { min-height:38px; border-radius:9px; font-size:12px; }
#event-list-app .row-actions a.btn { background:#ffd700; }
#event-list-app .row-actions .danger { margin-left:auto; }
#event-list-app .pager { margin-top:24px; padding:16px; background:#fff; border:2px solid #111; border-radius:12px; }
#event-list-app .state { padding:32px; border-radius:14px; }
@media(max-width:1100px) {
 #event-list-app .panel-event-row { grid-template-columns:150px minmax(0,1fr); }
 #event-list-app .event-list-poster { width:150px; }
 #event-list-app .event-list-statuses { grid-column:2; justify-content:flex-start; max-width:none; }
 #event-list-app .panel-event-row .row-actions { grid-column:1/-1; }
}
@media(max-width:640px) {
 #event-list-app .toolbar { grid-template-columns:minmax(0,1fr); padding:16px; }
 #event-list-app .panel-event-row { grid-template-columns:minmax(0,1fr); padding:16px; gap:14px; }
 #event-list-app .event-list-poster { width:100%; grid-row:auto; }
 #event-list-app .row-main,#event-list-app .event-list-statuses { grid-column:1; }
 #event-list-app .row-actions .danger { margin-left:0; }
 #event-list-app .toolbar .segmented { width:100%; }
 #event-list-app .toolbar .segmented button { flex:1; padding:10px; }
}