/* ===========================================================================
   Admin / CMS layer for GOŚCIŃSKA — login, edit mode, events manager.
   Deliberately self-contained and theme-independent (own dark palette, high
   z-index) so it stays legible on top of any site duotone theme. Loaded on
   every page; nothing here is visible to logged-out visitors.
   =========================================================================== */

:root{
  --ka-panel:#15171c;
  --ka-panel-2:#1e2128;
  --ka-line:#33373f;
  --ka-text:#eef1f6;
  --ka-muted:#9aa2b1;
  --ka-accent:#ff6b9d;      /* matches the site's --purple accent */
  --ka-accent-ink:#15171c;
  --ka-ok:#57d9a3;
  --ka-danger:#ff6b6b;
  --ka-shadow:0 18px 50px rgba(0,0,0,.45);
  --ka-radius:14px;
}

/* ---- invisible login hotspot (top-right corner) --------------------------- */
.ka-hotspot{
  position:fixed; top:0; right:0;
  width:46px; height:46px;
  z-index:2147483000;
  cursor:default;            /* no visible affordance — it's a secret door */
  background:transparent; border:0;
}
.ka-hotspot:focus-visible{ outline:2px solid var(--ka-accent); outline-offset:-4px; }

/* ---- shared overlay + modal ---------------------------------------------- */
.ka-overlay{
  position:fixed; inset:0; z-index:2147483100;
  background:rgba(8,9,12,.62); backdrop-filter:blur(4px);
  display:flex; align-items:center; justify-content:center;
  padding:24px; opacity:0; pointer-events:none; transition:opacity .18s ease;
}
.ka-overlay.is-open{ opacity:1; pointer-events:auto; }

.ka-modal{
  width:100%; max-width:560px; max-height:88vh; overflow:auto;
  background:var(--ka-panel); color:var(--ka-text);
  border:1px solid var(--ka-line); border-radius:var(--ka-radius);
  box-shadow:var(--ka-shadow);
  font-family:'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  transform:translateY(10px) scale(.98); transition:transform .18s ease;
}
.ka-overlay.is-open .ka-modal{ transform:none; }
.ka-modal--sm{ max-width:400px; }

.ka-modal-head{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; padding:18px 20px; border-bottom:1px solid var(--ka-line);
}
.ka-modal-head h2{ margin:0; font-size:17px; font-weight:700; letter-spacing:.2px; }
.ka-modal-head p{ margin:2px 0 0; font-size:12.5px; color:var(--ka-muted); }
.ka-modal-body{ padding:20px; }
.ka-close{
  appearance:none; border:0; background:var(--ka-panel-2); color:var(--ka-text);
  width:32px; height:32px; border-radius:8px; font-size:18px; line-height:1;
  cursor:pointer; flex:0 0 auto;
}
.ka-close:hover{ background:var(--ka-line); }

/* ---- buttons / fields ----------------------------------------------------- */
.ka-btn{
  appearance:none; cursor:pointer; font:inherit; font-weight:600;
  padding:10px 16px; border-radius:10px; border:1px solid var(--ka-line);
  background:var(--ka-panel-2); color:var(--ka-text); transition:.15s;
}
.ka-btn:hover{ border-color:var(--ka-muted); }
.ka-btn--primary{ background:var(--ka-accent); color:var(--ka-accent-ink); border-color:var(--ka-accent); }
.ka-btn--primary:hover{ filter:brightness(1.07); }
.ka-btn--danger{ color:var(--ka-danger); }
.ka-btn--danger:hover{ background:rgba(255,107,107,.12); border-color:var(--ka-danger); }
.ka-btn--ghost{ background:transparent; }
.ka-btn:disabled{ opacity:.5; cursor:not-allowed; }

.ka-field{ display:block; margin:0 0 14px; }
.ka-field > span{ display:block; font-size:12.5px; color:var(--ka-muted); margin:0 0 6px; }
.ka-field input[type=text],
.ka-field input[type=date],
.ka-field input[type=url],
.ka-field input[type=password]{
  width:100%; box-sizing:border-box; font:inherit;
  padding:10px 12px; border-radius:9px; border:1px solid var(--ka-line);
  background:var(--ka-panel-2); color:var(--ka-text);
}
.ka-field input:focus{ outline:2px solid var(--ka-accent); outline-offset:0; border-color:transparent; }

.ka-msg{ font-size:13px; margin:10px 0 0; min-height:1em; }
.ka-msg--err{ color:var(--ka-danger); }
.ka-msg--ok{ color:var(--ka-ok); }

