/* -------------------------------------------------------------------------------------------
   Media Day review (T08 / T08.5 / T09) - the mdr-* classes.

   MediaDayReview.razor and MediaDayPhotoCard.razor were written against these class names but
   no stylesheet ever defined them, so the screen rendered as unstyled HTML beside the rest of
   the portal. Nothing here is a new design: the palette, the radius, the shadow and the type
   face are the ones already used in app.css.

       brand green   #203b2a   headings, table head, emphasis
       amber         #e7a52f   primary action, active filter, attention rule
       pale amber    #fde8bc   secondary action, attention badge
       face          "Exo 2"   as the form controls

   Buttons are NOT restyled here. They use the house pair - .formBtnDefault with .addFormBtn or
   .cancelFromBtn - exactly as Dashboard.razor does. The only button rule below is a compact
   size variant, because .formBtnDefault is a fixed 162px wide and that is far too wide for a
   control sitting inside a table row.
   ------------------------------------------------------------------------------------------- */

/* --- In-row button variant --------------------------------------------------------------- */

/* .formBtnDefault is a fixed 162px, which is far too wide for a control inside a grid row.
   Only the width is relaxed: height, font size and the 2px offset shadow stay exactly as the
   house buttons have them, because shrinking those makes the hard shadow read as a rendering
   fault rather than as the house style. */
.mdr-btn-sm {
    width: auto;
    min-width: 0;
    padding: 0 16px;
}

.mdr-accept {
    min-width: 90px;
}

/* --- Shot type dropdown ---------------------------------------------------------------------
   Sits on the photograph card, in the line that used to read "Frame 3". Sized to the card
   rather than to a form: it is one line of a caption that happens to be changeable, and a
   full-height form control there would dominate the picture above it.

   Quiet also says something true about it. Setting a shot type publishes nothing and renames
   nobody, so it should not carry the weight of the controls that do. */
.mdr-shot-pick {
    width: 100%;
    max-width: 100%;
    height: 24px;
    padding: 0 4px;
    font-size: 12px;
    color: inherit;
    background: #fff;
    border: 1px solid #d8d8d8;
    border-radius: 3px;
    cursor: pointer;
}

.mdr-shot-pick:disabled {
    background: #f4f4f4;
    color: #666;
    cursor: default;
}

/* --- Text -------------------------------------------------------------------------------- */

.mdr-crumb {
    color: #6b7280;
    font-size: 18px;
    font-weight: 500;
}

.mdr-sub {
    display: block;
    color: #6b7280;
    font-family: "Exo 2", sans-serif;
    font-size: 12px;
    line-height: 1.45;
}

.mdr-strong {
    font-family: "Exo 2", sans-serif;
    font-weight: 700;
    color: #203b2a;
}

.mdr-team {
    color: #203b2a;
    font-size: 13px;
    font-weight: 600;
}

.mdr-empty {
    padding: 18px;
    text-align: center;
    color: #6b7280;
    font-size: 14px;
}

/* --- Badges ------------------------------------------------------------------------------ */

/* The words carry the meaning; colour is decoration on top, per MediaDayReviewLabels. */
.mdr-badge {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 999px;
    font-family: "Exo 2", sans-serif;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.7;
    white-space: nowrap;
}

.mdr-badge-ok {
    background: #d8efdd;
    color: #1c6b33;
}

.mdr-badge-attention {
    background: #fde8bc;
    color: #8a5a00;
}

/* A refusal, said in a sentence. Not a badge: a badge is a pill for one or two
   words and refuses to wrap, so a sentence in one runs off the side of its
   dialog - which is exactly what it did. */
.mdr-notice {
    display: block;
    padding: 10px 12px;
    border-radius: 6px;
    font-size: 13px;
    line-height: 1.5;
    white-space: normal;
    overflow-wrap: anywhere;
}

.mdr-notice-attention {
    background: #fde8bc;
    color: #8a5a00;
}

.mdr-badge-stop {
    background: #fadbdb;
    color: #a12525;
}

