/* B3-P2 — Laned Messages reskin (buyer /reader/support).
   Namespaced under `.msg` so it only restyles the Messages page and never
   leaks into the shared store chrome. Pure reskin: the Bootstrap tab plugin,
   the DataTables width-hack and every #id/anchor stay untouched — we only
   override appearance via descendant selectors on the existing markup.
   Lanes: Proposals · Support · Notifications (+ New Message compose action). */

.msg {
    max-width: 1080px;
    margin: 0 auto;
    padding: 8px 4px 48px;
    font-family: var(--font, inherit);
    color: var(--text, #333);
}

/* ---- page head ---------------------------------------------------------- */
.msg-head { margin: 8px 0 22px; }
.msg-head__title {
    font-size: var(--fs-h2, 28px);
    font-weight: var(--fw-heading, 800);
    line-height: var(--lh-heading, 1.15);
    color: var(--ink, #0B1B2B);
    letter-spacing: -0.01em;
    margin: 0 0 4px;
}
.msg-head__sub { font-size: 14px; color: var(--muted, #595959); margin: 0; }

/* ---- lane tabs (keeps .nav .nav-tabs structure for Bootstrap + DataTables) */
.msg .nav-tabs {
    border-bottom: 1px solid rgba(11, 27, 43, .12);
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
}
.msg .nav-tabs > li { float: none; margin-bottom: -1px; }
.msg .nav-tabs > li > a {
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    margin-right: 0;
    padding: 12px 18px;
    color: var(--muted, #595959);
    font-weight: var(--fw-strong, 600);
    font-size: 14.5px;
    background: transparent;
    transition: color .15s ease, border-color .15s ease;
}
.msg .nav-tabs > li > a:hover,
.msg .nav-tabs > li > a:focus {
    background: transparent;
    color: var(--ink, #0B1B2B);
    border-bottom-color: rgba(11, 27, 43, .25);
}
.msg .nav-tabs > li.active > a,
.msg .nav-tabs > li.active > a:hover,
.msg .nav-tabs > li.active > a:focus {
    color: var(--accent-strong, var(--accent, #0B599C));
    border: 0;
    border-bottom: 2px solid var(--accent, #0B599C);
    background: transparent;
}
/* the "New Message" compose action sits right, visually set apart as a CTA */
.msg .nav-tabs > li.msg-lane--compose { margin-left: auto; }
.msg .nav-tabs > li.msg-lane--compose > a {
    color: var(--accent, #0B599C);
}
.msg .nav-tabs > li.msg-lane--compose > a::before {
    content: "\f040"; /* fa-pencil */
    font-family: FontAwesome;
    margin-right: 7px;
    font-size: 13px;
}

/* lane count badges → DICE accent pills */
.msg .nav-tabs .badge {
    background: var(--accent, #0B599C);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 10px;
    margin-left: 4px;
    vertical-align: middle;
}

/* ---- panels ------------------------------------------------------------- */
.msg .tab-content { padding-top: 24px !important; }
.msg .tab-pane > .row .lead,
.msg .tab-pane > .lead { display: none; } /* dup per-lane heading — the tab label already names it */

/* ---- tables ------------------------------------------------------------- */
.msg .table {
    margin-bottom: 0;
    border: 1px solid rgba(11, 27, 43, .08);
    border-radius: var(--radius, 12px);
    overflow: hidden;
    background: #fff;
}
.msg .table > caption {
    caption-side: top;
    padding: 2px 2px 14px;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--muted, #595959);
}
.msg .table > thead > tr > th {
    border-bottom: 1px solid rgba(11, 27, 43, .12);
    background: var(--bg-subtle, #F1F5FB);
    color: var(--muted, #595959);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    padding: 12px 16px;
}
.msg .table > tbody > tr > td {
    border-top: 1px solid rgba(11, 27, 43, .06);
    padding: 14px 16px;
    vertical-align: middle;
    color: var(--ink, #0B1B2B);
    font-size: 14px;
}
.msg .table.table-hover > tbody > tr:hover { background: var(--bg-subtle, #F1F5FB); }
.msg .table td a { color: var(--accent, #0B599C); text-decoration: none; }
.msg .table td a:hover { text-decoration: underline; }
.msg .table td .fa-envelope { color: var(--accent, #0B599C); }
.msg .table td .fa-envelope-open { color: var(--muted, #9aa4ad); }

/* ---- empty states (bare sentence → soft DICE card) ---------------------- */
.msg .table-responsive:not(:has(table)),
.msg-empty {
    display: block;
    background: var(--bg-subtle, #F1F5FB);
    border: 1px solid rgba(11, 27, 43, .08);
    border-radius: var(--radius, 12px);
    padding: 28px 24px;
    color: var(--muted, #595959);
    font-size: 14.5px;
    line-height: 1.55;
    text-align: center;
}

/* ---- notifications list ------------------------------------------------- */
.msg #notifications-list-all { border: 1px solid rgba(11, 27, 43, .08); border-radius: var(--radius, 12px); overflow: hidden; }
.msg #notifications-list-all li.list-group-item {
    border: 0;
    border-top: 1px solid rgba(11, 27, 43, .06);
    padding: 16px;
    font-size: 14px;
    color: var(--ink, #0B1B2B);
}
.msg #notifications-list-all li.list-group-item:first-child { border-top: 0; }
.msg #notifications-list-all small i { color: var(--muted, #9aa4ad); }
.msg .see-more, .msg .see-less { color: var(--accent, #0B599C); font-size: 13px; font-weight: 600; }

/* ---- New Message compose form (the Bootstrap `.well` → DICE card) ------- */
.msg .form.well {
    background: #fff;
    border: 1px solid rgba(11, 27, 43, .08);
    border-radius: var(--radius, 12px);
    box-shadow: none;
    padding: 28px;
    max-width: 720px;
}
.msg .form.well legend {
    border: 0;
    font-size: var(--fs-h4, 18px);
    font-weight: var(--fw-heading, 800);
    color: var(--ink, #0B1B2B);
    margin-bottom: 6px;
}
.msg .form.well .control-label { font-weight: 600; color: var(--ink, #0B1B2B); }

/* ---- primary buttons pinned to DICE accent (readability on the reskin) -- */
.msg .btn-primary {
    background: var(--accent, #0B599C);
    border-color: var(--accent, #0B599C);
    color: #fff;
}
.msg .btn-primary:hover, .msg .btn-primary:focus {
    background: var(--accent-strong, #08487d);
    border-color: var(--accent-strong, #08487d);
    color: #fff;
}

@media (max-width: 600px) {
    .msg .nav-tabs { gap: 0; }
    .msg .nav-tabs > li > a { padding: 10px 12px; font-size: 13.5px; }
    .msg .nav-tabs > li.msg-lane--compose { margin-left: 0; }
}

/* QA (b): reskin the DataTables controls (filter / paginate / info / length) that the
   proposals & transaction tables add, so they match DICE not the legacy Bootstrap look. */
.msg .dataTables_wrapper .dataTables_filter input,
.msg .dataTables_wrapper .dataTables_length select { border: 1px solid var(--border-strong, #CBD2D9); border-radius: var(--radius, 8px); height: 34px; padding: 0 10px; font-family: var(--font); font-size: 13.5px; color: var(--ink, #0B1B2B); box-shadow: none; }
.msg .dataTables_wrapper .dataTables_filter input:focus { border-color: var(--accent, #0B599C); outline: none; box-shadow: 0 0 0 3px rgba(11,89,156,.12); }
.msg .dataTables_wrapper .dataTables_info,
.msg .dataTables_wrapper .dataTables_filter,
.msg .dataTables_wrapper .dataTables_length { font-size: 13px; color: var(--muted, #595959); padding: 8px 0; }
.msg .dataTables_wrapper .dataTables_paginate .paginate_button { padding: 5px 11px; border-radius: var(--radius, 6px); border: 1px solid transparent; color: var(--accent, #0B599C) !important; }
.msg .dataTables_wrapper .dataTables_paginate .paginate_button.current, .msg .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover { background: var(--accent, #0B599C); color: #fff !important; border-color: var(--accent, #0B599C); }
.msg .dataTables_wrapper .dataTables_paginate .paginate_button:hover { background: var(--bg-subtle, #F1F5FB); border-color: var(--border, #E2E6EA); color: var(--accent, #0B599C) !important; }

/* QA body-deep: the legacy DataTables length menu ("Show 10 entries") + search ("Search:")
   read as un-reskinned chrome on the reskinned page — hide them (keep sorting + rowGroup +
   the DICE-styled pagination). The table body itself is already reskinned above. */
.msg .dataTables_wrapper .dataTables_length,
.msg .dataTables_wrapper .dataTables_filter { display: none; }
/* QA ride-along: the legacy "Showing 1 to 6 of 6 entries" footer is the last un-reskinned
   DataTables control on the page. Dropped, consistent with the hidden length menu + search
   (and with the no-exposed-counts copy policy). Sorting, rowGroup and pagination stay. */
.msg .dataTables_wrapper .dataTables_info { display: none; }