/* ---- admin bar (shown when logged in) ------------------------------------- */
.ka-bar{
  position:fixed; left:50%; bottom:18px; transform:translateX(-50%);
  z-index:2147483050; display:flex; align-items:center; gap:10px;
  padding:9px 12px; border-radius:999px;
  background:var(--ka-panel); color:var(--ka-text);
  border:1px solid var(--ka-line); box-shadow:var(--ka-shadow);
  font-family:'Plus Jakarta Sans',sans-serif; font-size:13px;
  max-width:calc(100vw - 24px);
}
.ka-bar-who{ display:flex; align-items:center; gap:7px; color:var(--ka-muted); padding:0 4px; }
.ka-bar-dot{ width:8px; height:8px; border-radius:50%; background:var(--ka-ok); flex:0 0 auto; }
.ka-bar .ka-btn{ padding:7px 12px; border-radius:999px; }
.ka-bar-sep{ width:1px; align-self:stretch; background:var(--ka-line); margin:2px 2px; }

/* editing toggle active state */
.ka-bar .ka-btn[aria-pressed="true"]{ background:var(--ka-accent); color:var(--ka-accent-ink); border-color:var(--ka-accent); }

/* right-hand account meta — email + log out, smaller and muted, divided off
   from the edit/manage buttons on the left. */
.ka-bar-meta{
  position:relative;
  display:flex; align-items:center;
  margin-left:4px; padding-left:12px;
  border-left:1px solid var(--ka-line);
}
.ka-bar .ka-btn--out{
  padding:5px 10px; font-size:11px; font-weight:600;
  color:var(--ka-muted); background:transparent; border-color:transparent;
}
.ka-bar .ka-btn--out:hover{ color:var(--ka-text); background:var(--ka-panel-2); border-color:var(--ka-line); }
/* email is hidden; it appears as a tooltip above Log out on hover only. */
.ka-bar-meta .ka-bar-who{
  position:absolute; bottom:calc(100% + 8px); right:0;
  display:flex; align-items:center; gap:6px;
  padding:6px 10px; border-radius:8px; white-space:nowrap;
  background:var(--ka-panel); border:1px solid var(--ka-line); box-shadow:var(--ka-shadow);
  font-size:11px; color:var(--ka-muted);
  opacity:0; pointer-events:none; transform:translateY(4px);
  transition:opacity .15s ease, transform .15s ease;
}
.ka-bar-meta .ka-bar-dot{ width:7px; height:7px; }
.ka-bar .ka-btn--out:hover ~ .ka-bar-who{ opacity:1; transform:none; }

@media (max-width:560px){
  .ka-bar{ font-size:12px; gap:6px; padding:8px 10px; bottom:12px; }
  .ka-bar-who span.ka-email{ display:none; }
}

/* ---- edit-mode affordances ------------------------------------------------ */
body.ka-editing [data-edit]{
  outline:1.5px dashed rgba(255,107,157,.6);
  outline-offset:3px; cursor:text; border-radius:3px;
  transition:outline-color .15s, background .15s;
}
body.ka-editing [data-edit]:hover{ outline-color:var(--ka-accent); background:rgba(255,107,157,.06); }
body.ka-editing [data-edit]:focus{
  outline:2px solid var(--ka-accent); outline-offset:3px;
  background:rgba(255,107,157,.08);
}
[data-edit].ka-saving{ outline-color:var(--ka-muted)!important; }
[data-edit].ka-saved{ animation:ka-flash .9s ease; }
@keyframes ka-flash{ 0%{ background:rgba(87,217,163,.25);} 100%{ background:transparent;} }

/* list-type editable (the top marquee/ticker): pause it so it's easy to click,
   and keep its dashed outline inside the clipped bar (it has overflow:hidden). */
body.ka-editing .marquee-track{ animation-play-state:paused; }
body.ka-editing [data-edit-mode="list"]{ cursor:pointer; outline-offset:-2px; }
body.ka-editing [data-edit-mode="list"]:hover{ outline-offset:-2px; }

/* ---- homepage service-card drag-to-reorder (edit mode only) ---------------
   A grip handle appears on each service card while editing; drag it to reorder.
   The dashed outline marks the sortable cards; the dragged card dims. */
body.ka-editing .work-card.ka-sortable{ outline:2px dashed var(--ka-accent); outline-offset:4px; }
.ka-drag-handle{
  position:absolute; top:10px; left:10px; z-index:6;
  width:36px; height:36px; padding:0;
  display:flex; align-items:center; justify-content:center;
  border:none; border-radius:9px;
  background:rgba(10,12,16,.72); color:#fff;
  font-size:17px; line-height:1; cursor:grab;
  box-shadow:0 4px 14px rgba(0,0,0,.4);
  -webkit-user-select:none; user-select:none;
}
.ka-drag-handle:hover{ background:rgba(10,12,16,.92); }
.ka-drag-handle:active{ cursor:grabbing; }
.work-card.ka-dragging{ opacity:.45; }

