/*!
 * Mitmane UI — shared dialog + page-layout primitives.
 *
 * Everything here is built on Bootstrap/Frest custom properties, so a single
 * rule set is correct in both the light and the dark theme and in both LTR and
 * RTL (logical properties only — no left/right).
 */

/* ══════════════════════════════════════════════════════════════════════════
   1. Dialogs
   Applies to EVERY SweetAlert2 dialog in the app, not just the ones raised by
   mitmane-ui.dist.js, so the ~120 existing call sites inherit the same shape.

   COLOURS ARE DELIBERATELY NOT SET HERE. Frest's own vendor stylesheet already
   themes the popup for light AND dark (`.dark-style .swal2-modal.swal2-popup`);
   overriding the surface here painted the light-theme dialog page-grey. This
   block only refines geometry, rhythm and the button row.

   The `html` prefix lifts specificity just past Frest's
   `.light-style .swal2-modal.swal2-popup` rules without reaching for
   !important. Toasts (.swal2-toast) are untouched — they keep the compact
   styling defined in _Layout.
   ══════════════════════════════════════════════════════════════════════════ */

html .swal2-container {
    z-index: 10600; /* above Bootstrap modals (1055) — confirms are raised from them */
}

html .swal2-container .swal2-popup.swal2-modal {
    border-radius: 0.75rem;
    padding: 1.75rem 1.5rem 1.25rem;
    width: 30rem;
    max-width: calc(100vw - 2rem);
}

html .swal2-container .swal2-popup.swal2-modal .swal2-title {
    font-size: 1.125rem;
    font-weight: 600;
    line-height: 1.45;
    padding: 0;
    margin-bottom: 0;
}

html .swal2-container .swal2-popup.swal2-modal .swal2-html-container {
    color: var(--bs-secondary-color);
    font-size: 0.9375rem;
    line-height: 1.55;
    margin: 0.5rem 0 0;
    padding: 0;
}

html .swal2-container .swal2-popup.swal2-modal .swal2-icon {
    width: 3.25rem;
    height: 3.25rem;
    border-width: 0.1875rem;
    margin: 0.25rem auto 1.25rem;
}

html .swal2-container .swal2-popup.swal2-modal .swal2-icon .swal2-icon-content {
    font-size: 1.875rem;
}

html .swal2-container .swal2-popup.swal2-modal .swal2-actions {
    margin-top: 1.5rem;
    gap: 0;
}

html .swal2-container .swal2-popup.swal2-modal .swal2-actions .btn {
    min-width: 7rem;
}

/* Sizing only — Frest owns the input's colours in both themes. */
html .swal2-container .swal2-popup.swal2-modal .swal2-input,
html .swal2-container .swal2-popup.swal2-modal .swal2-textarea {
    box-shadow: none;
    font-size: 0.9375rem;
    width: 100%;
    margin: 1.25rem 0 0;
    padding: 0.5rem 0.75rem;
    height: auto;
}

html .swal2-container .swal2-popup.swal2-modal .swal2-input:focus,
html .swal2-container .swal2-popup.swal2-modal .swal2-textarea:focus {
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 0.15rem rgba(var(--bs-primary-rgb), 0.15);
}

html .swal2-container .swal2-popup.swal2-modal .swal2-validation-message {
    background: transparent;
    color: var(--bs-danger);
    font-size: 0.8125rem;
    padding: 0.5rem 0 0;
}

/* Tone accents — a destructive confirm must never look like a neutral one.
   Frest paints every warning icon amber, so danger has to say so louder. */
html .swal2-container .mt-swal-danger .swal2-icon.swal2-warning {
    border-color: rgba(var(--bs-danger-rgb), 0.3);
    color: var(--bs-danger);
}

html .swal2-container .mt-swal-question .swal2-icon.swal2-question,
html .swal2-container .mt-swal-primary .swal2-icon.swal2-question {
    border-color: rgba(var(--bs-primary-rgb), 0.3);
    color: var(--bs-primary);
}

.btn.mt-busy {
    pointer-events: none;
    opacity: 0.75;
}

/* ══════════════════════════════════════════════════════════════════════════
   2. Page primitives
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Page header ─────────────────────────────────────────────────────────── */
.mt-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.mt-head-main {
    min-width: 0;
}

.mt-head-title {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.625rem;
    margin: 0 0 0.25rem;
    font-size: 1.375rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.01em;
}

.mt-head-sub {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.375rem 0.875rem;
    font-size: 0.8125rem;
    color: var(--bs-secondary-color);
}

.mt-head-sub > span {
    display: inline-flex;
    align-items: center;
    gap: 0.3125rem;
    min-width: 0;
}

.mt-head-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-inline-start: auto;
}

