/* ==========================================================================
   4xBrokers CRM — design system
   Ported from the approved design at
   modern-trading-platform.razorshariq.chatgpt.site/crm

   Values below are the FINAL cascade values of the design stylesheet
   (later overrides applied), not the first declaration of each selector.

   Loaded after app.css / basic.css so it wins on shared selectors.
   ========================================================================== */

:root {
    --crm-bg: #edf2f1;
    --crm-surface: #fff;
    --crm-surface-alt: #f4f8f7;
    --crm-ink: #1b2736;
    --crm-ink-strong: #173532;
    --crm-ink-soft: #68798c;
    --crm-line: #d7e2e0;
    --crm-line-soft: #e2e8ef;

    --crm-accent: #1c766d;
    --crm-accent-dark: #0f6e62;
    --crm-accent-deep: #087f73;
    --crm-accent-tint: #def2ef;
    --crm-accent-ring: #cbe8e2;

    --crm-nav-bg: #145f58;
    --crm-nav-line: #3d817a;
    --crm-nav-ink: #d8ebe8;
    --crm-nav-active-bg: #1e7169;
    --crm-nav-group-bg: #0f6f66;
    --crm-nav-group-line: #4f8b84;

    --crm-green: #078b69;
    --crm-green-dot: #23b87a;
    --crm-warn: #bd7d17;
    --crm-amber: #9a7052;

    --crm-radius: 10px;
    --crm-radius-sm: 6px;
    --crm-shadow: 0 3px 12px rgba(36, 75, 67, .06);
    --crm-sidebar-w: 260px;
}

/* ---------- shell ------------------------------------------------------ */

body.crm-body {
    margin: 0;
    background: var(--crm-bg);
    color: var(--crm-ink);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
    font-size: 13px;
    line-height: 1.5;
}

.crm-shell {
    display: flex;
    min-height: 100vh;
    background: var(--crm-bg);
    color: var(--crm-ink);
}

.crm-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.crm-content {
    max-width: 1380px;
    padding: 30px;
    flex: 1;
}

/* ---------- sidebar ----------------------------------------------------- */

.crm-sidebar {
    flex: 0 0 var(--crm-sidebar-w);
    width: var(--crm-sidebar-w);
    min-height: 100vh;
    padding: 24px 14px;
    background: var(--crm-nav-bg);
    color: #fff;
    display: flex;
    flex-direction: column;
}

.crm-logo {
    display: flex;
    align-items: center;
    gap: 11px;
    height: 66px;
    padding: 0 4px 14px;
    border-bottom: 1px solid var(--crm-nav-line);
    text-decoration: none;
}

.crm-logo .crm-brand-logo {
    display: block;
    width: 188px;
    height: 56px;
    object-fit: contain;
    object-position: left center;
}

.crm-sidebar nav {
    display: flex;
    flex-direction: column;
    padding-top: 10px;
}

.crm-sidebar .menu-group p {
    display: flex;
    align-items: center;
    min-height: 30px;
    margin: 16px 0 6px;
    padding: 0 11px;
    border: 1px solid var(--crm-nav-group-line);
    border-radius: var(--crm-radius-sm);
    background: var(--crm-nav-group-bg);
    box-shadow: inset 3px 0 #9ad4ca;
    color: #edf9f7;
    font-size: 9px;
    font-weight: 850;
    letter-spacing: 1.05px;
}

.crm-sidebar .menu-group:first-child p {
    margin-top: 3px;
}

.crm-sidebar nav a,
.crm-sidebar nav button {
    display: block;
    width: 100%;
    margin: 1px 0;
    padding: 9px 12px;
    border: 0;
    border-radius: 7px;
    background: none;
    color: var(--crm-nav-ink);
    font-size: 13px;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}

.crm-sidebar nav a:hover,
.crm-sidebar nav a.active,
.crm-sidebar nav button:hover,
.crm-sidebar nav button.active {
    background: var(--crm-nav-active-bg);
    box-shadow: inset 3px 0 #b6e0da;
    color: #fff;
    text-decoration: none;
}

.crm-sidebar nav .submenu {
    margin: 2px 0 2px 12px;
}

.crm-sidebar nav .submenu a {
    padding: 7px 12px;
    font-size: 12px;
}

.crm-sidebar-footer {
    margin-top: auto;
    padding: 16px 12px 0;
    border-top: 1px solid var(--crm-nav-line);
    color: #b9d8d3;
    font-size: 10px;
}

.crm-sidebar-footer span {
    margin-right: 6px;
    color: #7cceb9;
}

/* ---------- header ------------------------------------------------------ */

.crm-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 70px;
    padding: 0 30px;
    background: var(--crm-surface);
    border-bottom: 1px solid #dce3ec;
    color: #1f2c3d;
}

.crm-header > div {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.crm-header .crm-page-label {
    font-size: 13px;
    font-weight: 600;
}

.crm-header a.crm-platform-link {
    margin-right: 12px;
    color: var(--crm-accent);
    text-decoration: none;
}

.crm-header a.crm-platform-link:hover {
    text-decoration: underline;
}

.crm-avatar {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    margin-right: 9px;
    border-radius: 50%;
    background: #dff3f0;
    color: var(--crm-accent-deep);
    font-size: 10px;
    font-style: normal;
    font-weight: 700;
}

.crm-header b {
    font-size: 13px;
}

.crm-header small {
    display: block;
    color: #7c8b9d;
    font-size: 9px;
}

.crm-user {
    position: relative;
    cursor: pointer;
}

.crm-user-menu {
    display: none;
    position: absolute;
    top: 48px;
    right: 0;
    min-width: 170px;
    padding: 6px;
    border: 1px solid var(--crm-line);
    border-radius: var(--crm-radius-sm);
    background: #fff;
    box-shadow: 0 12px 28px rgba(9, 46, 40, .16);
    z-index: 40;
}

.crm-user.open .crm-user-menu {
    display: block;
}

.crm-user-menu a {
    display: block;
    padding: 8px 10px;
    border-radius: 4px;
    color: #35514c;
    font-size: 12px;
    text-decoration: none;
}

.crm-user-menu a:hover {
    background: var(--crm-accent-tint);
    color: var(--crm-accent);
}

.crm-burger {
    display: none;
    margin-right: 12px;
    border: 0;
    background: none;
    color: #35514c;
    font-size: 19px;
    cursor: pointer;
}

/* ---------- page title + filter ----------------------------------------- */

.crm-title {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}

.crm-title small {
    color: var(--crm-accent);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1.5px;
}

.crm-title h1 {
    margin: 5px 0;
    color: var(--crm-ink-strong);
    font-size: 25px;
    letter-spacing: -.35px;
}

.crm-title p {
    margin: 0;
    color: var(--crm-ink-soft);
    font-size: 12px;
}

.crm-filter {
    display: flex;
    align-items: center;
    height: 40px;
    overflow: hidden;
    border: 1px solid #d4e0dd;
    border-radius: 7px;
    background: #fff;
}

.crm-filter span {
    padding: 9px;
    color: #76869a;
}

.crm-filter input {
    width: 180px;
    height: 100%;
    border: 0;
    outline: 0;
    font-size: 12px;
}

.crm-filter button {
    height: 100%;
    padding: 0 16px;
    border: 0;
    border-left: 1px solid #d7dee7;
    background: #eaf5f3;
    color: #176f65;
    cursor: pointer;
}

/* ---------- section card ------------------------------------------------- */

.crm-section {
    margin-bottom: 18px;
    border: 1px solid var(--crm-line);
    border-radius: var(--crm-radius);
    background: var(--crm-surface);
    box-shadow: var(--crm-shadow);
    overflow: hidden;
}

.crm-section > .section-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 66px;
    padding: 0 20px;
}

