/*
 * Miarto Studio – Portfolio
 *
 * Archiv, Karten, Filter, View-Toggle, Detailseite, Ähnliche Projekte.
 */

/* ============================================================
 * ARCHIV-HEADER
 * ============================================================ */

.ms-archive-header {
    background:    var(--ms-surface);
    padding:       var(--ms-space-16) 0 var(--ms-space-12);
    text-align:    center;
    border-bottom: 1px solid var(--ms-border);
    margin-bottom: var(--ms-space-10);
}

.ms-archive-header__title {
    margin-bottom: 0;
}

/* ============================================================
 * TOOLBAR: FILTER + VIEW-TOGGLE
 * ============================================================ */

.ms-portfolio-toolbar {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    gap:             var(--ms-space-4);
    flex-wrap:       wrap;
    margin-bottom:   var(--ms-space-8);
    padding-bottom:  var(--ms-space-6);
    border-bottom:   1px solid var(--ms-border);
}

/* Filter-Buttons */

.ms-portfolio-filter {
    display:   flex;
    flex-wrap: wrap;
    gap:       var(--ms-space-2);
}

.ms-filter-btn {
    display:         inline-flex;
    align-items:     center;
    padding:         var(--ms-space-2) var(--ms-space-4);
    font-family:     var(--ms-font-body);
    font-size:       0.8125rem;
    font-weight:     600;
    letter-spacing:  0.06em;
    text-transform:  uppercase;
    color:           var(--ms-text-subtle);
    text-decoration: none;
    border:          1px solid var(--ms-border);
    border-radius:   var(--ms-radius-xl);
    background:      transparent;
    transition:      color var(--ms-transition),
                     background var(--ms-transition),
                     border-color var(--ms-transition);
}

.ms-filter-btn:hover {
    color:        var(--ms-text);
    border-color: var(--ms-text);
    background:   transparent;
}

.ms-filter-btn.is-active {
    background:   var(--ms-color-anthracite);
    color:        var(--ms-color-white);
    border-color: var(--ms-color-anthracite);
}

/* View-Toggle */

.ms-view-toggle {
    display: flex;
    gap:     var(--ms-space-1);
}

.ms-view-btn {
    display:          flex;
    align-items:      center;
    justify-content:  center;
    width:            36px;
    height:           36px;
    background:       none;
    border:           1px solid var(--ms-border);
    border-radius:    var(--ms-radius-sm);
    color:            var(--ms-text-subtle);
    cursor:           pointer;
    transition:       color var(--ms-transition),
                      background var(--ms-transition),
                      border-color var(--ms-transition);
}

.ms-view-btn:hover,
.ms-view-btn.is-active,
.ms-view-btn[aria-pressed="true"] {
    color:        var(--ms-text);
    background:   var(--ms-surface);
    border-color: var(--ms-text);
}

/* ============================================================
 * PORTFOLIO-GRID (Grid-Ansicht)
 * ============================================================ */

.ms-portfolio-grid--grid {
    display:               grid;
    grid-template-columns: repeat( auto-fill, minmax( 300px, 1fr ) );
    gap:                   var(--ms-space-5);
}

/* ============================================================
 * PORTFOLIO-GRID (Masonry-Ansicht)
 * ============================================================ */

.ms-portfolio-grid--masonry {
    columns:    3 280px;
    gap:        var(--ms-space-5);
    display:    block;
}

.ms-portfolio-grid--masonry .ms-portfolio-card {
    break-inside:  avoid;
    margin-bottom: var(--ms-space-5);
    display:       block;
}

/* ============================================================
 * PORTFOLIO-KARTE
 * ============================================================ */

.ms-portfolio-card {
    position:      relative;
    border-radius: var(--ms-radius-lg);
    overflow:      hidden;
    background:    var(--ms-surface);
}

.ms-portfolio-card__link {
    display: block;
}

.ms-portfolio-card__image {
    position:    relative;
    overflow:    hidden;
    aspect-ratio: 4 / 3;
}

.ms-portfolio-grid--masonry .ms-portfolio-card__image {
    aspect-ratio: unset;
}

.ms-portfolio-card__image img {
    display:     block;
    width:       100%;
    height:      100%;
    object-fit:  cover;
    transition:  transform 0.5s ease, filter 0.4s ease;
}

