/* ==========================================================================
   MIS Theme Layer – 27th MEU Manpower Information System
   Colour palette derived from the 27thMEU WCF forum theme.
   Change only this file to restyle the entire application.

   WCF source mappings (for reference):
     --wcfContentBackground          → rgba(50, 57, 71, 1)   = #323947
     --wcfButtonPrimaryBackground    → rgba(75, 123, 236, 1)  = #4b7bec
     --wcfButtonPrimaryBackgroundAct → rgba(56, 103, 214, 1)  = #3867d6
     --wcfContentLink                → rgba(75, 123, 236, 1)  = #4b7bec
     --wcfContentLinkActive          → rgba(235, 59, 90, 1)   = #eb3b5a
     --wcfContentText                → rgba(162, 171, 180, 1) = #a2abb4
     --wcfContentDimmedText          → rgba(162, 171, 180, .9)
   ========================================================================== */

:root {
    /* ------------------------------------------------------------------
       Typography
       ------------------------------------------------------------------ */
    --mis-font-family:       "Raleway", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --mis-font-size-base:    14px;
    --mis-font-size-sm:      12px;
    --mis-line-height:       1.5;
    --mis-font-weight-normal:   400;
    --mis-font-weight-semibold: 600;
    --mis-font-weight-bold:     700;

    /* ------------------------------------------------------------------
       Background layers (darkest → lightest)
       ------------------------------------------------------------------ */
    --mis-bg-canvas:   #1e2330;   /* page background                        */
    --mis-bg-surface:  #323947;   /* navbar, cards, panels [wcfContentBg]   */
    --mis-bg-elevated: #3d4758;   /* inputs, hover states                   */
    --mis-bg-overlay:  #2a3044;   /* weekday rows, section headers          */

    /* ------------------------------------------------------------------
       Borders & dividers
       ------------------------------------------------------------------ */
    --mis-border:       #404d60;  /* standard border                        */
    --mis-border-inner: #2d3547;  /* subtle inner separator                 */

    /* ------------------------------------------------------------------
       Text hierarchy
       ------------------------------------------------------------------ */
    --mis-text-primary:   #a2abb4;  /* body text, table cells  [wcfContentText]      */
    --mis-text-secondary: #7a8494;  /* table headers, nav links                      */
    --mis-text-muted:     #566071;  /* placeholders, timestamps                      */
    --mis-text-ghost:     #36404f;  /* out-of-month calendar days                    */

    /* ------------------------------------------------------------------
       Accent / interactive   [wcfContentLink / wcfButtonPrimary*]
       ------------------------------------------------------------------ */
    --mis-accent:              #4b7bec;              /* links, focus rings, hover */
    --mis-accent-solid:        #4b7bec;              /* primary buttons, selected */
    --mis-accent-solid-hover:  #3867d6;              /* primary button hover      */
    --mis-accent-focus-ring:   rgba(75, 123, 236, .25); /* focus box-shadow      */

    /* ------------------------------------------------------------------
       Status colours
       ------------------------------------------------------------------ */
    --mis-danger:  #eb3b5a;  /* [wcfContentLinkActive] error badges, danger */
    --mis-success: #20bf6b;  /* success / personnel category                */
    --mis-warning: #f7b731;  /* warning / other category                    */

    /* ------------------------------------------------------------------
       Component tokens (derived from primitives above)
       ------------------------------------------------------------------ */
    --mis-navbar-border:      var(--mis-border);
    --mis-sidebar-border:     var(--mis-border);
    --mis-card-bg:            var(--mis-bg-surface);
    --mis-card-border:        var(--mis-border);
    --mis-input-bg:           #19202c;
    --mis-input-border:       var(--mis-border);
    --mis-input-focus-border: var(--mis-accent);
    --mis-dropdown-bg:        var(--mis-bg-elevated);
    --mis-dropdown-border:    var(--mis-border);
    --mis-dropdown-hover-bg:  var(--mis-border);

    /* ------------------------------------------------------------------
       Layout
       ------------------------------------------------------------------ */
    --mis-topbar-height:      48px;
    --mis-sidebar-min-height: calc(100vh - 48px); /* kept for any template that uses it */
    --mis-radius-sm:   4px;
    --mis-radius-md:   6px;
    --mis-radius-lg:   8px;

    /* Multi-select tag border (slightly lighter than --mis-border) */
    --mis-tag-border:  #4f5e72;

    /* ------------------------------------------------------------------
       Elevation / 3-D shadows
       elevation-1 = subtle lift (cards, panels)
       elevation-2 = strong lift (modals, dropdowns)
       inset-1     = recessed surface (inputs, table cells)
       ------------------------------------------------------------------ */
    --mis-elevation-1: 0 1px 2px rgba(0,0,0,.35), 0 4px 20px rgba(0,0,0,.45);
    --mis-elevation-2: 0 4px 8px rgba(0,0,0,.45), 0 12px 40px rgba(0,0,0,.55);
    --mis-inset-1:     inset 0 2px 5px rgba(0,0,0,.45), inset 0 1px 2px rgba(0,0,0,.3);
    --mis-rim:         inset 0 1px 0 rgba(255,255,255,.06);

    /* ------------------------------------------------------------------
       Noise / grain texture
       SVG feTurbulence encoded as data URI – CSS-only, no external file.
       Applied as a second background-image layer on top of the solid colour.
       Adjust the last number in opacity='...' to taste (0.04 = very subtle).
       ------------------------------------------------------------------ */
    --mis-noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='250' height='250'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.80' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='250' height='250' filter='url(%23n)' opacity='0.07'/%3E%3C/svg%3E");
}