.crm-section > .section-title > div {
    display: flex;
    align-items: center;
    gap: 10px;
}

.crm-section > .section-title h2 {
    margin: 0;
    color: var(--crm-ink-strong);
    font-size: 16px;
}

/* count badge is a pill, not plain text */
.crm-count,
.crm-section > .section-title > div span {
    padding: 3px 7px;
    border-radius: 10px;
    background: var(--crm-accent-tint);
    color: var(--crm-accent-deep);
    font-size: 9px;
}

.crm-section > .section-title > button,
.crm-section > .section-title > .crm-btn {
    padding: 9px 12px;
    border: 0;
    border-radius: var(--crm-radius-sm);
    background: var(--crm-accent);
    color: #fff;
    cursor: pointer;
}

/* ---------- tables -------------------------------------------------------- */

.crm-table-wrap {
    overflow-x: auto;
}

.crm-table {
    width: 100%;
    min-width: 840px;
    border-collapse: collapse;
    color: #334155;
}

.crm-table th {
    padding: 12px 16px;
    background: var(--crm-surface-alt);
    color: #627286;
    font-size: 11px;
    font-weight: 600;
    text-align: left;
    white-space: nowrap;
}

.crm-table td {
    padding: 13px 16px;
    border-top: 1px solid var(--crm-line-soft);
    color: #354458;
    font-size: 11px;
    vertical-align: middle;
}

.crm-table td:last-child,
.crm-table td.crm-actions {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    min-width: 270px;
}

.crm-table td button {
    border: 0;
    background: none;
    color: #244b45 !important;
    font-weight: 800;
    cursor: pointer;
}

.crm-table td button:hover {
    color: var(--crm-accent-dark) !important;
}

.crm-table td a {
    color: var(--crm-accent);
    font-weight: 600;
    text-decoration: none;
}

.crm-table td a:hover {
    text-decoration: underline;
}

.crm-table td .deposit {
    color: var(--crm-green);
}

.crm-empty {
    padding: 26px 16px;
    color: #8496a6;
    font-size: 12px;
    text-align: center;
}

.crm-table td.crm-empty {
    display: table-cell;
    min-width: 0;
}

.crm-status {
    color: var(--crm-green);
    white-space: nowrap;
}

.crm-status i {
    display: inline-block;
    width: 7px;
    height: 7px;
    margin-right: 6px;
    border-radius: 50%;
    background: var(--crm-green-dot);
}

.crm-status.is-inactive {
    color: #93a2b0;
}

.crm-status.is-inactive i {
    background: #b3c0cc;
}

.status-warn {
    color: var(--crm-warn);
    font-weight: 700;
}

.crm-note {
    margin: 0;
    padding: 13px 17px;
    background: #f7f9fc;
    color: #718096;
    font-size: 10px;
}

.crm-total {
    padding: 13px 17px;
    border-top: 1px solid var(--crm-line-soft);
    color: #607873;
    font-size: 11px;
}

.crm-total b {
    color: var(--crm-ink-strong);
}

.crm-muted {
    color: #9aa8b6;
    font-weight: 500;
    cursor: default;
}

/* ---------- buttons -------------------------------------------------------- */

.crm-btn,
.primary-action,
.modal-save {
    display: inline-block;
    padding: 9px 14px;
    border: 0;
    border-radius: var(--crm-radius-sm);
    background: var(--crm-accent);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
}

.crm-btn:hover,
.primary-action:hover,
.modal-save:hover {
    background: var(--crm-accent-dark);
    color: #fff;
    text-decoration: none;
}

.crm-btn-secondary {
    border: 1px solid #cbdcd8;
    background: #f2f7f6;
    color: #3e625c;
}

.crm-btn-secondary:hover {
    background: #e8f0ee;
    color: #3e625c;
}

.crm-shell button:disabled,
.crm-btn:disabled {
    opacity: .68;
    cursor: not-allowed;
    color: #fff !important;
    background: var(--crm-amber) !important;
    border-color: var(--crm-amber) !important;
}

/* ---------- forms ---------------------------------------------------------- */

.crm-form {
    display: grid;
    gap: 14px;
    max-width: 580px;
    padding: 2px 20px 20px;
}

.crm-form label {
    display: grid;
    gap: 6px;
    color: #58716c;
    font-size: 11px;
    font-weight: 650;
}

.crm-form input,
.crm-form select,
.crm-form textarea {
    height: 39px;
    padding: 8px 10px;
    border: 1px solid #c8d9d5;
    border-radius: 5px;
    background: #fff;
    color: #24413d;
    font-size: 12px;
    outline: 0;
}

.crm-form textarea {
    height: auto;
    min-height: 90px;
    resize: vertical;
}

.crm-form input:focus,
.crm-form select:focus,
.crm-form textarea:focus {
    border-color: var(--crm-accent);
    box-shadow: 0 0 0 2px var(--crm-accent-ring);
}

.form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 9px;
    margin-top: 4px;
}

/* ---------- sub navigation / list tools ------------------------------------ */

.crm-subnav {
    display: flex;
    align-items: flex-end;
    height: 48px;
    padding: 0 10px;
    border: 1px solid var(--crm-line);
    border-bottom: 0;
    border-radius: var(--crm-radius) var(--crm-radius) 0 0;
    background: var(--crm-surface-alt);
}

.crm-subnav a,
.crm-subnav button {
    height: 37px;
    padding: 0 13px;
    border: 0;
    border-bottom: 2px solid transparent;
    background: none;
    color: #6b837e;
    font-size: 11px;
    text-decoration: none;
    cursor: pointer;
}

.crm-subnav a.active,
.crm-subnav button.active {
    border-bottom-color: var(--crm-accent);
    color: var(--crm-accent);
    font-weight: 750;
}

.crm-subnav + .crm-section {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

.crm-list-tools {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 53px;
    padding: 0 20px;
    border-bottom: 1px solid #e1ebe9;
    color: #6d827e;
    font-size: 10px;
}

.crm-list-tools select,
.crm-list-tools input {
    padding: 5px;
    border: 1px solid #c9dad6;
    border-radius: 4px;
    background: #fff;
    color: #315955;
    font-size: 10px;
}

.crm-list-tools label {
    margin-left: auto;
    margin-bottom: 0;
}

/* ---------- modal + toast --------------------------------------------------- */

.crm-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 40;
    display: none;
    place-items: center;
    padding: 18px;
    background: rgba(9, 37, 33, .5);
}