.ms-portfolio-grid--masonry .ms-portfolio-card__image img {
    height: auto;
}

.ms-portfolio-card:hover .ms-portfolio-card__image img {
    transform: scale( 1.05 );
}

.ms-portfolio-card__placeholder {
    width:      100%;
    aspect-ratio: 4 / 3;
    background: linear-gradient( 135deg, var(--ms-color-anthracite), var(--ms-color-gold-dark) );
}

/* Overlay */

.ms-portfolio-card__overlay {
    position:       absolute;
    inset:          0;
    background:     linear-gradient( to top, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0.1) 60%, transparent 100% );
    display:        flex;
    flex-direction: column;
    justify-content: flex-end;
    padding:        var(--ms-space-5);
    opacity:        0;
    transition:     opacity var(--ms-transition);
}

.ms-portfolio-card:hover .ms-portfolio-card__overlay,
.ms-portfolio-card:focus-within .ms-portfolio-card__overlay {
    opacity: 1;
}

.ms-portfolio-card__cat {
    font-size:      0.6875rem;
    font-weight:    700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color:          var(--ms-color-gold);
    margin-bottom:  var(--ms-space-2);
}

.ms-portfolio-card__title {
    font-family:   var(--ms-font-heading);
    font-size:     1.125rem;
    color:         var(--ms-color-white);
    margin:        0 0 var(--ms-space-2);
    line-height:   1.3;
}

.ms-portfolio-card__excerpt {
    font-size:  0.8125rem;
    color:      rgba( 255, 255, 255, 0.75 );
    margin:     0;
    line-height: 1.5;

    /* Maximal 2 Zeilen */
    display:            -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow:           hidden;
}

/* ============================================================
 * PAGINATION
 * ============================================================ */

.ms-pagination {
    margin-top: var(--ms-space-12);
    text-align: center;
}

.ms-pagination .nav-links {
    display:   inline-flex;
    gap:       var(--ms-space-2);
    flex-wrap: wrap;
    justify-content: center;
}

.ms-pagination .page-numbers {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    min-width:       40px;
    height:          40px;
    padding:         0 var(--ms-space-3);
    border:          1px solid var(--ms-border);
    border-radius:   var(--ms-radius-sm);
    color:           var(--ms-text);
    text-decoration: none;
    font-size:       0.9375rem;
    font-weight:     500;
    transition:      background var(--ms-transition), border-color var(--ms-transition);
}

.ms-pagination .page-numbers:hover {
    background:   var(--ms-surface);
    border-color: var(--ms-text);
}

.ms-pagination .page-numbers.current {
    background:   var(--ms-color-anthracite);
    border-color: var(--ms-color-anthracite);
    color:        var(--ms-color-white);
}

.ms-pagination .page-numbers.dots {
    border-color: transparent;
    background:   transparent;
}

/* ============================================================
 * KEIN ERGEBNIS
 * ============================================================ */

.ms-no-results {
    text-align: center;
    padding:    var(--ms-space-20) 0;
    color:      var(--ms-text-subtle);
}

/* ============================================================
 * DETAIL-SEITE
 * ============================================================ */

/* --- Konfigurierbarer Hero-Bereich (Featured Image, full-bleed) --- */

.ms-pf-hero {
    position:     relative;
    overflow:     hidden;
    width:        100%;
    aspect-ratio: 16 / 7;
    background:   var(--ms-color-anthracite);
}

.ms-pf-hero--medium { aspect-ratio: auto; height: 60vh; }
.ms-pf-hero--full   { aspect-ratio: auto; height: 95vh; }

.ms-pf-hero__img {
    display:    block;
    width:      100%;
    height:     100%;
    object-fit: cover;
}

.ms-pf-hero__overlay {
    position:       absolute;
    inset:          0;
    pointer-events: none;
}

.ms-pf-hero__overlay--light  { background: rgba(0, 0, 0, .25); }
.ms-pf-hero__overlay--medium { background: rgba(0, 0, 0, .50); }
.ms-pf-hero__overlay--dark   { background: rgba(0, 0, 0, .75); }

.ms-pf-hero__content {
    position:       absolute;
    bottom:         0;
    left:           0;
    right:          0;
    padding:        var(--ms-space-8) var(--ms-space-10);
    display:        flex;
    flex-direction: column;
    background:     linear-gradient( to top, rgba(0, 0, 0, .55) 0%, transparent 100% );
}

