/* ========================================================================== */
/*  STAVATAR DASHBOARD LAYER                                                  */
/*  Reuses the site's design tokens from style.css (--bdx-*). No bootstrap.   */
/* ========================================================================== */

.db_body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}
.db_body a {
    text-decoration: none;
}
.db_body a.color_primary {
    text-decoration: underline;
    text-decoration-thickness: max(1px, 0.08em);
    text-underline-offset: 0.18em;
}

/* --------------------------- MAIN MENU (content pages) --------------------- */
/* The header keeps style.css's .navigation treatment (absolute, transparent,
   padding 15px 0) so it overlays the hero band exactly like the template pages. */
.db_body {
    margin: 0; /* these pages don't load bootstrap's reboot */
}
.db_mainmenu .db_menu_inner {
    margin: 0 5%; /* template gutter: 5% + 15px puts the logo where the bootstrap grid does */
    padding: 0 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}
.db_mainmenu ul.bdx_nav {
    /* style.css positions .navigation .bdx_nav fixed at the viewport top-left;
       reset so the menu stays in the header's flex row */
    position: static;
    display: flex;
    gap: 0; /* pills join into one segmented bar, as on the template pages */
    list-style: none;
    margin: 0;
    padding: 0;
}
.db_mainmenu .has_child {
    position: relative;
}
.db_mainmenu .has_child:hover > .child_menu,
.db_mainmenu .has_child:focus-within > .child_menu {
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: translateY(0) !important;
}
.db_mainmenu ul.db_nav {
    display: none;
}
/* Hero slides under the transparent header with the template's 180px top
   padding (the page bg already equals the template hero's bg_dark_secondary,
   so no band background is needed). */
.db_mainmenu + .db_main {
    padding-top: 0;
}
.db_mainmenu + .db_main > .db_hero:first-child {
    margin-top: 0;
    padding-top: 180px;
    padding-bottom: 36px;
}
/* 1200, not 1024: "Meet our staff" + "Build your staff" carry the bar past the wordmark
   below that, and the items no longer shrink (they wrapped to three lines when they did).
   The template pages switch at the same width, via bootstrap's d-xl classes. */
@media (max-width: 1199px) {
    .db_mainmenu ul.bdx_nav {
        display: none;
    }
    /* the shared burger rule lives at 1024 for the portal top bar; this header needs it
       from 1199 down, or the 1025–1199 band has no menu at all */
    .db_mainmenu .db_nav_toggle {
        display: block;
        margin-left: auto;
    }
    .db_mainmenu ul.db_nav.is_open {
        display: flex;
    }
    .db_mainmenu + .db_main > .db_hero:first-child {
        padding-top: 120px;
    }
}
@media (min-width: 1200px) {
    .db_mainmenu .db_nav_toggle {
        display: none !important;
    }
}

/* ------------------------------ TOP BAR ---------------------------------- */
.db_topbar {
    position: sticky;
    top: 0;
    z-index: 100;
    background-color: color-mix(in srgb, var(--bdx-dark-secondary) 92%, transparent);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid color-mix(in srgb, var(--bdx-light-primary) 10%, transparent);
    padding: 12px 0;
}

.db_topbar_inner {
    max-width: 94%;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 20px;
}

.db_logo {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--bdx-light-primary);
    font-family: var(--bdx-heading-font);
    font-weight: 700;
    font-size: 1.3rem;
    text-decoration: none;
    flex-shrink: 0;
}
.db_logo svg {
    width: 26px;
    height: 26px;
    fill: var(--bdx-accent-color);
}
.db_logo:hover {
    color: var(--bdx-light-primary);
}

.db_portal_tag {
    font-size: 0.7rem;
    letter-spacing: 0.1rem;
    text-transform: uppercase;
    color: var(--bdx-dark-primary);
    background-color: var(--bdx-accent-color);
    border-radius: 3px;
    padding: 4px 10px;
    flex-shrink: 0;
}

.db_nav {
    display: flex;
    align-items: center;
    gap: 24px;
    list-style: none;
    margin: 0 0 0 auto;
    padding: 0;
}
.db_nav a {
    font-size: 0.8rem;
    letter-spacing: 0.1rem;
    text-transform: uppercase;
    color: var(--bdx-light-secondary);
    text-decoration: none;
    transition: 0.3s color var(--bdx-transition-slice);
}
.db_nav a:hover,
.db_nav a.active {
    color: var(--bdx-accent-color);
}

.db_user {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--bdx-light-primary);
    font-size: 0.9rem;
    flex-shrink: 0;
}
.db_user img {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid color-mix(in srgb, var(--bdx-light-primary) 25%, transparent);
}

.db_nav_toggle {
    display: none;
    margin-left: auto;
    background: none;
    border: 1px solid color-mix(in srgb, var(--bdx-light-primary) 25%, transparent);
    border-radius: 3px;
    color: var(--bdx-light-primary);
    font-size: 1.2rem;
    line-height: 1;
    padding: 7px 10px;
    /* 41x37 from padding alone — below the 44px minimum comfortable tap target. */
    min-width: 44px;
    min-height: 44px;
}

/* ------------------------------- LAYOUT ---------------------------------- */
.db_main {
    max-width: 94%;
    width: 94%;
    margin: 0 auto;
    flex: 1;
    padding: 40px 0 60px;
    display: flex;
    flex-direction: column;
    gap: 28px;
}