/* ── Landing Page ──────────────────────────────────────────────────────────── */

/* On the landing page the body has no padding-top so the hero extends to the
   top of the viewport and the transparent fixed navbar floats over it.  */
body.mis-page-landing                    { padding-top: 0 !important; }
body.mis-page-landing .container-fluid,
body.mis-page-landing .mis-main          { padding: 0 !important; }

/* Wiki pages: full-width sections but body keeps its navbar padding-top */
body.mis-page-wiki .container-fluid,
body.mis-page-wiki .mis-main { padding: 0 !important; }

.mis-wiki-header {
    padding: 1.5rem 3rem 1rem;
}

.mis-landing-hero {
    background-color: #1a1f2e;   /* fallback when no media */
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 450px;
    position: relative;
    overflow: hidden;
    padding-top: var(--mis-topbar-height);
}

/* Actual image / video element */
.mis-landing-hero-media {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 50%;
    z-index: 0;
    pointer-events: none;
}


/* Height variants */
.mis-landing-hero--sm   { min-height: 250px; }
.mis-landing-hero--md   { min-height: 450px; }
.mis-landing-hero--lg   { min-height: 650px; }
.mis-landing-hero--full { min-height: 100vh; }

.mis-landing-hero-inner {
    position: relative;
    z-index: 1;
    text-align: center;
    padding: 3rem 1.5rem;
    max-width: 820px;
    width: 100%;
}

.mis-landing-hero-title {
    color: #fff;
    font-size: 2.5rem;
    font-weight: 700;
    text-shadow: 0 2px 10px rgba(0,0,0,.65);
    margin-bottom: 1rem;
}

.mis-landing-hero-body {
    color: rgba(255,255,255,.9);
    font-size: 1.05rem;
    line-height: 1.65;
    text-shadow: 0 1px 5px rgba(0,0,0,.55);
}

/* Text / custom sections – NO card panels, plain text on page background */
.mis-landing-section {
    padding: 2.5rem 3rem;
}
.mis-landing-section + .mis-landing-section:not(.mis-section-has-panel) {
    border-top: 1px solid rgba(64, 77, 96, 0.22);
}

.mis-landing-section-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: #dde4ef;
    margin-bottom: 1rem;
}

.mis-landing-prose {
    color: var(--mis-text-primary);
    line-height: 1.75;
}

/* ── Quill output rendering (alignment, lists, code, blockquote) ─────────── */
/* Covers: text sections (.mis-landing-prose), hero (.mis-landing-hero-body),
   and custom sections (content directly inside .mis-landing-section)         */
.mis-ql .ql-align-center,
.mis-landing-prose .ql-align-center,
.mis-landing-hero-body .ql-align-center,
.mis-landing-section > .ql-align-center { text-align: center; }

