/*!
 * Mitmane UI — shared dialog, page-layout and sidebar 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%;
    }
}

/* ══════════════════════════════════════════════════════════════════════════
   3. Sidebar — a group inside a group (Appointments ▸, Reports ▸, Catalog ▸ …)
   Frest pins every sub-level's dot to the same spot and moves the text in by
   only ~10px, and a nested page's highlight runs edge to edge like a main
   page's — so nothing on screen said where a group starts or ends. A nested
   group now hangs on a thin line under its parent's name:
     · its entries step in past the line and drop the dot — a dot is a main
       entry, the line is "inside a group";
     · their hover/active highlight starts past the line, not at the edge, so
       a full-width bar is a main page and a short one is a page in a group;
     · the line stops at the group's last entry and a small gap follows it,
       which is where the next main entry visibly takes over.

   NO COLOURS ARE SET HERE. The line is the menu's own text colour, faded, and
   the highlight keeps the theme's own colours, so every variant the template
   customizer offers (default / bordered / semi-dark, light and dark) follows
   with no rule of its own. Keying on .dark-style would be wrong: semi-dark
   puts a dark menu on a light page. Logical properties only, so Kurdish and
   Arabic mirror by themselves.

   The `.menu-vertical.bg-menu-theme` prefix is load-bearing: the customizer
   document.write()s Frest's stylesheets AFTER this file, so these rules win on
   specificity, never on order — the rule they must beat is Frest's RTL one,
   `[dir=rtl] .menu-vertical .menu-sub .menu-sub .menu-link`, at (0,5,0).
   ══════════════════════════════════════════════════════════════════════════ */

.menu-vertical.bg-menu-theme .menu-sub .menu-sub {
    /* Where the parent's name starts (Frest's level-2 text inset), so the line
       hangs straight down from it. The entries below are placed from here. */
    --mt-nav-rail: 2.938rem;
    position: relative;
    /* The breath after the last entry. Padding, not margin: Frest animates the
       group open and shut from this list's border box, and a margin outside it
       would land as a jump when the animation ends. */
    padding-block-end: 0.375rem;
}

.menu-vertical.bg-menu-theme .menu-sub .menu-sub::before {
    content: "";
    position: absolute;
    /* From the first entry to the last — not into the gap after the group. */
    inset-block: 0.125rem 0.375rem;
    inset-inline-start: var(--mt-nav-rail);
    /* A border, not a background: Windows high-contrast mode drops backgrounds
       but repaints borders, so the line survives there. */
    border-inline-start: 1px solid;
    opacity: 0.32;
    pointer-events: none;
}

/* The entry's box — and so its hover/active highlight — starts just past the
   line. Its text lands 16px in from the parent's name. The end padding is
   Frest's 15px trimmed to 10px, so a label keeps the width it had before
   ("Inventory Comparison" still fits one line). A toggle keeps Frest's end
   padding, because its arrow sits in it. */
.menu-vertical.bg-menu-theme .menu-sub .menu-sub > .menu-item > .menu-link {
    margin-inline-start: calc(var(--mt-nav-rail) + 0.375rem);
    padding-block: 0.5rem;
    padding-inline-start: 0.625rem;
}

.menu-vertical.bg-menu-theme .menu-sub .menu-sub > .menu-item > .menu-link:not(.menu-toggle) {
    padding-inline-end: 0.625rem;
}

.menu-vertical.bg-menu-theme .menu-sub .menu-sub > .menu-item > .menu-link::before {
    content: none;
}

@media (forced-colors: active) {
    .menu-vertical.bg-menu-theme .menu-sub .menu-sub::before {
        opacity: 1;
    }
}