.db_hero {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    margin-top: 10px;
}
.db_hero h1 {
    font-size: clamp(1.8rem, 3.2vw, 3rem);
    line-height: 1.05;
    margin: 0 0 6px;
}
.db_hero p {
    margin: 0;
}
.db_role_media {
    position: relative;
    width: 100%;
    aspect-ratio: 30 / 17;
    margin: 0;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--bdx-light-primary) 10%, transparent);
    border-radius: 6px;
    background: var(--bdx-dark-primary);
}
.db_role_media picture,
.db_role_media > picture > img {
    display: block;
    width: 100%;
    height: 100%;
}
.db_role_media > picture > img {
    object-fit: cover;
}
.db_role_identity {
    position: absolute;
    left: 20px;
    bottom: 20px;
    display: flex;
    align-items: center;
    gap: 12px;
    max-width: calc(100% - 40px);
    margin: 0;
    padding: 9px 14px 9px 9px;
    border: 1px solid color-mix(in srgb, var(--bdx-light-primary) 16%, transparent);
    border-radius: 999px;
    background: color-mix(in srgb, var(--bdx-very-dark) 86%, transparent);
    color: var(--bdx-light-primary);
    backdrop-filter: blur(12px);
}
.db_role_identity img {
    width: 56px;
    height: 56px;
    flex: 0 0 56px;
    border-radius: 50%;
    object-fit: cover;
}
.db_role_identity span {
    font-size: 0.78rem;
    letter-spacing: 0.06rem;
    text-transform: uppercase;
}
.db_role_identity strong {
    display: block;
    margin-bottom: 2px;
    font-size: 0.98rem;
    letter-spacing: normal;
    text-transform: none;
}
.db_kicker {
    text-transform: uppercase;
    font-size: 0.8rem;
    letter-spacing: 0.1rem;
    color: var(--bdx-light-secondary);
    margin-bottom: 10px;
    display: block;
}

.db_section_head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 4px;
}
.db_section_head h2 {
    font-size: 1.4rem;
    margin: 0;
}
.db_section_head .db_kicker {
    margin: 0;
}

/* -------------------------------- CARDS ---------------------------------- */
.db_card {
    background-color: var(--bdx-dark-primary);
    border: 1px solid color-mix(in srgb, var(--bdx-light-primary) 7%, transparent);
    border-radius: 6px;
    padding: 26px;
}

.db_grid_kpi {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}
.db_kpi p {
    margin: 0;
}
.db_kpi .db_kpi_value {
    font-family: var(--bdx-heading-font);
    font-weight: 700;
    font-size: clamp(2rem, 3.4vw, 2.9rem);
    line-height: 1;
    color: var(--bdx-light-primary);
    margin: 12px 0 8px;
}
.db_kpi .db_kpi_value small {
    font-size: 55%;
    color: var(--bdx-light-secondary);
    font-weight: 500;
}
.db_kpi_label {
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.1rem;
    color: var(--bdx-light-secondary);
}
.db_kpi_note {
    font-size: 0.85rem;
    color: var(--bdx-light-secondary);
    /* Block, not flex: these are sentences containing an inline link, and flex makes
       each text run its own item — a 7px gap lands where a word space belongs and the
       sentence breaks per-item. The status dot portal.js/ops.js prepends is
       inline-flex, so it still aligns on its own. */
    display: block;
}
.db_kpi_note .db_status {
    vertical-align: middle;
    margin-right: 7px;
}

.db_grid_2 {
    display: grid;
    grid-template-columns: 1.6fr 1fr;
    gap: 16px;
    align-items: start;
}
.db_grid_2 > * {
    min-width: 0;
}
.db_main > * {
    min-width: 0;
}

.db_grid_staff {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

/* ------------------------------- STATUS ---------------------------------- */
.db_status {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 0.75rem;
    letter-spacing: 0.08rem;
    text-transform: uppercase;
    color: var(--bdx-light-primary);
    white-space: nowrap;
}
.db_status::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}
.db_status.is_good::before {
    background-color: #74c46a;
}
.db_status.is_warn::before {
    background-color: #e8c547;
}
.db_status.is_alert::before {
    background-color: #e2703a;
}
.db_status i {
    font-size: 0.95rem;
    line-height: 1;
}

/* ------------------------------- BUTTONS ---------------------------------- */
/* Primary actions reuse .bdx_small_btn from style.css; .db_cta clears the
   overlay offset it carries on the landing page. */
.db_cta {
    bottom: 0;
    right: 0;
}

.db_btn_ghost {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 0.75rem;
    letter-spacing: 0.1rem;
    text-transform: uppercase;
    color: var(--bdx-light-primary);
    background: none;
    border: 1px solid color-mix(in srgb, var(--bdx-light-primary) 30%, transparent);
    border-radius: 3px;
    padding: 8px 14px;
    text-decoration: none;
    cursor: pointer;
    transition: 0.3s background-color var(--bdx-transition-slice), 0.3s color var(--bdx-transition-slice), 0.3s border-color var(--bdx-transition-slice);
}
.db_btn_ghost:hover {
    background-color: var(--bdx-accent-color);
    border-color: var(--bdx-accent-color);
    color: var(--bdx-dark-primary);
}
.db_btn_accent {
    background-color: var(--bdx-accent-color);
    border-color: var(--bdx-accent-color);
    color: var(--bdx-dark-primary);
}
.db_btn_accent:hover {
    background-color: var(--bdx-light-primary);
    border-color: var(--bdx-light-primary);
}

/* -------------------------------- PILLS ----------------------------------- */
.db_pill {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.06rem;
    padding: 5px 10px;
    border-radius: 3px;
    background-color: color-mix(in srgb, var(--bdx-light-primary) 10%, transparent);
    color: var(--bdx-light-primary);
    white-space: nowrap;
}

/* -------------------------------- TABLES ---------------------------------- */
.db_table_wrap {
    overflow-x: auto;
}
.db_table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.95rem;
}
.db_table th {
    text-align: left;
    text-transform: uppercase;
    font-size: 0.7rem;
    letter-spacing: 0.1rem;
    font-weight: 500;
    color: var(--bdx-light-secondary);
    padding: 10px 14px;
    border-bottom: 1px solid color-mix(in srgb, var(--bdx-light-primary) 12%, transparent);
    white-space: nowrap;
}
.db_table td {
    padding: 12px 14px;
    border-bottom: 1px solid color-mix(in srgb, var(--bdx-light-primary) 6%, transparent);
    color: var(--bdx-light-secondary);
    white-space: nowrap;
}
.db_table td:first-child,
.db_table td strong {
    color: var(--bdx-light-primary);
    font-weight: 500;
}
.db_table tr:last-child td {
    border-bottom: none;
}
.db_table tbody tr {
    transition: 0.2s background-color ease;
}
.db_table tbody tr:hover {
    background-color: color-mix(in srgb, var(--bdx-light-primary) 4%, transparent);
}