.ms-pf-hero__content--left   { align-items: flex-start; text-align: left; }
.ms-pf-hero__content--center { align-items: center;     text-align: center; }
.ms-pf-hero__content--right  { align-items: flex-end;   text-align: right; }

.ms-pf-hero__intro {
    margin:      0;
    font-family: var(--ms-font-heading);
    font-size:   var(--ms-font-size-xl);
    font-style:  italic;
    color:       #fff;
    text-shadow: 0 1px 4px rgba(0, 0, 0, .5);
    max-width:   60ch;
}

@media ( max-width: 700px ) {
    .ms-pf-hero__content {
        padding: var(--ms-space-6) var(--ms-space-4);
    }
    .ms-pf-hero__intro {
        font-size: var(--ms-font-size-lg);
    }
}

.ms-portfolio-hero {
    max-height:  70vh;
    overflow:    hidden;
    background:  var(--ms-color-anthracite);
}

.ms-portfolio-hero__img {
    display:     block;
    width:       100%;
    height:      100%;
    max-height:  70vh;
    object-fit:  cover;
}

/* Portfolio-Header: Kategorie + Titel + Excerpt */
.ms-single-portfolio__header {
    padding: var(--ms-space-10) 0 var(--ms-space-6);
}

/* Linke Hauptspalte: Galerie + optionaler Text */
.ms-single-portfolio__main {
    min-width: 0;
}

/* Galerie-Sektion innerhalb des Layouts */
.ms-portfolio-gallery-section {
    margin-bottom: var(--ms-space-8);
}

.ms-single-portfolio {
    padding-bottom: var(--ms-space-16);
}

.ms-single-portfolio__layout {
    display:     grid;
    grid-template-columns: 1fr 280px;
    gap:         var(--ms-space-12);
    align-items: start;
    padding-top: var(--ms-space-12);
}

.ms-single-portfolio__cat {
    text-decoration: none;
}

.ms-single-portfolio__title {
    margin-bottom: var(--ms-space-5);
}

.ms-single-portfolio__lead {
    margin-bottom: var(--ms-space-8);
}

/* Meta-Sidebar */

.ms-single-portfolio__meta {
    position: sticky;
    top:      calc( var(--ms-header-height) + var(--ms-space-6) );
}

.ms-meta-list {
    margin:        0 0 var(--ms-space-8);
    padding:       var(--ms-space-6);
    background:    var(--ms-surface);
    border-radius: var(--ms-radius-md);
}

.ms-meta-list dt {
    font-size:      0.75rem;
    font-weight:    700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color:          var(--ms-text-subtle);
    margin-bottom:  var(--ms-space-2);
}

.ms-meta-list dd {
    margin:        0 0 var(--ms-space-5);
    display:       flex;
    gap:           var(--ms-space-2);
    flex-wrap:     wrap;
}

.ms-meta-list dd:last-child {
    margin-bottom: 0;
}

.ms-single-portfolio__back {
    width: 100%;
    justify-content: center;
}

/* Prev / Next Navigation */

.ms-post-nav {
    display:    grid;
    grid-template-columns: 1fr 1fr;
    gap:        var(--ms-space-4);
    margin-top: var(--ms-space-12);
    padding-top: var(--ms-space-8);
    border-top:  1px solid var(--ms-border);
}

.ms-post-nav__link {
    display:         flex;
    flex-direction:  column;
    gap:             var(--ms-space-2);
    text-decoration: none;
    padding:         var(--ms-space-5);
    background:      var(--ms-surface);
    border-radius:   var(--ms-radius-md);
    transition:      background var(--ms-transition);
}

.ms-post-nav__link:hover {
    background: var(--ms-border);
}

.ms-post-nav__link--next {
    text-align: right;
}

.ms-post-nav__label {
    font-size:      0.75rem;
    font-weight:    700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color:          var(--ms-text-subtle);
}

.ms-post-nav__title {
    font-family: var(--ms-font-heading);
    font-size:   1rem;
    color:       var(--ms-text);
    font-weight: 700;
}

/* Ähnliche Projekte */

.ms-related {
    padding-top:    var(--ms-space-16);
    padding-bottom: var(--ms-space-16);
    margin-top:     var(--ms-space-16);
}