.crm-modal-backdrop.open {
    display: grid;
}

.crm-modal {
    position: relative;
    width: min(510px, 100%);
    max-height: 88vh;
    overflow: auto;
    padding: 22px;
    border: 1px solid #d4e2df;
    border-radius: var(--crm-radius);
    background: #fff;
    color: #24413d;
    box-shadow: 0 22px 70px rgba(9, 46, 40, .67);
}

.crm-modal h2 {
    margin: 0 0 19px;
    color: #1d4943;
    font-size: 17px;
}

.crm-modal p {
    color: #687f7a;
    font-size: 12px;
    line-height: 1.55;
}

.crm-modal .crm-form {
    max-width: none;
    padding: 0;
}

.crm-modal .modal-x,
.modal-x {
    position: absolute;
    top: 10px;
    right: 13px;
    border: 0;
    background: none;
    color: #54706b;
    font-size: 22px;
    cursor: pointer;
}

.crm-toast {
    position: fixed;
    top: 84px;
    right: 24px;
    z-index: 45;
    padding: 11px 15px;
    border-radius: 7px;
    background: var(--crm-accent);
    color: #fff;
    font-size: 12px;
    box-shadow: 0 10px 26px rgba(23, 63, 56, .38);
}

/* ==========================================================================
   Bootstrap 4 (CDN) + legacy app.css / basic.css carry blue accents
   (#007bff, #3f3fff, #3f3f7f, #17a2b8). Re-point them to the teal accent.
   Scoped to .crm-shell / .modal so nothing outside the CRM is affected.
   ========================================================================== */

.crm-shell a,
.crm-shell table a,
.crm-content a {
    color: var(--crm-accent);
}

.crm-shell a:hover,
.crm-content a:hover {
    color: var(--crm-accent-dark);
}

.crm-sidebar a,
.crm-sidebar a:hover {
    color: inherit;
}

.crm-sidebar nav a:hover,
.crm-sidebar nav a.active {
    color: #fff;
}

.crm-shell .btn-color,
.crm-shell .trading_platform,
.crm-shell a.btn-color,
.crm-shell .fas.btn-color {
    color: var(--crm-accent) !important;
}

.crm-shell .btn-live {
    background: var(--crm-accent) !important;
    border-color: var(--crm-accent) !important;
    color: #fff !important;
}

.crm-shell .btn-primary,
.modal .btn-primary,
.crm-shell .btn-info,
.modal .btn-info {
    padding: 9px 14px;
    background-color: var(--crm-accent) !important;
    border-color: var(--crm-accent) !important;
    color: #fff !important;
    font-size: 11px;
    font-weight: 700;
}

.crm-shell .btn-primary:hover,
.modal .btn-primary:hover,
.crm-shell .btn-primary:focus,
.modal .btn-primary:focus {
    background-color: var(--crm-accent-dark) !important;
    border-color: var(--crm-accent-dark) !important;
    box-shadow: 0 0 0 2px var(--crm-accent-ring) !important;
}

.crm-shell .btn-secondary,
.modal .btn-secondary {
    padding: 9px 14px;
    border: 1px solid #cbdcd8 !important;
    background-color: #f2f7f6 !important;
    color: #3e625c !important;
    font-size: 11px;
    font-weight: 700;
}

.crm-shell .btn-outline-primary,
.modal .btn-outline-primary {
    color: var(--crm-accent) !important;
    border-color: var(--crm-accent) !important;
}

.crm-shell .text-primary,
.modal .text-primary {
    color: var(--crm-accent) !important;
}

.crm-shell .badge-primary,
.crm-shell .bg-primary,
.modal .badge-primary {
    background-color: var(--crm-accent) !important;
}

.crm-shell .form-control,
.modal .form-control {
    height: 39px;
    border: 1px solid #c8d9d5;
    border-radius: 5px;
    color: #24413d;
    font-size: 12px;
}

.crm-shell .form-control:focus,
.modal .form-control:focus {
    border-color: var(--crm-accent);
    box-shadow: 0 0 0 2px var(--crm-accent-ring);
}

.crm-shell label,
.modal label {
    color: #58716c;
    font-size: 11px;
    font-weight: 650;
}

.crm-shell input[type="checkbox"],
.crm-shell input[type="radio"],
.modal input[type="checkbox"],
.modal input[type="radio"] {
    accent-color: var(--crm-accent);
}

.crm-shell .custom-control-input:checked ~ .custom-control-label::before {
    background-color: var(--crm-accent) !important;
    border-color: var(--crm-accent) !important;
}

/* Bootstrap modal chrome -> design modal */

.modal-content {
    border: 1px solid #d4e2df;
    border-radius: var(--crm-radius);
    box-shadow: 0 22px 70px rgba(9, 46, 40, .35);
}

.modal-header,
.modal-footer {
    border-color: #e0ebe8;
}

.modal-header {
    padding: 18px 22px;
}

.modal-body {
    padding: 4px 22px 18px;
}

.modal-footer {
    padding: 14px 22px;
}

.modal-title {
    color: #1d4943;
    font-size: 17px;
}

.modal .close {
    color: #54706b;
    text-shadow: none;
    opacity: 1;
    font-size: 22px;
}

.modal .close:hover {
    color: var(--crm-accent-dark);
}

.modal-backdrop.show {
    background: #092521;
    opacity: .5;
}

.crm-shell .page-link {
    color: var(--crm-accent);
}

.crm-shell .page-item.active .page-link {
    background-color: var(--crm-accent);
    border-color: var(--crm-accent);
}

.crm-shell .nav-tabs .nav-link.active {
    color: var(--crm-accent);
    border-bottom-color: var(--crm-accent);
}

.crm-content .table thead th {
    background: var(--crm-surface-alt);
    border-bottom: 1px solid var(--crm-line-soft);
    color: #627286;
    font-size: 11px;
}

.crm-content .table td {
    color: #354458;
    font-size: 11px;
}

/* ---------- responsive (breakpoints from the design) ------------------------ */

@media (max-width: 1100px) {
    .crm-sidebar {
        flex-basis: 220px;
        width: 220px;
    }

    .crm-content {
        padding: 20px;
    }
}

@media (max-width: 820px) {
    .crm-sidebar {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        z-index: 60;
        transform: translateX(-100%);
        transition: transform .18s ease;
    }

    .crm-shell.nav-open .crm-sidebar {
        transform: translateX(0);
    }

    .crm-burger {
        display: block;
    }

    .crm-content {
        padding: 14px;
    }

    .crm-title {
        align-items: flex-start;
    }

    .crm-filter {
        display: none;
    }

    .crm-section > .section-title {
        height: auto;
        gap: 10px;
        padding: 14px;
        flex-wrap: wrap;
    }

    .crm-section > .section-title > button,
    .crm-section > .section-title > .crm-btn {
        font-size: 9px;
    }

    .crm-header .crm-page-label {
        display: none;
    }

    .crm-logo .crm-brand-logo {
        width: 170px;
    }
}

