/* ------------------------------------------------------------------
   Admin overrides. Loaded last, after style.css, so it wins without
   editing the theme file (which a theme update would overwrite).
   ------------------------------------------------------------------ */

/* Page headings sit directly on the page background - no white card.
   Only the card look is removed; the theme's own padding, margins and
   layout are left exactly as they were. */
.section .section-header {
    background-color: transparent;
    box-shadow: none;
    border: none;
    border-radius: 0;
}

/* Danger buttons - delete icons, "Deactive", remove-image - must read as red.
   style.css repaints .btn-danger with var(--theme-color), which makes every
   delete control the same colour as the primary actions. Put the red back
   (the theme's own #fc544b / #fb160a, from its earlier .btn-danger rule). */
.btn-danger,
.btn-danger.disabled {
    background-color: #fc544b !important;
    border-color: #fc544b !important;
    color: #fff !important;
}

.btn-danger:hover,
.btn-danger:focus,
.btn-danger:active,
.btn-danger.disabled:hover,
.btn-danger.disabled:focus,
.btn-danger.disabled:active {
    background-color: #fb160a !important;
    border-color: #fb160a !important;
    color: #fff !important;
}

/* Row actions should read at a glance: edit = blue, delete = red.
   Scoped to .edit-data so ordinary primary buttons (Submit, Save, Filter)
   keep following the configurable theme colour. #6777ef is the theme's
   own stock blue, so this stays inside the existing palette. */
.btn.edit-data,
.btn.edit-data.disabled {
    background-color: #6777ef !important;
    border-color: #6777ef !important;
    color: #fff !important;
}

.btn.edit-data:hover,
.btn.edit-data:focus,
.btn.edit-data:active,
.btn.edit-data.disabled:hover,
.btn.edit-data.disabled:focus,
.btn.edit-data.disabled:active {
    background-color: #4d5fe8 !important;
    border-color: #4d5fe8 !important;
    color: #fff !important;
}

/* Neutral badges - Deactive status, Not Distributed, and a question count that
   is not exactly 10. A deeper grey than Bootstrap's #6c757d so they read clearly
   against the light row, and calmer than badge-warning, which looks yellow and
   pulls more attention than these states deserve. Green stays the only colour
   that stands out. */
.badge.status-deactive,
.badge.status-neutral,
.badge.count-incomplete {
    background-color: #495057;
    color: #fff;
}

.badge.status-deactive.toggle-contest-status:hover {
    background-color: #343a40;
}

/* Prizes are out - the cell becomes a link to that contest's winners, in the
   same purple as the distribute action it replaces. */
.badge.winners-badge {
    background-color: #7e22ce;
    color: #fff;
}

.badge.winners-badge:hover,
.badge.winners-badge:focus {
    background-color: #6b21a8;
    color: #fff;
    text-decoration: none;
}

/* Prizes have already been distributed for this contest - the action is spent,
   so the button stays in place (keeping the row layout steady) but reads as
   dead. It is a <span>, not a link, so there is nothing to click through to. */
.btn.prize-distributed {
    background-color: #adb5bd !important;
    border-color: #adb5bd !important;
    color: #fff !important;
    opacity: .65;
    cursor: not-allowed;
    box-shadow: none !important;
}

/* Distribute-prize action - purple, matching the AI accent used elsewhere in
   the admin, so it reads as its own kind of action rather than another blue
   link. btn-info's hover carries !important in style.css, so these do too.
   The spent state keeps the grey .prize-distributed styling above. */
.btn.distribute-prize {
    background-color: #7e22ce !important;
    border-color: #7e22ce !important;
    color: #fff !important;
    box-shadow: 0 2px 6px rgba(126, 34, 206, .35) !important;
}

.btn.distribute-prize:hover,
.btn.distribute-prize:focus,
.btn.distribute-prize:active {
    background-color: #6b21a8 !important;
    border-color: #6b21a8 !important;
    color: #fff !important;
}

/* Scrollable modals whose body and footer are wrapped in a <form>.

   Bootstrap's .modal-dialog-scrollable rules target .modal-content > .modal-body
   directly. Our edit modals put a <form> in between, which breaks the flex chain:
   the body never gets a bounded height, so it never scrolls, the form grows to
   its full content height, and .modal-content's overflow:hidden clips whatever
   does not fit - taking the footer, and the Save button with it, off screen on
   short laptop displays.

   Making the form a flex column restores the intended behaviour: header and
   footer stay put, the body scrolls. min-height:0 is what actually lets the
   body shrink - without it a flex item refuses to go below its content size. */
.modal-dialog-scrollable .modal-content > form {
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}

.modal-dialog-scrollable .modal-content > form > .modal-body {
    overflow-y: auto;
    min-height: 0;
}