/* ============================================================
   mis-crud.css — the editor-modal pattern

   The admin's content modals (org structure, team members, about
   photos, media library) all have the same shape: a form pane and a
   list of existing records, together in one dialog. Written straight
   against Bootstrap 3 they share the same four problems:

     1. The dialog grows past the viewport, so the Save button sits
        somewhere below the fold and the admin has to hunt for it.
     2. `.modal-body` does not scroll in BS3 — the whole `.modal` does
        — so every "scroll the form into view" call in the JS was
        animating a container with no overflow, and did nothing.
     3. Nothing on screen says whether Save will create a new row or
        overwrite the one being edited.
     4. Validation only ever reached the user as a toast in the
        corner, never as a mark on the field that is actually wrong.

   This file fixes all four structurally: `.mis-editor` turns the
   dialog into a flex column with a scrolling body and a pinned action
   bar, `.mis-pane` carries the mode, and `.mis-field-error` puts the
   message under the field. mis-crud.js drives them.

   Loaded from _LayoutAdmin.cshtml after mis-app.css, whose variables
   and control styling it builds on.
   ============================================================ */

/* ------------------------------------------------------------
   1. The dialog frame

   A modal this tall must scroll inside itself, not push the page.
   Flex column: header and action bar hold their height, the body
   takes the rest and scrolls. That also makes `.modal-body` a real
   scroll container, which is what the "jump to the form" behaviour
   needs.
   ------------------------------------------------------------ */