@media (max-width: 580px) {
    .crm-modal {
        padding: 18px;
    }

    .crm-modal .form-actions {
        flex-wrap: wrap;
    }
}

/* ==========================================================================
   Legacy page harmonisation
   Pages not yet converted to crm-* markup still use Bootstrap tables, cards
   and headings. This layer gives them the design's surface treatment so the
   whole CRM reads as one system while pages are migrated one by one.
   ========================================================================== */

.crm-content > h1,
.crm-content > h2,
.crm-content > h3 {
    margin: 0 0 5px;
    color: var(--crm-ink-strong);
    font-size: 25px;
    letter-spacing: -.35px;
}

.crm-content > h4,
.crm-content > h5 {
    margin: 0 0 10px;
    color: var(--crm-ink-strong);
    font-size: 16px;
}

.crm-content > p {
    color: var(--crm-ink-soft);
    font-size: 12px;
}

/* legacy Bootstrap tables get the card treatment */
.crm-content .table {
    margin-bottom: 18px;
    border: 1px solid var(--crm-line);
    border-radius: var(--crm-radius);
    border-collapse: separate;
    border-spacing: 0;
    background: var(--crm-surface);
    box-shadow: var(--crm-shadow);
    overflow: hidden;
}

.crm-content .table th {
    padding: 12px 16px;
    border-top: 0;
    border-bottom: 1px solid var(--crm-line-soft);
    background: var(--crm-surface-alt);
    color: #627286;
    font-size: 11px;
    font-weight: 600;
}

.crm-content .table td {
    padding: 13px 16px;
    border-top: 1px solid var(--crm-line-soft);
    color: #354458;
    font-size: 11px;
    vertical-align: middle;
}

.crm-content .table tbody tr:first-child td {
    border-top: 0;
}

.crm-content .table a {
    color: var(--crm-accent);
    font-weight: 600;
    text-decoration: none;
}

/* legacy cards / panels */
.crm-content .card,
.crm-content .panel {
    margin-bottom: 18px;
    border: 1px solid var(--crm-line);
    border-radius: var(--crm-radius);
    background: var(--crm-surface);
    box-shadow: var(--crm-shadow);
}

.crm-content .card-header {
    border-bottom: 1px solid #e0ebe8;
    background: var(--crm-surface);
    color: var(--crm-ink-strong);
    font-size: 16px;
    font-weight: 600;
}

/* legacy note/alert blocks */
.crm-content .note {
    margin: 0 0 18px;
    padding: 13px 17px;
    border-radius: var(--crm-radius-sm);
    background: #f7f9fc;
    color: #718096;
    font-size: 10px;
}

.crm-content .alert-info {
    border-color: #cbe8e2;
    background: var(--crm-accent-tint);
    color: #24413d;
}

/* legacy action buttons that are plain inputs */
.crm-content input[type="button"],
.crm-content input[type="submit"],
.crm-content .btn-live {
    padding: 9px 12px;
    border: 0;
    border-radius: var(--crm-radius-sm);
    background: var(--crm-accent);
    color: #fff;
    cursor: pointer;
}

/* legacy search bars */
.crm-content .search-bar input[type="text"],
.crm-content .search-bar input[type="TEXT"] {
    height: 40px;
    padding: 8px 10px;
    border: 1px solid #d4e0dd;
    border-radius: 7px;
    outline: 0;
    font-size: 12px;
}

/* ---------- utilities used by converted pages ------------------------------ */

.crm-btn-sm {
    padding: 4px 9px;
    font-size: 10px;
}

.crm-ellipsis {
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.crm-status.is-pending {
    color: var(--crm-warn);
}

.crm-status.is-pending i {
    background: #e0a53a;
}

.crm-pagination {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    padding: 12px 17px;
    border-top: 1px solid var(--crm-line-soft);
    color: #607873;
    font-size: 11px;
}

.crm-pagination .pagination {
    margin: 0;
}

.crm-alert {
    margin-bottom: 18px;
    padding: 12px 16px;
    border: 1px solid var(--crm-accent-ring);
    border-radius: var(--crm-radius-sm);
    background: var(--crm-accent-tint);
    color: #1d4943;
    font-size: 12px;
}

.crm-alert.is-error {
    border-color: #f0cfcd;
    background: #fdf1f0;
    color: #8d3833;
}

/* the actions column rule must not force display:flex on ordinary last cells */
.crm-table td:last-child {
    display: table-cell;
    min-width: 0;
}

.crm-table td.crm-actions {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    min-width: 270px;
}

/* ---------- converted page extras ------------------------------------------ */

.crm-danger-link {
    color: #b0413e !important;
}

.crm-danger-link:hover {
    color: #8d3833 !important;
}

.crm-table-select input[type="radio"] {
    width: 15px;
    height: 15px;
}

.crm-buy-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 14px;
    padding: 14px 20px;
    border-top: 1px solid var(--crm-line-soft);
}

.crm-buy-footer #priceSpan {
    color: var(--crm-ink-strong);
    font-size: 13px;
    font-weight: 700;
}

/* native <dialog> popups used by Auto Pending Trades */
.crm-shell dialog,
dialog#addDialog,
dialog#editDialog,
dialog#removeDialog {
    padding: 22px;
    border: 1px solid #d4e2df;
    border-radius: var(--crm-radius);
    background: #fff;
    color: #24413d;
    box-shadow: 0 22px 70px rgba(9, 46, 40, .35);
}

dialog::backdrop {
    background: rgba(9, 37, 33, .5);
}

dialog h2,
dialog h3 {
    margin: 0 0 16px;
    color: #1d4943;
    font-size: 17px;
}

dialog input,
dialog select,
dialog textarea {
    height: 39px;
    padding: 8px 10px;
    border: 1px solid #c8d9d5;
    border-radius: 5px;
    background: #fff;
    color: #24413d;
    font-size: 12px;
    outline: 0;
}

dialog input:focus,
dialog select:focus {
    border-color: var(--crm-accent);
    box-shadow: 0 0 0 2px var(--crm-accent-ring);
}

/* legacy action buttons reused across pages */
.crm-shell .mTRequestSubmitBtn,
.crm-shell .addBtn {
    padding: 9px 12px;
    border: 0;
    border-radius: var(--crm-radius-sm);
    background: var(--crm-accent);
    color: #fff;
    cursor: pointer;
}

.crm-shell .mTRequestRemoveBtn {
    padding: 9px 12px;
    border: 1px solid #e6cfce;
    border-radius: var(--crm-radius-sm);
    background: #fdf1f0;
    color: #8d3833;
    cursor: pointer;
}

.crm-table td .mTRequestSubmitBtn,
.crm-table td .mTRequestRemoveBtn {
    padding: 5px 10px;
    font-size: 10px;
    font-weight: 700;
}

.crm-table td .mTRequestSubmitBtn {
    color: #fff !important;
}

/* ==========================================================================
   User Profile & Settings
   Vertical tab rail + panels, matching the design's profile pattern.
   Markup is left alone (showTab() drives .tabs div / .tab-content .active);
   this restyles what is already there.
   ========================================================================== */