/* -------------------------------- STAFF ----------------------------------- */
.db_staff_head {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 16px;
}
.db_staff_head img {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    object-fit: cover;
}
.db_staff_head h3 {
    font-size: 1.15rem;
    margin: 0;
}
.db_staff_head p {
    margin: 0;
    font-size: 0.85rem;
}
.db_staff_metrics {
    display: flex;
    gap: 18px;
    margin: 14px 0 18px;
    flex-wrap: wrap;
}
.db_staff_metrics div p {
    margin: 0;
}
.db_staff_metric_value {
    font-family: var(--bdx-heading-font);
    font-weight: 700;
    font-size: 1.3rem;
    color: var(--bdx-light-primary);
}
.db_staff_metric_label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.08rem;
    color: var(--bdx-light-secondary);
}
.db_staff_actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

/* ------------------------------ LIST ROWS --------------------------------- */
.db_rowlist {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}
.db_rowlist li {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 4px;
    border-bottom: 1px solid color-mix(in srgb, var(--bdx-light-primary) 6%, transparent);
    flex-wrap: wrap;
}
.db_rowlist li:last-child {
    border-bottom: none;
}
.db_rowlist .db_row_icon {
    width: 38px;
    height: 38px;
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: color-mix(in srgb, var(--bdx-light-primary) 8%, transparent);
    color: var(--bdx-accent-color);
    font-size: 1.1rem;
    flex-shrink: 0;
}
.db_rowlist .db_row_body {
    flex: 1;
    min-width: 220px;
}
.db_rowlist .db_row_body p {
    margin: 0;
}
.db_rowlist .db_row_title {
    color: var(--bdx-light-primary);
    font-size: 1rem;
}
.db_rowlist .db_row_meta {
    font-size: 0.8rem;
    color: var(--bdx-light-secondary);
}
.db_row_actions {
    display: flex;
    gap: 10px;
    flex-shrink: 0;
}

/* -------------------------------- CHARTS ---------------------------------- */
.db_chart {
    width: 100%;
}
.db_chart svg {
    width: 100%;
    height: auto;
    display: block;
}
.db_chart .db_bar {
    fill: var(--bdx-accent-color);
    transition: 0.2s opacity ease;
}
.db_chart .db_bar.is_dim {
    opacity: 0.45;
}
.db_chart .db_grid_line {
    stroke: color-mix(in srgb, var(--bdx-light-primary) 8%, transparent);
    stroke-width: 1;
}
.db_chart .db_axis_label,
.db_chart .db_value_label {
    font-family: var(--bdx-text-font);
    font-size: 11px;
    fill: color-mix(in srgb, #fbf8dc 65%, transparent);
}
.db_chart .db_value_label {
    fill: #fbf8dc;
}

.db_tooltip {
    position: fixed;
    z-index: 200;
    pointer-events: none;
    background-color: var(--bdx-very-dark);
    border: 1px solid color-mix(in srgb, var(--bdx-light-primary) 20%, transparent);
    border-radius: 3px;
    padding: 8px 12px;
    font-size: 0.8rem;
    color: var(--bdx-light-primary);
    opacity: 0;
    transition: 0.15s opacity ease;
    white-space: nowrap;
}
.db_tooltip strong {
    color: var(--bdx-accent-color);
}

.db_table_toggle summary {
    cursor: pointer;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.1rem;
    color: var(--bdx-light-secondary);
    margin-top: 14px;
}
.db_table_toggle summary:hover {
    color: var(--bdx-accent-color);
}

/* -------------------------------- FORMS ------------------------------------ */
.db_main_narrow {
    max-width: 720px;
}
.db_form {
    display: flex;
    flex-direction: column;
    gap: 18px;
}
.db_form_row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
}
.db_form_row > * {
    min-width: 0;
}
.db_field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.db_field input,
.db_field select,
.db_field textarea {
    min-width: 0;
    background-color: var(--bdx-dark-secondary);
    border: 1px solid color-mix(in srgb, var(--bdx-light-primary) 15%, transparent);
    border-radius: 3px;
    color: var(--bdx-light-primary);
    font-family: var(--bdx-text-font);
    font-size: 1rem;
    padding: 12px 14px;
    outline: none;
    transition: 0.3s border-color var(--bdx-transition-slice);
}
.db_field input:focus,
.db_field select:focus,
.db_field textarea:focus {
    border-color: var(--bdx-accent-color);
}
.db_field textarea {
    resize: vertical;
}
.db_field select option {
    background-color: var(--bdx-dark-secondary);
}
.db_form_error {
    margin: 0;
    font-size: 0.9rem;
    color: #e2703a;
}
.db_btn_lg {
    justify-content: center;
    padding: 13px 18px;
    font-size: 0.85rem;
}
.db_grid_kpi_3 {
    grid-template-columns: repeat(3, 1fr);
}
.db_empty {
    color: var(--bdx-light-secondary);
    font-size: 0.9rem;
    padding: 14px 4px;
    margin: 0;
}

@media (max-width: 720px) {
    .db_form_row,
    .db_grid_kpi_3 {
        grid-template-columns: 1fr;
    }
}

/* --------------------------- COLD CALL CONSOLE ----------------------------- */
.cc_alpha_pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.7rem;
    letter-spacing: 0.12rem;
    text-transform: uppercase;
    color: var(--bdx-dark-primary);
    background-color: var(--bdx-accent-color);
    border-radius: 3px;
    padding: 4px 10px;
    vertical-align: middle;
}

