/*
 * ds-modal-bridge.css
 *
 * Opt-in bridge that re-skins a legacy Bootstrap modal to the Aerosophia
 * design-system modal anatomy (DESIGN-SYSTEM.md §4.6) WITHOUT rewriting the
 * Bootstrap show/hide harness. Add the `ds-modal` class to a
 * `<div class="modal fade ds-modal">` and its `.modal-content /
 * .modal-header / .modal-body / .modal-footer` repaint as the DS card,
 * sticky accent-strip header, scrollable body and sticky footer.
 *
 * Token-only (no hex literals) so palette / dark-mode / density swaps apply.
 * Loaded after aerosophia-components.css so it wins where class names overlap.
 */

/* ---- Card shell ------------------------------------------------------- */
.ds-modal .modal-content {
    background: var(--surface-0);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    box-shadow: var(--elev-4);
    overflow: hidden;
}

/* ---- Sticky header with accent strip ---------------------------------- */
.ds-modal .modal-header {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-5) var(--space-3);
    border-bottom: 1px solid var(--border-subtle);
    background: var(--surface-0);
}

.ds-modal .modal-header::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: var(--accent);
}

.ds-modal .modal-title {
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--text-primary);
    margin: 0;
}

/* Optional leading icon chip (DS .modal__icon) */
.ds-modal .modal-header .ds-modal__icon {
    width: 34px;
    height: 34px;
    border-radius: var(--radius-md);
    background: var(--accent-soft);
    color: var(--accent);
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 34px;
}

.ds-modal .modal-header .ds-modal__icon.is-danger {
    background: var(--danger-50);
    color: var(--danger-600);
}

.ds-modal .modal-header .ds-modal__icon svg,
.ds-modal .modal-header .ds-modal__icon i {
    width: 19px;
    height: 19px;
    font-size: 19px;
}

/* Close button (keeps Bootstrap data-bs-dismiss; restyled to DS .modal__x) */
.ds-modal .modal-header .btn-close {
    margin-left: auto;
    width: 30px;
    height: 30px;
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    opacity: 1;
    transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}

.ds-modal .modal-header .btn-close:hover {
    background: var(--surface-2);
    color: var(--text-primary);
}

.ds-modal .modal-header .btn-close:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
}

/* ---- Body ------------------------------------------------------------- */
.ds-modal .modal-body {
    padding: var(--space-5);
    overflow: auto;
}

/* Lists and tables inside a DS modal fill the available width. */
.ds-modal .modal-body > .list-group,
.ds-modal .modal-body table,
.ds-modal .modal-body .table-wrap,
.ds-modal .modal-body .dataTables_wrapper {
    width: 100%;
}

/* ---- Footer ----------------------------------------------------------- */
.ds-modal .modal-footer {
    padding: var(--space-3) var(--space-5);
    border-top: 1px solid var(--border-subtle);
    background: var(--surface-1);
    display: flex;
    gap: var(--space-2);
    justify-content: flex-end;
    margin: 0;
}

/* ---- Definition list (read-only record view) -------------------------- */
/*
 * Replaces the old `<div class="col-6"><p><strong>label:</strong> value</p>`
 * grid that left half the modal empty. This grid fills the modal body and
 * wraps responsively.
 */
.ds-deflist {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: var(--space-4) var(--space-5);
    width: 100%;
}

.ds-deflist__item {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.ds-deflist__label {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
}

.ds-deflist__value {
    font-size: 0.9rem;
    color: var(--text-primary);
    word-break: break-word;
}

.ds-deflist__value ul {
    margin: 0;
    padding-left: var(--space-4);
}

.ds-deflist__value img {
    max-width: 100%;
    height: auto;
    border-radius: var(--radius-sm);
}

/* A full-width item that should span the whole grid (e.g. long lists). */
.ds-deflist__item--wide {
    grid-column: 1 / -1;
}

/* ---- Record view with avatar (e.g. View User) ------------------------- */
/* Fixed avatar column + a definition grid that fills the remaining body
   width. Replaces the old `.w-25` / `.w-75` split that left the profile list
   narrow. Wraps on small viewports. */
.ds-userview {
    display: flex;
    align-items: flex-start;
    gap: var(--space-5);
    flex-wrap: wrap;
}

.ds-userview__avatar {
    flex: 0 0 120px;
}

.ds-userview__avatar img {
    width: 110px;
    height: 110px;
    object-fit: cover;
    border-radius: var(--radius-pill, 999px);
    background: var(--surface-2);
}

.ds-userview__info {
    flex: 1 1 320px;
    min-width: 0;
}