.crm-content .content {
    padding: 0;
    background: none;
}

.crm-content .profile-text p {
    margin: 0;
    color: var(--crm-ink-soft);
    font-size: 12px;
    line-height: 1.7;
}

.crm-content .profile-text hr {
    display: none;
}

.crm-content .profile-container {
    margin-top: 0;
    padding: 0;
    border: 0;
    background: none;
}

/* the tabbed card */
.crm-content .tab-container {
    display: flex;
    align-items: stretch;
    margin-top: 18px;
    border: 1px solid var(--crm-line);
    border-radius: var(--crm-radius);
    background: var(--crm-surface);
    box-shadow: var(--crm-shadow);
    overflow: hidden;
}

/* left rail */
.crm-content .tabs {
    flex: 0 0 220px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-right: 0;
    padding: 18px 12px;
    border-right: 1px solid #dce8e5;
    background: var(--crm-surface-alt);
}

.crm-content .tabs div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin: 0;
    padding: 9px 10px;
    border-radius: 5px;
    color: #516d67;
    font-size: 12px;
    cursor: pointer;
}

.crm-content .tabs div:hover {
    background: #e9f2f0;
}

.crm-content .tabs div.active {
    background: #e1f0ed;
    color: #195f56;
    font-weight: 750;
}

.crm-content .tabs .arrow {
    color: #9ab5b0;
    font-size: 11px;
}

/* panels */
.crm-content .tab-content {
    flex: 1;
    min-width: 0;
    padding: 22px 24px;
}

.crm-content .tab-content.active {
    display: block;
}

.crm-content .tab-content > h2 {
    margin: 0 0 4px;
    color: var(--crm-ink-strong);
    font-size: 18px;
}

.crm-content .tab-content > p {
    margin: 0 0 18px;
    color: var(--crm-ink-soft);
    font-size: 12px;
}

.crm-content .tab-content h3,
.crm-content .tab-content h4 {
    color: var(--crm-ink-strong);
    font-size: 13px;
}

/* the "BASICS" style label — NOT the section card header */
.crm-content .tab-content .section-title {
    margin: 18px 0 8px;
    color: var(--crm-accent);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1.5px;
}

/* label / value / edit rows */
.crm-content .info-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 2px;
    border-top: 1px solid var(--crm-line-soft);
    font-size: 12px;
}

.crm-content .info-item > span:first-child {
    flex: 0 0 150px;
    color: #6d827e;
    font-size: 11px;
}

.crm-content .info-item > span:nth-child(2) {
    flex: 1;
    min-width: 0;
    color: #2b4a45;
    word-break: break-word;
}

.crm-content .edit-button {
    padding: 5px 8px !important;
    border: 1px solid #cbdcd8 !important;
    border-radius: 5px;
    background: #f2f7f6 !important;
    color: var(--crm-accent) !important;
    cursor: pointer;
}

.crm-content .edit-button:hover {
    background: #e5efed !important;
}

/* notification toggles */
.crm-content .toggle {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 10px;
    font-size: 12px;
}

.crm-content .toggle input[type="checkbox"] {
    accent-color: var(--crm-accent);
    width: 15px;
    height: 15px;
}

/* presets tables sit inside panels */
.crm-content .user-preset-section table th {
    background: var(--crm-surface-alt);
    color: #627286;
    font-size: 11px;
}

/* ---------- custom .modals popups (profile page) --------------------------- */

.modals {
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: rgba(9, 37, 33, .5);
}

.modals.is-open,
.modals[style*="block"] {
    display: grid !important;
    place-items: center;
    padding: 18px;
}

.modals .modal-contents {
    width: min(510px, 100%);
    max-height: 88vh;
    margin: 0;
    padding: 22px;
    overflow: auto;
    border: 1px solid #d4e2df;
    border-radius: var(--crm-radius);
    background: #fff;
    color: #24413d;
    box-shadow: 0 22px 70px rgba(9, 46, 40, .45);
}

.modals .modal-body {
    position: relative;
    padding: 0;
}

.modals .modal-body .close {
    position: absolute;
    top: -6px;
    right: -4px;
    color: #54706b;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
}

.modals .modal-field {
    margin-bottom: 14px;
}

.modals .modal-field label {
    display: block;
    margin-bottom: 6px;
    color: #58716c;
    font-size: 11px;
    font-weight: 650;
}

.modals .modal-field input,
.modals #modal-fields input,
.modals #modal-fields select {
    width: 100%;
    height: 39px;
    padding: 8px 10px;
    border: 1px solid #c8d9d5;
    border-radius: 5px;
    background: #fff;
    color: #24413d;
    font-size: 12px;
    outline: 0;
}

.modals .modal-field input:focus,
.modals #modal-fields input:focus {
    border-color: var(--crm-accent);
    box-shadow: 0 0 0 2px var(--crm-accent-ring);
}

.modals .modal-buttons {
    display: flex;
    justify-content: flex-end;
    gap: 9px;
    margin-top: 18px;
}

.modals .modal-buttons input[type="button"] {
    padding: 9px 14px;
    border: 0;
    border-radius: var(--crm-radius-sm);
    background: var(--crm-accent);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
}

.modals .modal-buttons input[type="button"]:last-child {
    border: 1px solid #cbdcd8;
    background: #f2f7f6;
    color: #3e625c;
}

@media (max-width: 820px) {
    .crm-content .tab-container {
        flex-direction: column;
    }

    .crm-content .tabs {
        flex: none;
        flex-direction: row;
        overflow-x: auto;
        border-right: 0;
        border-bottom: 1px solid #dce8e5;
    }

    .crm-content .tabs div {
        white-space: nowrap;
    }

    .crm-content .info-item {
        flex-wrap: wrap;
    }
}

/* ---------- profile identity card ------------------------------------------ */

.crm-content .profile-text.crm-identity {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 20px;
    border: 1px solid var(--crm-line);
    border-radius: var(--crm-radius);
    background: var(--crm-surface);
    box-shadow: var(--crm-shadow);
}

.crm-identity-avatar {
    display: grid;
    place-items: center;
    flex: 0 0 46px;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: #dff3f0;
    color: var(--crm-accent-deep);
    font-size: 15px;
    font-style: normal;
    font-weight: 800;
}

.crm-identity-meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.crm-identity-meta b {
    color: #284b45;
    font-size: 14px;
    font-weight: 700;
}

.crm-identity-meta small {
    color: #728983;
    font-size: 11px;
    word-break: break-all;
}

.crm-identity-meta span {
    width: max-content;
    margin-top: 6px;
    padding: 3px 8px;
    border-radius: 10px;
    background: var(--crm-accent-tint);
    color: var(--crm-accent);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .4px;
    text-transform: uppercase;
}

/* ==========================================================================
   Master Trading family (request, master-traders, accounting report)
   These pages carry many JS-bound ids, so the markup is left intact and
   restyled here instead.
   ========================================================================== */

.crm-content .mTCont {
    padding: 0;
    background: none;
}