/* ── Status pill ─────────────────────────────────────────────────────────── */
.mt-status {
    display: inline-flex;
    align-items: center;
    gap: 0.4375rem;
    padding: 0.25rem 0.6875rem;
    border-radius: 2rem;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.5;
    letter-spacing: 0.01em;
    white-space: nowrap;
    background: rgba(var(--mt-tone-rgb, var(--bs-secondary-rgb)), 0.12);
    color: rgb(var(--mt-tone-rgb, var(--bs-secondary-rgb)));
}

.mt-status::before {
    content: "";
    width: 0.4375rem;
    height: 0.4375rem;
    border-radius: 50%;
    background: currentColor;
    flex: none;
}

.mt-status.mt-live::before {
    animation: mt-pulse 2s ease-in-out infinite;
}

@keyframes mt-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.45; transform: scale(0.8); }
}

.mt-tone-primary { --mt-tone-rgb: var(--bs-primary-rgb); }
.mt-tone-success { --mt-tone-rgb: var(--bs-success-rgb); }
.mt-tone-info { --mt-tone-rgb: var(--bs-info-rgb); }
.mt-tone-warning { --mt-tone-rgb: var(--bs-warning-rgb); }
.mt-tone-danger { --mt-tone-rgb: var(--bs-danger-rgb); }
.mt-tone-secondary { --mt-tone-rgb: var(--bs-secondary-rgb); }
.mt-tone-dark { --mt-tone-rgb: var(--bs-dark-rgb); }

/* ── Stat strip ──────────────────────────────────────────────────────────── */
.mt-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr));
    gap: 0.75rem;
}

.mt-stat {
    position: relative;
    padding: 0.75rem 0.875rem;
    border: 1px solid var(--bs-border-color);
    border-radius: 0.5rem;
    background: var(--bs-body-bg);
    overflow: hidden;
}

.mt-stat::before {
    content: "";
    position: absolute;
    inset-block: 0;
    inset-inline-start: 0;
    width: 0.1875rem;
    background: rgb(var(--mt-tone-rgb, var(--bs-secondary-rgb)));
    opacity: 0.85;
}

.mt-stat-value {
    font-size: 1.375rem;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.02em;
}

.mt-stat-label {
    display: block;
    margin-top: 0.125rem;
    font-size: 0.6875rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--bs-secondary-color);
}

/* ── Segmented progress bar ──────────────────────────────────────────────── */
.mt-bar {
    display: flex;
    height: 0.5rem;
    border-radius: 2rem;
    overflow: hidden;
    background: rgba(var(--bs-secondary-rgb), 0.15);
}

.mt-bar-seg {
    height: 100%;
    background: rgb(var(--mt-tone-rgb, var(--bs-secondary-rgb)));
    transition: width 0.4s ease;
}

/* ── Fact list (label / value pairs) ─────────────────────────────────────── */
.mt-facts {
    margin: 0;
    display: grid;
    gap: 0.0625rem;
}

.mt-fact {
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
    padding: 0.5rem 0;
    border-bottom: 1px dashed var(--bs-border-color);
}

.mt-fact:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.mt-fact-label {
    flex: none;
    width: 8.25rem;
    font-size: 0.75rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--bs-secondary-color);
}

.mt-fact-value {
    min-width: 0;
    font-size: 0.875rem;
    font-weight: 500;
    word-break: break-word;
}

/* ── Person row ──────────────────────────────────────────────────────────── */
.mt-person {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.mt-avatar {
    flex: none;
    display: grid;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    font-size: 0.875rem;
    font-weight: 600;
    text-transform: uppercase;
    background: rgba(var(--mt-tone-rgb, var(--bs-primary-rgb)), 0.14);
    color: rgb(var(--mt-tone-rgb, var(--bs-primary-rgb)));
}

.mt-avatar-sm {
    width: 1.75rem;
    height: 1.75rem;
    font-size: 0.6875rem;
}

/* ── Crew card ───────────────────────────────────────────────────────────── */
.mt-crew {
    padding: 0.75rem;
    border: 1px solid var(--bs-border-color);
    border-radius: 0.5rem;
    background: var(--bs-body-bg);
}

.mt-crew + .mt-crew {
    margin-top: 0.625rem;
}

.mt-crew.mt-off {
    opacity: 0.6;
}

.mt-member {
    display: inline-flex;
    align-items: center;
    gap: 0.3125rem;
    padding: 0.1875rem 0.5rem 0.1875rem 0.375rem;
    border-radius: 2rem;
    font-size: 0.75rem;
    font-weight: 500;
    background: rgba(var(--bs-primary-rgb), 0.1);
    color: var(--bs-body-color);
}

.mt-member-lead {
    background: rgba(var(--bs-warning-rgb), 0.15);
}

.mt-member .mt-member-x {
    display: grid;
    place-items: center;
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
    font-size: 0.8125rem;
    line-height: 1;
    color: var(--bs-danger);
    text-decoration: none;
    opacity: 0.65;
}

.mt-member .mt-member-x:hover {
    opacity: 1;
    background: rgba(var(--bs-danger-rgb), 0.15);
}

/* ── Data table ──────────────────────────────────────────────────────────── */
.mt-table {
    margin: 0;
}

.mt-table > thead > tr > th {
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--bs-secondary-color);
    white-space: nowrap;
    padding-block: 0.75rem;
}