/* ============================================================
 * RESPONSIVE
 * ============================================================ */

@media ( max-width: 900px ) {
    .ms-single-portfolio__layout {
        grid-template-columns: 1fr;
    }

    .ms-single-portfolio__meta {
        position: static;
        order:    -1;
    }

    .ms-portfolio-grid--masonry {
        columns: 2 220px;
    }
}

@media ( max-width: 600px ) {
    .ms-portfolio-toolbar {
        flex-direction: column;
        align-items:    flex-start;
    }

    .ms-portfolio-grid--grid,
    .ms-portfolio-grid--masonry {
        grid-template-columns: 1fr;
        columns: 1;
    }

    .ms-post-nav {
        grid-template-columns: 1fr;
    }
}

/* ============================================================
 * SPALTEN-VARIANTEN
 * ============================================================ */

.ms-portfolio-grid--cols-2 {
    grid-template-columns: repeat( 2, 1fr );
}

.ms-portfolio-grid--cols-3 {
    grid-template-columns: repeat( 3, 1fr );
}

.ms-portfolio-grid--cols-4 {
    grid-template-columns: repeat( 4, 1fr );
}

@media ( max-width: 1100px ) {
    .ms-portfolio-grid--cols-4 {
        grid-template-columns: repeat( 3, 1fr );
    }
}

@media ( max-width: 800px ) {
    .ms-portfolio-grid--cols-3,
    .ms-portfolio-grid--cols-4 {
        grid-template-columns: repeat( 2, 1fr );
    }
}

@media ( max-width: 540px ) {
    .ms-portfolio-grid--cols-2,
    .ms-portfolio-grid--cols-3,
    .ms-portfolio-grid--cols-4 {
        grid-template-columns: 1fr;
    }
}

/* ============================================================
 * HOVER-EFFEKTE
 * ============================================================ */

/* Lift: Karte hebt sich, kein Bild-Zoom */
.ms-hover--lift .ms-portfolio-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.ms-hover--lift .ms-portfolio-card:hover {
    transform:  translateY( -8px );
    box-shadow: 0 20px 48px rgba( 0, 0, 0, 0.22 );
}

.ms-hover--lift .ms-portfolio-card:hover .ms-portfolio-card__image img {
    transform: none;
}

/* Blur: Bild weichgezeichnet, Overlay eingeblendet */
.ms-hover--blur .ms-portfolio-card:hover .ms-portfolio-card__image img {
    transform: scale( 1.02 );
    filter:    blur( 4px ) brightness( 0.8 );
}

/* Fade: nur Overlay, kein Bild-Zoom */
.ms-hover--fade .ms-portfolio-card:hover .ms-portfolio-card__image img {
    transform: none;
}

/* None: kein Effekt – Overlay + Zoom deaktiviert */
.ms-hover--none .ms-portfolio-card:hover .ms-portfolio-card__image img {
    transform: none;
}

.ms-hover--none .ms-portfolio-card:hover .ms-portfolio-card__overlay,
.ms-hover--none .ms-portfolio-card:focus-within .ms-portfolio-card__overlay {
    opacity: 0;
}

/* ============================================================
 * TOOLBAR: RECHTE SEITE (Jahr-Filter + View-Toggle)
 * ============================================================ */

.ms-portfolio-toolbar__right {
    display:     flex;
    align-items: center;
    gap:         var(--ms-space-3);
}

.ms-year-filter {
    display:   flex;
    flex-wrap: wrap;
    gap:       var(--ms-space-1);
}

.ms-year-btn {
    display:         inline-flex;
    align-items:     center;
    padding:         var(--ms-space-1) var(--ms-space-3);
    font-family:     var(--ms-font-body);
    font-size:       0.75rem;
    font-weight:     600;
    letter-spacing:  0.06em;
    color:           var(--ms-text-subtle);
    border:          1px solid var(--ms-border);
    border-radius:   var(--ms-radius-xl);
    background:      transparent;
    cursor:          pointer;
    transition:      color var(--ms-transition),
                     background var(--ms-transition),
                     border-color var(--ms-transition);
}

.ms-year-btn:hover {
    color:        var(--ms-text);
    border-color: var(--ms-text);
}