.crm-content .tarH2,
.crm-content .mTCont > h2 {
    margin: 0 0 4px;
    color: var(--crm-ink-strong);
    font-size: 25px;
    letter-spacing: -.35px;
}

.crm-content .tarUserInfo {
    margin-bottom: 18px;
    color: var(--crm-ink-soft);
    font-size: 12px;
}

.crm-content .tarUserInfoForSpan {
    color: #8b9c98;
    margin-right: 5px;
}

.crm-content .tarUserInfoUserNameSpan {
    color: var(--crm-ink-strong);
    font-weight: 700;
}

/* filter panel -> card */
.crm-content .aRFiltersCont,
.crm-content .mTRequestFormCont {
    margin-bottom: 18px;
    padding: 18px 20px;
    border: 1px solid var(--crm-line);
    border-radius: var(--crm-radius);
    background: var(--crm-surface);
    box-shadow: var(--crm-shadow);
}

.crm-content .aRFiltersCont > h4,
.crm-content .reportHeadingCont > h4,
.crm-content .mTRequestFormCont h2,
.crm-content .mTCont > h4 {
    margin: 0 0 14px;
    color: var(--crm-ink-strong);
    font-size: 16px;
}

.crm-content .aRFiltersInnerCont {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

.crm-content .aRFilterInputCont {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.crm-content .aRFilterInputCont label,
.crm-content .mTRequestInpCont label {
    color: #58716c;
    font-size: 11px;
    font-weight: 650;
}

.crm-content .aRFilterInputCont input,
.crm-content .aRFilterInputCont select,
.crm-content .mTRequestInput,
.crm-content .mTRequestInpCont input,
.crm-content .mTRequestInpCont select {
    height: 39px;
    padding: 8px 10px;
    border: 1px solid #c8d9d5;
    border-radius: 5px;
    background: #fff;
    color: #24413d;
    font-size: 12px;
    outline: 0;
}

.crm-content .aRFilterInputCont input:focus,
.crm-content .aRFilterInputCont select:focus,
.crm-content .mTRequestInput:focus {
    border-color: var(--crm-accent);
    box-shadow: 0 0 0 2px var(--crm-accent-ring);
}

.crm-content .dtFCont {
    display: flex;
    gap: 10px;
}

.crm-content .mTRequestInpCont {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 14px;
    max-width: 580px;
}

.crm-content .mTError {
    color: #b0413e;
    font-size: 10px;
}

/* report header row -> section title bar */
.crm-content .reportHeadingCont {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.crm-content .reportHeadingCont > h4 {
    margin: 0;
}

/* report + symbol tables */
.crm-content .AccountingReportTableCont,
.crm-content .scrollable-table {
    border: 1px solid var(--crm-line);
    border-radius: var(--crm-radius);
    background: var(--crm-surface);
    box-shadow: var(--crm-shadow);
    overflow: auto;
}

.crm-content .AccountingReportTableCont .table,
.crm-content .scrollable-table .custom-symbol-table {
    margin: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.crm-content .custom-symbol-table th {
    background: var(--crm-surface-alt) !important;
    border-bottom: 1px solid var(--crm-line-soft) !important;
    color: #627286;
    font-size: 11px;
    font-weight: 600;
}

.crm-content .custom-symbol-table td {
    border-bottom: 1px solid var(--crm-line-soft) !important;
    color: #354458;
    font-size: 11px;
}

.crm-content .mTproductMultiSelect {
    position: relative;
}

.crm-content .mTRequestRemoveBtn,
.crm-content .mTRequestSubmitBtn {
    font-size: 11px;
    font-weight: 700;
}

/* dialogs on these pages get the shared <dialog> treatment above */
.crm-content dialog table th {
    background: var(--crm-surface-alt);
    color: #627286;
    font-size: 11px;
}

.crm-content dialog table td {
    color: #354458;
    font-size: 11px;
}

/* ==========================================================================
   Wallet flows (index / address / deposit / withdraw)
   These were standalone documents; now folded into the CRM shell.
   ========================================================================== */

.crm-section.crm-plain {
    padding: 22px 24px;
}

.crm-title-actions {
    display: flex;
    align-items: center;
    gap: 9px;
}

.crm-title-actions a {
    text-decoration: none;
}

/* withdraw form */
.crm-content .withdrawal-form {
    max-width: 460px;
    margin: 0 !important;
    padding: 0 !important;
    background: none !important;
    box-shadow: none !important;
}

.crm-content .withdrawal-form label {
    display: block;
    margin-bottom: 6px;
    color: #58716c;
    font-size: 11px;
    font-weight: 650;
}

.crm-content .withdrawal-form input {
    width: 100%;
    height: 39px;
    margin-bottom: 14px;
    padding: 8px 10px;
    border: 1px solid #c8d9d5;
    border-radius: 5px;
    color: #24413d;
    font-size: 12px;
    outline: 0;
}

.crm-content .withdrawal-form input:focus {
    border-color: var(--crm-accent);
    box-shadow: 0 0 0 2px var(--crm-accent-ring);
}

.crm-content .withdrawal-form button,
.crm-content #withdrawBtn {
    padding: 9px 14px !important;
    border: 0 !important;
    border-radius: var(--crm-radius-sm) !important;
    background: var(--crm-accent) !important;
    color: #fff !important;
    font-size: 11px !important;
    font-weight: 700;
    cursor: pointer;
}

.crm-content .withdrawal-form button:hover,
.crm-content #withdrawBtn:hover {
    background: var(--crm-accent-dark) !important;
}

/* address page */
.crm-content .headers {
    margin-bottom: 6px;
    color: var(--crm-ink-strong);
    font-size: 18px;
    font-weight: 700;
}

.crm-content .subheader {
    margin-bottom: 18px;
    color: var(--crm-ink-soft);
    font-size: 12px;
    line-height: 1.6;
}

.crm-content .wallet-box {
    padding: 0;
    border: 0;
    background: none;
    box-shadow: none;
}

.crm-content .wallet-box h2 {
    color: var(--crm-ink-strong);
    font-size: 16px;
}

.crm-content .wallet-box p {
    color: var(--crm-ink-soft);
    font-size: 12px;
}

.crm-content .input-group input {
    height: 39px;
    padding: 8px 10px;
    border: 1px solid #c8d9d5;
    border-radius: 5px 0 0 5px;
    background: #fbfdfc;
    color: #24413d;
    font-size: 12px;
}

.crm-content .input-group button {
    height: 39px;
    padding: 0 14px;
    border: 1px solid #c8d9d5;
    border-left: 0;
    border-radius: 0 5px 5px 0;
    background: #eaf5f3;
    color: var(--crm-accent);
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
}

/* deposit page — blockchain chooser */
.crm-content .blockchain-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 14px;
}

.crm-content .blockchain-grid a {
    display: block;
    text-decoration: none;
}

.crm-content .blockchain-grid a > div,
.crm-content .blockchain-card {
    padding: 16px;
    border: 1px solid var(--crm-line);
    border-radius: var(--crm-radius);
    background: #fff;
    color: var(--crm-ink-strong);
    transition: border-color .15s ease, box-shadow .15s ease;
}

.crm-content .blockchain-grid a:hover > div,
.crm-content .blockchain-card:hover {
    border-color: var(--crm-accent);
    box-shadow: 0 4px 14px rgba(28, 118, 109, .12);
}

.crm-content .alert-danger {
    margin-bottom: 18px;
    padding: 12px 16px;
    border: 1px solid #f0cfcd;
    border-radius: var(--crm-radius-sm);
    background: #fdf1f0;
    color: #8d3833;
    font-size: 12px;
}

/* ==========================================================================
   Button sizing correction
   The design's section-header buttons inherit the 13px base font at
   9px/12px padding, which reads cramped once the label is a full
   "+ Add a LIVE Account". Give them room and a matched text size.
   ========================================================================== */

.crm-section > .section-title > button,
.crm-section > .section-title > .crm-btn,
.crm-section > .section-title > .btn-live {
    min-height: 42px;
    padding: 12px 20px;
    border-radius: var(--crm-radius-sm);
    font-size: 12.5px;
    font-weight: 700;
    line-height: 1.1;
    white-space: nowrap;
}

/* base buttons a touch larger too, so the system stays consistent */
.crm-btn,
.primary-action,
.modal-save {
    padding: 11px 18px;
    font-size: 12px;
    line-height: 1.1;
}

.crm-shell .btn-primary,
.modal .btn-primary,
.crm-shell .btn-secondary,
.modal .btn-secondary,
.crm-shell .btn-info,
.modal .btn-info {
    padding: 11px 18px;
    font-size: 12px;
}

.crm-content input[type="button"],
.crm-content input[type="submit"],
.crm-content .btn-live,
.crm-shell .mTRequestSubmitBtn,
.crm-shell .addBtn {
    min-height: 42px;
    padding: 12px 20px;
    font-size: 12.5px;
    font-weight: 700;
}

/* keep in-table action buttons compact — they should NOT grow */
.crm-table td button,
.crm-table td .mTRequestSubmitBtn,
.crm-table td .mTRequestRemoveBtn {
    min-height: 0;
    padding: 5px 10px;
    font-size: 10.5px;
}

.crm-btn-sm {
    min-height: 0;
    padding: 5px 10px;
    font-size: 10.5px;
}

@media (max-width: 820px) {
    .crm-section > .section-title > button,
    .crm-section > .section-title > .crm-btn,
    .crm-section > .section-title > .btn-live {
        min-height: 38px;
        padding: 10px 14px;
        font-size: 11.5px;
    }
}

/* ---------- floating chat widget ------------------------------------------- */

.chatbot-btn {
    background-color: var(--crm-accent) !important;
    box-shadow: 0 10px 26px rgba(23, 63, 56, .35) !important;
}

.chatbot-btn:hover {
    background-color: var(--crm-accent-dark) !important;
}

.chatbot-box {
    border: 1px solid var(--crm-line) !important;
    border-radius: var(--crm-radius) !important;
    overflow: hidden;
}

.chatbot-box header {
    padding: 12px 14px;
    background: var(--crm-accent);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
}

.chatbot-box footer input {
    width: 100%;
    height: 39px;
    padding: 8px 10px;
    border: 1px solid #c8d9d5;
    border-radius: 5px;
    font-size: 12px;
    outline: 0;
}

.chatbot-box footer input:focus {
    border-color: var(--crm-accent);
    box-shadow: 0 0 0 2px var(--crm-accent-ring);
}

.chatbot-box .bot-message,
.chatbot-box .user-message {
    max-width: 85%;
    margin: 6px 10px;
    padding: 8px 11px;
    border-radius: 9px;
    font-size: 12px;
    line-height: 1.45;
}

.chatbot-box .bot-message {
    background: var(--crm-surface-alt);
    color: #2b4a45;
}

.chatbot-box .user-message {
    margin-left: auto;
    background: var(--crm-accent-tint);
    color: #1d4943;
}

/* ==========================================================================
   Auth screens (login, register, OTP, 2FA, password reset)
   Centred card on the brand teal, shared via layouts/auth.blade.php.
   ========================================================================== */

body.crm-auth-body {
    margin: 0;
    background: var(--crm-nav-bg);
    background-image: radial-gradient(circle at 20% 0%, #1b7d73 0%, #145f58 55%, #0f4a45 100%);
    color: var(--crm-ink);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
    font-size: 13px;
    line-height: 1.5;
}

.crm-auth {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 32px 18px;
}

.crm-auth-brand {
    margin-bottom: 22px;
}

.crm-auth-brand img {
    display: block;
    width: 190px;
    height: 56px;
    object-fit: contain;
}

.crm-auth-card {
    width: min(430px, 100%);
    padding: 30px 30px 26px;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 26px 70px rgba(6, 38, 34, .38);
}

.crm-auth-card.is-wide {
    width: min(680px, 100%);
}

.crm-auth-card h1 {
    margin: 0 0 6px;
    color: var(--crm-ink-strong);
    font-size: 22px;
    letter-spacing: -.3px;
}

.crm-auth-sub {
    margin: 0 0 20px;
    color: var(--crm-ink-soft);
    font-size: 12px;
    line-height: 1.55;
}

.crm-auth-form {
    display: grid;
    gap: 14px;
}

.crm-auth-form label {
    display: grid;
    gap: 6px;
    color: #58716c;
    font-size: 11px;
    font-weight: 650;
}

.crm-auth-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.crm-auth-form input,
.crm-auth-form select {
    width: 100%;
    height: 42px;
    padding: 9px 12px;
    border: 1px solid #c8d9d5;
    border-radius: 6px;
    background: #fff;
    color: #24413d;
    font-size: 13px;
    outline: 0;
}

.crm-auth-form input:focus,
.crm-auth-form select:focus {
    border-color: var(--crm-accent);
    box-shadow: 0 0 0 3px var(--crm-accent-ring);
}

.crm-auth-form input.is-invalid {
    border-color: #d08b87;
}

.crm-auth-code {
    letter-spacing: 4px;
    font-size: 16px !important;
    font-weight: 700;
    text-align: center;
}

.crm-auth-submit {
    width: 100%;
    margin-top: 4px;
    min-height: 44px;
    font-size: 13px;
}

.crm-auth-error {
    padding: 10px 13px;
    border: 1px solid #f0cfcd;
    border-radius: var(--crm-radius-sm);
    background: #fdf1f0;
    color: #8d3833;
    font-size: 11.5px;
}

.crm-auth-error div + div {
    margin-top: 4px;
}

.crm-auth-links {
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid var(--crm-line-soft);
}

.crm-auth-links p {
    margin: 0 0 7px;
    color: var(--crm-ink-soft);
    font-size: 12px;
}

.crm-auth-links a {
    color: var(--crm-accent);
    font-weight: 600;
    text-decoration: none;
}

.crm-auth-links a:hover {
    text-decoration: underline;
}

.crm-auth-linkbtn {
    padding: 0;
    border: 0;
    background: none;
    color: var(--crm-accent);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}

.crm-auth-qr {
    display: grid;
    justify-items: center;
    gap: 8px;
    margin-bottom: 18px;
    padding: 16px;
    border: 1px solid var(--crm-line);
    border-radius: var(--crm-radius);
    background: var(--crm-surface-alt);
}

.crm-auth-qr img {
    width: 190px;
    height: 190px;
    background: #fff;
    border-radius: 6px;
}

.crm-auth-foot {
    width: min(430px, 100%);
    margin-top: 18px;
    color: #bfe3dd;
    font-size: 10.5px;
    line-height: 1.6;
    text-align: center;
}

.crm-auth-secure {
    margin-top: 16px;
    color: #9fd4cb;
    font-size: 10px;
}

.crm-auth-secure span {
    color: #7cceb9;
    margin-right: 5px;
}

@media (max-width: 560px) {
    .crm-auth-row {
        grid-template-columns: 1fr;
    }

    .crm-auth-card {
        padding: 24px 20px;
    }
}

/* logout entry in the user menu */
.crm-user-menu #crm-logout {
    color: #8d3833;
}

.crm-user-menu #crm-logout:hover {
    background: #fdf1f0;
    color: #8d3833;
}

