.char-count-display { margin-left: 0.4em; font-size: 0.85em; color: #a15c00; }
@media (prefers-color-scheme: dark) { .char-count-display { color: #e0a030; } }
html[data-theme="dark"] .char-count-display { color: #e0a030; }

/* Presenter email/invite widget — disabled rows should read as uneditable */
.mew-row-linked input[disabled] { background-color: #f0f0f0; color: #666; }
@media (prefers-color-scheme: dark) {
  .mew-row-linked input[disabled] { background-color: #2a2a2a; color: #999; }
}
html[data-theme="dark"] .mew-row-linked input[disabled] { background-color: #2a2a2a; color: #999; }

/* Header logo + view-site link */
#site-name { display: flex; align-items: center; }
.tr-brand-link { display: inline-flex; align-items: center; line-height: 1; }
.tr-header-logo {
  height: 32px;
  width: auto;
  display: block;
}
.tr-view-site {
  margin-left: 1rem;
  font-size: 0.78rem;
  color: var(--header-link-color, rgba(255,255,255,0.7));
  text-decoration: none;
  white-space: nowrap;
  line-height: 1;
}
.tr-view-site:hover { color: #fff; text-decoration: underline; }

/* Crop editor modal */
#tr-crop-modal { display: none; }
#tr-crop-modal.tr-crop-open { display: block; }
.tr-crop-backdrop {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.7);
  z-index: 9998;
}
.tr-crop-dialog {
  position: fixed; inset: 0;
  z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  padding: 1rem;
  pointer-events: none;
}
.tr-crop-box {
  background: #f8f8f8;
  border-radius: 4px;
  box-shadow: 0 4px 24px rgba(0,0,0,0.4);
  padding: 1rem;
  display: flex; flex-direction: column; gap: 0.75rem;
  max-width: min(90vw, 920px);
  width: 100%;
  pointer-events: all;
}
.tr-crop-stage {
  width: 100%;
  max-height: 65vh;
  background: #222;
  overflow: hidden;
}
.tr-crop-stage img { display: block; max-width: 100%; max-height: 65vh; }
.tr-crop-actions { display: flex; gap: 0.5rem; }
.tr-crop-cancel { background: #666 !important; }

/* Thumbnail preview after file selection */
.tr-crop-preview-wrap { display: flex; align-items: flex-start; gap: 0.5rem; margin-top: 0.5rem; }
.tr-crop-preview { max-width: 160px; max-height: 90px; display: block; border: 1px solid #ccc; }
.tr-crop-edit-btn { align-self: flex-end; }

/* Always show the nav sidebar — remove toggle-button dependency */
#toggle-nav-sidebar { display: none; }

.main > #nav-sidebar {
    visibility: visible;
    margin-left: 8px;
    margin-top: 8px;
    margin-bottom: 8px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    background-color: var(--darkened-bg);
}

/* Shift content to account for sidebar + margin */
.main > #nav-sidebar + .content {
    max-width: calc(100% - 292px);
}

/* Hide the filter input (kept in DOM so nav_sidebar.js doesn't error) */
#nav-filter { display: none; }

/* Remove alternating row stripes inside the nav sidebar */
#nav-sidebar tr {
    background: transparent;
}

/* Change form header: h1 and History button on one line */
.tr-change-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
}
.tr-change-header h1 {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 12px;
}
.tr-change-header ul.object-tools {
    float: none;
    margin: 0;
    position: static;
    flex-shrink: 0;
}

/* Episode status badges in the heading */
.tr-status {
    font-size: 0.55em;
    font-weight: 600;
    padding: 3px 9px;
    border-radius: 10px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    vertical-align: middle;
}
.tr-status--draft      { background: #e0e0e0; color: #555; }
.tr-status--scheduled  { background: #fff3cd; color: #7a5800; }
.tr-status--live       { background: #d4edda; color: #155724; }
.tr-status--hidden     { background: #f8d7da; color: #721c24; }
.tr-status--inactive   { background: #fde8c8; color: #7a4000; }
.tr-status--processing { background: #e3f0ff; color: #1565c0; }
.tr-status--publishing { background: #fff3e0; color: #e65100; }
.tr-status--ready      { background: #e8f5e9; color: #2e7d32; }
.tr-status--failed     { background: #f8d7da; color: #721c24; }

/* Frontpage-hero checkbox: Django's admin fieldset.html renders checkbox
   fields without the floated label column other fields get (.aligned label
   is 160px wide + 10px right padding = 170px before the control starts), so
   by default a checkbox+label sits flush left under the field labels
   instead of lining up with the other rows' controls. Indent to match. */
.form-row.field-frontpage_hero .checkbox-row {
    margin-left: 170px;
}

/* Short description widget */
.sdw-hidden { display: none; }
.sdw-panel { margin-top: 2px; }
.sdw-preview {
    min-height: 3.5em;
    padding: 0.45em 0.6em;
    background: var(--darkened-bg, #f8f8f8);
    border: 1px solid var(--border-color, #ccc);
    border-radius: 2px;
    color: #555;
    font-size: 0.9em;
    line-height: 1.45;
    white-space: pre-wrap;
    word-break: break-word;
}
.sdw-textarea { width: 100%; box-sizing: border-box; }
.sdw-footer {
    display: flex;
    align-items: center;
    gap: 1em;
    margin-top: 0.35em;
}
.sdw-count { font-size: 0.8em; color: #666; flex: 1; }
.sdw-override-btn { flex-shrink: 0; }
.sdw-reset-btn {
    flex-shrink: 0;
    background: none;
    border: none;
    color: #666;
    text-decoration: underline;
    cursor: pointer;
    font-size: 0.85em;
    padding: 0;
}
.sdw-reset-btn:hover { color: #333; }

/* Select2 dark-mode contrast (genres/presenters/keywords widgets — UAT 10.15).
   Select2 renders its own non-native markup (not <select>/<input>), so it
   doesn't pick up the browser's automatic dark styling that Django's
   color-scheme:dark declaration gives real form controls for free — it ships
   hardcoded light-theme colors instead. Re-pointing those at Django's own
   theme variables (already flipped correctly for light/dark/auto by
   dark_mode.css) makes it follow suit with no visible change in light mode.
   !important is needed, not just belt-and-braces: Django's change_form.html
   injects select2's own CSS via {{ media }} in the extrahead block, which
   renders after extrastyle (where this file is linked) — so at equal
   specificity select2's hardcoded colours load later and always win the
   cascade regardless of source order here. */
.select2-container--default .select2-selection--single {
    background-color: var(--body-bg) !important;
    border-color: var(--border-color) !important;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
    color: var(--body-fg) !important;
}
.select2-container--default .select2-selection--single .select2-selection__placeholder {
    color: var(--body-quiet-color) !important;
}
.select2-container--default .select2-selection--single .select2-selection__arrow b {
    border-color: var(--body-quiet-color) transparent transparent transparent !important;
}
.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
    border-color: transparent transparent var(--body-quiet-color) transparent !important;
}

.select2-container--default .select2-selection--multiple {
    background-color: var(--body-bg) !important;
    border-color: var(--border-color) !important;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice {
    background-color: var(--darkened-bg) !important;
    border-color: var(--border-color) !important;
    color: var(--body-fg) !important;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    color: var(--body-quiet-color) !important;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
    color: var(--body-loud-color) !important;
}
.select2-container--default.select2-container--focus .select2-selection--multiple {
    border-color: var(--body-quiet-color) !important;
}
.select2-container--default.select2-container--disabled .select2-selection--single,
.select2-container--default.select2-container--disabled .select2-selection--multiple {
    background-color: var(--darkened-bg) !important;
}

.select2-search__field {
    color: var(--body-fg) !important;
}
.select2-container--default .select2-search--dropdown .select2-search__field {
    background-color: var(--body-bg) !important;
    border-color: var(--border-color) !important;
}

.select2-dropdown {
    background-color: var(--body-bg) !important;
    border-color: var(--border-color) !important;
    color: var(--body-fg) !important;
}
.select2-container--default .select2-results__option {
    color: var(--body-fg) !important;
}
.select2-container--default .select2-results__option[aria-selected="true"] {
    background-color: var(--selected-bg) !important;
}
.select2-container--default .select2-results__option[aria-disabled="true"] {
    color: var(--body-quiet-color) !important;
}
.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: var(--primary) !important;
    color: var(--primary-fg) !important;
}

/* Hamburger button — hidden on desktop */
.tr-hamburger {
    display: none;
    flex-direction: column;
    justify-content: space-between;
    width: 24px;
    height: 18px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    margin-right: 14px;
    flex-shrink: 0;
}
.tr-hamburger span {
    display: block;
    height: 2px;
    width: 100%;
    background: var(--header-link-color, #fff);
    border-radius: 1px;
    transition: transform 0.2s ease, opacity 0.2s ease;
}
body.sidebar-open .tr-hamburger span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
body.sidebar-open .tr-hamburger span:nth-child(2) { opacity: 0; transform: scaleX(0); }
body.sidebar-open .tr-hamburger span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* Backdrop — created by JS, shown when sidebar is open on mobile */
.tr-mobile-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 200;
}
body.sidebar-open .tr-mobile-backdrop {
    display: block;
}

/* Mobile layout */
@media (max-width: 767px) {
    /* Show hamburger */
    .tr-hamburger {
        display: flex;
    }

    /* Override Django's display:none on the sidebar */
    #nav-sidebar {
        display: block;
        visibility: visible;
        position: fixed;
        top: 0;
        left: -270px;
        width: 260px;
        height: 100vh;
        height: 100dvh;
        z-index: 201;
        overflow-y: auto;
        margin: 0;
        border-radius: 0;
        border-right: 1px solid var(--border-color);
        background-color: var(--darkened-bg, #f8f8f8);
        transition: left 0.25s ease;
        padding-top: 1em;
    }
    body.sidebar-open #nav-sidebar {
        left: 0;
    }

    /* Content takes full width */
    .main > #nav-sidebar + .content {
        max-width: 100%;
    }

    /* Branding row: hamburger sits beside site name */
    #branding {
        display: flex;
        align-items: center;
        width: 100%;
    }
    #site-name {
        margin: 0;
    }

    /* Frontpage-hero checkbox (10.26): the 170px margin above compensates for
       the floated label column on desktop, but Django's own responsive.css
       collapses .aligned label to a full-width stacked row at this same
       breakpoint — that column no longer exists, so the fixed margin was
       shoving the checkbox off to the right with nothing to align to. */
    .form-row.field-frontpage_hero .checkbox-row {
        margin-left: 0;
    }
}