/* ============================================================
   BRAND COLOUR PALETTE  (maroon #8e0203 and its derivatives)
   ============================================================ */

/* Background colours */
.b_bg1  { background-color: #8e0203; }
.b_bg2  { background-color: #ddb3b3; }
.b_bg3  { background-color: #fbf5f5; }
.b_bg6  { background-color: #f1f1f1; }
.b_bg7  { background-color: #f5e7e7; }
.b_bg9  { background-color: #f5e7e7; }
.b_bg10 { background-color: #ffffff; }
.b_bg12 { background-color: #f1f1f1; }
.b_fc7     { color: #8e0203; }
.b_fcolor2 { color: #ffffff; }
.b_fcolor4 { color: #ffffff; }
.b_txtgray { color: #888888; }

/* Table row colours */
.b_tr0 { background-color: #f5e7e7; }

/* Chart colours */
.b_color0 { fill: #8e0203; }

/* Border colours */
.b_brdr1 { border: 1px solid #c68181; }

/* Text decoration */
.b_und1 { text-decoration: underline; }

/* Spinner rotation while the lead generator is working */
@keyframes b_spinner_rotate {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* Calendar month header cells */
.b_cal_mh {
    height: 9vw;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Calendar blank day cell (leading blanks) */
.b_cal_blank {
    height: 11vw;
}

/* Calendar day tile (7 columns, Sun..Sat) */
.b_cal_day {
    width: 14.28%;
    height: 11vw;
    float: left;
    text-align: center;
    font-size: 3vw;
    border: 1px solid #eed9d9;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

/* Calendar day circle (selected / today highlight) */
.b_cal_circle {
    width: 9vw;
    height: 9vw;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

/* Today outline around the circle when not selected */
.b_cal_today_outline {
    outline: 2px solid #8e0203;
}

/* Campaign card (dismissal_parent b_student_card style) */
.b_campaign_card {
    width: 100%;
    display: flex;
    align-items: center;
    padding: 12px 8px;
    border-bottom: 1px solid #eed9d9;
    background-color: #ffffff;
    box-sizing: border-box;
    cursor: pointer;
}

.b_campaign_icon {
    width: 56px;
    height: 56px;
    min-width: 56px;
    border-radius: 50%;
    overflow: hidden;
    border: 1px solid #eed9d9;
    background-color: #f5f5f5;
    display: flex;
    align-items: center;
    justify-content: center;
}

.b_campaign_info {
    flex: 1;
    min-width: 0;
    padding: 0 8px;
}

.b_campaign_name {
    font-size: 16px;
    font-weight: 700;
    color: #333;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.b_campaign_detail {
    font-size: 13px;
    color: #888;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.b_campaign_arrow {
    min-width: 24px;
    text-align: center;
    color: #888;
    font-size: 18px;
}

/* Status chips for leads/opportunities */
.b_status_chip {
    display: inline-block;
    border-radius: 8px;
    padding: 2px 8px;
    font-size: 1.2vh;
    font-weight: bold;
}

.b_status_new {
    background-color: #f5f5f5;
    color: #616161;
}

.b_status_qualified {
    background-color: #f5e7e7;
    color: #6b0102;
}

.b_status_lost {
    background-color: #6b0102;
    color: #fff;
}

/* ============================================================
   SALES AGENT HOME DASHBOARD TILES (cardowner-style)
   ============================================================ */

/* BF logo proper colors: orange polygons 1&3, black polygon 2 */
svg[aria-label="Business-Folio"] polygon:nth-child(1),
svg[aria-label="Business-Folio"] polygon:nth-child(3) {
    fill: #ffa500;
    stroke: #ffa500;
}

svg[aria-label="Business-Folio"] polygon:nth-child(2) {
    fill: #111111;
    stroke: #111111;
}

/* Dashboard tile */
.b_dash_tile {
    position: relative;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}

/* Dashboard badge (counts on tiles) */
.b_dash_badge {
    position: absolute;
    top: 6px;
    right: 6px;
    min-width: 20px;
    height: 20px;
    padding: 0 4px;
    background-color: #6b0102;
    color: #fff;
    border-radius: 50%;
    font-size: 11px;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
}

/* Profile circle icon */
.b_profile_circle {
    border: 2px solid #eed9d9;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

/* Chat starter button (bottom-right, home only) */
.b_chat_starter {
    position: fixed;
    right: 16px;
    bottom: 16px;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background-color: #8e0203;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    z-index: 30;
    cursor: pointer;
}

.b_chat_history {
    flex: 1;
    overflow-y: scroll;
    padding: 10px;
}

.b_chat_input {
    flex: 1;
    border: 1px solid #ddb3b3;
    border-radius: 18px;
    padding: 8px 12px;
    font-size: 14px;
    outline: none;
}

/* Capacity chat suggestion bar - one horizontal line above the input, no scrollbars */
.b_ct_sugg {
  display: flex;
  align-items: center;
  gap: 2vw;
  overflow-x: auto;
  padding: 2vw;
  border-top: 1px solid #eed9d9;
  background: #ffffff;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.b_ct_sugg::-webkit-scrollbar { display: none; }
.b_ct_sugg_chip {
  align-self: center;
  flex: 0 0 auto;
  padding: 6px 14px;
  border: 1px solid #ddb3b3;
  border-radius: 20px;
  background: #f4f4f4;
  white-space: nowrap;
  font-size: 4.5vw;
  color: #333333;
  width: fit-content;
  margin: 0 4vw;
}
.b_ct_sugg_chip:active { background: #e0e0e0; }

/* Spacer inside a chat bubble between a short comment and the next question/summary */
.b_q_gap { height: 14px; }

/* Objective (A/B/C/D) option row inside an assess question bubble */
.b_opt_row { margin: 6px 0; line-height: 1.4; font-size: 4.6vw; }

/* Chat pages: fixed full-screen flex column; ONLY the history area scrolls.
   Shared by every coach/chat page (each carries the .b_ct_chat_page class). */
.b_ct_chat_page {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}
.b_ct_chat_page > .b_chat_history {
  flex: 0 0 auto;
  height: calc(100% - 45vw);
}
.b_ct_chat_page > .b_hist_spc {
  flex: 1 1 auto;
  min-height: 2vw;
}
.b_ct_chat_page > .b_ct_sugg {
  flex: 0 0 auto;
}
.b_ct_chat_page > .w_100p.h_4t1 {
  flex: 0 0 auto;
}

/* Chat bubble sizing/format for Capacity chat pages */
/* Chat pages: each message occupies its own full-width, cleared row */
.b_ct_chat_page .k_chatline {
  width: 100%;
  clear: both;
  margin: 1.5vw 0;
}

.b_ct_chat_page .k_userbot,
.b_ct_chat_page .k_sysbot {
  max-width: 90%;
  box-sizing: border-box;
  line-height: 1.5;
  font-size: 6vw;
  text-align: left;
}
/* grow the framework text helpers inside chat bubbles so lesson/example text is bigger too */
.b_ct_chat_page .k_sysbot .k_f5vw,
.b_ct_chat_page .k_sysbot .k_f6vw { font-size: 6vw; }
.b_ct_chat_page .b_ct_sugg_chip { font-size: 4.6vw; }
.b_ct_chat_page .b_chat_input { font-size: 4.6vw; }


/* Lesson card visuals: AI SVG figure and the "Example:" box inside a chat bubble */
#learn_chat_page .k_sysbot .b_lsn_fig {
  width: 100%;
  margin: 0 0 1.5vw 0;
  background: #ffffff;
  border: 1px solid #eed9d9;
  border-radius: 2vw;
  padding: 2vw;
  box-sizing: border-box;
}
#learn_chat_page .k_sysbot .b_lsn_fig svg {
  display: block;
  width: 100%;
  height: auto;
}
/* gentle entrance so the picture "appears" instead of popping harshly */
@keyframes ct_lsn_pop {
  0%   { opacity: 0; transform: translateY(8px) scale(0.97); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
#learn_chat_page .k_sysbot .b_lsn_fig {
  animation: ct_lsn_pop 0.45s ease-out;
}
#learn_chat_page .k_sysbot .b_lsn_ex {
  margin-top: 1.5vw;
  padding: 1.5vw 2vw;
  background: #fbf5f5;
  border-radius: 2vw;
  color: #333333;
}

/* Learn (processor 140): nested topic > subtopic > skill tree in the resume card.
   The level codes are printed explicitly, so the browser list markers are removed
   and each level is indented instead. */
#learn_chat_page .k_sysbot .b_tree {
  list-style: none;
  margin: 0.6vw 0 0 0;
  padding-left: 0;
}
#learn_chat_page .k_sysbot .b_tree .b_tree {
  margin: 0.5vw 0 0 0;
  padding-left: 5vw;
}
#learn_chat_page .k_sysbot .b_tree li {
  margin: 0.4vw 0;
  line-height: 1.35;
  color: #333333;
}

/* Method/step bullet list inside a lesson bubble */
#learn_chat_page .k_sysbot .b_lsn_list {
  margin: 1vw 0 0 0;
  padding-left: 6vw;
  color: #333333;
}
#learn_chat_page .k_sysbot .b_lsn_list li {
  margin: 0.6vw 0;
}


/* Practice / quick-check countdown timer inside a bubble */
#learn_chat_page .k_sysbot .b_ct_prac_head {
  margin-bottom: 1vw;
}
#learn_chat_page .k_sysbot .b_ct_prac_timer {
  display: inline-block;
  margin-left: 1vw;
  padding: 0 2vw;
  border: 1px solid #ddb3b3;
  border-radius: 2vw;
  background: #fbf5f5;
  font-family: monospace;
  font-weight: bold;
  font-size: 6vw;
  color: #6b0102;
  vertical-align: baseline;
}



/* Practice chat (processor 150): question header, figure, flashcard front and the
   model-steps list of a step-by-step question - same look as the Learn quick-check. */
#practice_chat_page .k_sysbot .b_ct_prac_head {
  margin-bottom: 1vw;
}
#practice_chat_page .k_sysbot .b_lsn_fig {
  width: 100%;
  margin: 0 0 1.5vw 0;
  background: #ffffff;
  border: 1px solid #eed9d9;
  border-radius: 2vw;
  padding: 2vw;
  box-sizing: border-box;
}
#practice_chat_page .k_sysbot .b_lsn_fig svg {
  display: block;
  width: 100%;
  height: auto;
}
/* A flashcard front is boxed so it reads as a card */
#practice_chat_page .k_sysbot .b_flash_card {
  border: 1px solid #ddb3b3;
  border-radius: 2vw;
  padding: 2vw;
  background: #fbf5f5;
}
/* The model solution of a step-by-step question, shown once it is answered */
#practice_chat_page .k_sysbot .b_steps_list {
  margin: 1.5vw 0 0 0;
  padding-left: 6vw;
  color: #333333;
}
#practice_chat_page .k_sysbot .b_steps_list li {
  margin: 0.6vw 0;
}

/* Chat day divider (dashed line - Today - dashed line) */
.b_ct_day {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 4vw;
}
.b_ct_day::before,
.b_ct_day::after {
  content: "";
  flex: 1;
  border-top: 1px dashed #ddb3b3;
}
.b_ct_day span {
  font-size: 3.4vw;
  color: #8a8a8a;
}

/* Progress coach (processor 180): chart bars + insights inside chat bubbles */
.b_prog_row { margin: 5px 0; }
.b_prog_label { font-size: 4vw; line-height: 1.4; }
.b_bar_svg { width: 100%; height: 1.2vh; display: block; margin-top: 2px; }
.b_prog_insight {
  margin-top: 8px;
  padding: 6px 8px;
  border-left: 3px solid #ddb3b3;
  background-color: #fbf5f5;
  border-radius: 4px;
  font-size: 3.8vw;
  line-height: 1.5;
}

/* ============================================================
   MOVED FRAMEWORK BRAND RULES
   Relocated out of ttstyles.css and re-derived from the maroon
   logo colour (#8e0203). Framework k_ utilities renamed to b_.
   ============================================================ */

/* SVG fills (was .k_svgfill1 / .k_svgfill2) */
.b_svgfill1 { fill: #8e0203; }

/* Border colours (was .k_brdrb1) */
.b_brdrb1 { border-bottom: solid #eed9d9 1px; }

/* Business-Folio logo polygons (orange + black brand) */
.b_co_logo polygon:nth-child(1),
.b_co_logo polygon:nth-child(3) { fill: #ffa500; stroke: #ffa500; }
.b_co_logo polygon:nth-child(2) { fill: #111111; stroke: #111111; }

/* App loader (rethemed to the brand) */
.b_tt_loader {
    border: 16px solid #eef2f9;
    border-radius: 50%;
    border-top: 16px solid #e3b62c;
    border-bottom: 16px solid #0f2244;
    width: 120px;
    height: 120px;
    animation: spin 2s linear infinite;
}

/* Table headers (was gold #ccb78f) */
table thead th { background-color: #8e0203; color: #ffffff; }
.b_th { background-color: #8e0203; color: #ffffff; }

/* OTP verification dialog: roomier line height + gap between elements */
.b_dlg_otp {
    gap: 2.5vw;
    line-height: 1.6;
}

/* ============================================================
   VOICE AGENT — full-screen company dialer
   Light background (#f1f1f1). --va-brand is set by the company
   va_config command (gold is the default).
   ============================================================ */
:root { --va-brand: #e3b62c; }
.b_va_page {
    background-color: #f1f1f1;
    overflow: hidden;
}
.b_va_frame {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
    padding: 3vh 4vw 2vh;
}
.b_va_top {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.b_va_logo { display: block; margin: 0 auto; object-fit: contain; }
.b_va_close {
    position: absolute;
    top: 1.2vh;
    right: 4vw;
    z-index: 5;
    font-size: 8vw;
    line-height: 1;
    color: #888888;
    cursor: pointer;
}
.b_va_name {
    font-size: 5vw;
    font-weight: 700;
    color: #1a1a1a;
    margin-top: 1.5vh;
    text-align: center;
}
.b_va_timer {
    font-size: 7vw;
    font-weight: 600;
    letter-spacing: 0.06em;
    color: #1a1a1a;
    margin-top: 0.5vh;
}
.b_va_status {
    font-size: 4.5vw;
    color: var(--va-brand);
    margin-top: 0.5vh;
}
/* middle: free space filled with dashboard tiles (2 columns x 2 rows) */
.b_va_mid {
    width: 100%;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow-y: auto;
    padding: 2vh 0;
    box-sizing: border-box;
}
.b_va_tiles {
    width: 84vw;
    max-width: 340px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 3vw;
}
.b_va_tile {
    background-color: #ffffff;
    border: 1px solid #dddddd;
    border-radius: 4vw;
    padding: 3.5vw 2vw;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1vh;
    cursor: pointer;
    color: var(--va-brand);
}
.b_va_tile_ico { width: 8vw; max-width: 34px; height: auto; }
.b_va_tile_lbl { font-size: 3.2vw; color: #333333; text-align: center; }
.b_va_tile_on { border-color: var(--va-brand); box-shadow: 0 0 0 2px var(--va-brand) inset; }
.b_va_tile_dis { opacity: 0.4; pointer-events: none; }
/* one panel at a time fills the middle area (tiles | keypad | transcript | history) */
.b_va_panel {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
}
.b_va_panel_head {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 1vw 1vh;
    font-size: 3.4vw;
    color: #666666;
}
.b_va_panel_x { font-size: 6vw; line-height: 1; cursor: pointer; color: #888888; padding: 0 2vw; }
.b_va_panel_body {
    flex: 1 1 auto;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.b_va_log_body {
    flex: 1 1 auto;
    width: 100%;
    overflow-y: auto;
    padding: 0 1vw;
    box-sizing: border-box;
}
.b_va_log_body .k_sysbot { background-color: #ffffff; color: #333333; border: 1px solid #e2e2e2; }
.b_va_log_body .k_userbot { background-color: var(--va-brand); color: #ffffff; }
.b_va_hist_body {
    flex: 1 1 auto;
    width: 100%;
    overflow-y: auto;
    padding: 0 1vw;
    box-sizing: border-box;
}
.b_va_hist_body .k_sysbot { background-color: #ffffff; color: #333333; border: 1px solid #e2e2e2; }
.b_va_hist_body .k_userbot { background-color: var(--va-brand); color: #ffffff; }
.b_va_hist_empty { width: 100%; text-align: center; color: #888888; font-size: 3.6vw; padding: 2vh 0; }
/* keypad */
.b_va_keypad {
    width: 60vw;
    max-width: 250px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2.5vw;
    padding: 1vh 0;
}
.b_va_key {
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    background-color: #ffffff;
    color: #1a1a1a;
    border: 1px solid #cccccc;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 6vw;
    cursor: pointer;
}
/* bottom: dial + hang up */
.b_va_controls {
    width: 84vw;
    max-width: 340px;
    display: flex;
    gap: 3vw;
    padding: 1.5vh 0 1vh;
}
.b_va_dial, .b_va_hang {
    flex: 1 1 0;
    height: 48px;
    border-radius: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 4vw;
    font-weight: 700;
    color: #ffffff;
    cursor: pointer;
}
.b_va_dial { background-color: #1faa59; }
.b_va_hang { background-color: #d93636; }
.b_va_dis { opacity: 0.4; pointer-events: none; }
/* footer */
.b_va_foot {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2vw;
    padding-top: 0.6vh;
}
.b_va_bf { width: 20px; height: 20px; flex: 0 0 auto; }
.b_va_foot_txt { font-size: 2.7vw; color: #888888; text-align: center; }
.b_va_btn_hide { display: none; }

/* Wider screens (tablet / desktop): keep the same phone frame, centred. */
@media (min-width: 481px) {
    .b_va_frame {
        max-width: 420px;
        margin: 0 auto;
        border-left: 1px solid #16294a;
        border-right: 1px solid #16294a;
    }
}

/* ============================================================
   BRAND ACCENTS (shared)
   navy #0f2244, gold #e3b62c.
   ============================================================ */
.b_login_logo { width: 40vw; max-width: 180px; height: auto; }
/* ============================================================
   AI-Receptionist product page (Business-Folio) — black / orange / white
   ============================================================ */
.b_pd_page {
    min-height: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}
.b_pd_white { color: #ffffff; }
.b_pd_orange { color: #ffa500; }
.b_pd_muted { color: #ccd3dc; }
.b_pd_logo { width: 72px; height: 72px; display: block; margin: 0 auto; }
.b_pd_grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 2.5vw;
}
.b_pd_item {
    width: 42vw;
    max-width: 165px;
    background-color: #14171c;
    border: 1px solid #23272e;
    border-radius: 3vw;
    padding: 3vw 2vw;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1vh;
}
.b_pd_ico { width: 9vw; max-width: 38px; height: auto; color: #ffa500; }
.b_pd_lbl { font-size: 3.4vw; color: #ffffff; text-align: center; }
.b_pd_hist {
    width: 84vw;
    max-width: 360px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 2vw;
}
.b_pd_hist_item {
    display: flex;
    align-items: center;
    gap: 3vw;
    background-color: #14171c;
    border: 1px solid #23272e;
    border-radius: 3vw;
    padding: 2.5vw 3vw;
    box-sizing: border-box;
    cursor: pointer;
}
.b_pd_hist_logo { width: 10%; max-width: 40px; height: auto; }
.b_pd_hist_txt { flex: 1 1 auto; }
.b_pd_hist_name { color: #ffffff; font-size: 3.6vw; }
.b_pd_hist_sub { color: #ccd3dc; font-size: 3vw; }
.b_pd_tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1vh;
    width: 60vw;
    max-width: 220px;
    margin: 0 auto;
    background-color: #14171c;
    border: 1px solid #23272e;
    border-radius: 4vw;
    padding: 3vw 2vw;
    box-sizing: border-box;
    cursor: pointer;
    color: #ffa500;
}
.b_pd_tile_ico { width: 9vw; max-width: 38px; height: auto; }
.b_pd_tile_lbl { font-size: 3.4vw; color: #ffffff; text-align: center; }
/* mobile-dialer style call history list */
.b_pd_calllist { width: 100%; display: flex; flex-direction: column; text-align: left; }
/* titled full-page (top padding only, no bottom gap) */
.b_pd_titled { padding-top: 54px; box-sizing: border-box; }
/* top aligned content (call history / transcript pages) */
.b_pd_top { justify-content: flex-start; }
/* "...and many more" link to the product site */
.b_pd_morelink { color: #e07c00; font-size: 4vw; text-decoration: none; }
/* transcript page body: exactly like the app chat (scrollable, padded) */
.b_pd_chat {
    width: 100%;
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 2vw;
    box-sizing: border-box;
    text-align: left;
}
.b_pd_call {
    display: flex;
    align-items: center;
    gap: 3vw;
    padding: 2.5vw 2vw;
    border-bottom: 1px solid #e5e5e5;
    box-sizing: border-box;
    cursor: pointer;
}
.b_pd_call_logo {
    width: 12vw;
    height: 12vw;
    max-width: 48px;
    max-height: 48px;
    border-radius: 50%;
    overflow: hidden;
    flex: 0 0 auto;
    background-color: #f1f1f1;
    border: 1px solid #dddddd;
    display: flex;
    align-items: center;
    justify-content: center;
}
.b_pd_call_logo img { width: 78%; height: 78%; object-fit: contain; }
.b_pd_call_info { flex: 1 1 auto; min-width: 0; }
.b_pd_call_name { color: #1a1a1a; font-size: 4vw; }
.b_pd_call_meta { color: #666666; font-size: 3vw; margin-top: 0.4vh; }
.b_pd_call_arrow { color: #e07c00; font-size: 7vw; line-height: 1; flex: 0 0 auto; }
.b_bg_navy { background-color: #0f2244; }
.b_bg_gold { background-color: #e3b62c; }
.b_brdr_navy { border: 1px solid #0f2244; }

/* Voice agent: tappable numbered choices shown on the phone screen */
.b_va_opts {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 2vw;
    justify-content: center;
    padding: 1vh 0;
}
.b_va_opt {
    padding: 1.6vw 3vw;
    border-radius: 2vw;
    background-color: #16294a;
    color: #ffffff;
    border: 1px solid var(--va-brand);
    font-size: 4vw;
    cursor: pointer;
}


/* ============================================================
   FM VOICE ADMIN DASHBOARD (capacity26-style tiles)
   ============================================================ */
/* group separator line between dashboard tile groups */
.b_dash_sep {
    height: 1px;
    background-color: #e0e0e0;
    margin: 3vw 0;
}


/* ============================================================
   FM VOICE ADMIN — DESKTOP SCAFFOLD (sales_agent_desktop shell)
   Four-panel layout: klbar (left rail) + kmenu (left panel) +
   kstage (tabs + body) + krbar (right rail).
   ============================================================ */
.b_adm_shell {
    position: absolute;
    left: 0;
    top: 0;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    display: flex;
    background-color: #fffbf5;
}
.b_adm_lbar {
    width: 4vw;
    height: 100%;
    overflow: hidden;
    box-sizing: border-box;
    flex: 0 0 auto;
    border-right: 1px solid #ffa500;
    background-color: #fffbf5;
}
.b_adm_rbar {
    width: 4vw;
    height: 100%;
    overflow: hidden;
    box-sizing: border-box;
    flex: 0 0 auto;
    border-left: 1px solid #ffa500;
    background-color: #fffbf5;
}
.b_adm_menu {
    width: 25vw;
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    box-sizing: border-box;
    border-left: 1px solid #ffa500;
    background-color: #ffffff;
    flex: 0 0 auto;
}
.b_adm_menupage {
    width: 100%;
    height: 100%;
    overflow-y: auto;
    box-sizing: border-box;
}
.b_adm_menutitle {
    padding: 0.6vw;
    font-size: 1vw;
    font-weight: bold;
    border-bottom: 1px solid rgb(206, 159, 159);
    color: #ffa500;
}
.b_adm_menurow {
    width: 100%;
    padding: 0.8vw 0.6vw;
    box-sizing: border-box;
    border-bottom: 1px solid rgb(206, 159, 159);
    cursor: pointer;
    display: flex;
    align-items: center;
}
.b_adm_menurow_txt { flex: 1 1 auto; min-width: 0; }
.b_adm_menurow_name { font-size: 1vw; font-weight: bold; color: #333; line-height: 1.6; }
.b_adm_menurow_cap { font-size: 0.85vw; color: #888888; line-height: 1.6; }
.b_adm_menurow_arrow { color: #888888; font-size: 1vw; }
.b_adm_stage {
    width: 67vw;
    height: 100vh;
    overflow: hidden;
    box-sizing: border-box;
    flex: 0 0 auto;
    border-left: 1px solid #ffa500;
    background-color: #fffbf5;
}
.b_adm_stagehead {
    width: 100%;
    height: 3vw;
    box-sizing: border-box;
    background-color: #fffbf5;
    border-bottom: 1px solid rgb(206, 159, 159);
}
.b_adm_stagetabs {
    width: auto;
    height: 3vw;
    float: left;
    overflow: hidden;
}
.b_adm_tabgap {
    width: 1vw;
    height: 3vw;
    float: left;
    overflow: hidden;
    border-bottom: 1px solid rgb(206, 159, 159);
}
.b_adm_tab {
    width: 8vw;
    height: 3vw;
    float: left;
    overflow: hidden;
}
.b_adm_tabspacer { width: 100%; height: 20%; float: left; overflow: hidden; }
.b_adm_tabinner {
    width: 100%;
    height: 80%;
    float: left;
    box-sizing: border-box;
    overflow: hidden;
    border: 1px solid rgb(206, 159, 159);
    border-radius: 5px 5px 0 0;
    background-color: #fffbf5;
    cursor: pointer;
    padding: 5%;
}
.b_adm_tabttl { width: 80%; float: left; font-size: 1vw; padding: 0.3vw; box-sizing: border-box; }
.b_adm_tabx {
    width: 40px;
    height: 40px;
    float: right;
    overflow: hidden;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.b_adm_tabx svg { width: 100%; height: 100%; }
.b_adm_addtab { width: 3vw; height: 3vw; float: left; overflow: hidden; cursor: pointer; }
.b_adm_addtab_ico { width: 60%; aspect-ratio: 1/1; margin-top: 35%; display: block; }
.b_adm_stagebody {
    width: 100%;
    height: calc(100vh - 3vw);
    overflow: hidden;
    background-color: #fffbf5;
}
.b_adm_tabbody {
    width: 100%;
    height: calc(100vh - 3vw);
    overflow: auto;
    box-sizing: border-box;
    font-size: 0.8vw;
    color: #333;
}
.b_adm_rail {
    width: 100%;
    aspect-ratio: 1/1;
    position: relative;
    padding: 5px;
    box-sizing: border-box;
    border-bottom: 1px solid #d3dddc;
    cursor: pointer;
}


/* ============================================================
   FM VOICE ADMIN — DESKTOP STAGE PAGES (loaded into #ttab_0b)
   ============================================================ */
.b_adm_page {
    width: 100%;
    height: 100%;
    overflow-y: auto;
    box-sizing: border-box;
    background-color: #ffffff;
}
.b_adm_page_head {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.8vw 1vw;
    box-sizing: border-box;
    border-bottom: 1px solid #f0d9b5;
}
.b_adm_page_title { font-size: 1.1vw; font-weight: bold; color: #111111; }
.b_adm_page_body { width: 100%; box-sizing: border-box; padding: 1vw; }
/* dashboard tile on the desktop stage (orange + black brand) */
.b_adm_tile {
    background-color: #fff8ef;
    border: 1px solid #f0d9b5;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}