.mdr-badge-quiet {
    background: #eceff1;
    color: #4b5563;
}

/* --- Banners ----------------------------------------------------------------------------- */

.mdr-banner {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: baseline;
    padding: 10px 14px;
    border-radius: 6px;
    border-left: 4px solid #9ca3af;
    background: #f4f5f7;
    font-size: 14px;
}

.mdr-banner-label {
    font-weight: 700;
    text-transform: capitalize;
}

.mdr-banner-info {
    border-left-color: #2f6fae;
    background: #e8f1fa;
    color: #1d4f80;
}

.mdr-banner-warn {
    border-left-color: #e7a52f;
    background: #fdf3e0;
    color: #8a5a00;
}

.mdr-banner-error {
    border-left-color: #d05353;
    background: #fbeaea;
    color: #a12525;
}

/* --- Event table -------------------------------------------------------------------------- */

/* Wide content scrolls inside its own box rather than pushing the page sideways. */
.mdr-table-wrap {
    width: 100%;
    overflow-x: auto;
}

.mdr-table {
    width: 100%;
    border-collapse: collapse;
    font-family: "Exo 2", sans-serif;
    font-size: 14px;
}

.mdr-table thead th {
    background: #203b2a;
    color: #fff;
    text-align: left;
    text-transform: uppercase;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.03em;
    padding: 12px 14px;
    white-space: nowrap;
}

.mdr-table thead th:first-child {
    border-top-left-radius: 6px;
}

.mdr-table thead th:last-child {
    border-top-right-radius: 6px;
}

.mdr-table tbody td {
    padding: 12px 14px;
    border-bottom: 1px solid #e5e7eb;
    vertical-align: middle;
}

.mdr-table tbody tr:hover {
    background: #fafaf7;
}

/* --- Selected-event summary --------------------------------------------------------------- */

.mdr-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 26px;
    padding: 16px 18px;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    background: #fff;
}