.cc_grid {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 16px;
    align-items: start;
}
.cc_grid > * {
    min-width: 0;
}
.cc_grid .db_card {
    max-width: 100%;
}
.cc_config_stack {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.cc_step_label {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin: 0 0 12px;
    flex-wrap: wrap;
}
.cc_step_label .cc_step_num {
    font-family: var(--bdx-heading-font);
    font-weight: 700;
    color: var(--bdx-accent-color);
    font-size: 0.85rem;
}
.cc_step_label h3 {
    font-size: 1.05rem;
    margin: 0;
}
.cc_step_label .cc_step_hint {
    font-size: 0.78rem;
    color: var(--bdx-light-secondary);
    margin-left: auto;
}

.cc_templates {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
.cc_template {
    display: flex;
    flex-direction: column;
    gap: 6px;
    text-align: left;
    background-color: var(--bdx-dark-secondary);
    border: 1px solid color-mix(in srgb, var(--bdx-light-primary) 12%, transparent);
    border-radius: 4px;
    padding: 14px;
    color: var(--bdx-light-primary);
    cursor: pointer;
    transition: 0.25s border-color var(--bdx-transition-slice), 0.25s background-color var(--bdx-transition-slice);
}
.cc_template i {
    font-size: 1.3rem;
    color: var(--bdx-accent-color);
}
.cc_template strong {
    font-size: 0.92rem;
    font-weight: 600;
}
.cc_template span {
    font-size: 0.78rem;
    color: var(--bdx-light-secondary);
    line-height: 1.35;
}
.cc_template:hover {
    border-color: color-mix(in srgb, var(--bdx-accent-color) 60%, transparent);
}
.cc_template.is_selected {
    border-color: var(--bdx-accent-color);
    background-color: color-mix(in srgb, var(--bdx-accent-color) 8%, var(--bdx-dark-secondary));
}

.cc_files {
    list-style: none;
    margin: 10px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.cc_files li {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.82rem;
    color: var(--bdx-light-primary);
    background-color: color-mix(in srgb, var(--bdx-light-primary) 6%, transparent);
    border-radius: 3px;
    padding: 7px 10px;
}
.cc_files i {
    color: var(--bdx-accent-color);
}
.cc_files .cc_file_meta {
    margin-left: auto;
    color: var(--bdx-light-secondary);
    font-size: 0.72rem;
}
.cc_files button {
    background: none;
    border: none;
    color: var(--bdx-light-secondary);
    cursor: pointer;
    padding: 0 2px;
    font-size: 0.9rem;
}
.cc_files button:hover {
    color: #e2703a;
}

.cc_drop {
    appearance: none;
    width: 100%;
    background: transparent;
    font: inherit;
    border: 1px dashed color-mix(in srgb, var(--bdx-light-primary) 25%, transparent);
    border-radius: 4px;
    padding: 16px;
    text-align: center;
    font-size: 0.82rem;
    color: var(--bdx-light-secondary);
    cursor: pointer;
    transition: 0.25s border-color var(--bdx-transition-slice);
}
.cc_drop:hover,
.cc_drop.is_over {
    border-color: var(--bdx-accent-color);
    color: var(--bdx-light-primary);
}

.cc_toggle_row {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.85rem;
    color: var(--bdx-light-primary);
}
.cc_toggle_row input {
    accent-color: #d4f902;
    width: 16px;
    height: 16px;
}
.cc_toggle_row .cc_toggle_hint {
    color: var(--bdx-light-secondary);
    font-size: 0.75rem;
}

.cc_advanced {
    margin-top: 2px;
    border: 1px solid color-mix(in srgb, var(--bdx-light-primary) 12%, transparent);
    border-radius: 4px;
    background-color: color-mix(in srgb, var(--bdx-light-primary) 3%, transparent);
}
.cc_advanced summary {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 13px 42px 13px 14px;
    color: var(--bdx-light-primary);
    cursor: pointer;
    list-style: none;
    font-size: 0.86rem;
}
.cc_advanced summary::-webkit-details-marker {
    display: none;
}
.cc_advanced summary::after {
    content: "+";
    position: absolute;
    top: 50%;
    right: 15px;
    color: var(--bdx-accent-color);
    font-family: var(--bdx-heading-font);
    font-size: 1.2rem;
    transform: translateY(-50%);
}
.cc_advanced[open] summary::after {
    content: "−";
}
.cc_advanced summary:hover,
.cc_advanced summary:focus-visible {
    color: var(--bdx-accent-color);
}
.cc_advanced summary small {
    color: var(--bdx-light-secondary);
    font-size: 0.72rem;
    line-height: 1.35;
}
.cc_advanced_body {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 14px;
    border-top: 1px solid color-mix(in srgb, var(--bdx-light-primary) 8%, transparent);
}
.cc_field_help {
    color: var(--bdx-light-secondary);
    font-size: 0.72rem;
    line-height: 1.45;
}
.cc_advanced_actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}
.cc_brief_meter {
    color: var(--bdx-light-secondary);
    font-size: 0.72rem;
    text-align: right;
}
.cc_brief_meter.is_condensed {
    color: #e8c547;
}

/* Call panel */
.cc_call {
    display: flex;
    flex-direction: column;
    min-height: 560px;
    position: sticky;
    top: 20px;
}
.cc_call [hidden] {
    display: none !important;
}
.cc_call_head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-bottom: 14px;
    border-bottom: 1px solid color-mix(in srgb, var(--bdx-light-primary) 8%, transparent);
}
.cc_call_head img {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    object-fit: cover;
}
.cc_call_avatar {
    display: grid;
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    place-items: center;
    border: 1px solid color-mix(in srgb, var(--bdx-accent-color) 55%, transparent);
    border-radius: 50%;
    background: color-mix(in srgb, var(--bdx-accent-color) 12%, var(--bdx-dark-primary));
    color: var(--bdx-accent-color);
    font-size: 1.2rem;
}
.cc_call_head .cc_call_who p {
    margin: 0;
}
.cc_call_who .cc_name {
    color: var(--bdx-light-primary);
    font-size: 0.95rem;
    font-weight: 500;
}
.cc_call_who .cc_state {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.08rem;
    color: var(--bdx-light-secondary);
}
.cc_timer {
    margin-left: auto;
    font-family: var(--bdx-heading-font);
    font-weight: 600;
    color: var(--bdx-light-primary);
    font-variant-numeric: tabular-nums;
}

.cc_orb_wrap {
    display: flex;
    justify-content: center;
    padding: 18px 0 6px;
}
.cc_orb {
    width: 74px;
    height: 74px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, color-mix(in srgb, #d4f902 85%, #fff), #7a8f00);
    opacity: 0.25;
    transition: 0.3s opacity ease, 0.3s transform ease;
}
.cc_call.is_agent_speaking .cc_orb {
    opacity: 1;
    animation: ccPulse 1.1s ease-in-out infinite;
}
@keyframes ccPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.12); }
}
@media (prefers-reduced-motion: reduce) {
    .cc_call.is_agent_speaking .cc_orb {
        animation: none;
        opacity: 1;
    }
}