.mis-editor .modal-dialog {
    margin: 24px auto;
    /* The dialog must not exceed the viewport, or the flex body has no
       height to constrain and the footer stops being reachable. */
    max-height: calc(100vh - 48px);
}
.mis-editor .modal-content {
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 48px);
    overflow: hidden;
}
.mis-editor .modal-header,
.mis-editor .mis-ed-bar { flex: 0 0 auto; }
.mis-editor .modal-body {
    flex: 1 1 auto;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

/* The close control. mis-app.css already turns the red btn-danger these
   headers used to carry into a quiet ghost button, but it matches on
   [data-dismiss="modal"] — and an editor's close is [data-mis-close]
   instead, because it has to go through the unsaved-changes guard rather
   than let Bootstrap dismiss the dialog outright. Same look, same rule. */
.body-content .modal-header [data-mis-close] {
    background: transparent;
    border: 1.5px solid var(--mis-line);
    border-radius: 8px;
    box-shadow: none;
    color: var(--mis-muted);
    font-size: 13px;
    font-weight: 600;
    padding: 5px 12px;
}
.body-content .modal-header [data-mis-close]:hover,
.body-content .modal-header [data-mis-close]:focus {
    background: var(--mis-line-soft);
    border-color: #CBD5E1;
    color: var(--mis-ink);
    outline: none;
}

/* The header carries the dialog's subject, so give it room for a
   subtitle under the title rather than a bare bold line. */
.mis-editor .modal-header .mis-ed-sub {
    color: var(--mis-muted);
    display: block;
    font-size: 12.5px;
    font-weight: 400;
    line-height: 1.55;
    margin-top: 3px;
}
.mis-editor .modal-title .glyphicon { color: var(--mis-accent); margin-right: 6px; }

/* ------------------------------------------------------------
   2. The pinned action bar

   Save/Cancel live here, always visible, with the current mode
   spelled out beside them. This is the single biggest fix in the
   file: before it, "which button do I press, and will it overwrite
   the row I clicked Edit on?" had no answer without scrolling.
   ------------------------------------------------------------ */
.mis-ed-bar {
    align-items: center;
    background: var(--mis-surface);
    border-top: 1px solid var(--mis-line);
    box-shadow: 0 -2px 10px rgba(16, 24, 40, .05);
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: space-between;
    padding: 13px 20px;
}
.mis-ed-mode {
    align-items: center;
    color: var(--mis-muted);
    display: flex;
    flex: 1 1 220px;
    font-size: 13px;
    gap: 8px;
    line-height: 1.45;
    min-width: 0;
}
.mis-ed-mode .mis-ed-dot {
    background: var(--mis-accent);
    border-radius: 50%;
    flex: 0 0 auto;
    height: 8px;
    width: 8px;
}
.mis-ed-mode b { color: var(--mis-ink); font-weight: 600; }
/* Long record names must not push the buttons off the bar. */
.mis-ed-mode .mis-ed-subject {
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: bottom;
    white-space: nowrap;
}
.mis-ed-actions { display: flex; flex: 0 0 auto; gap: 8px; }
.mis-ed-actions .btn { min-width: 120px; }

/* Editing is a different, riskier operation than adding, so the bar
   says so in colour as well as in words. */
.mis-editor[data-mode="edit"] .mis-ed-bar { background: #FFFBF2; border-top-color: #F3DFB8; }
.mis-editor[data-mode="edit"] .mis-ed-mode .mis-ed-dot { background: var(--mis-warn-d); }

@media (max-width: 600px) {
    .mis-ed-bar { flex-direction: column; align-items: stretch; }
    .mis-ed-actions { flex-direction: column; }
    .mis-ed-actions .btn { width: 100%; }
}

/* A button mid-request: disabled, dimmed, and spinning, so a second
   click cannot create a second record. */
.btn.is-busy { cursor: progress; opacity: .75; pointer-events: none; }
.btn.is-busy > .glyphicon:first-child {
    animation: mis-spin .7s linear infinite;
}
.btn.is-busy > .glyphicon:first-child::before { content: "\e031"; }  /* glyphicon-refresh */
@keyframes mis-spin { to { transform: rotate(360deg); } }

/* ------------------------------------------------------------
   3. Panes

   Replaces the `.panel.panel-default` + six inline styles that each
   of these modals repeated. `data-mode` on the pane recolours the
   head, so the JS sets one attribute instead of four `.css()` calls.
   ------------------------------------------------------------ */
.mis-pane {
    background: var(--mis-surface);
    border: 1.5px solid var(--mis-line);
    border-radius: var(--mis-radius);
    margin-bottom: 18px;
    overflow: hidden;
}
.mis-pane:last-child { margin-bottom: 0; }
.mis-pane-head {
    align-items: center;
    background: var(--mis-accent-tint);
    border-bottom: 1.5px solid var(--mis-line);
    color: var(--mis-accent-dark);
    display: flex;
    flex-wrap: wrap;
    gap: 4px 10px;
    padding: 11px 16px;
}
.mis-pane-head .mis-pane-title {
    align-items: center;
    display: flex;
    flex: 1 1 auto;
    font-size: 14px;
    font-weight: 600;
    gap: 7px;
    min-width: 0;
}
.mis-pane-head .mis-pane-hint {
    color: #5A6B82;
    flex: 1 1 100%;
    font-size: 12.5px;
    font-weight: 400;
    line-height: 1.5;
}
.mis-pane-head .mis-pane-tools { flex: 0 0 auto; margin-left: auto; }
.mis-pane-body { padding: 16px; }

.mis-pane[data-mode="edit"] .mis-pane-head {
    background: #FFF6E6;
    border-bottom-color: #F3DFB8;
    color: #B4740A;
}
.mis-pane[data-mode="child"] .mis-pane-head {
    background: #EAF3FB;
    border-bottom-color: #C9DFF2;
    color: var(--mis-info-d);
}

/* A pane whose subject is switched off — the public registration setting on
   /manage-user-roles is the first of these. Separate from data-mode, which
   says what the form will do; this says what the setting currently is. */
.mis-pane[data-state="off"] .mis-pane-head {
    background: #FFF6E6;
    border-bottom-color: #F3DFB8;
    color: #B4740A;
}

/* ------------------------------------------------------------
   4. Inline validation

   The rule: the message goes under the field it belongs to, the
   field is outlined, and typing clears it. Toasts are for what the
   server says, not for what the form already knows.
   ------------------------------------------------------------ */
.mis-field-error {
    align-items: flex-start;
    color: var(--mis-danger-d);
    display: flex;
    font-size: 12.5px;
    gap: 5px;
    line-height: 1.5;
    margin-top: 5px;
}
.mis-field-error .glyphicon { font-size: 11px; margin-top: 2px; }
/* mis-app.css already outlines `.has-error .form-control`; this adds
   the cases it cannot reach — a radio group, and the photo well. */
.has-error .mis-photo-preview { border-color: var(--mis-danger); background: #FFFBFB; }
.has-error > label, .has-error .control-label { color: var(--mis-danger-d); }

.mis-req { color: var(--mis-danger-d); font-weight: 700; margin-left: 2px; }

/* A counter under a length-capped textarea, so "why did it stop
   typing" never happens silently. */
.mis-count { color: var(--mis-faint); font-size: 11.5px; text-align: right; }
.mis-count.is-near { color: var(--mis-warn-d); }
.mis-count.is-full { color: var(--mis-danger-d); font-weight: 600; }

/* ------------------------------------------------------------
   5. The photo field

   One widget, used identically by all three content modals: a
   preview that is also a drop target, then Choose / Upload / Remove.
   Before this, two of the three had no way to clear a photo at all.
   ------------------------------------------------------------ */
.mis-photo-preview {
    align-items: center;
    background: #FAFBFC;
    border: 1.5px dashed var(--mis-line);
    border-radius: var(--mis-radius-sm);
    color: var(--mis-faint);
    cursor: pointer;
    display: flex;
    justify-content: center;
    min-height: 168px;
    overflow: hidden;
    position: relative;
    text-align: center;
    transition: border-color .15s ease, background-color .15s ease;
}
.mis-photo-preview:hover { background: #fff; border-color: var(--mis-accent); color: var(--mis-muted); }
.mis-photo-preview.is-over { background: var(--mis-accent-tint); border-color: var(--mis-accent); border-style: solid; }
.mis-photo-preview img { display: block; height: 100%; object-fit: contain; width: 100%; }
.mis-photo-preview .mis-photo-hint { font-size: 12.5px; line-height: 1.6; padding: 14px; }
.mis-photo-preview .mis-photo-hint .glyphicon { display: block; font-size: 22px; margin-bottom: 7px; opacity: .65; }

/* Round variant — the org chart draws its avatars as circles, so the
   field should preview them the same way. */
.mis-photo-preview.mis-photo-round {
    border-radius: 50%;
    height: 96px;
    margin: 0 auto;
    min-height: 0;
    width: 96px;
}
.mis-photo-preview.mis-photo-round img { object-fit: cover; }
.mis-photo-preview.mis-photo-round .mis-photo-hint { font-size: 10.5px; padding: 6px; }
.mis-photo-preview.mis-photo-round .mis-photo-hint .glyphicon { font-size: 15px; margin-bottom: 3px; }

.mis-photo-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; }
.mis-photo-actions .btn { flex: 1 1 auto; }
/* The real file input is driven by the buttons above it — a native
   "Choose file / no file selected" next to them says nothing useful. */
.mis-photo-file { display: none; }

/* Upload progress, shown under the preview while bytes are moving. */
.mis-progress { background: var(--mis-line-soft); border-radius: 999px; height: 5px; margin-top: 9px; overflow: hidden; }
.mis-progress > span { background: var(--mis-accent); display: block; height: 100%; transition: width .15s ease; width: 0; }

/* ------------------------------------------------------------
   6. Media picker grid

   Thumbnails are <button>s, not <div>s: they were unreachable by
   keyboard and invisible to a screen reader. The selected one is
   marked, so reopening the picker shows what is already chosen.
   ------------------------------------------------------------ */
.mis-media-toolbar {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 14px;
}
.mis-media-toolbar .mis-media-search { flex: 1 1 220px; }
.mis-media-grid {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(auto-fill, minmax(136px, 1fr));
}
.mis-mthumb {
    background: #fff;
    border: 2px solid var(--mis-line);
    border-radius: 10px;
    cursor: pointer;
    display: block;
    line-height: 0;
    overflow: hidden;
    padding: 3px;
    position: relative;
    transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
    width: 100%;
}
.mis-mthumb:hover,
.mis-mthumb:focus {
    border-color: var(--mis-accent);
    box-shadow: 0 6px 16px rgba(16, 24, 40, .12);
    outline: none;
    transform: translateY(-2px);
}
.mis-mthumb img,
.mis-mthumb video { background: #0E2038; border-radius: 7px; display: block; height: 104px; object-fit: cover; width: 100%; }
.mis-mthumb .mis-mname {
    color: var(--mis-muted);
    font-size: 11px;
    line-height: 1.45;
    overflow: hidden;
    padding: 5px 3px 2px;
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.mis-mthumb.is-selected { border-color: var(--mis-accent); box-shadow: 0 0 0 3px rgba(var(--mis-accent-rgb), .18); }
.mis-mthumb.is-selected::after {
    background: var(--mis-accent);
    border-radius: 50%;
    color: #fff;
    content: "\e013";              /* glyphicon-ok */
    font-family: 'Glyphicons Halflings';
    font-size: 10px;
    height: 22px;
    left: 8px;
    line-height: 22px;
    position: absolute;
    text-align: center;
    top: 8px;
    width: 22px;
}
.mis-mthumb .mis-mvid {
    background: rgba(0, 0, 0, .62);
    border-radius: 4px;
    bottom: 30px;
    color: #fff;
    font-size: 10.5px;
    left: 8px;
    line-height: 1.5;
    padding: 1px 6px;
    position: absolute;
}
/* Per-tile Edit/Delete, revealed on hover or keyboard focus. */
.mis-mactions {
    background: rgba(0, 0, 0, .55);
    border-radius: 7px;
    display: none;
    gap: 3px;
    line-height: 1;
    padding: 3px;
    position: absolute;
    right: 7px;
    top: 7px;
}
.mis-mthumb:hover .mis-mactions,
.mis-mthumb:focus-within .mis-mactions { display: inline-flex; }
.mis-mactions button {
    background: transparent;
    border: 0;
    border-radius: 5px;
    color: #fff;
    cursor: pointer;
    font-size: 12px;
    padding: 4px 6px;
}
.mis-mactions button:hover { background: rgba(255, 255, 255, .2); }
.mis-mactions .mis-mdel:hover { background: var(--mis-danger); }

/* Drop a file anywhere on the picker body to upload it. */
.mis-dropzone {
    border: 1.5px dashed var(--mis-line);
    border-radius: var(--mis-radius-sm);
    color: var(--mis-muted);
    padding: 16px;
    text-align: center;
    transition: background-color .15s ease, border-color .15s ease;
}
.mis-dropzone.is-over { background: var(--mis-accent-tint); border-color: var(--mis-accent); border-style: solid; }
.mis-dropzone .glyphicon { color: var(--mis-accent); margin-right: 6px; }

/* ------------------------------------------------------------
   7. Segmented Published / Draft control

   Two radios styled as one switch. The inputs are still real radios
   — hidden visually, not removed — so arrow keys, tab order and
   screen readers behave exactly as they did.
   ------------------------------------------------------------ */
.mis-seg {
    background: var(--mis-line-soft);
    border: 1.5px solid var(--mis-line);
    border-radius: 9px;
    display: inline-flex;
    gap: 2px;
    padding: 3px;
}
.mis-seg > label {
    border-radius: 7px;
    color: var(--mis-muted);
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    margin: 0;
    padding: 5px 15px;
    transition: background-color .15s ease, color .15s ease, box-shadow .15s ease;
    user-select: none;
}
.mis-seg > label > input { clip: rect(0 0 0 0); height: 1px; overflow: hidden; position: absolute; width: 1px; }
.mis-seg > label:hover { color: var(--mis-ink); }
.mis-seg > label.is-on { background: #fff; box-shadow: var(--mis-shadow-in); color: var(--mis-ink); }
.mis-seg > label.is-on.mis-seg-ok { color: var(--mis-ok-d); }
.mis-seg > label > input:focus-visible + span { outline: 2px solid var(--mis-accent); outline-offset: 3px; }

/* ------------------------------------------------------------
   8. Record lists
   ------------------------------------------------------------ */
.mis-empty {
    color: var(--mis-muted);
    grid-column: 1 / -1;
    padding: 34px 20px;
    text-align: center;
}
.mis-empty .glyphicon { display: block; font-size: 26px; margin-bottom: 9px; opacity: .4; }

/* The row currently loaded into the form, so "what am I editing" is
   answerable from the list as well as from the action bar. */
.mis-editor table tbody tr.is-editing > td {
    background: #FFF8E8 !important;
    box-shadow: inset 3px 0 0 var(--mis-warn-d);
}

/* Drag handles — shared by the org and about-photo tables. */
.mis-drag-handle {
    color: #8FA5B8;
    cursor: grab;
    display: inline-block;
    margin-right: 6px;
    padding: 2px 3px;
    user-select: none;
}
.mis-drag-handle:hover { color: var(--mis-accent); }
.mis-drag-handle:active { color: var(--mis-accent); cursor: grabbing; }
.mis-editor table tbody tr.ui-sortable-helper {
    background: #fff;
    border: 1px solid var(--mis-accent);
    box-shadow: 0 10px 26px rgba(14, 32, 56, .16);
    display: table;
}
.mis-editor table tbody tr.mis-drag-placeholder {
    background: var(--mis-accent-tint);
    border: 1.5px dashed var(--mis-accent);
    height: 46px;
}

/* Row actions sit tight together and keep their icons aligned. */
.mis-row-actions { display: inline-flex; gap: 4px; white-space: nowrap; }

/* ------------------------------------------------------------
   9. Nested pickers

   A picker opened from inside an editor must stack above it. BS3
   gives both 1050, which puts the child behind the parent's backdrop.
   ------------------------------------------------------------ */
.mis-subdialog { z-index: 1060; }
.mis-subdialog + .modal-backdrop { z-index: 1055; }

/* A bootbox confirm opened from inside an editor has to clear both the
   editor and any picker above it. mis-crud.js adds the class when a
   bootbox opens over a modal that is already showing. */
.bootbox.mis-over-modal { z-index: 1090; }
.bootbox .modal-header { border-bottom: 1px solid var(--mis-line); }
.bootbox .modal-title { font-size: 15px; font-weight: 600; }
.bootbox .modal-footer .btn { min-width: 110px; }

@media (max-width: 767px) {
    .mis-editor .modal-dialog,
    .mis-editor .modal-content { max-height: 100vh; }
    .mis-editor .modal-dialog { margin: 0; }
    .mis-pane-body { padding: 13px; }
    .mis-ed-bar { padding: 11px 14px; }
}