/*
 * MKS Team Bulletin Pro - shared stylesheet.
 *
 * Every screen in the module loads this one file, so spacing, alignment and the
 * responsive breakpoints are defined once instead of being repeated (and drifting) in a
 * <style> block per view.
 *
 * Two rules the whole module depends on:
 *   - Layout is flex/grid with gap, never floats and never fixed pixel widths, so a panel
 *     reflows instead of overflowing on a narrow screen.
 *   - Every control row collapses to full-width at 767px, which is where Perfex's own grid
 *     stacks.
 */

/* ============================ Page shell ============================ */
.mks_tb_wrap { --mks-tb-line: #e6e9ef; --mks-tb-muted: #6b7280; --mks-tb-faint: #8a94a6;
    --mks-tb-ink: #1f2937; --mks-tb-accent: #4f6ef7; }

.mks_tb_shell { max-width: 1140px; margin: 0 auto; }
.mks_tb_shell_narrow { max-width: 900px; margin: 0 auto; }

/* Page header: title left, actions right, stacking cleanly when there is no room. */
.mks_tb_page_head {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 14px; flex-wrap: wrap; margin-bottom: 18px;
}
.mks_tb_page_head_text { min-width: 220px; flex: 1 1 260px; }
.mks_tb_title { font-weight: 650; display: flex; align-items: center; gap: 9px; margin: 0;
    font-size: 18px; line-height: 1.3; color: var(--mks-tb-ink); }
.mks_tb_sub { margin: 6px 0 0; font-size: 13px; color: var(--mks-tb-faint); line-height: 1.5; }
.mks_tb_page_actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

/* Section heading inside a panel. */
.mks_tb_section_title {
    font-weight: 700; text-transform: uppercase; letter-spacing: .04em; font-size: 11px;
    color: var(--mks-tb-muted); display: flex; align-items: center; gap: 8px;
    margin: 0 0 16px; padding-bottom: 10px; border-bottom: 1px solid var(--mks-tb-line);
}
.mks_tb_section_title.no-rule { border-bottom: 0; padding-bottom: 0; }

/* ============================ Forms ============================ */
/* A control row that always aligns on its BASELINE, so a field with help text below it
   does not drag its neighbours down. */
.mks_tb_row { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-start; }
.mks_tb_field { display: flex; flex-direction: column; gap: 5px; flex: 1 1 200px; min-width: 0; }
.mks_tb_field > label, .mks_tb_field > .control-label {
    font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
    color: var(--mks-tb-muted); margin: 0;
}
.mks_tb_field small { font-size: 11px; color: var(--mks-tb-faint); line-height: 1.5; }
.mks_tb_field_auto { flex: 0 0 auto; }

/* Checkbox groups: even gaps, no stray Bootstrap margins. */
.mks_tb_checks { display: flex; flex-wrap: wrap; gap: 12px 26px; margin: 4px 0 0; }
.mks_tb_checks .checkbox { margin: 0; min-height: 0; }
.mks_tb_checks .checkbox label { font-weight: 500; }

.mks_tb_hint { font-size: 12px; color: var(--mks-tb-faint); line-height: 1.55; margin: 12px 0 0; }
.mks_tb_hint.tight { margin-top: 6px; }
.mks_tb_tiny { font-size: 11px; }

/* Footer actions sit right, reverse-stack on mobile so the primary action is on top. */
.mks_tb_form_actions { display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }

/* ============================ Filter bar ============================ */
/**
 * Compact toolbar. The filters and the DataTables controls used to sit in two stacked
 * panel-bodies, each with full padding, which left a large empty band between them.
 * The filter body now drops its bottom padding and the table area its top padding, so the
 * two rows read as one toolbar.
 */
.mks_tb_filters { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; }
.mks_tb_filters .mks_tb_field { flex: 0 1 180px; gap: 3px; }
.mks_tb_filters .mks_tb_field > label { font-size: 10px; }
.mks_tb_filters .checkbox { margin: 0; align-self: center; padding-top: 12px; }
.mks_tb_filters > .btn { align-self: center; margin-top: 12px; }
.mks_tb_filter_body { padding-bottom: 0 !important; }
.mks_tb_filter_body + .panel-table-full { padding-top: 6px !important; }

/* ============================ Stat cards ============================ */
.mks_tb_cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(158px, 1fr));
    gap: 10px; margin-bottom: 16px; }
.mks_tb_card_stat { background: #fff; border: 1px solid var(--mks-tb-line); border-radius: 10px;
    padding: 14px 16px; display: flex; flex-direction: column; gap: 4px; }
.mks_tb_card_label { font-size: 10.5px; font-weight: 700; text-transform: uppercase;
    letter-spacing: .05em; color: var(--mks-tb-faint); }
.mks_tb_card_value { font-size: 22px; font-weight: 700; color: var(--mks-tb-ink); line-height: 1.15; }
.mks_tb_card_note { font-size: 11px; color: var(--mks-tb-faint); }