.cc_transcript {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px 2px;
    min-height: 200px;
    max-height: 380px;
}
.cc_msg {
    max-width: 85%;
    border-radius: 6px;
    padding: 10px 14px;
    font-size: 0.92rem;
    line-height: 1.4;
}
.cc_msg.from_agent {
    align-self: flex-start;
    background-color: color-mix(in srgb, var(--bdx-light-primary) 8%, transparent);
    color: var(--bdx-light-primary);
}
.cc_msg.from_you {
    align-self: flex-end;
    background-color: color-mix(in srgb, var(--bdx-accent-color) 18%, var(--bdx-dark-secondary));
    color: var(--bdx-light-primary);
}
.cc_msg.cc_system {
    align-self: center;
    background: none;
    color: var(--bdx-light-secondary);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.08rem;
}

.cc_chips {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    padding: 8px 0;
}
.cc_chips button {
    font-size: 0.75rem;
    color: var(--bdx-light-secondary);
    background: none;
    border: 1px solid color-mix(in srgb, var(--bdx-light-primary) 18%, transparent);
    border-radius: 100px;
    padding: 6px 12px;
    cursor: pointer;
    transition: 0.25s color var(--bdx-transition-slice), 0.25s border-color var(--bdx-transition-slice);
}
.cc_chips button:hover {
    color: var(--bdx-dark-primary);
    background-color: var(--bdx-accent-color);
    border-color: var(--bdx-accent-color);
}

.cc_input_row {
    display: flex;
    gap: 8px;
    padding-top: 10px;
    border-top: 1px solid color-mix(in srgb, var(--bdx-light-primary) 8%, transparent);
}
.cc_input_row input {
    flex: 1;
    min-width: 0;
    background-color: var(--bdx-dark-secondary);
    border: 1px solid color-mix(in srgb, var(--bdx-light-primary) 15%, transparent);
    border-radius: 3px;
    color: var(--bdx-light-primary);
    font-family: var(--bdx-text-font);
    font-size: 0.95rem;
    padding: 11px 13px;
    outline: none;
}
.cc_input_row input:focus {
    border-color: var(--bdx-accent-color);
}
.cc_mic.is_listening {
    background-color: #e2703a;
    border-color: #e2703a;
    color: var(--bdx-dark-primary);
}
.cc_mic.is_muted {
    border-color: #e2703a;
    color: #e2703a;
}

.cc_voice_note {
    margin: -6px 0 0;
    font-size: 0.78rem;
    line-height: 1.5;
    color: var(--bdx-light-secondary);
}

.cc_idle {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 12px;
    color: var(--bdx-light-secondary);
    padding: 30px 20px;
}
.cc_idle i {
    font-size: 2.4rem;
    color: var(--bdx-accent-color);
}
.cc_idle p {
    margin: 0;
    max-width: 380px;
    font-size: 0.95rem;
}

.cc_summary_stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin: 14px 0;
}
.cc_summary_stats > div {
    background-color: color-mix(in srgb, var(--bdx-light-primary) 5%, transparent);
    border-radius: 4px;
    padding: 12px;
    text-align: center;
}
.cc_summary_stats p {
    margin: 0;
}
.cc_summary_stats .cc_sum_v {
    font-family: var(--bdx-heading-font);
    font-weight: 700;
    font-size: 1.3rem;
    color: var(--bdx-light-primary);
}
.cc_summary_stats .cc_sum_l {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.08rem;
    color: var(--bdx-light-secondary);
}

/* Blueprint accordions */
.cc_blueprint {
    border: 1px solid color-mix(in srgb, var(--bdx-light-primary) 8%, transparent);
    border-radius: 4px;
    margin-bottom: 10px;
    background-color: var(--bdx-dark-primary);
}
.cc_blueprint summary {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    cursor: pointer;
    color: var(--bdx-light-primary);
    font-size: 0.95rem;
    list-style: none;
}
.cc_blueprint summary::-webkit-details-marker {
    display: none;
}
.cc_blueprint summary i {
    color: var(--bdx-accent-color);
    font-size: 1.15rem;
}
.cc_blueprint summary .cc_bp_kpi {
    margin-left: auto;
    font-size: 0.72rem;
    color: var(--bdx-light-secondary);
    text-transform: uppercase;
    letter-spacing: 0.06rem;
}
.cc_blueprint[open] summary {
    border-bottom: 1px solid color-mix(in srgb, var(--bdx-light-primary) 8%, transparent);
}
.cc_bp_body {
    padding: 14px 16px;
    display: grid;
    grid-template-columns: 130px 1fr;
    gap: 8px 14px;
    font-size: 0.88rem;
}
.cc_bp_body dt {
    color: var(--bdx-light-secondary);
    text-transform: uppercase;
    font-size: 0.7rem;
    letter-spacing: 0.08rem;
    padding-top: 2px;
}
.cc_bp_body dd {
    margin: 0;
    color: var(--bdx-light-primary);
}
.cc_bp_body dd em {
    color: var(--bdx-light-secondary);
    font-style: normal;
}