.mis-ql .ql-align-right,
.mis-landing-prose .ql-align-right,
.mis-landing-hero-body .ql-align-right,
.mis-landing-section > .ql-align-right  { text-align: right; }

.mis-ql .ql-align-justify,
.mis-landing-prose .ql-align-justify,
.mis-landing-hero-body .ql-align-justify,
.mis-landing-section > .ql-align-justify { text-align: justify; }

.mis-ql .ql-indent-1,
.mis-landing-prose .ql-indent-1 { padding-left: 2em; }
.mis-ql .ql-indent-2,
.mis-landing-prose .ql-indent-2 { padding-left: 4em; }
.mis-ql .ql-indent-3,
.mis-landing-prose .ql-indent-3 { padding-left: 6em; }

.mis-landing-prose ol,
.mis-landing-prose ul { padding-left: 1.5em; margin: .5rem 0; }

.mis-landing-prose li { margin: .2rem 0; }

.mis-landing-prose blockquote,
.mis-landing-hero-body blockquote {
    border-left: 3px solid #4b5568;
    margin: .75rem 0;
    padding: .4rem 1rem;
    color: #8b949e;
    font-style: italic;
}

.mis-landing-prose pre,
.mis-landing-hero-body pre {
    background: #0d1117;
    border: 1px solid #30363d;
    border-radius: 4px;
    padding: .75rem 1rem;
    overflow-x: auto;
    font-size: 13px;
    line-height: 1.5;
}

.mis-landing-prose code,
.mis-landing-hero-body code {
    background: #1c2128;
    border-radius: 3px;
    padding: .1em .35em;
    font-size: 87%;
}

.mis-landing-prose a { color: #58a6ff; }
.mis-landing-prose a:hover { text-decoration: underline; }

.mis-landing-prose img,
.mis-landing-hero-body img { max-width: 100%; border-radius: 4px; }

.mis-landing-prose sub, .mis-landing-hero-body sub { vertical-align: sub; font-size: smaller; }
.mis-landing-prose sup, .mis-landing-hero-body sup { vertical-align: super; font-size: smaller; }

.mis-landing-prose iframe,
.mis-landing-hero-body iframe {
    max-width: 100%;
    border: none;
    border-radius: 4px;
    display: block;
    margin: .5rem auto;
    aspect-ratio: 16/9;
    width: 100%;
}

/* News cards */
.mis-news-card {
    background-color: var(--mis-bg-surface);
    border-color: var(--mis-border);
    color: var(--mis-text-primary);
    transition: transform .15s ease, box-shadow .15s ease;
}
.mis-news-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--mis-elevation-2);
    color: var(--mis-text-primary);
}
.mis-news-thumb {
    height: 180px;
    object-fit: cover;
}
.mis-news-thumb-placeholder {
    height: 180px;
    background-color: var(--mis-bg-overlay);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--mis-text-muted);
}
.mis-news-cat {
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--mis-accent);
    margin-bottom: .4rem;
}
.mis-news-title {
    font-size: .9rem;
    font-weight: 600;
    color: #c8d0dc;
}

/* Gallery – wrapper item (fixed height = all thumbnails identical) */
.mis-gallery-item {
    position: relative;
    display: block;
    overflow: hidden;
    border-radius: var(--mis-radius-md);
    background: var(--mis-bg-overlay);
    height: 190px;          /* fixed height on the container */
}
.mis-gallery-item:hover .mis-gallery-thumb { opacity: .82; }

/* Gallery – thumbnail fills container exactly */
.mis-gallery-thumb {
    width: 100%;
    height: 100%;           /* fill parent's 190 px */
    object-fit: cover;
    display: block;
    transition: opacity .18s;
}