/* ============================ Bars, chips, dots ============================ */
.mks_tb_rate { min-width: 120px; }
.mks_tb_rate_bar { height: 6px; border-radius: 999px; background: #e8ebf1; overflow: hidden; }
.mks_tb_rate_bar > span { display: block; height: 100%; border-radius: 999px; background: #10b981; }
.mks_tb_rate_txt { font-size: 11px; color: var(--mks-tb-muted); display: inline-block; margin-top: 5px; }

.mks_tb_chip { display: inline-flex; align-items: center; gap: 5px; font-size: 11px;
    font-weight: 600; padding: 2px 9px; border-radius: 999px; white-space: nowrap;
    border: 1px solid transparent; }
.mks_tb_chip_plain { background: #f4f6fa; color: var(--mks-tb-muted); }
.mks_tb_dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; vertical-align: middle; }

/* ============================ Tables ============================ */
.mks_tb_mini_table { margin-bottom: 0; }
.mks_tb_mini_table > thead > tr > th { font-size: 11px; text-transform: uppercase;
    letter-spacing: .04em; color: var(--mks-tb-muted); font-weight: 700; padding: 8px; white-space: nowrap; }
.mks_tb_mini_table > tbody > tr > td { padding: 8px; font-size: 13px; vertical-align: middle; }
.mks_tb_kv > tbody > tr > td { padding: 7px 0; border: 0; font-size: 13px; }
.mks_tb_kv > tbody > tr > td:first-child { color: var(--mks-tb-faint); width: 45%; }
.mks_tb_kv > tbody > tr > td:last-child { text-align: right; }

.mks_tb_excerpt { font-size: 12px; color: var(--mks-tb-faint); margin-top: 4px; line-height: 1.5; }

/* ============================ Empty state ============================ */
.mks_tb_empty { padding: 44px 20px; text-align: center; color: var(--mks-tb-faint); }
.mks_tb_empty i { font-size: 32px; display: block; margin-bottom: 14px; opacity: .45; }
.mks_tb_empty p { margin: 0 0 4px; font-size: 14px; }

/* ============================ Tabs ============================ */
/* Scrollable unconditionally, not inside a media query: a narrow desktop panel overflows
   just as a phone does. */
.mks_tb_tabs { display: flex; flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden;
    -webkit-overflow-scrolling: touch; margin-bottom: 0; }
.mks_tb_tabs > li { float: none; flex: 0 0 auto; }
.mks_tb_tabs > li > a { white-space: nowrap; }
.mks_tb_tabs::-webkit-scrollbar { height: 0; }
.mks_tb_tab_content { padding-top: 20px; }

/* ============================ Status line ============================ */
.mks_tb_status { font-size: 12px; margin-top: 8px; min-height: 18px; line-height: 1.6; }
.mks_tb_ok { color: #10b981; }
.mks_tb_bad { color: #ef4444; }
.mks_tb_busy { opacity: .55; pointer-events: none; }

/* Hidden by class, never by the [hidden] attribute: the browser's own
   [hidden] { display: none } loses to any later display: flex / block declaration. */
.mks_tb_hide { display: none !important; }

/* ============================ Mobile ============================ */
@media (max-width: 767px) {
    .mks_tb_page_head { flex-direction: column; align-items: stretch; }
    .mks_tb_page_actions { width: 100%; }
    .mks_tb_page_actions > .btn { flex: 1 1 auto; }

    /* Every field and control goes full width - partial widths at this size are what
       produce the ragged, misaligned look. */
    .mks_tb_row { gap: 12px; }
    .mks_tb_field,
    .mks_tb_filters .mks_tb_field { flex: 1 1 100%; }
    .mks_tb_field select.form-control,
    .mks_tb_field input.form-control { width: 100%; }

    .mks_tb_checks { gap: 10px 16px; }
    .mks_tb_form_actions { flex-direction: column-reverse; }
    .mks_tb_form_actions > .btn { width: 100%; }

    .mks_tb_cards { grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); }
    .mks_tb_card_value { font-size: 19px; }

    .mks_tb_kv > tbody > tr > td:first-child { width: 50%; }
}

@media (max-width: 480px) {
    .mks_tb_cards { grid-template-columns: 1fr 1fr; }
}

/* =====================================================================
 * The announcements table
 *
 * NO table-layout: fixed and NO width rules on the header cells.
 *
 * That combination is what broke this table: DataTables measures content and writes its
 * own inline width onto every <th> after init. Inline styles beat a stylesheet, so my
 * widths and its widths disagreed - the header cells drifted out of line with the body and
 * the subject column collapsed to almost nothing. With overflow-wrap: break-word on the
 * title, the remaining sliver then broke the text one letter per line.
 *
 * The fix is to let the browser size the columns (auto layout) and steer it with a
 * min-width on the subject cell's CONTENT plus white-space: nowrap on the compact columns.
 * ================================================================== */
.table-mks-tb-announcements > thead > tr > th {
    font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
    color: var(--mks-tb-muted, #6b7280); padding: 11px 12px; vertical-align: middle;
    white-space: nowrap;
}
.table-mks-tb-announcements > tbody > tr > td { padding: 13px 12px; vertical-align: middle; font-size: 13px; }
.table-mks-tb-announcements > tbody > tr:hover { background: #fafbfd; }

/* ---- Actions column ---- */
.mks_tb_th_actions { width: 1px; }
.mks_tb_actions { display: flex; align-items: center; gap: 5px; white-space: nowrap; }
.mks_tb_act {
    width: 28px; height: 28px; border-radius: 50%; flex: 0 0 auto;
    display: inline-flex; align-items: center; justify-content: center;
    background: #f1f3f8; color: #5b6676; font-size: 11.5px;
    transition: background .12s ease, color .12s ease;
}
.mks_tb_act:hover, .mks_tb_act:focus { background: #e3e8f2; color: #1f2937; }
.mks_tb_act_view:hover  { background: #e0efff; color: #1d4ed8; }
.mks_tb_act_edit:hover  { background: #eef2ff; color: #4f46e5; }
.mks_tb_act_copy:hover  { background: #ecfdf5; color: #0f766e; }
.mks_tb_act_del:hover   { background: #fee2e2; color: #b91c1c; }

/* ---- Subject cell ----
   min-width lives on the CONTENT, not the column: with auto table layout the browser
   grows the column to honour it, and DataTables' own measurement agrees. */
.mks_tb_cell_subject { display: flex; flex-direction: column; gap: 5px; min-width: 260px; max-width: 520px; }
.mks_tb_cs_title { display: flex; align-items: baseline; gap: 7px; }
.mks_tb_cs_title > a {
    font-weight: 600; font-size: 13.5px; color: var(--mks-tb-ink, #1f2937); line-height: 1.45;
    /* break-word, never "anywhere": anywhere lets a word split mid-character, which is
       what produced one letter per line once the column narrowed. */
    overflow-wrap: break-word;
}
.mks_tb_cs_title > a:hover { color: #2563eb; }
.mks_tb_cs_pin { color: #f59e0b; font-size: 11px; flex: 0 0 auto; }
.mks_tb_cs_mobile { display: none; }
.mks_tb_cs_sep { color: #cbd2dd; }

.mks_tb_excerpt {
    font-size: 12px; color: var(--mks-tb-faint, #8a94a6); line-height: 1.5; margin: 0;
    overflow-wrap: break-word;
    /* Two lines maximum, so one long announcement cannot make its row four times the
       height of every other. */
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* ---- Compact cells: nowrap keeps each column as narrow as its content ---- */
.mks_tb_status_pill { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.mks_tb_cell_priority { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; font-size: 12.5px; }
.mks_tb_cell_audience { font-size: 12px; color: var(--mks-tb-faint, #8a94a6); line-height: 1.5;
    display: block; min-width: 110px; }
.mks_tb_muted_dash { color: #cbd2dd; }
.mks_tb_rate { min-width: 116px; }
.mks_tb_cell_date { font-size: 12.5px; color: var(--mks-tb-muted, #6b7280); white-space: nowrap; }

/* ---- Created by: the avatar alone ---- */
.mks_tb_cell_author { display: inline-flex; align-items: center; justify-content: center; }
.mks_tb_avatar_img, .mks_tb_cell_author img {
    width: 30px; height: 30px; border-radius: 50%; object-fit: cover;
    border: 1px solid #e6e9ef; display: block;
}
.mks_tb_avatar {
    width: 30px; height: 30px; border-radius: 50%; background: #eef1f7; color: #5b6676;
    font-size: 10.5px; font-weight: 700; display: inline-flex; align-items: center;
    justify-content: center; letter-spacing: .02em;
}

/* ---- Category cell ---- */
.mks_tb_cell_category { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }

/* ---- Responsiveness ----
   Columns are HIDDEN rather than left to horizontal scrolling, and the facts they carried
   are repeated inside the subject cell instead. A side-scrolling table on a phone is
   technically responsive and practically unusable.

   Column order: 1 Action, 2 Subject, 3 Category, 4 Status, 5 Priority, 6 Audience,
   7 Read rate, 8 By, 9 Date. They drop least-important first. */
@media (max-width: 1400px) {
    .table-mks-tb-announcements > thead > tr > th:nth-child(6),
    .table-mks-tb-announcements > tbody > tr > td:nth-child(6) { display: none; }
}

@media (max-width: 1200px) {
    .table-mks-tb-announcements > thead > tr > th:nth-child(5),
    .table-mks-tb-announcements > tbody > tr > td:nth-child(5),
    .table-mks-tb-announcements > thead > tr > th:nth-child(8),
    .table-mks-tb-announcements > tbody > tr > td:nth-child(8) { display: none; }

    .mks_tb_cs_mobile { display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
        font-size: 11.5px; color: var(--mks-tb-faint, #8a94a6); }
}

@media (max-width: 991px) {
    /* Category folds into the subject cell's summary line from here down. */
    .table-mks-tb-announcements > thead > tr > th:nth-child(3),
    .table-mks-tb-announcements > tbody > tr > td:nth-child(3) { display: none; }
}

@media (max-width: 767px) {
    .table-mks-tb-announcements > thead > tr > th,
    .table-mks-tb-announcements > tbody > tr > td { padding: 11px 8px; }
    .table-mks-tb-announcements > thead > tr > th:nth-child(9),
    .table-mks-tb-announcements > tbody > tr > td:nth-child(9) { display: none; }
    .mks_tb_cell_subject { min-width: 150px; max-width: none; }
    .mks_tb_act { width: 26px; height: 26px; font-size: 11px; }
    .mks_tb_actions { gap: 3px; }
}

/* =====================================================================
 * Shared component styles, previously duplicated in a <style> block per view.
 * Defining them once is what keeps spacing consistent between screens.
 * ================================================================== */

/* ---- Panels: consistent rhythm ---- */
/**
 * Every panel keeps its bottom margin. The previous rule zeroed it for any :last-child,
 * which matched the panel inside a .col-md-6 as well - so a two-column row (Audience /
 * Email delivery, Who sends as what / Sender identities) sat flush against whatever
 * followed it. Only the last panel of the page shell loses its margin.
 */
.mks_tb_wrap .panel_s { margin-bottom: 20px; }
.mks_tb_shell > .panel_s:last-child,
.mks_tb_shell_narrow > .panel_s:last-child { margin-bottom: 0; }
.mks_tb_wrap .row { margin-bottom: 0; }
.mks_tb_wrap .panel-footer { display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }

/* ---- Announcement card (single view preview) ---- */
.mks_tb_card { background: #fff; border: 1px solid var(--mks-tb-line); border-left: 4px solid var(--mks-tb-accent);
    border-radius: 10px; padding: 22px 24px; margin-bottom: 18px; box-shadow: 0 1px 3px rgba(16,24,40,.05); }
.mks_tb_card_top { display: flex; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.mks_tb_card_icon { width: 34px; height: 34px; border-radius: 8px; display: inline-flex;
    align-items: center; justify-content: center; background: #f4f6fa; color: var(--mks-tb-accent); flex: 0 0 auto; }
.mks_tb_card_meta { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 160px; }
.mks_tb_card_kicker { font-size: 10.5px; font-weight: 700; text-transform: uppercase;
    letter-spacing: .05em; color: var(--mks-tb-accent); }
.mks_tb_card_date { font-size: 12px; color: var(--mks-tb-faint); margin-top: 3px; }
.mks_tb_card_badges { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.mks_tb_card_subject { margin: 18px 0 12px; font-size: 19px; font-weight: 650; line-height: 1.35; color: var(--mks-tb-ink); }
.mks_tb_card_body { color: #414b5a; line-height: 1.7; font-size: 14px; }
.mks_tb_card_body > *:last-child { margin-bottom: 0; }
.mks_tb_card_foot { margin-top: 20px; padding-top: 15px; border-top: 1px dashed var(--mks-tb-line);
    display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.mks_tb_reply_note { font-size: 12px; color: var(--mks-tb-faint); flex: 1 1 240px; line-height: 1.5; }

/* ---- AI writer box ---- */
.mks_tb_ai_panel { border-left: 3px solid #8b5cf6; }
.mks_tb_ai_help { font-size: 13px; color: var(--mks-tb-faint); margin: 0 0 14px; line-height: 1.55; }
.mks_tb_ai_presets { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.mks_tb_ai_briefwrap { display: flex; align-items: flex-end; justify-content: space-between;
    gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
.mks_tb_ai_briefwrap > label { margin: 0; font-size: 11px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .04em; color: var(--mks-tb-muted); }
.mks_tb_ai_voice { display: flex; align-items: center; gap: 6px; }
.mks_tb_ai_voice select.form-control { width: auto; }
.mks_tb_ai_voice_on, .mks_tb_ai_voice_on:hover, .mks_tb_ai_voice_on:focus {
    background: #fee2e2; border-color: #fca5a5; color: #b91c1c; }
.mks_tb_ai_voice_on i { animation: mks_tb_pulse 1.1s ease-in-out infinite; }
@keyframes mks_tb_pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .mks_tb_ai_voice_on i { animation: none; } }
.mks_tb_ai_live { min-height: 18px; margin-top: 5px; font-size: 12px; color: #7b8794; font-style: italic; }
.mks_tb_ai_controls { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; margin-top: 12px; }
.mks_tb_ai_controls select.form-control { width: auto; }
.mks_tb_ai_applybox { margin: 12px 0 0; }
.mks_tb_ai_quick { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 14px;
    padding-top: 14px; border-top: 1px dashed var(--mks-tb-line); }
.mks_tb_ai_quick_label { font-size: 10.5px; font-weight: 700; text-transform: uppercase;
    letter-spacing: .05em; color: var(--mks-tb-faint); margin-right: 4px; }
.mks_tb_ai_msg { font-size: 12px; margin-top: 12px; min-height: 18px; line-height: 1.6; }
.mks_tb_ai_ok, .mks_tb_demo_ok { color: #10b981; }
.mks_tb_ai_bad, .mks_tb_demo_bad { color: #ef4444; }
.mks_tb_ai_busy { opacity: .55; pointer-events: none; }
.mks_tb_ai_status { font-size: 12.5px; margin-top: 8px; min-height: 18px; line-height: 1.6; }
.mks_tb_ai_kb { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; }
.mks_tb_ai_model_row { display: flex; gap: 6px; }
.mks_tb_ai_model_row select { flex: 1 1 auto; min-width: 0; }

/* ---- Attachments ---- */
.mks_tb_files { margin-top: 8px; }
.mks_tb_file { display: flex; align-items: center; gap: 9px; padding: 8px 11px;
    border: 1px solid var(--mks-tb-line); border-radius: 8px; margin-bottom: 6px; font-size: 13px; }
.mks_tb_file_name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mks_tb_file_size { font-size: 11px; color: var(--mks-tb-faint); white-space: nowrap; }
.mks_tb_file_add { display: flex; gap: 8px; align-items: center; margin-top: 8px; flex-wrap: wrap; }
.mks_tb_file_add input[type="file"] { flex: 1 1 220px; min-width: 0; }

/* ---- Repeatable editor rows (categories, presets, SMTP identities) ---- */
.mks_tb_editor_row { border: 1px solid var(--mks-tb-line); border-radius: 9px; padding: 12px; margin-bottom: 10px; }
.mks_tb_editor_grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(165px, 1fr)); gap: 7px; }
.mks_tb_editor_foot { display: flex; align-items: center; gap: 14px; margin-top: 10px; flex-wrap: wrap; }
.mks_tb_editor_spacer { flex: 1 1 auto; }
.mks_tb_add_row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 4px; }
.mks_tb_add_row > input { flex: 1 1 180px; min-width: 0; }
.mks_tb_cat_table input[type="color"] { padding: 2px; height: 32px; }

/* ---- Diagnostics ---- */
.mks_tb_diag_table > tbody > tr > td { padding: 9px 8px; font-size: 13px; vertical-align: middle;
    border-top-color: #f0f2f6; }
.mks_tb_diag_icon { width: 30px; }
.mks_tb_demo_actions { display: flex; gap: 8px; flex-wrap: wrap; }
.mks_tb_demo_msg { font-size: 12px; margin-top: 10px; min-height: 16px; }
.mks_tb_danger { border-left: 3px solid #ef4444; }

/* ---- Delivery / receipts ---- */
.mks_tb_send_stats { display: flex; gap: 10px 18px; flex-wrap: wrap; font-size: 12px; color: var(--mks-tb-muted); }
.mks_tb_send_stat { display: inline-flex; align-items: center; gap: 6px; }
.mks_tb_send_actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 15px; }
.mks_tb_receipt_email { font-size: 11px; color: var(--mks-tb-faint); }
.mks_tb_react_summary { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 14px; }
.mks_tb_merge_ref { font-size: 12px; line-height: 2; }
.mks_tb_merge_ref code { margin-right: 4px; }
.mks_tb_budget_head { display: flex; justify-content: space-between; gap: 10px;
    margin-bottom: 9px; flex-wrap: wrap; font-size: 13px; }
.mks_tb_chart_wrap { position: relative; height: 230px; }

/* ---- Archive list ---- */
.mks_tb_archive_search { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.mks_tb_archive_search .form-control { flex: 1 1 220px; min-width: 0; }
.mks_tb_archive_list { display: flex; flex-direction: column; gap: 10px; }
.mks_tb_a_row { background: #fff; border: 1px solid var(--mks-tb-line);
    border-left: 3px solid var(--mks-tb-accent); border-radius: 9px; padding: 15px 17px;
    display: flex; gap: 15px; align-items: flex-start; }
.mks_tb_a_main { flex: 1 1 auto; min-width: 0; }
.mks_tb_a_top { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.mks_tb_a_pri { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
.mks_tb_a_date { font-size: 12px; color: var(--mks-tb-faint); }
.mks_tb_a_subject { margin: 9px 0 6px; font-size: 15px; font-weight: 650; color: var(--mks-tb-ink); line-height: 1.4; }
.mks_tb_a_excerpt { margin: 0; font-size: 13px; color: var(--mks-tb-faint); line-height: 1.6; }
.mks_tb_a_side { flex: 0 0 auto; text-align: right; }
.mks_tb_a_read { font-size: 11px; font-weight: 600; color: #10b981; white-space: nowrap; }
.mks_tb_a_unread { font-size: 11px; font-weight: 700; color: #f59e0b; white-space: nowrap; }
.mks_tb_a_unread i { font-size: 7px; vertical-align: middle; }

/* ---- Automation panel ---- */
.mks_tb_cron_alert { margin-bottom: 15px; font-size: 13px; }
.mks_tb_auto_row { display: flex; flex-wrap: wrap; gap: 10px 22px; font-size: 13px; color: var(--mks-tb-muted); }
.mks_tb_auto_item { display: inline-flex; align-items: center; gap: 6px; }
.mks_tb_auto_item strong { color: var(--mks-tb-ink); font-size: 15px; }
.mks_tb_upcoming { margin-top: 15px; padding-top: 13px; border-top: 1px dashed var(--mks-tb-line); }
.mks_tb_up_row { display: flex; justify-content: space-between; gap: 12px; padding: 5px 0;
    font-size: 13px; flex-wrap: wrap; }
.mks_tb_up_meta { font-size: 12px; color: var(--mks-tb-faint); }

@media (max-width: 767px) {
    .mks_tb_card { padding: 17px; }
    .mks_tb_card_subject { font-size: 17px; }
    .mks_tb_card_foot { flex-direction: column; align-items: stretch; }
    .mks_tb_card_foot .btn { width: 100%; }
    .mks_tb_ai_controls > *, .mks_tb_ai_controls select.form-control { width: 100%; }
    .mks_tb_ai_briefwrap { align-items: stretch; }
    .mks_tb_ai_voice { width: 100%; }
    .mks_tb_ai_voice select.form-control, .mks_tb_ai_voice .btn { flex: 1 1 auto; }
    .mks_tb_editor_grid { grid-template-columns: 1fr; }
    .mks_tb_editor_foot > * { width: 100%; }
    .mks_tb_add_row > * { width: 100%; flex: 1 1 100%; }
    .mks_tb_a_row { flex-direction: column; gap: 9px; }
    .mks_tb_a_side { text-align: left; }
    .mks_tb_archive_search > * { width: 100%; flex: 1 1 100%; }
    .mks_tb_chart_wrap { height: 200px; }
    .mks_tb_wrap .panel-footer { flex-direction: column-reverse; }
    .mks_tb_wrap .panel-footer > .btn { width: 100%; }
}

/* ---- Remaining shared bits ---- */
.mks_tb_panel_head { display: flex; align-items: center; justify-content: space-between;
    gap: 10px; margin-bottom: 15px; flex-wrap: wrap; }
.mks_tb_panel_head .mks_tb_section_title { margin-bottom: 0; border-bottom: 0; padding-bottom: 0; }
.mks_tb_view_actions { display: flex; gap: 8px; flex-wrap: wrap; }
.mks_tb_caveat, .mks_tb_phase_note { font-size: 13px; line-height: 1.6; }
.mks_tb_phase_note { margin: 18px 0 0; }
.mks_tb_receipt_table > tbody > tr > td,
.mks_tb_book_table > tbody > tr > td { padding: 9px 8px; font-size: 13px; vertical-align: middle; }
.mks_tb_receipt_table > thead > tr > th,
.mks_tb_book_table > thead > tr > th { font-size: 10.5px; text-transform: uppercase;
    letter-spacing: .05em; font-weight: 700; color: var(--mks-tb-muted); padding: 9px 8px; }
.mks_tb_settings_nav { margin-bottom: 0; }
.mks_tb_cond, .mks_tb_cond_repeat { margin-top: 2px; }
.mks_tb_preset_prompt { font-size: 12.5px; }

@media (max-width: 767px) {
    .mks_tb_panel_head { flex-direction: column; align-items: stretch; }
    .mks_tb_panel_head > .btn { width: 100%; }
    .mks_tb_view_actions > .btn { flex: 1 1 auto; }
}
.mks_tb_preset { /* JS hook only; layout comes from .mks_tb_editor_row */ }
.mks_tb_r_e { font-size: 14px; line-height: 1; }

/* ---- Archive: read in full ---- */
.mks_tb_a_actions { display: flex; align-items: center; gap: 12px; margin-top: 12px; flex-wrap: wrap; }
.mks_tb_a_filecount { font-size: 11.5px; color: var(--mks-tb-faint); display: inline-flex; align-items: center; gap: 5px; }
.mks_tb_a_toggle .mks_tb_a_toggle_off { display: none; }
.mks_tb_a_open .mks_tb_a_toggle .mks_tb_a_toggle_on { display: none; }
.mks_tb_a_open .mks_tb_a_toggle .mks_tb_a_toggle_off { display: inline; }
.mks_tb_a_open .mks_tb_a_excerpt { display: none; }
.mks_tb_a_full { margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--mks-tb-line); }
.mks_tb_a_body { font-size: 13.5px; line-height: 1.7; color: #414b5a; }
.mks_tb_a_body > *:last-child { margin-bottom: 0; }
.mks_tb_a_files { margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--mks-tb-line);
    display: flex; flex-direction: column; gap: 6px; }
.mks_tb_a_files_label { font-size: 10.5px; font-weight: 700; text-transform: uppercase;
    letter-spacing: .05em; color: var(--mks-tb-faint); display: inline-flex; align-items: center; gap: 6px; }
.mks_tb_a_file { display: inline-flex; align-items: center; gap: 9px; padding: 8px 11px;
    border: 1px solid var(--mks-tb-line); border-radius: 8px; font-size: 13px; background: #fff; }
.mks_tb_a_file:hover { background: #f7f9fc; }
.mks_tb_a_file > span:first-of-type { flex: 1 1 auto; min-width: 0; overflow: hidden;
    text-overflow: ellipsis; white-space: nowrap; }

/* =====================================================================
 * Top navbar dropdown
 *
 * Sits inside core's navbar <ul>, so it inherits the navbar's own icon sizing and only
 * the badge and the panel need styling.
 * ================================================================== */
/* The navbar button and its badge are styled inline where the item is emitted - core's
   Tailwind utilities sit on the elements themselves and beat a stylesheet rule. See
   mks_tb_navbar_item(). */
.mks_tb_nav_menu { width: 340px; max-width: calc(100vw - 24px); padding: 0 !important; overflow: hidden; }
.mks_tb_nav_head { padding: 13px 16px 11px; border-bottom: 1px solid #eef0f4;
    display: flex; flex-direction: column; gap: 2px; }
.mks_tb_nav_head_title { font-size: 13px; font-weight: 700; color: #1f2937; }
.mks_tb_nav_head_count { font-size: 11.5px; color: #ef4444; font-weight: 600; }

/* Capped and scrollable, so a long history cannot push the panel off screen. */
.mks_tb_nav_list { max-height: 360px; overflow-y: auto; }
.mks_tb_nav_item { display: flex; gap: 10px; padding: 11px 16px; border-bottom: 1px solid #f4f6f9; }
.mks_tb_nav_item:last-child { border-bottom: 0; }
.mks_tb_nav_item:hover { background: #f7f9fc; }
.mks_tb_nav_unread { background: #fbfcff; }
.mks_tb_nav_dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; margin-top: 5px; }
.mks_tb_nav_body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.mks_tb_nav_subject { font-size: 13px; font-weight: 600; color: #1f2937; line-height: 1.4;
    overflow-wrap: break-word; }
.mks_tb_nav_unread .mks_tb_nav_subject { font-weight: 700; }
.mks_tb_nav_meta { font-size: 11px; color: #8a94a6; }
.mks_tb_nav_new { color: #f59e0b; font-weight: 700; }
.mks_tb_nav_empty { padding: 26px 16px; text-align: center; font-size: 13px; color: #8a94a6; }
.mks_tb_nav_foot { display: flex; align-items: center; justify-content: center; gap: 7px;
    padding: 12px 16px; border-top: 1px solid #eef0f4; background: #fafbfd;
    font-size: 12.5px; font-weight: 600; }
.mks_tb_nav_foot:hover { background: #f3f6fb; }

@media (max-width: 767px) {
    .mks_tb_nav_menu { width: 300px; }
    .mks_tb_nav_list { max-height: 300px; }
}

/* ---- Archive search ---- */
.mks_tb_search_wrap { position: relative; flex: 1 1 260px; min-width: 0; }
.mks_tb_search_wrap .form-control { padding-left: 34px; padding-right: 34px; }
.mks_tb_search_icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
    color: #9aa3b2; font-size: 12px; pointer-events: none; }
.mks_tb_search_clear { position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
    width: 24px; height: 24px; border: 0; border-radius: 50%; background: #eef1f7;
    color: #6b7280; font-size: 11px; cursor: pointer; }
.mks_tb_search_clear:hover { background: #e2e7f0; color: #1f2937; }
.mks_tb_search_count { font-size: 12px; color: var(--mks-tb-faint); margin-top: 10px; }
.mks_tb_a_highlight { box-shadow: 0 0 0 2px #93c5fd; transition: box-shadow .3s ease; }

/* ---- Tracking: Perfex's own table look ---- */
.mks_tb_perfex_table > thead > tr > th { font-size: 12px; font-weight: 600; white-space: nowrap; }
.mks_tb_perfex_table > tbody > tr > td { vertical-align: middle; font-size: 13px; }
.mks_tb_perfex_table .mks_tb_rate { min-width: 120px; }

/* =====================================================================
 * Buttons
 *
 * Scoped to .mks_tb_wrap so only this module's screens are affected and Perfex's own
 * pages keep their look untouched.
 * ================================================================== */
.mks_tb_wrap .btn {
    border-radius: 8px;
    font-weight: 600;
    font-size: 13px;
    padding: 8px 16px;
    line-height: 1.45;
    border-width: 1px;
    transition: background-color .14s ease, border-color .14s ease, box-shadow .14s ease, transform .06s ease;
}
.mks_tb_wrap .btn-sm { border-radius: 7px; font-size: 12.5px; padding: 6px 13px; }
.mks_tb_wrap .btn:focus, .mks_tb_wrap .btn:active:focus {
    outline: 0; box-shadow: 0 0 0 3px rgba(79, 110, 247, .18);
}
/* A press should feel like a press, but never move layout around it. */
.mks_tb_wrap .btn:active { transform: translateY(1px); }

.mks_tb_wrap .btn-default {
    background: #fff; border-color: #dfe3ea; color: #465061;
}
.mks_tb_wrap .btn-default:hover, .mks_tb_wrap .btn-default:focus {
    background: #f6f8fb; border-color: #cbd2dd; color: #1f2937;
}
.mks_tb_wrap .btn-primary {
    background: #4f6ef7; border-color: #4f6ef7;
    box-shadow: 0 1px 2px rgba(79, 110, 247, .25);
}
.mks_tb_wrap .btn-primary:hover, .mks_tb_wrap .btn-primary:focus {
    background: #4058df; border-color: #4058df;
}
.mks_tb_wrap .btn-danger  { background: #ef4444; border-color: #ef4444; }
.mks_tb_wrap .btn-danger:hover  { background: #dc2626; border-color: #dc2626; }
.mks_tb_wrap .btn-warning { background: #f59e0b; border-color: #f59e0b; color: #fff; }
.mks_tb_wrap .btn-warning:hover { background: #d97706; border-color: #d97706; color: #fff; }
.mks_tb_wrap .btn[disabled], .mks_tb_wrap .btn.disabled { opacity: .5; box-shadow: none; }
.mks_tb_wrap .btn > i { font-size: .95em; }

/* =====================================================================
 * Selects
 *
 * The native arrow sat hard against the right edge. A custom arrow with real padding
 * fixes it consistently across browsers, which the native one never does.
 * ================================================================== */
/**
 * appearance: none removes the browser's NATIVE vertical centring along with the arrow, so
 * the text fell to the bottom of the box - it was being laid out against Bootstrap's fixed
 * height with no line-box to centre it. height:auto plus symmetrical padding and an explicit
 * line-height puts the label back in the middle, deterministically, in every browser.
 */
.mks_tb_wrap select.form-control:not([multiple]) {
    -webkit-appearance: none; -moz-appearance: none; appearance: none;
    height: auto;
    min-height: 38px;
    padding: 8px 34px 8px 13px;
    line-height: 1.45;
    text-overflow: ellipsis;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%236b7280' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 13px center;
    background-size: 14px 14px;
}

/* The compact variant used inside tables needs its own metrics, or it inherits the
   38px minimum and every table row grows. */
.mks_tb_wrap select.form-control.input-sm:not([multiple]) {
    min-height: 32px;
    padding: 5px 28px 5px 10px;
    font-size: 12.5px;
    line-height: 1.4;
    background-position: right 10px center;
    background-size: 12px 12px;
}

/* Match the text inputs beside them, so a row of controls lines up. */
.mks_tb_wrap input.form-control:not([type="checkbox"]):not([type="radio"]),
.mks_tb_wrap .form-control:not(select):not(textarea) {
    min-height: 38px;
}
.mks_tb_wrap input.form-control.input-sm { min-height: 32px; }
/* IE/Edge legacy: hide the built-in arrow so it cannot double up. */
.mks_tb_wrap select.form-control::-ms-expand { display: none; }
.mks_tb_wrap select.form-control:not([multiple]):focus { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%234f6ef7' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E"); }

/* Inputs get matching corners so a row of controls looks like one set. */
.mks_tb_wrap .form-control { border-radius: 8px; }
.mks_tb_wrap textarea.form-control { border-radius: 8px; }

/* =====================================================================
 * Collapsible card
 * ================================================================== */
.mks_tb_collapse_head {
    display: flex; align-items: center; gap: 12px; width: 100%;
    padding: 15px 20px; background: none; border: 0; text-align: left; cursor: pointer;
    border-radius: 10px;
}
.mks_tb_collapse_head:hover { background: #fafbfd; }
.mks_tb_collapse_title {
    font-weight: 700; text-transform: uppercase; letter-spacing: .04em; font-size: 11px;
    color: var(--mks-tb-muted); display: inline-flex; align-items: center; gap: 8px;
}
.mks_tb_collapse_hint { font-size: 12px; color: var(--mks-tb-faint); flex: 1 1 auto; }
.mks_tb_collapse_chevron { color: #9aa3b2; font-size: 12px; transition: transform .18s ease; }
.mks_tb_collapsed .mks_tb_collapse_chevron { transform: rotate(-90deg); }
.mks_tb_collapsed .mks_tb_collapse_body { display: none; }
.mks_tb_collapse_body { padding-top: 4px !important; }

/* =====================================================================
 * Instructions
 *
 * One treatment for every instruction line in the module: a plain muted line with a small
 * icon, never a boxed panel. Mixing the two - a bordered card for one sentence and a bare
 * line for the next - was what made the compose screen look inconsistent.
 * ================================================================== */
.mks_tb_note {
    display: flex; align-items: flex-start; gap: 8px; margin: 14px 0 0;
    font-size: 12.5px; line-height: 1.6; color: var(--mks-tb-faint);
}
.mks_tb_note > i { color: #a3adbd; font-size: 12px; margin-top: 3px; flex: 0 0 auto; }

/* Consecutive instructions read as one group. Two notes each with a full top margin left a
   paragraph-sized gap between sentences that belong together. */
.mks_tb_note + .mks_tb_note { margin-top: 5px; }

/* The lead line under a card's main control needs breathing room on BOTH sides - it was
   sitting hard against the checkbox above and the first field below. */
.mks_tb_note_lead { margin: 12px 0 20px; }

/* Info icon in a label or a card title. */
.mks_tb_info_icon { color: #a3adbd; font-size: 12px; cursor: help; }
.mks_tb_info_icon:hover { color: #6b7280; }
.mks_tb_section_title .mks_tb_info_icon { font-size: 12px; }

/* =====================================================================
 * Sender summary on the compose screen
 * ================================================================== */
.mks_tb_sender {
    margin: 12px 0 4px; padding: 12px 14px; background: #f7f9fc;
    border: 1px solid #eaeef5; border-radius: 8px;
    display: flex; flex-direction: column; gap: 7px;
}
/**
 * A two-column grid rather than flex with a fixed basis. The label was clamped to 130px,
 * which forced "Emails will be sent from" onto two lines and left the value stranded beside
 * a wide empty gap; 1fr now lets the value use the whole remaining width.
 */
.mks_tb_sender_row { display: grid; grid-template-columns: 168px 1fr; gap: 4px 14px; align-items: baseline; }
.mks_tb_sender_label {
    font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
    color: var(--mks-tb-faint); line-height: 1.5;
}
.mks_tb_sender_value { font-size: 13px; color: #374151; font-weight: 600; min-width: 0;
    overflow-wrap: break-word; }
.mks_tb_sender_value > i { color: #93a0b5; margin-right: 4px; }
.mks_tb_sender_via {
    display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 999px;
    background: #eef2ff; color: #4f46e5; font-size: 10.5px; font-weight: 700;
}

@media (max-width: 767px) {
    .mks_tb_sender_row { grid-template-columns: 1fr; gap: 2px; }
    .mks_tb_collapse_head { padding: 13px 15px; gap: 8px; }
    .mks_tb_collapse_hint { display: none; }
}


/* ---- Archive: read state ---- */
.mks_tb_a_read_flag { font-size: 11px; font-weight: 600; color: #10b981; white-space: nowrap; }