@media (max-width: 1024px) {
    .cc_grid {
        grid-template-columns: 1fr;
    }
    .cc_call {
        position: static;
    }
}
@media (max-width: 720px) {
    .cc_templates {
        grid-template-columns: 1fr;
    }
    .cc_bp_body {
        grid-template-columns: 1fr;
        gap: 2px 0;
    }
    .cc_bp_body dt {
        margin-top: 8px;
    }
    .cc_summary_stats {
        grid-template-columns: 1fr;
    }
    .cc_call {
        min-height: 480px;
    }
    .cc_advanced_actions,
    .cc_advanced_actions .db_btn_ghost {
        width: 100%;
    }
    .cc_brief_meter {
        text-align: left;
    }
}

/* ------------------------- LIVE DASHBOARD POLISH --------------------------- */
.db_skeleton {
    position: relative;
    overflow: hidden;
    background: color-mix(in srgb, var(--bdx-light-primary) 5%, transparent);
    border-radius: 4px;
    min-height: 14px;
}
.db_skeleton::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--bdx-light-primary) 8%, transparent), transparent);
    transform: translateX(-100%);
    animation: dbShimmer 1.4s ease-in-out infinite;
}
@keyframes dbShimmer {
    to { transform: translateX(100%); }
}

[data-dynamic] .db_reveal {
    animation: dbRevealUp 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes dbRevealUp {
    from { opacity: 0; transform: translateY(14px); }
    to { opacity: 1; transform: translateY(0); }
}

.db_staff_activity {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 12px 0 2px;
    font-size: 0.78rem;
    color: var(--bdx-light-secondary);
    min-height: 20px;
}
.db_staff_activity .db_act_dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--bdx-accent-color);
    box-shadow: 0 0 8px var(--bdx-accent-color);
    animation: agBlink 1.6s ease-in-out infinite;
    flex-shrink: 0;
}
.db_staff_activity .db_act_bar {
    flex: 1;
    height: 4px;
    max-width: 90px;
    border-radius: 100px;
    background: color-mix(in srgb, var(--bdx-light-primary) 10%, transparent);
    overflow: hidden;
}
.db_staff_activity .db_act_fill {
    height: 100%;
    background: var(--bdx-accent-color);
    border-radius: 100px;
    transition: width 0.8s ease;
}