/* Prose / inline images (text sections) – thumbnail strip, lightbox on click */
.mis-prose-img-wrap {
    display: inline-block;
    position: relative;
    overflow: hidden;
    border-radius: var(--mis-radius-md);
    vertical-align: top;
    margin: 3px 4px 4px 0;
    cursor: pointer;
    background: var(--mis-bg-overlay);
    /* fixed height so all images form a uniform strip */
    height: 220px;
    max-width: 100%;
}
.mis-prose-img-wrap img {
    /* strip any Quill inline dimensions – CSS controls the thumbnail size */
    display: block !important;
    width: auto !important;
    height: 100% !important;        /* fills the 220 px container */
    max-width: 520px !important;    /* cap very wide landscape images */
    min-width: 60px;
    object-fit: cover;
}
.mis-prose-img-wrap:hover img { opacity: .85; }
.mis-prose-img-wrap:hover .mis-gallery-zoom {
    background: rgba(75, 123, 236, .85);
    color: #fff;
}

/* Multiple prose images in a row wrap cleanly */
.mis-landing-prose { line-height: 1.75; }
.mis-landing-prose p:has(> .mis-prose-img-wrap) { display: flex; flex-wrap: wrap; gap: 4px; justify-content: center; }

/* Zoom badge – always visible, brightens on hover */
.mis-gallery-zoom {
    position: absolute;
    bottom: 7px;
    right: 7px;
    z-index: 2;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(0, 0, 0, .60);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255,255,255,.85);
    pointer-events: none;
    transition: background .18s, color .18s;
}
.mis-gallery-item:hover .mis-gallery-zoom {
    background: rgba(75, 123, 236, .85);
    color: #fff;
}

/* ── Landing section panel configuration classes ───────────────────────────── */

/* Background */
.mis-section-bg-surface  { background-color: var(--mis-bg-surface);  background-image: var(--mis-noise); background-size: 250px 250px; }
.mis-section-bg-elevated { background-color: var(--mis-bg-elevated); background-image: var(--mis-noise); background-size: 250px 250px; }
.mis-section-bg-overlay  { background-color: var(--mis-bg-overlay); }
.mis-section-bg-dark     { background-color: var(--mis-bg-canvas); }

/* Border */
.mis-section-border-subtle { border: 1px solid rgba(64, 77, 96, 0.38); }
.mis-section-border-solid  { border: 1px solid var(--mis-border); }
.mis-section-border-accent { border: 1px solid var(--mis-accent); }
.mis-section-border-danger { border: 1px solid var(--mis-danger); }

/* Shadow – uses !important to override any background rim */
.mis-section-shadow-sm { box-shadow: var(--mis-elevation-1), var(--mis-rim) !important; }
.mis-section-shadow-md { box-shadow: var(--mis-elevation-2), var(--mis-rim) !important; }

/* Border radius */
.mis-section-radius-sm { border-radius: var(--mis-radius-sm); }
.mis-section-radius-md { border-radius: var(--mis-radius-md); }
.mis-section-radius-lg { border-radius: var(--mis-radius-lg); }
.mis-section-radius-xl { border-radius: 12px; }

/* Panels with a background get a subtle top-light rim automatically */
[class*="mis-section-bg-"]:not(.mis-section-bg-none) {
    box-shadow: var(--mis-rim);
}

/* Visible panel → margin on all sides so it floats within the page */
.mis-section-has-panel {
    margin: 1.25rem 1.5rem;
}

/* ── Sticky footer + no horizontal overflow ────────────────────────────────── */
html {
    overflow-x: hidden;
}
body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    overflow-x: hidden;
    background-color: var(--mis-bg-canvas);
    background-image: var(--mis-noise);
    background-size: 250px 250px;
    background-attachment: fixed;
}

/* ── 3-D elevation ─────────────────────────────────────────────────────────── */

/* Raised surfaces (cards, panels, modals) */
.card,
.mis-notif-panel,
.mis-profile-panel,
.mis-navgroup-menu,
.fp-picker-overlay,
.ts-dropdown {
    box-shadow: var(--mis-elevation-1), var(--mis-rim);
}
.modal-content {
    box-shadow: var(--mis-elevation-2), var(--mis-rim);
}

/* Recessed surfaces (inputs, textareas, selects) */
.form-control,
.form-select,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="search"],
input[type="date"],
input[type="time"],
textarea {
    box-shadow: var(--mis-inset-1) !important;
    background-color: var(--mis-input-bg) !important;
    border-color: rgba(0,0,0,.35) !important;
}
.form-control:focus,
.form-select:focus {
    box-shadow: var(--mis-inset-1), 0 0 0 .2rem var(--mis-accent-focus-ring) !important;
    border-color: var(--mis-accent) !important;
}