/* ---- flyer cards with uploaded artwork (DJ page "Event Flyers") -----------
   Public styling (admin.css loads site-wide). A flyer with an image shows the
   artwork filling the 3:4 tile, with date/title/venue over a bottom scrim;
   without one, the original typography-only card is unchanged. */
.flyer-card--has-image{ overflow:hidden; }
.flyer-card--has-image .flyer-card-img{
  position:absolute; inset:2px; width:calc(100% - 4px); height:calc(100% - 4px);
  object-fit:cover; z-index:0;
  clip-path:polygon(0 0,100% 0,100% calc(100% - var(--cut-sm)),calc(100% - var(--cut-sm)) 100%,0 100%);
  -webkit-clip-path:polygon(0 0,100% 0,100% calc(100% - var(--cut-sm)),calc(100% - var(--cut-sm)) 100%,0 100%);
}
.flyer-card--has-image::after{
  content:''; position:absolute; inset:2px; z-index:1; pointer-events:none;
  background:linear-gradient(to top,rgba(0,0,0,.82),rgba(0,0,0,0) 52%);
  clip-path:polygon(0 0,100% 0,100% calc(100% - var(--cut-sm)),calc(100% - var(--cut-sm)) 100%,0 100%);
  -webkit-clip-path:polygon(0 0,100% 0,100% calc(100% - var(--cut-sm)),calc(100% - var(--cut-sm)) 100%,0 100%);
}
.flyer-card--has-image .flyer-card-date{ position:relative; z-index:2; margin-top:auto; color:rgba(255,255,255,.85); }
.flyer-card--has-image .flyer-card-title{ position:relative; z-index:2; color:#fff; }
.flyer-card--has-image .flyer-card-venue{ position:relative; z-index:2; color:rgba(255,255,255,.85); }
/* gallery (Event Production) reuses the flyer tile look: same 3:4 cut-corner
   grid, but caption-less, so drop the bottom scrim. */
.work-grid--gallery{ display:grid; grid-template-columns:repeat(2,1fr); gap:16px; }
@media (min-width:640px){ .work-grid--gallery{ grid-template-columns:repeat(3,1fr); } }
@media (min-width:860px){ .work-grid--gallery{ grid-template-columns:repeat(4,1fr); gap:20px; } }
.flyer-card--bare::after{ display:none; }

/* title is now its own link; artwork click opens the lightbox */
.flyer-card-title-link{ display:block; text-decoration:none; }
.flyer-card-title-link:hover{ text-decoration:underline; }
.flyer-card--zoomable .flyer-card-img{ cursor:zoom-in; }

/* ---- fullscreen image lightbox (public) ---------------------------------- */
.ka-lightbox{
  position:fixed; inset:0; z-index:2147483200;
  display:flex; align-items:center; justify-content:center; padding:24px;
  background:rgba(5,6,9,.92); opacity:0; transition:opacity .2s ease;
}
.ka-lightbox.is-open{ opacity:1; }
.ka-lightbox img{ max-width:96vw; max-height:92vh; object-fit:contain; box-shadow:0 24px 70px rgba(0,0,0,.6); }
.ka-lightbox-close{
  position:fixed; top:18px; right:20px;
  width:44px; height:44px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:var(--lime); border:2px solid var(--ink); color:var(--ink);
  font-size:22px; line-height:1;
  transition:background .15s ease, color .15s ease;
}
.ka-lightbox-close:hover{ background:var(--ink); color:var(--lime); }
@media (hover:hover) and (pointer:fine){
  .ka-lightbox, .ka-lightbox img{ cursor:zoom-out; }
  .ka-lightbox-close{ cursor:pointer; }
}

/* ---- events manager ------------------------------------------------------- */
.ka-events-list{ list-style:none; margin:0 0 18px; padding:0; display:flex; flex-direction:column; gap:8px; }
.ka-event{
  display:flex; align-items:center; gap:12px;
  padding:9px 10px; border:1px solid var(--ka-line); border-radius:10px;
  background:var(--ka-panel-2);
}
.ka-event img{ width:46px; height:46px; object-fit:cover; border-radius:7px; flex:0 0 auto; background:var(--ka-line); }
.ka-event-info{ min-width:0; flex:1; }
.ka-event-title{ font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ka-event-meta{ font-size:12px; color:var(--ka-muted); }
.ka-event-tag{ font-size:10.5px; text-transform:uppercase; letter-spacing:.5px; padding:2px 7px; border-radius:999px; border:1px solid var(--ka-line); color:var(--ka-muted); }
.ka-event-tag.is-up{ color:var(--ka-ok); border-color:rgba(87,217,163,.4); }
.ka-event-actions{ display:flex; gap:6px; flex:0 0 auto; }
.ka-event-actions .ka-btn{ padding:6px 10px; font-size:12px; }

.ka-section-label{ font-size:12px; text-transform:uppercase; letter-spacing:.6px; color:var(--ka-muted); margin:0 0 10px; }

/* class-slots config: weekday checkbox chips */
.ka-days{ display:flex; flex-wrap:wrap; gap:8px; margin:0 0 18px; }
.ka-day-check{ display:flex; align-items:center; gap:6px; padding:7px 11px; border:1px solid var(--ka-line); border-radius:999px; background:var(--ka-panel-2); font-size:13px; cursor:pointer; }
.ka-day-check input{ accent-color:var(--ka-accent); margin:0; }

/* gallery manager: thumbnail grid with a delete button per photo */
.ka-gallery-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin:0 0 16px; }
.ka-gallery-cell{ position:relative; aspect-ratio:1; border-radius:8px; overflow:hidden; background:var(--ka-panel-2); border:1px solid var(--ka-line); }
.ka-gallery-cell img{ width:100%; height:100%; object-fit:cover; display:block; }
.ka-gallery-del{
  position:absolute; top:4px; right:4px; width:24px; height:24px; border-radius:6px;
  border:0; cursor:pointer; font-size:15px; line-height:1;
  background:rgba(8,9,12,.72); color:#fff;
}
.ka-gallery-del:hover{ background:var(--ka-danger); }

/* image drop zones (flyer/event image field + gallery add area) — drag-drop + paste */
.ka-drop.ka-drop-over{ outline:2px dashed var(--ka-accent); outline-offset:3px; border-radius:10px; }
.ka-drop--zone{
  display:block; text-align:center; cursor:pointer;
  padding:18px; margin:0 0 12px;
  border:1.5px dashed var(--ka-line); border-radius:12px;
  color:var(--ka-muted); background:var(--ka-panel-2); font-size:13px;
  transition:border-color .15s ease, color .15s ease, background .15s ease;
}
.ka-drop--zone:hover{ border-color:var(--ka-muted); color:var(--ka-text); }
.ka-drop--zone.ka-drop-over{ border-color:var(--ka-accent); color:var(--ka-text); background:rgba(255,107,157,.1); outline:none; }
.ka-form-row{ display:flex; gap:12px; }
.ka-form-row > *{ flex:1; }
.ka-thumb-preview{ display:flex; align-items:center; gap:10px; margin:-4px 0 14px; }
.ka-thumb-preview img{ width:54px; height:54px; object-fit:cover; border-radius:8px; border:1px solid var(--ka-line); }
.ka-foot{ display:flex; justify-content:flex-end; gap:10px; margin-top:6px; }

/* hide the GSI prompt styling clash; container just centers the button */
.ka-login-form .ka-foot{ margin-top:4px; }
.ka-login-form .ka-btn--primary{ width:100%; }

/* The site hides the native cursor (cursor:none) and draws a custom dot at
   z-index 9999 — which sits BEHIND the admin overlay/bar (far higher z-index),
   so inside admin UI you'd see no cursor at all. Restore the real cursor there. */
@media (hover:hover) and (pointer:fine){
  .ka-overlay, .ka-overlay *, .ka-bar, .ka-bar *{ cursor:auto; }
  .ka-overlay a, .ka-overlay button, .ka-overlay .ka-btn, .ka-close, .ka-gallery-del,
  .ka-bar button, .ka-bar .ka-btn{ cursor:pointer; }
  .ka-overlay input, .ka-overlay textarea, .ka-overlay [contenteditable]{ cursor:text; }
  .ka-hotspot{ cursor:default; }
}

/* print / reduced-motion niceties */
@media print{ .ka-hotspot,.ka-bar,.ka-overlay{ display:none!important; } }

/* ---- Selected-experience manager (was gallery): image + title/tagline/date ---- */
.ka-exp-grid{ grid-template-columns:repeat(2,1fr); }
.ka-exp-cell{ aspect-ratio:auto; overflow:visible; display:flex; flex-direction:column; }
.ka-exp-cell > img{ width:100%; height:118px; object-fit:cover; border-bottom:1px solid var(--ka-line); }
.ka-exp-fields{ display:flex; flex-direction:column; gap:6px; padding:8px; }
.ka-exp-fields input{
  width:100%; padding:7px 9px; font-size:13px;
  background:var(--ka-panel); color:var(--ka-text);
  border:1px solid var(--ka-line); border-radius:6px;
}
.ka-exp-fields input:focus{ outline:none; border-color:var(--ka-accent); }
.ka-exp-saved{ min-height:13px; font-size:11px; opacity:0; transition:opacity .2s ease; }
.ka-exp-saved.is-on{ opacity:1; color:var(--ka-ok); }