/* ==========================================================================
   Director dashboard. Only loaded styles for the #admin route — kept separate
   from components.css so the public site's styling stays easy to reason about.
   ========================================================================== */

/* ---------- Login ---------- */
.login-card{
  max-width:440px;padding:36px 32px;background:var(--bg-2);
  border:1px solid var(--line);border-radius:6px;margin-top:24px;
}
.login-error{color:var(--accent-text);font-size:13px;min-height:18px;margin:-8px 0 8px}

/* ---------- Dashboard shell ---------- */
.admin-section{max-width:1100px}
.admin-header{
  display:flex;justify-content:space-between;align-items:flex-start;
  gap:24px;flex-wrap:wrap;margin-bottom:32px;
}
.admin-header .section-title{font-size:48px;margin-bottom:0}
.admin-tabs{display:flex;gap:6px;border-bottom:1px solid var(--line);margin-bottom:32px;overflow-x:auto}
.adm-tab{
  background:transparent;border:none;color:var(--ink-dim);
  padding:12px 16px;font-family:var(--font-body);font-weight:500;font-size:14px;
  cursor:pointer;border-bottom:2px solid transparent;transition:all .15s;white-space:nowrap;
}
.adm-tab:hover{color:var(--ink)}
.adm-tab.on{color:var(--accent-text);border-bottom-color:var(--accent)}
.adm-pane{display:none}
.adm-pane.on{display:block}

.adm-toolbar{
  display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:24px;
  padding:16px;background:var(--bg-2);border:1px solid var(--line);border-radius:4px;
}
.adm-toolbar select{
  flex:1;min-width:180px;background:var(--bg-3);color:var(--ink);
  border:1px solid var(--line);padding:10px 14px;
  font-family:var(--font-body);font-size:13px;font-weight:600;border-radius:2px;
}
.adm-toolbar .push{margin-left:auto}
.adm-toolbar .hint{font-size:13px;color:var(--ink-dim);flex:1;margin:0}

/* ---------- Publish status ----------
   Replaces a coloured callout that explained the difference between saving and
   publishing. Edits now save themselves, so this reports which of two states
   the content is in and offers the one action that remains.

   Sticky, so Publish stays reachable however far down a tab you have scrolled. */
.admin-status{
  position:sticky;top:64px;z-index:20;
  display:flex;gap:20px;align-items:center;justify-content:space-between;
  flex-wrap:wrap;
  padding:14px 18px;margin-bottom:28px;
  background:var(--bg-2);border:1px solid var(--line);border-radius:4px;
}
.status-state{display:flex;gap:12px;align-items:flex-start;min-width:260px;flex:1}
.status-state strong{display:block;font-size:14px;font-weight:600;margin-bottom:2px}
.status-detail{display:block;font-size:12.5px;color:var(--ink-dim);line-height:1.5}
.status-actions{display:flex;gap:8px;flex-shrink:0}

/* Green when everything is live, amber while there is something to publish. */
.status-dot{
  width:8px;height:8px;border-radius:50%;flex-shrink:0;margin-top:6px;
  background:#5aa469;
}
.admin-status.is-dirty{border-color:var(--line-strong)}
.admin-status.is-dirty .status-dot{background:var(--accent-2)}

/* ---------- Episode rows ---------- */
.ep-row{
  display:grid;grid-template-columns:60px 1fr auto;gap:16px;align-items:center;
  padding:14px 18px;background:var(--bg-2);border:1px solid var(--line);
  border-radius:4px;margin-bottom:8px;
}
.ep-row .num{font-family:var(--font-display);font-weight:600;font-size:24px;color:var(--accent-text);text-align:center}
.ep-row .body h4{font-size:15px;font-weight:600;margin-bottom:4px}
.ep-row .body p{font-size:12px;color:var(--ink-dim)}
.ep-row .body .flag{
  color:var(--accent-text);font-size:10px;letter-spacing:.15em;
  text-transform:uppercase;margin-left:6px;
}
.ep-row .actions{display:flex;gap:6px}
.ep-row .actions button{
  background:var(--bg-3);border:1px solid var(--line);color:var(--ink);
  padding:6px 12px;font-size:11px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;
  cursor:pointer;border-radius:2px;transition:all .2s;
}
.ep-row .actions button:hover{border-color:var(--accent);color:var(--accent-text)}
.ep-row .actions .del:hover{border-color:var(--danger);color:var(--danger);background:rgba(157,19,19,.12)}

.ep-form{
  background:var(--bg-2);border:1px solid var(--accent);border-radius:4px;
  padding:24px;margin-bottom:16px;
}
.ep-form .form-grid{display:grid;grid-template-columns:120px 1fr 1fr;gap:14px;margin-bottom:14px}
.ep-form .form-grid .field{margin:0}
.ep-form .field.wide{margin-bottom:14px}
.ep-form .form-actions{display:flex;gap:10px;margin-top:14px}

/* ---------- Staff editor ---------- */
.staff-section-edit{background:var(--bg-2);border:1px solid var(--line);border-radius:4px;padding:20px;margin-bottom:16px}
.staff-section-edit-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;gap:10px}
.staff-section-edit-head input{
  flex:1;background:var(--bg-3);border:1px solid var(--line);
  padding:10px 14px;font-family:var(--font-display);font-weight:500;font-size:18px;
  color:var(--accent-text);border-radius:2px;
}
/* Photo, name, note, remove. Initials are derived from the name, so there is
   no field for them. */