/* ==========================================================================
   Auth screens — sizing corrections
   The auth layout deliberately does not load Bootstrap, so it never inherited
   Bootstrap's global border-box. Inputs at width:100% were adding padding and
   border ON TOP of that width and overflowing the card. Scoped to the auth
   body so the Bootstrap-based CRM pages are untouched.
   ========================================================================== */

body.crm-auth-body *,
body.crm-auth-body *::before,
body.crm-auth-body *::after {
    box-sizing: border-box;
}

.crm-auth-form label {
    min-width: 0;
}

.crm-auth-row > label {
    min-width: 0;
}

.crm-auth-form input,
.crm-auth-form select {
    max-width: 100%;
    height: 40px;
    padding: 8px 11px;
    font-size: 12.5px;
}

.crm-auth-form select {
    appearance: none;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%236d827e' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 10px;
    padding-right: 30px;
}

.crm-auth-code {
    height: 46px !important;
    font-size: 15px !important;
    letter-spacing: 3px;
}

.crm-auth-submit {
    min-height: 42px;
    font-size: 12.5px;
}

.crm-auth-card h1 {
    font-size: 20px;
}

/* ---------- auth: extra blocks --------------------------------------------- */

.crm-auth-choice {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
    padding: 12px 14px;
    border: 1px solid var(--crm-line);
    border-radius: var(--crm-radius-sm);
    background: var(--crm-surface-alt);
}