.ms-year-btn.is-active {
    background:   var(--ms-color-gold-dark);
    color:        var(--ms-color-white);
    border-color: var(--ms-color-gold-dark);
}

/* ============================================================
 * LOAD-MORE-BUTTON
 * ============================================================ */

.ms-load-more-wrap {
    text-align:  center;
    margin-top:  var(--ms-space-10);
}

.ms-portfolio-card[hidden] {
    display: none !important;
}

/* ============================================================
 * DETAIL-SEITE: LAYOUTS
 * ============================================================ */

/* Sidebar links */
.ms-single-portfolio__layout--sidebar-left {
    display:               grid;
    grid-template-columns: 280px 1fr;
    gap:                   var(--ms-space-12);
    align-items:           start;
    padding-top:           var(--ms-space-12);
}

.ms-single-portfolio__layout--sidebar-left .ms-single-portfolio__meta {
    order: -1;
}

/* Volle Breite */
.ms-single-portfolio__layout--full-width {
    display:    block;
    padding-top: var(--ms-space-12);
}

.ms-single-portfolio__layout--full-width .ms-single-portfolio__meta {
    display:               grid;
    grid-template-columns: repeat( auto-fill, minmax( 200px, 1fr ) );
    gap:                   var(--ms-space-4);
    margin-top:            var(--ms-space-10);
    position:              static;
}

.ms-single-portfolio__layout--full-width .ms-meta-list {
    display:               grid;
    grid-template-columns: repeat( auto-fill, minmax( 160px, 1fr ) );
    gap:                   var(--ms-space-2) var(--ms-space-6);
    margin:                0;
}

/* Galerie zuerst */
.ms-portfolio-hero--inline {
    margin:        var(--ms-space-8) 0;
    border-radius: var(--ms-radius-md);
    overflow:      hidden;
    max-height:    65vh;
}

/* Ausrüstungs-Feld */
.ms-meta-list__equipment {
    font-size:   0.875rem;
    line-height: 1.7;
    white-space: pre-wrap;
}

/* ============================================================
 * PORTFOLIO-NAVIGATION (nav.php)
 * ============================================================ */

.ms-pf-nav {
    display:        grid;
    grid-template-columns: 1fr auto 1fr;
    gap:            var(--ms-space-4);
    align-items:    center;
    margin-top:     var(--ms-space-12);
    padding-top:    var(--ms-space-8);
    border-top:     1px solid var(--ms-border);
}

.ms-pf-nav--center {
    display:         flex;
    justify-content: center;
}

.ms-pf-nav__link {
    display:         flex;
    align-items:     center;
    gap:             var(--ms-space-3);
    text-decoration: none;
    padding:         var(--ms-space-4);
    border-radius:   var(--ms-radius-md);
    transition:      background var(--ms-transition);
}

.ms-pf-nav__link:hover {
    background: var(--ms-surface);
}

.ms-pf-nav__link--next {
    flex-direction: row-reverse;
    text-align:     right;
}

.ms-pf-nav__thumb {
    flex-shrink: 0;
    width:       60px;
    height:      60px;
    border-radius: var(--ms-radius-sm);
    overflow:    hidden;
}

.ms-pf-nav__thumb img {
    display:    block;
    width:      100%;
    height:     100%;
    object-fit: cover;
}

.ms-pf-nav__text {
    display:        flex;
    flex-direction: column;
    gap:            var(--ms-space-1);
}

.ms-pf-nav__label {
    display:        flex;
    align-items:    center;
    gap:            var(--ms-space-1);
    font-size:      0.75rem;
    font-weight:    700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color:          var(--ms-text-subtle);
}

.ms-pf-nav__link--next .ms-pf-nav__label {
    justify-content: flex-end;
}

.ms-pf-nav__title {
    font-family: var(--ms-font-heading);
    font-size:   1rem;
    color:       var(--ms-text);
    font-weight: 700;
    line-height: 1.3;
}

.ms-pf-nav__all {
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    gap:             var(--ms-space-1);
    text-decoration: none;
    padding:         var(--ms-space-3);
    border-radius:   var(--ms-radius-md);
    color:           var(--ms-text-subtle);
    font-size:       0.6875rem;
    font-weight:     700;
    letter-spacing:  0.08em;
    text-transform:  uppercase;
    transition:      color var(--ms-transition), background var(--ms-transition);
}