.db_toasts {
    position: fixed;
    right: 18px;
    bottom: 18px;
    z-index: 400;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.db_toast {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #1f1f1f;
    border: 1px solid color-mix(in srgb, var(--bdx-accent-color) 45%, transparent);
    border-radius: 6px;
    box-shadow: 0 14px 40px rgba(0, 0, 0, 0.5), 0 0 20px color-mix(in srgb, var(--bdx-accent-color) 12%, transparent);
    color: var(--bdx-light-primary);
    font-size: 0.85rem;
    padding: 12px 16px;
    max-width: 340px;
    animation: dbToastIn 0.45s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.db_toast i {
    color: var(--bdx-accent-color);
    font-size: 1.1rem;
}
.db_toast.is_leaving {
    animation: dbToastOut 0.4s ease both;
}
@keyframes dbToastIn {
    from { opacity: 0; transform: translateX(30px) scale(0.96); }
    to { opacity: 1; transform: translateX(0) scale(1); }
}
@keyframes dbToastOut {
    to { opacity: 0; transform: translateX(30px); }
}

@media (prefers-reduced-motion: reduce) {
    .db_skeleton::after,
    .db_staff_activity .db_act_dot {
        animation: none;
    }
    [data-dynamic] .db_reveal,
    .db_toast {
        animation: none;
    }
}

/* ----------------------------- AGENT DRAWER -------------------------------- */
.ag_overlay {
    position: fixed;
    inset: 0;
    z-index: 300;
    background: color-mix(in srgb, #0f0f0f 62%, transparent);
    backdrop-filter: blur(6px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.35s ease;
}
.ag_overlay.is_open {
    opacity: 1;
    pointer-events: auto;
}
.ag_drawer {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 310;
    width: min(560px, 96vw);
    background: linear-gradient(180deg, #1f1f1f 0%, #181a14 100%);
    border-left: 1px solid color-mix(in srgb, var(--bdx-accent-color) 30%, transparent);
    box-shadow: -30px 0 80px rgba(0, 0, 0, 0.6);
    transform: translateX(102%);
    transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
    display: flex;
    flex-direction: column;
}
.ag_drawer.is_open {
    transform: translateX(0);
}

.ag_head {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 20px 22px 16px;
    border-bottom: 1px solid color-mix(in srgb, var(--bdx-light-primary) 8%, transparent);
}
.ag_avatar_ring {
    position: relative;
    width: 62px;
    height: 62px;
    border-radius: 50%;
    padding: 3px;
    background: conic-gradient(from 180deg, var(--bdx-accent-color), #6a7c00, var(--bdx-accent-color));
    flex-shrink: 0;
}
.ag_avatar_ring img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    display: block;
    border: 2px solid #1f1f1f;
}
.ag_avatar_ring::after {
    content: "";
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    border: 1px solid color-mix(in srgb, var(--bdx-accent-color) 45%, transparent);
    animation: agPulse 2.4s ease-in-out infinite;
}
@keyframes agPulse {
    0%, 100% { transform: scale(1); opacity: 0.7; }
    50% { transform: scale(1.09); opacity: 0.15; }
}
/* the badge photo editor — the roster faces plus a photo booth */
.ag_photo_btn {
    position: absolute;
    right: -4px;
    bottom: -4px;
    z-index: 1;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 1px solid color-mix(in srgb, var(--bdx-light-primary) 26%, transparent);
    background: var(--bdx-dark-primary);
    color: var(--bdx-light-primary);
    font-size: 0.8rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    transition: 0.25s all var(--bdx-transition-slice);
}
.ag_photo_btn:hover {
    background: var(--bdx-accent-color);
    color: var(--bdx-dark-primary);
    border-color: var(--bdx-accent-color);
}
.ag_photo {
    padding: 14px 22px 16px;
    border-bottom: 1px solid color-mix(in srgb, var(--bdx-light-primary) 10%, transparent);
    background: color-mix(in srgb, var(--bdx-light-primary) 3%, transparent);
}
.ag_photo[hidden] {
    display: none;
}
.ag_photo_k {
    margin: 0 0 10px;
    font-family: var(--bdx-heading-font);
    font-size: 0.68rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--bdx-accent-color);
}
.ag_photo_faces {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 10px;
}
.ag_photo_faces button {
    width: 44px;
    height: 44px;
    padding: 0;
    border-radius: 4px;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--bdx-light-primary) 16%, transparent);
    background: none;
    cursor: pointer;
    transition: 0.2s border-color ease, 0.2s transform ease;
}
.ag_photo_faces button img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.ag_photo_faces button:hover {
    transform: translateY(-1px);
    border-color: var(--bdx-accent-color);
}
.ag_photo_faces button.is_on {
    border-color: var(--bdx-accent-color);
    box-shadow: 0 0 0 1px var(--bdx-accent-color);
}
.ag_photo_gen {
    display: flex;
    gap: 8px;
}
.ag_photo_gen input {
    flex: 1;
    min-width: 0;
    background: var(--bdx-dark-secondary);
    border: 1px solid color-mix(in srgb, var(--bdx-light-primary) 16%, transparent);
    border-radius: 4px;
    color: var(--bdx-light-primary);
    padding: 9px 12px;
    font-family: var(--bdx-text-font);
    font-size: 0.85rem;
}
.ag_photo_gen input:focus {
    outline: none;
    border-color: var(--bdx-accent-color);
}
.ag_photo_gen button {
    white-space: nowrap;
}
.ag_photo_note {
    margin: 10px 0 0;
    font-size: 0.74rem;
    color: var(--bdx-light-secondary);
}
.ag_photo.is_busy {
    opacity: 0.6;
    pointer-events: none;
}
.ag_head_meta p {
    margin: 0;
}
.ag_head_meta .ag_name {
    font-family: var(--bdx-heading-font);
    font-weight: 700;
    font-size: 1.35rem;
    color: var(--bdx-light-primary);
    line-height: 1.1;
}
.ag_head_meta .ag_role {
    font-size: 0.8rem;
    color: var(--bdx-light-secondary);
}
.ag_close {
    margin-left: auto;
    background: none;
    border: 1px solid color-mix(in srgb, var(--bdx-light-primary) 22%, transparent);
    border-radius: 3px;
    color: var(--bdx-light-primary);
    font-size: 1.1rem;
    padding: 8px 10px;
    cursor: pointer;
    transition: 0.25s all var(--bdx-transition-slice);
}
.ag_close:hover {
    background: var(--bdx-accent-color);
    color: var(--bdx-dark-primary);
    border-color: var(--bdx-accent-color);
}

.ag_tabs {
    display: flex;
    gap: 4px;
    padding: 12px 22px 0;
}
.ag_tab {
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--bdx-light-secondary);
    font-size: 0.78rem;
    letter-spacing: 0.1rem;
    text-transform: uppercase;
    padding: 10px 14px;
    cursor: pointer;
    transition: 0.25s color ease, 0.25s border-color ease;
}
.ag_tab:hover {
    color: var(--bdx-light-primary);
}
.ag_tab.is_active {
    color: var(--bdx-accent-color);
    border-bottom-color: var(--bdx-accent-color);
    text-shadow: 0 0 18px color-mix(in srgb, var(--bdx-accent-color) 55%, transparent);
}

.ag_body {
    flex: 1;
    overflow-y: auto;
    padding: 18px 22px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* chat */
.ag_chat_msg {
    max-width: 86%;
    border-radius: 8px;
    padding: 10px 14px;
    font-size: 0.92rem;
    line-height: 1.45;
    animation: agRise 0.3s ease both;
}
@keyframes agRise {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}
.ag_chat_msg.from_agent {
    align-self: flex-start;
    background: color-mix(in srgb, var(--bdx-light-primary) 8%, transparent);
    color: var(--bdx-light-primary);
    border: 1px solid color-mix(in srgb, var(--bdx-light-primary) 6%, transparent);
}
.ag_chat_msg.from_client {
    align-self: flex-end;
    background: color-mix(in srgb, var(--bdx-accent-color) 20%, var(--bdx-dark-secondary));
    color: var(--bdx-light-primary);
}
.ag_typing {
    align-self: flex-start;
    display: inline-flex;
    gap: 5px;
    padding: 12px 16px;
}
.ag_typing span {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--bdx-accent-color);
    animation: agBlink 1.2s ease-in-out infinite;
}
.ag_typing span:nth-child(2) { animation-delay: 0.18s; }
.ag_typing span:nth-child(3) { animation-delay: 0.36s; }
@keyframes agBlink {
    0%, 100% { opacity: 0.25; transform: translateY(0); }
    50% { opacity: 1; transform: translateY(-3px); }
}

.ag_input_row {
    display: flex;
    gap: 8px;
    padding: 14px 22px 18px;
    border-top: 1px solid color-mix(in srgb, var(--bdx-light-primary) 8%, transparent);
}
.ag_input_row input {
    flex: 1;
    background: var(--bdx-dark-secondary);
    border: 1px solid color-mix(in srgb, var(--bdx-light-primary) 16%, transparent);
    border-radius: 4px;
    color: var(--bdx-light-primary);
    font-family: var(--bdx-text-font);
    font-size: 0.95rem;
    padding: 12px 14px;
    outline: none;
    transition: 0.25s border-color ease, 0.25s box-shadow ease;
}
.ag_input_row input:focus {
    border-color: var(--bdx-accent-color);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--bdx-accent-color) 18%, transparent);
}