.mt-table > tbody > tr > td {
    vertical-align: middle;
    padding-block: 0.6875rem;
}

.mt-table > tbody > tr {
    transition: background-color 0.15s ease;
}

.mt-table > tbody > tr:hover {
    background: rgba(var(--bs-primary-rgb), 0.035);
}

/* A client-side filter hides rows with [hidden]; make that beat `display: table-row`
   whatever the surrounding component sets. */
.mt-table tr[hidden] {
    display: none !important;
}

.mt-code {
    font-weight: 600;
    font-size: 0.8125rem;
    letter-spacing: 0.01em;
    text-decoration: none;
    white-space: nowrap;
}

.mt-code:hover {
    text-decoration: underline;
}

.mt-sub {
    display: block;
    font-size: 0.75rem;
    color: var(--bs-secondary-color);
}

/* Compact chip used for stage / priority / visit markers. */
.mt-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.1875rem 0.5625rem;
    border-radius: 0.375rem;
    font-size: 0.6875rem;
    font-weight: 600;
    line-height: 1.5;
    white-space: nowrap;
    background: rgba(var(--mt-tone-rgb, var(--bs-secondary-rgb)), 0.12);
    color: rgb(var(--mt-tone-rgb, var(--bs-secondary-rgb)));
}

.mt-chip-dot::before {
    content: "";
    width: 0.375rem;
    height: 0.375rem;
    border-radius: 50%;
    background: currentColor;
    flex: none;
}

.mt-chip-plain {
    background: transparent;
    border: 1px solid var(--bs-border-color);
    color: var(--bs-secondary-color);
}

/* Row action cluster — icons stay quiet until the row is hovered. */
.mt-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.25rem;
    white-space: nowrap;
}

.mt-actions .btn-icon {
    opacity: 0.55;
    transition: opacity 0.15s ease;
}

tr:hover .mt-actions .btn-icon,
.mt-actions .btn-icon:focus-visible {
    opacity: 1;
}

@media (hover: none) {
    .mt-actions .btn-icon { opacity: 1; }
}

/* ── Toolbar ─────────────────────────────────────────────────────────────── */
.mt-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.25rem;
    border-bottom: 1px solid var(--bs-border-color);
}

.mt-search {
    position: relative;
    flex: 1 1 12rem;
    max-width: 18rem;
}

.mt-search > i {
    position: absolute;
    inset-inline-start: 0.6875rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1rem;
    color: var(--bs-secondary-color);
    pointer-events: none;
}

.mt-search > .form-control {
    padding-inline-start: 2.125rem;
}

/* ── Empty state ─────────────────────────────────────────────────────────── */
.mt-empty {
    display: grid;
    place-items: center;
    gap: 0.5rem;
    padding: 2.5rem 1rem;
    text-align: center;
    color: var(--bs-secondary-color);
}

.mt-empty > i {
    font-size: 2rem;
    opacity: 0.4;
}

.mt-empty-title {
    font-weight: 600;
    color: var(--bs-body-color);
}

/* ── Card header icon (sits inside Frest's own .card-header) ─────────────── */
.mt-card-icon {
    display: grid;
    place-items: center;
    width: 1.875rem;
    height: 1.875rem;
    border-radius: 0.4375rem;
    font-size: 1rem;
    flex: none;
    background: rgba(var(--mt-tone-rgb, var(--bs-primary-rgb)), 0.12);
    color: rgb(var(--mt-tone-rgb, var(--bs-primary-rgb)));
}

/* ── Timeline (assignment history) ───────────────────────────────────────── */
.mt-timeline {
    margin: 0;
    padding-inline-start: 0.75rem;
    border-inline-start: 1px solid var(--bs-border-color);
    list-style: none;
}

.mt-timeline > li {
    position: relative;
    padding: 0 0 0.75rem 0;
    font-size: 0.8125rem;
}

.mt-timeline > li:last-child {
    padding-bottom: 0;
}

.mt-timeline > li::before {
    content: "";
    position: absolute;
    inset-inline-start: -1.0625rem;
    top: 0.4375rem;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: var(--bs-body-bg);
    border: 2px solid var(--bs-border-color);
}

.mt-timeline > li.mt-current::before {
    border-color: var(--bs-primary);
    background: var(--bs-primary);
}

@media (max-width: 575.98px) {
    .mt-fact {
        display: block;
    }

    .mt-fact-label {
        width: auto;
        margin-bottom: 0.125rem;
    }

    .mt-head-actions {
        margin-inline-start: 0;
        width: 100%;
    }
}