/* Recessed table wrapper (the whole table area sinks in) */
.table-responsive,
.mis-table-wrap {
    border-radius: var(--mis-radius-md);
    box-shadow: var(--mis-inset-1);
    border: 1px solid rgba(0,0,0,.35);
    background-color: var(--mis-input-bg);
}

/* Surfaces – solid colour preserved; noise tiled on top.
   background shorthand in Bootstrap resets background-image,
   so we set both properties explicitly here. */
.mis-topbar      { background-color: rgba(14, 18, 28, 0.38) !important; background-image: var(--mis-noise) !important; background-size: 250px 250px; backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); }
.card            { background-color: var(--mis-bg-surface);             background-image: var(--mis-noise);            background-size: 250px 250px; }
.modal-content   { background-color: var(--mis-bg-surface);            background-image: var(--mis-noise);            background-size: 250px 250px; }
.mis-notif-panel { background-color: var(--mis-bg-surface);            background-image: var(--mis-noise);            background-size: 250px 250px; }
.mis-profile-panel { background-color: var(--mis-bg-surface);          background-image: var(--mis-noise);            background-size: 250px 250px; }
.mis-navgroup-menu { background-color: var(--mis-bg-surface) !important; background-image: var(--mis-noise) !important; background-size: 250px 250px; }
.fp-picker-overlay { background-color: var(--mis-bg-surface);          background-image: var(--mis-noise);            background-size: 250px 250px; }
.ts-dropdown     { background-color: var(--mis-bg-elevated) !important; background-image: var(--mis-noise) !important; background-size: 250px 250px; }

/* ── Responsive – Roster ───────────────────────────────────────────────────── */

/* Thin scroll container – no visual styling so it doesn't conflict with .card */
.roster-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* Search bar full-width on mobile */
@media (max-width: 767.98px) {
    #rosterSearch { max-width: 100% !important; }
}

/* Tablet (< 992px): hide Stabsrolle (4), CE (5), Quartier (9) */
@media (max-width: 991.98px) {
    #rosterTable th:nth-child(4), #rosterTable td:nth-child(4),
    #rosterTable th:nth-child(5), #rosterTable td:nth-child(5),
    #rosterTable th:nth-child(9), #rosterTable td:nth-child(9) { display: none; }
}
/* Small tablet / large phone (< 768px): also hide Verband (6), Einheit (7) */
@media (max-width: 767.98px) {
    #rosterTable th:nth-child(6), #rosterTable td:nth-child(6),
    #rosterTable th:nth-child(7), #rosterTable td:nth-child(7) { display: none; }
}
/* Phone portrait (< 576px): also hide Pers.Nr. (1), Teileinheit (8) */
@media (max-width: 575.98px) {
    #rosterTable th:nth-child(1), #rosterTable td:nth-child(1),
    #rosterTable th:nth-child(8), #rosterTable td:nth-child(8) { display: none; }
}

/* ── Responsive – After Action Report ─────────────────────────────────────── */

@media (max-width: 767.98px) {
    /* Add-member select and callsign input go full-width */
    #aar-add-member-sel  { max-width: 100% !important; }
    .add-unit-callsign   { max-width: 100% !important; }
}

/* ── Member detail page: panels + tables = canvas / "Dark" colour ─────────── */
.mis-member-detail-wrap .card {
    background-color: var(--mis-bg-canvas) !important;
    background-image: none !important;
    border: 1px solid var(--mis-border);
}
/* Override Bootstrap table-dark cell backgrounds inside those cards */
.mis-member-detail-wrap .table-dark {
    --bs-table-bg:        var(--mis-bg-canvas);
    --bs-table-border-color: var(--mis-border-inner);
    --bs-table-striped-bg: var(--mis-bg-canvas);
    --bs-table-hover-bg:  var(--mis-bg-overlay);
    --bs-table-active-bg: var(--mis-bg-overlay);
}
.mis-member-detail-wrap .table-dark > :not(caption) > * > * {
    background-color: var(--mis-bg-canvas) !important;
    border-bottom-color: var(--mis-border-inner) !important;
}