/* tasks */
.ag_task {
    background: color-mix(in srgb, var(--bdx-light-primary) 4%, transparent);
    border: 1px solid color-mix(in srgb, var(--bdx-light-primary) 7%, transparent);
    border-radius: 6px;
    padding: 12px 14px;
    animation: agRise 0.3s ease both;
}
.ag_task_title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 8px;
    color: var(--bdx-light-primary);
    font-size: 0.92rem;
}
.ag_task_title i {
    color: var(--bdx-accent-color);
}
.ag_bar {
    height: 7px;
    border-radius: 100px;
    background: color-mix(in srgb, var(--bdx-light-primary) 8%, transparent);
    overflow: hidden;
    position: relative;
}
.ag_bar_fill {
    height: 100%;
    border-radius: 100px;
    background: linear-gradient(90deg, #8aa000, var(--bdx-accent-color));
    box-shadow: 0 0 12px color-mix(in srgb, var(--bdx-accent-color) 60%, transparent);
    transition: width 0.8s cubic-bezier(0.22, 1, 0.36, 1);
    position: relative;
}
.ag_bar_fill::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.35), transparent);
    transform: translateX(-100%);
    animation: agShine 2.2s ease-in-out infinite;
}
@keyframes agShine {
    to { transform: translateX(100%); }
}
.ag_task_meta {
    display: flex;
    justify-content: space-between;
    margin-top: 7px;
    font-size: 0.75rem;
    color: var(--bdx-light-secondary);
}
.ag_task.is_done .ag_bar_fill::after {
    animation: none;
}
.ag_task.is_done .ag_task_title i {
    color: #74c46a;
}

/* thinking feed */
.ag_feed {
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: 0.85rem;
}
.ag_feed_line {
    display: flex;
    gap: 9px;
    align-items: baseline;
    animation: agRise 0.35s ease both;
}
.ag_feed_line .ag_t {
    color: color-mix(in srgb, var(--bdx-light-primary) 40%, transparent);
    font-variant-numeric: tabular-nums;
    font-size: 0.72rem;
    flex-shrink: 0;
}
.ag_feed_line.is_action {
    color: var(--bdx-light-primary);
}
.ag_feed_line.is_action i {
    color: var(--bdx-accent-color);
}
.ag_feed_line.is_thought {
    color: var(--bdx-light-secondary);
    font-style: italic;
}
.ag_feed_line.is_thought i {
    color: color-mix(in srgb, var(--bdx-light-primary) 45%, transparent);
}
.ag_live_dot {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 0.72rem;
    letter-spacing: 0.1rem;
    text-transform: uppercase;
    color: var(--bdx-light-secondary);
}
.ag_live_dot::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--bdx-accent-color);
    box-shadow: 0 0 10px var(--bdx-accent-color);
    animation: agBlink 1.6s ease-in-out infinite;
}

.db_staff_clickable {
    cursor: pointer;
    transition: 0.3s transform var(--bdx-transition-reveal), 0.3s border-color var(--bdx-transition-slice), 0.3s box-shadow ease;
}
.db_staff_clickable:hover {
    transform: translateY(-4px);
    border-color: color-mix(in srgb, var(--bdx-accent-color) 55%, transparent);
    box-shadow: 0 14px 40px rgba(0, 0, 0, 0.45), 0 0 24px color-mix(in srgb, var(--bdx-accent-color) 12%, transparent);
}

@media (max-width: 720px) {
    .ag_drawer {
        width: 100vw;
    }
}
@media (prefers-reduced-motion: reduce) {
    .ag_drawer,
    .ag_overlay,
    .ag_bar_fill {
        transition: none;
    }
    .ag_avatar_ring::after,
    .ag_bar_fill::after,
    .ag_typing span,
    .ag_live_dot::before {
        animation: none;
    }
}

/* ------------------------------- FOOTER ------------------------------------ */
.db_footer {
    border-top: 1px solid color-mix(in srgb, var(--bdx-light-primary) 8%, transparent);
    padding: 22px 0;
}
.db_footer_inner {
    max-width: 94%;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    font-size: 0.85rem;
    color: var(--bdx-light-secondary);
}
.db_footer_inner p {
    margin: 0;
}

/* ------------------------------ RESPONSIVE --------------------------------- */
@media (max-width: 1100px) {
    .db_grid_kpi {
        grid-template-columns: repeat(2, 1fr);
    }
    .db_grid_staff {
        grid-template-columns: repeat(2, 1fr);
    }
    .db_grid_2 {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 1024px) {
    .db_topbar_inner {
        gap: 12px;
    }
    .db_nav {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        flex-direction: column;
        align-items: flex-start;
        gap: 0;
        background-color: var(--bdx-very-dark);
        border-bottom: 1px solid color-mix(in srgb, var(--bdx-light-primary) 10%, transparent);
        padding: 10px 3%;
    }
    .db_nav.is_open {
        display: flex;
    }
    .db_nav li {
        width: 100%;
    }
    .db_nav a {
        display: block;
        padding: 12px 0;
    }
    .db_nav_toggle {
        display: block;
        margin-left: auto;
    }
    .db_user {
        margin-left: 0;
    }
}

@media (max-width: 720px) {
    .db_user span {
        display: none;
    }
    .db_grid_kpi,
    .db_grid_staff {
        grid-template-columns: 1fr;
    }
    .db_main {
        padding-top: 24px;
    }
    .db_card {
        padding: 20px;
    }
    .db_row_actions {
        width: 100%;
    }
}

@media (max-width: 480px) {
    .db_topbar_inner {
        gap: 10px;
    }
    .db_portal_tag {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .db_body * {
        transition: none !important;
        animation: none !important;
    }
}