.mdr-summary > div {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

/* --- Filters ------------------------------------------------------------------------------ */

.mdr-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.mdr-filter {
    padding: 6px 16px;
    border: 1px solid #d4d7db;
    border-radius: 999px;
    background: #fff;
    color: #374151;
    font-family: "Exo 2", sans-serif;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

.mdr-filter:hover {
    border-color: #e7a52f;
}

.mdr-filter-on {
    background: #e7a52f;
    border-color: #e7a52f;
    color: #000;
}

/* --- Team folders ------------------------------------------------------------------------- */

.mdr-folder {
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    background: #fff;
    overflow: hidden;
}

.mdr-folder-headrow {
    display: flex;
    align-items: stretch;
    border-bottom: 1px solid #e5e7eb;
}

.mdr-folder-headrow .mdr-folder-head {
    flex: 1 1 auto;
    border-bottom: 0;
}

/* Beside the heading rather than inside it: the heading is the expand control. */
.mdr-folder-team-btn {
    align-self: center;
    flex: 0 0 auto;
    margin-right: 16px;
    white-space: nowrap;
}

.mdr-folder-head {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 14px 16px;
    background: #f7f8f6;
    border: 0;
    border-bottom: 1px solid #e5e7eb;
    text-align: left;
    cursor: pointer;
}

.mdr-folder-head:hover {
    background: #f1f3ef;
}

.mdr-folder-title,
.mdr-folder-counts {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

.mdr-folder-counts {
    color: #6b7280;
    font-size: 13px;
}

.mdr-chevron {
    display: inline-block;
    width: 18px;
    color: #203b2a;
    font-weight: 700;
}

/* --- Player groups -------------------------------------------------------------------------- */

.mdr-group {
    padding: 14px 16px;
    border-bottom: 1px solid #eef0f2;
}

.mdr-group:last-child {
    border-bottom: 0;
}

/* Frames a person still has to place. Deliberately distinct from a resolved group. */
.mdr-group-ungrouped {
    background: #fffdf7;
    border-left: 4px solid #e7a52f;
}

.mdr-group-head {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    margin-bottom: 12px;
}

/* --- Photo cards ---------------------------------------------------------------------------- */

.mdr-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 14px;
}

.mdr-card {
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    background: #fff;
    overflow: hidden;
}

.mdr-thumb-button {
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    background: #f4f5f7;
    cursor: pointer;
    line-height: 0;
}

.mdr-thumb {
    display: block;
    width: 100%;
    height: 150px;
    object-fit: cover;
}

.mdr-thumb-missing {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 150px;
    color: #9ca3af;
    font-size: 12px;
    line-height: 1.4;
    text-align: center;
    padding: 0 8px;
}

.mdr-card-body {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    justify-content: space-between;
    padding: 8px 10px;
}

/* A card is about 145px wide and a badge keeps its words on one line, so a label a few
   characters too long grew wider than the card it sits in. In a wrapping row that is also
   centred, that pushed the file name and the shot-type control to the right and clipped the
   label itself against the card's hidden overflow - the card looked broken rather than the
   label looking long. Card badges wrap instead. Badges in the headers are untouched: they
   have a whole row to themselves and read better on one line. */
.mdr-card-body .mdr-badge {
    max-width: 100%;
    white-space: normal;
    text-align: center;
}

.mdr-card-name {
    font-family: "Exo 2", sans-serif;
    font-size: 12px;
    font-weight: 600;
    color: #203b2a;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}

/* --- Full-size preview ----------------------------------------------------------------------- */

.mdr-preview {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.mdr-preview-img {
    max-width: 100%;
    max-height: 78vh;
    object-fit: contain;
}

.mdr-dialog .e-dlg-content {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* --- Create-event panel ---------------------------------------------------------------------- */

.mdr-create {
    max-width: 620px;
    padding: 18px;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    background: #fff;
}

.mdr-create .tableHeader {
    font-size: 22px;
}

/* --- Review dialog ------------------------------------------------------------------------ */

/* The drill-down opens over the list, so its body scrolls rather than the page behind it. */
.mdr-review-dialog .e-dlg-content {
    overflow-y: auto;
}

/* --- Icon-only refresh control ------------------------------------------------------------ */

/* The SVG is a finished 42px amber tile, so the button is only a hit target. Both are pinned:
   in a flex row beside a full-width button the icon otherwise gets shrunk to a few pixels. */
.mdr-refresh {
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    padding: 0;
    border: 0;
    cursor: pointer;
    background: url("../images/refreshIcon.svg") no-repeat center;
    background-size: 42px 42px;
}

/* The Details heading icon on the create dialog, painted the same way. */
.mdr-detail-icon {
    display: inline-block;
    width: 28px;
    height: 21px;
    flex: 0 0 auto;
    background: url("../images/detailIcon.svg") no-repeat center;
    background-size: contain;
}

/* --- Create-event dialog form ------------------------------------------------------------- */

/* A single column. .addFormContentWrapper is a three-column grid sized for the long Candidates
   form; with four fields it puts the intro text and the buttons in their own columns, where
   the dialog clips them. Field rows keep the house .formLabelDivs / .formInput pair. */
.mdr-form {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 4px 8px 8px;
}

.mdr-form .CancelButtonDiv {
    margin-top: 24px;
}

/* --- Page header actions ------------------------------------------------------------------ */

/* The heading is what gives way when the row runs short, not the controls. Without this the
   flex row shrinks the button group and "Create Media Day Event" runs past the right edge. */
.mdr-actions {
    flex: 0 0 auto;
}

/* "Create Media Day Event" needs more than the fixed 162px .formBtnDefault allows. */
.mdr-btn-wide {
    width: auto;
    padding: 0 18px;
}

/* --- Dialog field rows -------------------------------------------------------------------- */

/* A fixed label column so every input starts on the same line. With justify-between each row
   sizes itself, so the long "Dropbox Shared Folder Link" label shoved its input out of line
   with the others. */
.mdr-field {
    display: grid;
    grid-template-columns: 270px minmax(0, 1fr);
    align-items: start;
    gap: 12px;
}

.mdr-field > .formLabelDivs {
    white-space: normal;
}

.mdr-field .formInput {
    width: 100%;
    max-width: 340px;
}

/* --- Grid template cells ------------------------------------------------------------------ */

/* Syncfusion wraps every template cell in an anonymous div with overflow:hidden, sized to the
   content exactly. That clips the 2px offset shadow the house buttons carry, so the Review and
   Process buttons lost their bottom and right edge. Only the wrapper is opened up; the cell
   itself keeps its own clipping for ellipsis. */
.mdr-grid-table .e-grid .e-rowcell > div:not(.content-wrapper),
.mdr-grid-table .e-grid .e-rowcell > div:not(.content-wrapper) > div {
    overflow: visible;
}

/* Room for the shadow to land in without the row growing. */
.mdr-grid-table .e-grid .e-rowcell {
    padding-bottom: 8px;
}

/* --- T10 player picker ----------------------------------------------------
   A list a person reads down and picks one of. Rows are the same height and
   the same shape whether or not a badge is present, so the eye can scan names
   rather than re-finding the column each row. */

.mdr-picker-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
    max-height: 320px;
    overflow-y: auto;
    border: 1px solid #e3e6e8;
    border-radius: 4px;
}

.mdr-picker-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    cursor: pointer;
    border-bottom: 1px solid #f1f3f4;
}

.mdr-picker-row:last-child {
    border-bottom: 0;
}

.mdr-picker-row:hover {
    background: #f7f9fa;
}

.mdr-picker-row.is-selected {
    background: #eef4f8;
}

/* The name is the thing being chosen, so it takes the row and pushes the
   supporting detail to the right rather than competing with it. */
.mdr-picker-name {
    flex: 1;
    font-weight: 600;
}

/* A squad can run to eighty children, so the search box is part of the picker
   rather than an affordance tucked away somewhere. */
.mdr-picker-search {
    width: 100%;
    padding: 8px 11px;
    margin-bottom: 8px;
    border: 1px solid #d7dcdf;
    border-radius: 4px;
    font-size: 14px;
}

.mdr-picker-search:focus {
    outline: 2px solid #7fa8c4;
    outline-offset: 1px;
    border-color: #7fa8c4;
}

.mdr-picker-count {
    margin: 0 0 6px;
}

.mdr-picker-tally {
    margin: 8px 0 0;
    font-weight: 600;
    opacity: .8;
}

.mdr-picker-row input[type="checkbox"] {
    width: 16px;
    height: 16px;
    cursor: pointer;
}

/* The checkbox sits over the thumbnail's corner rather than beside the card,
   so a grid of selected and unselected frames stays one grid. */
.mdr-card {
    position: relative;
}

.mdr-card-select {
    position: absolute;
    top: 6px;
    left: 6px;
    z-index: 5;
    background: rgba(255, 255, 255, .92);
    border-radius: 3px;
    padding: 2px 4px;
    line-height: 1;
    cursor: pointer;
}

.mdr-card.is-selected {
    outline: 2px solid #2c6f9b;
    outline-offset: 1px;
}

/* The section's own checkbox, first thing in its heading so it reads as the
   parent of the ticks below rather than another control in the row. */
.mdr-select-all {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    margin-right: 2px;
}

.mdr-select-all input {
    cursor: pointer;
}

/* --- Work in progress -------------------------------------------------------------------------
   A photoshoot runs for minutes on a server this screen cannot see. The spinner says the wait is
   expected; without it the row goes quiet at the moment work starts, which reads as finished. */
.mdr-working {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.mdr-spin {
    width: 11px;
    height: 11px;
    border: 2px solid #c9c9c9;
    border-top-color: #4a4a4a;
    border-radius: 50%;
    animation: mdr-spin 0.9s linear infinite;
}

@keyframes mdr-spin {
    to { transform: rotate(360deg); }
}

/* Honour a reader who has asked their system for less movement: the badge still says what is
   happening, it simply stops turning. */
@media (prefers-reduced-motion: reduce) {
    .mdr-spin { animation: none; }
}