.crm-auth-choice-label {
    color: #58716c;
    font-size: 11px;
    font-weight: 650;
}

.crm-auth-choice label {
    display: flex !important;
    align-items: center;
    gap: 6px;
    margin: 0;
    color: #2b4a45;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
}

.crm-auth-choice input[type="radio"] {
    width: 15px;
    height: 15px;
    accent-color: var(--crm-accent);
}

.crm-auth-notice {
    padding: 10px 13px;
    border: 1px solid var(--crm-accent-ring);
    border-radius: var(--crm-radius-sm);
    background: var(--crm-accent-tint);
    color: #1d4943;
    font-size: 11.5px;
}

.crm-auth-message {
    display: grid;
    justify-items: center;
    gap: 12px;
    padding: 10px 0 4px;
    text-align: center;
}

.crm-auth-message i {
    display: grid;
    place-items: center;
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: var(--crm-accent-tint);
    color: var(--crm-accent-deep);
    font-size: 20px;
}

.crm-auth-message p {
    margin: 0;
    color: var(--crm-ink-soft);
    font-size: 12.5px;
    line-height: 1.6;
}

/* security questions setup */
.crm-auth-qbox {
    display: grid;
    gap: 12px;
    padding: 16px;
    border: 1px solid var(--crm-line);
    border-radius: var(--crm-radius-sm);
    background: var(--crm-surface-alt);
}

.crm-auth-qbox-title {
    color: var(--crm-accent);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.crm-auth-qbox .form-group {
    margin: 0;
}

.crm-auth-qbox input,
.crm-auth-qbox select {
    background: #fff;
}

/* ==========================================================================
   User presets - "default value" indicator
   Added 2026-08-20. Replaces an inline `font-weight: bold` that was easy to
   miss in the summary table and never rendered at all in the Edit modal.
   Colours come from the CRM theme variables above, so retuning the theme
   retunes this too. Fallbacks included in case this file loads standalone.
   ========================================================================== */

/* Chip in the presets summary table on the User Presets tab. */
.preset-default {
    display: inline-block;
    padding: 1px 8px;
    border: 1px solid var(--crm-accent-ring, #cbe8e2);
    border-radius: 999px;
    background-color: var(--crm-accent-tint, #def2ef);
    color: var(--crm-accent-dark, #0f6e62);
    font-weight: 600;
    line-height: 1.5;
}

/* Row marked as default inside the Add / Edit preset modals.
   The value cell keeps plain text content on purpose: savePresets() and
   saveEditedPresets() both read it back with .text(), so no markup goes in. */
.preset-default-row > td:first-child {
    background-color: var(--crm-accent-tint, #def2ef);
    color: var(--crm-accent-dark, #0f6e62);
    font-weight: 600;
    box-shadow: inset 3px 0 0 var(--crm-green, #078b69);
}

/* "Set as Default" turns into "✓ Default" and stops looking clickable. */
.preset-default-row .set-default-link {
    color: var(--crm-green, #078b69) !important;
    font-weight: 600;
    cursor: default;
    text-decoration: none;
}

/* --------------------------------------------------------------------------
   Tab panel header: heading on the left, its intro line right-aligned on the
   same row, so the description reads as metadata instead of stray body copy
   and costs no vertical space.

   All four tabs now share <div class="tab-head"><h2> + <p></div>. That also
   retires the three different markup shapes they used to use (direct-child
   <p>, a <p> buried in <div class="content">, and a <div class="section-
   description">), two of which escaped styling altogether.
   -------------------------------------------------------------------------- */

.crm-content .tab-content > .tab-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 24px;
    margin: 0 0 18px;
}

.crm-content .tab-content > .tab-head > h2 {
    flex: 0 0 auto;
    margin: 0;
    color: var(--crm-ink-strong);
    font-size: 18px;
}

.crm-content .tab-content > .tab-head > p {
    flex: 0 1 auto;
    max-width: 58%;
    margin: 0;
    color: var(--crm-ink-soft);
    font-size: 11px;
    line-height: 1.5;
    text-align: right;
}

/* .security-settings-content carries a 20px top margin from the pre-reskin
   app.css; with the header row above it that stacked into a 38px gap. */
.crm-content .tab-content > .security-settings-content {
    margin-top: 0;
}

/* Too narrow to sit side by side: stack and left-align rather than squeeze
   the caption into a thin column. */
@media (max-width: 900px) {
    .crm-content .tab-content > .tab-head {
        display: block;
    }

    .crm-content .tab-content > .tab-head > p {
        max-width: none;
        margin-top: 4px;
        text-align: left;
    }
}