.ms-pf-nav__all:hover {
    background: var(--ms-surface);
    color:      var(--ms-text);
}

.ms-pf-nav__center {
    display:        flex;
    flex-direction: column;
    align-items:    center;
    gap:            var(--ms-space-1);
}

.ms-pf-nav__collection {
    display:         flex;
    align-items:     center;
    gap:             0.3em;
    text-decoration: none;
    font-size:       0.6875rem;
    color:           var(--ms-color-gold);
    letter-spacing:  0.04em;
    transition:      opacity var(--ms-transition);
}

.ms-pf-nav__collection:hover {
    opacity: 0.75;
}

@media ( max-width: 700px ) {
    .ms-pf-nav {
        grid-template-columns: 1fr 1fr;
        grid-template-rows:    auto auto;
    }

    .ms-pf-nav__center {
        grid-column: 1 / -1;
        order:       -1;
    }

    .ms-pf-nav__all {
        flex-direction: row;
    }

    .ms-pf-nav__thumb {
        display: none;
    }

    .ms-single-portfolio__layout--sidebar-left {
        grid-template-columns: 1fr;
    }

    .ms-single-portfolio__layout--sidebar-left .ms-single-portfolio__meta {
        order: 0;
        position: static;
    }
}

/* ============================================================
 * MS21 – FEATURED BADGE
 * ============================================================ */

.ms-portfolio-card--featured {
    position: relative;
}

.ms-portfolio-card--featured::before {
    content:      '★';
    position:     absolute;
    top:          var(--ms-space-3);
    right:        var(--ms-space-3);
    z-index:      2;
    color:        var(--ms-accent);
    font-size:    1.25rem;
    line-height:  1;
    text-shadow:  0 1px 3px rgba(0, 0, 0, .4);
    pointer-events: none;
}

/* ============================================================
 * MS21 – STATUS BADGE (Detailseite Sidebar)
 * ============================================================ */

.ms-status-badge {
    display:       inline-block;
    padding:       2px 8px;
    border-radius: 3px;
    font-size:     var(--ms-font-size-xs);
    font-weight:   var(--ms-font-weight-semibold);
}

.ms-status-badge--active    { background: #d4edda; color: #155724; }
.ms-status-badge--completed { background: #cce5ff; color: #004085; }
.ms-status-badge--on-hold   { background: #fff3cd; color: #856404; }
.ms-status-badge--archived  { background: #e2e3e5; color: #383d41; }

[data-theme="dark"] .ms-status-badge--active    { background: #1a3d26; color: #90e6a8; }
[data-theme="dark"] .ms-status-badge--completed { background: #0a2a4a; color: #90c8f6; }
[data-theme="dark"] .ms-status-badge--on-hold   { background: #3d2f00; color: #f5d978; }
[data-theme="dark"] .ms-status-badge--archived  { background: #2a2b2d; color: #b0b3b8; }

/* ============================================================
 * MS21 – TECHBOX (Block Pattern)
 * ============================================================ */

.ms-techbox__table {
    margin: 0;
}

.ms-techbox__table table {
    width:           100%;
    border-collapse: collapse;
    border:          none;
}

.ms-techbox__table td,
.ms-techbox__table th {
    padding:        var(--ms-space-2) var(--ms-space-3);
    border:         none;
    border-bottom:  1px solid var(--ms-color-border);
    font-size:      var(--ms-font-size-sm);
    vertical-align: top;
}

.ms-techbox__table tr:last-child td,
.ms-techbox__table tr:last-child th {
    border-bottom: none;
}

.ms-techbox__table td:first-child {
    color: var(--ms-color-text-muted);
    width: 42%;
}

/* ============================================================
 * MS21 – ADMIN LIST STATUS BADGE
 * ============================================================ */

.ms-admin-status {
    display:       inline-block;
    padding:       1px 6px;
    border-radius: 3px;
    font-size:     11px;
    line-height:   1.6;
}

.ms-admin-status--active    { background: #d4edda; color: #155724; }
.ms-admin-status--completed { background: #cce5ff; color: #004085; }
.ms-admin-status--on-hold   { background: #fff3cd; color: #856404; }
.ms-admin-status--archived  { background: #e2e3e5; color: #383d41; }