.staff-edit-row{display:grid;grid-template-columns:60px 1.2fr 1fr auto;gap:8px;margin-bottom:6px;align-items:center}
.staff-edit-row input{
  background:var(--bg-3);border:1px solid var(--line);color:var(--ink);
  padding:8px 10px;font-size:13px;border-radius:2px;
}
.photo-initials{font-size:15px;font-weight:600;color:var(--ink-dim);letter-spacing:.02em}

/* Section reordering */
.reorder{display:flex;flex-direction:column;gap:2px;flex-shrink:0}
.reorder .move{
  background:var(--bg-3);border:1px solid var(--line);color:var(--ink);
  width:26px;height:17px;line-height:1;font-size:11px;cursor:pointer;border-radius:2px;
  display:flex;align-items:center;justify-content:center;
}
.reorder .move:hover:not(:disabled){border-color:var(--accent);color:var(--accent-text)}
.reorder .move:disabled{opacity:.3;cursor:default}

.compact-toggle{
  display:flex;align-items:center;gap:6px;flex-shrink:0;
  font-size:12px;color:var(--ink-dim);white-space:nowrap;cursor:pointer;
}
.staff-editor-actions{margin-top:20px}

/* Small delete buttons, shared by every editor. */
.del-btn{
  background:transparent;border:1px solid var(--line);color:var(--ink-dim);
  padding:6px 10px;font-size:11px;cursor:pointer;border-radius:2px;
}
.del-btn:hover{border-color:var(--danger);color:var(--danger)}

/* ---------- Photo upload widget ---------- */
.photo-upload{
  width:60px;height:60px;border-radius:6px;border:1px dashed var(--line);
  background:var(--bg-3) center/cover no-repeat;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;font-size:10px;color:var(--ink-dim);font-weight:600;
  letter-spacing:.05em;text-align:center;
  transition:all .2s;flex-shrink:0;position:relative;overflow:hidden;
}
.photo-upload:hover{border-color:var(--accent);color:var(--accent-text)}
.photo-upload.has-photo{border-style:solid;border-color:var(--accent)}
.photo-upload.has-photo .photo-label{
  position:absolute;inset:auto 0 0 0;background:rgba(0,0,0,.7);color:#fff;
  padding:3px;font-size:9px;text-transform:uppercase;letter-spacing:.1em;
}
.photo-input{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden;pointer-events:none}

/* ---------- Generic editor sections (achievements / advertising / contact / text) ---------- */
.editor-section{background:var(--bg-2);border:1px solid var(--line);border-radius:4px;padding:20px;margin-bottom:16px}
.editor-section-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;gap:10px;flex-wrap:wrap}
.editor-section-head h4{font-family:var(--font-display);font-weight:600;font-size:18px;color:var(--accent-text)}
.editor-section-head .year-input{
  flex:1;background:var(--bg-3);border:1px solid var(--line);color:var(--accent-text);
  padding:10px 14px;font-family:var(--font-display);font-weight:600;font-size:18px;border-radius:2px;
}
.editor-section .row{display:grid;grid-template-columns:1fr 1fr 120px auto;gap:8px;margin-bottom:6px;align-items:center}
.editor-section .row.director-row{grid-template-columns:60px 1fr 1fr 1fr auto}
.editor-section .row input{
  background:var(--bg-3);border:1px solid var(--line);color:var(--ink);
  padding:8px 10px;font-size:12px;border-radius:2px;width:100%;
}
.editor-field{margin-bottom:14px}
.editor-field.inline{display:flex;gap:8px;align-items:flex-start}
.editor-field.inline textarea{flex:1}
.editor-field label{
  display:block;font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink-dim);font-weight:600;margin-bottom:6px;
}
.editor-field input,.editor-field textarea{
  width:100%;background:var(--bg-3);border:1px solid var(--line);color:var(--ink);
  padding:10px 12px;font-family:var(--font-body);font-size:13px;border-radius:2px;
}
.editor-field textarea{min-height:90px;resize:vertical}
/* Award lists run long, and each line is one award. */
.editor-field textarea.award-lines{min-height:220px;font-size:12px;line-height:1.7}
.editor-card{border:1px solid var(--line);border-radius:4px;padding:14px;margin-bottom:10px}
.editor-card .checkbox{
  font-size:12px;color:var(--ink-dim);display:flex;gap:8px;align-items:center;
}

/* ---------- Settings pane ---------- */
.danger-zone{border-color:rgba(157,19,19,.5)}
.danger-zone .editor-section-head h4{color:var(--accent-text)}

/* ---------- Responsive ---------- */
@media (max-width:900px){
  .ep-form .form-grid{grid-template-columns:1fr}
  .staff-edit-row{grid-template-columns:60px 1fr;gap:6px}
  .staff-section-edit-head{flex-wrap:wrap}
  .editor-section .row,
  .editor-section .row.director-row{grid-template-columns:1fr}
}