﻿/* ============================================================
   ACORDIA GLOBAL THEME
   ============================================================ */

:root {
    --font-sans: 'Source Sans 3','Source Sans Pro','Helvetica Neue',Helvetica,Roboto,Arial,sans-serif;
    --color-text: #1F1F1F;
    --color-white: #F1F1F1;
    --color-page: #F9F9F9;
    --color-card: #E8ECEF;
    --color-muted: #E8ECEF;
    --color-border: #D9D9D9;
    --color-hero: #003466;
    /*--color-hero: #384959;*/
    --radius: 8px;
}


/* ============================================================
   GLOBAL RESET
   ============================================================ */

* {
    box-sizing: border-box;
}

html, body,
input, select, textarea, button {
    font-family: var(--font-sans);
}

html, body {
    background: var(--color-page);
    color: var(--color-text);
    font-size: 14px;
    font-weight: 400;
    margin: 0;
}


/* ============================================================
   TYPOGRAPHY
   ============================================================ */

h1 {
    font-size: 24px;
    font-weight: 600;
}

h2 {
    font-size: 16px;
    font-weight: 600;
}

h3 {
    font-size: 16px;
    font-weight: 600;
}

p, li, a, span {
    font-size: 16px;
}

strong {
    font-weight: 600;
}


/* ============================================================
   HEADER
   ============================================================ */

header,
.navbar,
.layout-header {
    background: #FFFFFF;
    border-bottom: 1px solid #E5E5E5;
}

    .layout-header h1 {
        font-size: 16px;
        font-weight: 600;
    }


/* ============================================================
   HERO / WELCOME BANNER
   ============================================================ */

.acordia-page .usa-hero {
    background: var(--color-hero);
    color: var(--color-white);
    padding: 32px 40px;
    margin-bottom: 24px;
}

    .acordia-page .usa-hero h1 {
        color: var(--color-white);
        font-size: 28px;
        font-weight: 600;
    }

.acordia-page .usa-intro {
    color: var(--color-white);
}


/* ============================================================
   MAIN CONTAINER
   ============================================================ */

.acordia-container {
    width: 100%;
    padding: 0 40px 40px 40px;
}


/* ============================================================
   HOMEPAGE LAYOUT
   ============================================================ */

.homepage-layout {
    display: flex;
    gap: 24px;
    align-items: flex-start;
}

.homepage-left {
    flex: 2;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.help-sidebar {
    flex: 1;
    padding: 16px;
}


/* ============================================================
   CARDS
   ============================================================ */

.usa-card,
.help-sidebar {
    background: var(--color-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
}

.help-sidebar {
    background: var(--color-muted);
}


/* ============================================================
   SYSTEM MESSAGES
   ============================================================ */

.usa-alert {
    background: var(--color-muted);
    border-radius: var(--radius);
    border-left: 4px solid #E6A500;
}

.system-message-item {
    font-size: 16px;
}


/* ============================================================
   HELP SIDEBAR
   ============================================================ */

.help-email {
    color: #005EA2;
    font-weight: 600;
    text-decoration: underline;
}


/* ============================================================
   SYSTEM RESOURCES
   ============================================================ */

.system-resources {
    background: #FFFFFF;
}

.action-list {
    list-style: none;
    padding-left: 0;
    margin: 0;
}

.system-resources .action-link,
.system-resources details > summary.action-link {
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    color: #1F1F1F;
    font-size: 16px;
    line-height: 1.4;
}

    .system-resources > .action-list > li > a.action-link,
    .system-resources details > summary.action-link.homepage-tree-summary {
        font-weight: 600;
    }

.system-resources .homepage-tree-children a {
    font-weight: 400;
}


/* ============================================================
   TREE
   ============================================================ */

.homepage-tree {
    width: 100%;
}

.system-resources summary {
    list-style: none;
}

    .system-resources summary::-webkit-details-marker {
        display: none;
    }

.homepage-tree-arrow {
    width: 20px;
    min-width: 20px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
}

    .homepage-tree-arrow::before {
        content: "▶";
        font-size: 12px;
    }

.homepage-tree[open] .homepage-tree-arrow::before {
    content: "▼";
}

.homepage-tree-children {
    list-style: none;
    padding-left: 28px;
    margin-top: 8px;
}


/* ============================================================
   SIDEBAR NAVIGATION
   ============================================================ */

.sidebar-section {
    background: #1F1F1F;
    color: #F1F1F1;
    min-height: 100vh;
}

.sidebar-section .menu-links {
    font-size: 16px !important;
    font-weight: 600 !important;
    color: #F1F1F1 !important;
}

.sidebar-section .menu-links:hover {
    background: #2A2A2A;
}

.sidebar-section .menu-links.active {
    background: #D90D2D;
}

/* ============================================================
   DROPDOWN FIX
   ============================================================ */

.dropdown-menu {
    z-index: 1050;
}


/* ============================================================
   ACORDIA GLOBAL SCROLLBAR
   ============================================================ */

/* Chrome / Edge / Safari */

*::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

*::-webkit-scrollbar-track {
    background: #F9F9F9; /* page background */
}

*::-webkit-scrollbar-thumb {
    background: #6A89A7; /* Acordia scrollbar */
    border-radius: 8px;
}

    *::-webkit-scrollbar-thumb:hover {
        background: #8C8C8C;
    }


/* Firefox */

* {
    scrollbar-width: thin;
    scrollbar-color: #A0A0A0 #F9F9F9;
}


/* ============================================================
   REMOVE HERO RED BORDER
   ============================================================ */

.acordia-page .usa-hero,
.usa-hero,
.usa-section {
    border-bottom: none !important;
}


/* ============================================================
   REMOVE USWDS CARD HEADER BORDER
   ============================================================ */

.usa-card__header {
    border-top: none !important;
    border-bottom: none !important;
}


/* ============================================================
   REMOVE HELP SIDEBAR BLUE HEADER BORDER
   ============================================================ */

.help-sidebar,
.help-sidebar h1,
.help-sidebar h2,
.help-sidebar h3 {
    border-top: none !important;
}

    .help-sidebar hr {
        display: none;
    }

/* ACORDIA GLOBAL SCROLLBAR */

html *::-webkit-scrollbar {
    width: 10px;
}

html *::-webkit-scrollbar-track {
    background: #F9F9F9;
}

html *::-webkit-scrollbar-thumb {
    background: #A0A0A0;
    border-radius: 8px;
}

    html *::-webkit-scrollbar-thumb:hover {
        background: #8C8C8C;
    }

.acordia-container {
    max-width: 1400px;
    margin: 0 auto;
}

.help-sidebar {
    padding: 24px;
}

/* ============================================================
   HELP SIDEBAR CONTACT LABELS
   ============================================================ */

.contact-info strong {
    display: block;
    font-weight: 700;
    color: #1F1F1F;
    margin-top: 12px;
    margin-bottom: 4px;
}

/* ============================================================
   USER MANAGEMENT PAGE TYPOGRAPHY
   ============================================================ */

.user-management-page,
.user-management-page p,
.user-management-page span,
.user-management-page td,
.user-management-page th,
.user-management-page input {
    font-size: 16px;
}

/* ==========================================
   USER MANAGEMENT GRID FONT FIX
========================================== */

.user-management-page .quickgrid.case-table tbody td,
.user-management-page .quickgrid.case-table thead th {
    font-size: 16px !important; /* match other grid */
    line-height: 1.5;
    padding: 12px 14px;
}

/* Override legacy small font */
.user-management-page .card-case-table table.case-table tbody tr td {
    font-size: 16px !important;
    padding: 12px 14px;
}

/* ==========================================
   USER MANAGEMENT BADGE FIX
========================================== */

.user-management-page .badge.badge-active,
.user-management-page .badge.badge-not-started {
    font-size: 16px !important;
    padding: 6px 12px !important;
    width: auto !important;
    min-width: 90px !important;
    border-radius: 999px !important;
}

/* ============================================================
   USER MANAGEMENT BUTTONS
   ============================================================ */

.status-active {
    background: #52912B;
    color: #F1F1F1;
    padding: 4px 10px;
    border-radius: 6px;
    font-weight: 600;
}

.status-inactive {
    background: #C80F2D;
    color: #F1F1F1;
    padding: 4px 10px;
    border-radius: 6px;
    font-weight: 600;
}

.user-management-page .search-icon {
    font-size: 16px;
    padding: 10px 14px;
    padding-left: 40px !important;
    background-position: 12px center;
    background-repeat: no-repeat;
}

.table thead th,
.table thead th * {
    color: #F1F1F1 !important;
}

.table thead th:first-child {
    border-top-left-radius: 8px;
}

.table thead th:last-child {
    border-top-right-radius: 8px;
}

.user-management-page .container-fluid {
    padding-left: 0;
    padding-right: 0;
}

/* ============================================================
   ACORDIA GLOBAL BUTTONS
   ============================================================ */

.btn.acordia-btn-secondary {
    background: #FFFFFF;
    color: #0057AC;
    border: 1px solid #0057AC;
    border-radius: 8px;
    font-weight: 600;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    padding: 0 16px;
}

    .btn.acordia-btn-secondary:hover,
    .btn.acordia-btn-secondary:focus,
    .btn.acordia-btn-primary:hover,
    .btn.acordia-btn-primary:focus {
        background: #003466;
        color: #F1F1F1;
        border-color: #003466;
    }

.btn.acordia-btn-primary {
    background: #0057AC;
    color: #F1F1F1;
    border: 1px solid #0057AC;
    border-radius: 8px;
    font-weight: 600;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 40px; 
    padding: 0 16px;
}

    .btn.acordia-btn-primary:disabled,
    .btn.acordia-btn-secondary:disabled {
        background: #E0E0E0 !important;
        color: #474747 !important;
        border: 1px solid #A0A0A0 !important;
        cursor: not-allowed;
    }

/* ============================================================
   ACORDIA BUTTON OVERRIDES (MODALS + OFFCANVAS)
   ============================================================ */

.btn.btn-grey {
    background: #F1F1F1 !important;
    color: #1F1F1F !important;
    border: 1px solid #CECECE !important;
    font-weight: 700;
}

    .btn.btn-grey:hover,
    .btn.btn-grey:focus,
    .btn.btn-grey:active {
        background: #E5E5E5 !important;
        color: #1F1F1F !important;
        border-color: #CECECE !important;
        box-shadow: none !important;
    }

.btn.btn-darkblue {
    background: #6A89A7 !important;
    color: #F1F1F1 !important;
    border: 1px solid #6A89A7 !important;
    font-weight: 700;
}

    .btn.btn-darkblue:hover,
    .btn.btn-darkblue:focus,
    .btn.btn-darkblue:active {
        background: #5B7793 !important;
        color: #F1F1F1 !important;
        border-color: #5B7793 !important;
        box-shadow: none !important;
    }

/* ============================================================
   LOGIN PAGE INPUT FIX
============================================================ */

.right-data-box .form-control {
    background: #FFFFFF;
    border: 1px solid #CECECE;
    border-radius: 8px;
    font-size: 14px;
    height: 44px;
    color: #1F1F1F;
}

.right-data-box .form-control:focus {
    border-color: #CECECE;
    box-shadow: none;
}

/* ============================================================
   LOGIN BUTTON
============================================================ */

.right-data-box .acordia-btn-primary {
    height: 44px;
    font-size: 14px;
}

.right-data-box {
    max-width: 420px;
    margin: 100px auto;
}

/* ============================================================
   MFA PAGE STYLING
   ============================================================ */

/* OTP boxes */

.number-input {
    width: 48px;
    height: 48px;
    border: 1px solid #CECECE !important;
    border-radius: 8px;
    background: #FFFFFF;
    font-size: 18px;
    font-weight: 600;
}

    .number-input:focus {
        border-color: #CECECE !important;
        box-shadow: none !important;
    }


/* Login button (NavLink styled as button) */

#loginButton {
    background: #6A89A7 !important;
    border: 1px solid #6A89A7 !important;
    border-radius: 8px !important;
    font-weight: 700;
    width: 100%;
}

    #loginButton:hover {
        background: #5B7793 !important;
        border-color: #5B7793 !important;
    }


    /* Disabled login button */

    #loginButton.disabled,
    #loginButton:disabled {
        background: #8FA2B4 !important;
        border-color: #8FA2B4 !important;
    }


/* Resend Code link */

#resendCode {
    background: none !important;
    border: none !important;
    color: #5BAAF2 !important;
    font-weight: 500;
    padding: 0;
}

    #resendCode:hover {
        text-decoration: underline;
    }


/* Bottom navigation links */

.right-bottom .blue-link {
    color: #5BAAF2 !important;
    text-decoration: none;
}

.right-bottom .blue-link:hover {
    color: #5BAAF2 !important;
    text-decoration: underline;
}


/* Ensure arrow and text change together */

.right-bottom .blue-link:hover svg path {
    stroke: #5BAAF2;
}


/* OTP container spacing */

.right-data-box .form-group.container {
    gap: 8px;
}

/* ============================================================
   LOGIN PAGE LINKS
============================================================ */

.forget-link {
    text-align: right;
    margin-top: 6px;
}

.blue-link {
    color: #5BAAF2 !important;
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
}

.blue-link:hover {
    color: #5BAAF2 !important;
    text-decoration: underline;
}

/* Targeting the specific selector from default.css:18 */
/* ============================================================
   ACORDIA GLOBAL DROPDOWN FIX (High Specificity)
   ============================================================ */

/* We target the exact class structure from default.css to override the tiled arrows */
.rows-select .form-select,
select.form-select,
.form-select {
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    /* Forces a single clean chevron and resets any background-image from default.css */
    background-color: #ffffff !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e") !important;
    background-repeat: no-repeat !important;
    background-position: right 0.75rem center !important;
    background-size: 16px 12px !important;
    padding-right: 2.5rem !important;
    border: 1px solid var(--color-border) !important;
}

.form-select {
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    background-color: #ffffff !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e") !important;
    background-repeat: no-repeat !important;
    background-position: right 12px center !important;
    background-size: 14px 10px !important;
    padding: 6px 36px 6px 12px !important; /* 🔑 THIS FIXES TEXT CUT */

    border: 1px solid var(--color-border) !important;
    border-radius: 8px;
    height: 36px;
    line-height: 1.4;
}

/* Fix for IE/Edge legacy */
select::-ms-expand {
    display: none;
}

/* ============================================================
   QUICKGRID / TABLE ALIGNMENT REFINEMENTS
   ============================================================ */

/* Ensures vertical centering for cells with CheckboxMultiSelect and Buttons */
.case-table td {
    vertical-align: middle !important;
}

/* Fix for the wrapping text "Reports per page" */
.fs-md {
    white-space: nowrap !important;
}

/* Fix for the wrapping text "Result per page" */
.text-nowrap {
    white-space: nowrap !important;
}

/* ====================================================================
   ACORDIA TABLE CONTROLS (Select All + Search) RESET USER PASSWORD
   ================================================================= */

.top-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 16px 24px;
    flex-wrap: nowrap;
}

.select-all-container {
    display: flex;
    align-items: center;
    gap: 10px;
}

.select-all-label {
    font-weight: 600;
    margin: 0;
}


/* ============================================================
   SEARCH BOX WITH CLEAR BUTTON
   ============================================================ */

.search-wrapper {
    position: relative;
    width: 300px;
    max-width: 300px;
}

.search-box {
    width: 100%;
    padding-right: 38px;
}

.clear-btn {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    font-size: 22px;
    font-weight: 900;
    color: #555;
    cursor: pointer;
}


/* ============================================================
   ACORDIA CHECKBOX STYLE
   ============================================================ */

.custom-checkbox,
.table input.form-check-input {
    width: 18px;
    height: 18px;
    border: 2px solid #9aa3ab;
    border-radius: 5px;
    background-color: #fff;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    display: inline-block;
    vertical-align: middle;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 70%;
}

.pagination-container .btn {
    min-width: 110px;
}

/* ============================================================
   RESET PASSWORD ACTION BUTTON
   ============================================================ */
.reset-password-btn {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
}

.btn.reset-password-btn {
    width: auto !important;
    min-width: 180px;
    padding: 10px 18px;
    font-size: 14px;
    border-radius: 8px;
    margin-top: 6px;
}

.reset-password-btn:disabled {
    background: #E3A7B6;
    cursor: not-allowed;
}

/* ============================================================
   ACORDIA STATUS BADGES (OVERRIDE DEFAULT.CSS)
   ============================================================ */

.badge.badge-active, .badge.badge-not-started {
    background-color: #52912B !important;
    color: #F1F1F1 !important;
    border-radius: 8px;
    font-weight: 600;
    width: 80px; /* same width for all */
    text-align: center; /* center text */
    display: inline-block;
}

.badge.badge-not-started {
    background-color: #C80F2D !important;
}

/* OFFCANVAS */

.acordia-offcanvas {
    background: #FFFFFF;
}

.acordia-offcanvas-header {
    border-bottom: 1px solid #E8ECEF;
    padding: 20px 24px;
    background: #DAEDFF !important;
    border-bottom: 1px solid #ECECEC;
}

.acordia-offcanvas-footer {
    border-top: 1px solid #E8ECEF;
    padding: 16px 24px;
    display: flex;
    gap: 12px;
}

/* FORM */

.acordia-form {
    padding: 24px;
}

.acordia-form-section {
    border-bottom: 1px solid #E8ECEF;
    padding-bottom: 24px;
    margin-bottom: 24px;
}

.acordia-section-title {
    font-size: 14px;
    font-weight: 700;
    color: #6c757d;
    text-transform: uppercase;
    margin-bottom: 16px;
}

/* LABELS */

.acordia-label {
    font-size: 14px;
    font-weight: 600;
    margin-top: 12px;
    margin-bottom: 6px;
    display: block;
}

/* INPUTS */

.acordia-input {
    height: 42px;
    border-radius: 6px;
    border: 1px solid #CECECE;
}

.acordia-input:focus {
    border-color: #6A89A7;
    box-shadow: none;
}

/* AVATAR */

.acordia-avatar-section {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.avatar-preview {
    width: 100px;
    height: 100px;
}

.avatar-preview img {
    width: 100%;
    border-radius: 50%;
}

.upload-btn {
    width: 140px;
}

/* HELP TEXT */

.upload-help {
    font-size: 12px;
    color: #6c757d;
}

/* BUTTONS */

.acordia-btn-primary {
    background: #6A89A7;
    border: 1px solid #6A89A7;
    color: #F1F1F1;
}

.acordia-btn-primary:hover {
    background: #5B7793;
}

.acordia-btn-secondary {
    background: #F1F1F1;
    border: 1px solid #CECECE;
}



/* ============================================================
   USER MANAGEMENT QUICKGRID - MATCH SOLICITATIONS TABLE
   ============================================================ */

/* Main table shell */
.quickgrid.case-table {
    width: 100%;
    border-collapse: separate !important;
    border-spacing: 0;
    border: 1px solid #CECECE;
    border-radius: 8px;
    overflow: hidden;
    background: #FFFFFF;
}

/* Header row */
.quickgrid.case-table thead th {
    background: #384959 !important;
    color: #F1F1F1 !important;
    font-size: 14px;
    font-weight: 700;
    padding: 12px 14px;
    border-right: 1px solid #8D9AA6;
    border-bottom: 1px solid #CECECE;
    text-align: left;
    vertical-align: middle;
}

/* QuickGrid header inner text */
.quickgrid.case-table thead th .col-header-content,
.quickgrid.case-table thead th .col-title {
    color: #F1F1F1 !important;
    font-weight: 700 !important;
    justify-content: flex-start;
    text-align: left;
}

/* Body cells */
.quickgrid.case-table tbody td {
    background: #FFFFFF;
    color: #1F1F1F;
    font-size: 14px;
    padding: 12px 14px;
    border-right: 1px solid #CECECE;
    border-bottom: 1px solid #CECECE;
    vertical-align: middle !important;
    text-align: left;
}

/* Remove extra right border on last column */
.quickgrid.case-table thead th:last-child,
.quickgrid.case-table tbody td:last-child {
    border-right: none;
}

/* Remove bottom border on last row */
.quickgrid.case-table tbody tr:last-child td {
    border-bottom: none;
}

/* Rounded corners on header */
.quickgrid.case-table thead th:first-child {
    border-top-left-radius: 8px;
}

.quickgrid.case-table thead th:last-child {
    border-top-right-radius: 8px;
}

/* Status column centered */
.quickgrid.case-table thead th:nth-child(5),
.quickgrid.case-table tbody td:nth-child(5) {
    text-align: center;
}

.quickgrid.case-table thead th:nth-child(5) .col-header-content,
.quickgrid.case-table thead th:nth-child(5) .col-title {
    justify-content: center !important;
    text-align: center !important;
}

/* Actions column centered */
.quickgrid.case-table thead th:nth-child(6),
.quickgrid.case-table tbody td:nth-child(6) {
    text-align: center;
}

.quickgrid.case-table thead th:nth-child(6) .col-header-content,
.quickgrid.case-table thead th:nth-child(6) .col-title {
    justify-content: center !important;
    text-align: center !important;
}

/* Optional row hover like enterprise grids */
.quickgrid.case-table tbody tr:hover td {
    background: #F8FAFC;
}

/* banner color */ 
.user-details-panel .offcanvas.my-case-offcanvas .offcanvas-header {
    background: #DAEDFF !important;
}

/* ==========================================================
   APPLICATION PARAMETERS GRID ALIGNMENT FIX
   ========================================================== */

/* keep all columns left by default */
.application-parameter-grid .quickgrid.case-table thead th .col-header-content {
    justify-content: flex-start;
}

/* STATUS column */
.application-parameter-grid .quickgrid.case-table thead th:nth-child(6) .col-header-content {
    justify-content: center !important;
}

.application-parameter-grid .quickgrid.case-table tbody td:nth-child(6) {
    text-align: center !important;
}

/* ACTIONS column */
.application-parameter-grid .quickgrid.case-table thead th:nth-child(7) .col-header-content {
    justify-content: center !important;
}

.application-parameter-grid .quickgrid.case-table tbody td:nth-child(7) {
    text-align: center !important;
}

.quickgrid tbody tr:has(td:empty) {
    display: none;
}

/* ==============================================
   RESET PASSWORD TABLE HEADER
   ============================================== */

.reset-card table thead th {
    background: #384959 !important;
    color: #F1F1F1 !important;
    font-weight: 700;
    font-size: 14px;
    border-bottom: 1px solid #CECECE;
    padding: 12px 14px;
}

/* checkbox column */
.reset-card table thead th:first-child {
    width: 5%;
}

/* hover sort indicator */
.reset-card table thead th span {
    font-size: 11px;
}

/* =========================================================
   RESET PASSWORD TABLE CONTAINER
   ========================================================= */

.reset-card {
    max-width: 900px;
    margin: 0 0 0 8px;
}

/* tighten table layout */
.reset-card table {
    table-layout: auto;
}

.reset-card table tbody td {
    padding: 10px 14px;
}

.reset-card table tbody tr {
    height: 42px;
}

.reset-card {
    border-radius: 10px;
}

.reset-card .card-body {
    padding: 0;
}

.reset-card .card-footer {
    padding: 16px 24px 24px 24px;
}

/* ============================================================
   HELP SIDEBAR ACCENT LINE (FULL WIDTH - CORRECT)
   ============================================================ */

.help-sidebar {
    position: relative;
    overflow: hidden; /* important for radius clipping */
}

.help-sidebar::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 5px;
    background: #003466;
    /* match card radius */
    border-top-left-radius: var(--radius);
    border-top-right-radius: var(--radius);
}

/* ======================================================
   ACORDIA BADGES (UTILITY TYPES)
====================================================== */

.acordia-badge {
    background: transparent; /* remove gray */
    color: #1F1F1F;
    font-size: 13px;
    font-weight: 600;
    padding: 0; /* remove pill spacing */
    border-radius: 0; /* remove rounded look */
    min-width: auto;
    display: block; /* stack vertically */
    margin-bottom: 4px;
    text-align: left;
}

/* ======================================================
   ADMINISTRATION RESOURCES
====================================================== */

/* ================================
   ADMIN BUTTON
================================ */
.admin-btn {
    min-width: 160px; /* prevent collapse */
    width: auto;
    text-align: left;
    padding: 6px 12px;
    font-size: 13px;
    white-space: normal; /* allow wrapping if needed */
    word-break: break-word;
}

/* ================================
   TABLE BASE
================================ */
.user-table {
    font-size: 15px;
    table-layout: auto; /* 🔥 FIX: allow responsive resizing */
}

/* ================================
   TABLE CELLS
================================ */
.user-table td {
    padding: 6px 10px !important;
    line-height: 1.2;
    vertical-align: middle;
}

.user-table th {
    padding: 8px 10px !important;
}

/* ================================
   BUTTON INSIDE TABLE
================================ */
.user-table .admin-btn {
    width: auto; /* 🔥 FIX: prevent stretching */
    padding: 4px 10px !important;
    font-size: 14px;
    border-radius: 6px;
    text-align: left !important;
    justify-content: flex-start;
}

/* ================================
   SMALL BUTTON NORMALIZATION
================================ */
.user-table .btn-sm {
    padding: 4px 10px !important;
}

/* ================================
   COLUMN WIDTHS (RESPONSIVE SAFE)
================================ */

/* Column 1 - Administrative Name (button) */
.user-table td:nth-child(1),
.user-table th:nth-child(1) {
    min-width: 160px; /* 🔥 FIX: was 70px (too small) */
}

/* Column 2 - Name */
.user-table td:nth-child(2),
.user-table th:nth-child(2) {
    min-width: 140px;
}

/* Column 3 - Description */
.user-table td:nth-child(3),
.user-table th:nth-child(3) {
    min-width: 220px;
    max-width: 320px;
    /* Only truncate description (good UX) */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ================= CHECKBOX (ACORDIA STYLE) ================= */
/* wrapper alignment */
.reset-password-btn .icon-wrapper {
    display: inline-flex;
    align-items: center;
    margin-right: 6px;
}

/* hide open by default */
.reset-password-btn .icon-open {
    display: none;
}

/* hover swap */
.reset-password-btn:hover .icon-closed {
    display: none;
}

.reset-password-btn:hover .icon-open {
    display: inline-block;
}

/* base */
.custom-checkbox,
.table input.form-check-input,
.form-check-input {
    width: 18px;
    height: 18px;
    border: 2px solid #9aa3ab;
    border-radius: 5px;
    background-color: #fff;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    display: inline-block;
    vertical-align: middle;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 70%;
}

/* checked */
.custom-checkbox:checked,
.form-check-input:checked,
.table input.form-check-input:checked {
    background-color: #0057AC !important;
    border-color: #0057AC !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='white' stroke-width='3' d='M3 8 L7 12 L13 4'/%3e%3c/svg%3e") !important;
}

/* focus */
.form-check-input:focus,
.custom-checkbox:focus,
.table input.form-check-input:focus {
    box-shadow: 0 0 0 0.2rem rgba(0, 87, 172, 0.25);
}

.card-case-table table.case-table.user-table tbody td {
    font-size: 16px !important;
}

.card-case-table table.case-table.user-table thead th {
    font-size: 16px !important;
}

/* =========================================================
   ACORDIA EMPTY STATE (STANDARD)
   ========================================================= */

.ac-empty-state {
    margin-top: 16px;
}

.ac-empty-card {
    background: #DAEDFF;
    border-radius: 8px;
    padding: 16px 18px;
    text-align: center;
    font-size: 16px;
    color: #1F1F1F;
}

.ac-empty-card strong {
    display: block;
    font-weight: 700;
}

.ac-empty-card p {
    font-size: 16px;
    color: #4a4a4a;
}

/* =========================================================
   User Filter -- OVERRIDE OLD BUTTONS → USE ACORDIA COLORS (KEEP SIZE)
   ========================================================= */

/* RESET = secondary */
.btn.btn-grey {
    background: #FFFFFF !important;
    color: #0057AC !important;
    border: 1px solid #0057AC !important;
}

/* APPLY = primary */
.btn.btn-darkblue {
    background: #0057AC !important;
    color: #F1F1F1 !important;
    border: 1px solid #0057AC !important;
}

/* HOVER / FOCUS (match your global exactly) */
.btn.btn-grey:hover,
.btn.btn-grey:focus,
.btn.btn-darkblue:hover,
.btn.btn-darkblue:focus {
    background: #003466 !important;
    color: #F1F1F1 !important;
    border-color: #003466 !important;
}

/* =========================================================
   ACORDIA BUTTON ALIGNMENT (GLOBAL)
   ========================================================= */

.ac-btn-row {
    display: flex;
    justify-content: flex-end;
    margin-top: 24px;
}

/* optional: standard button sizing */
.ac-btn-standard {
    min-width: 140px;
}

.ac-btn-row .btn {
    width: auto !important;
}

/* =========================================================
   Footer Button Width in Solicitations, Proposals
   ========================================================= */

.offcanvas-footer {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
}

.offcanvas-footer .btn {
    width: auto !important; /* 🔑 stop stretching */
    min-width: 140px;
    flex: 0 0 auto !important; /* 🔥 critical */
}

/* =========================================================
   ADD USER PROFILE PIC BUTTON
   ========================================================= */

.acordia-avatar-section {
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* 🔑 THIS is the fix */
}

.acordia-avatar-section .upload-btn {
    min-width: 140px;
    width: auto;
}

/*.right-data-box .form-control {
    background: #ffe5e5 !important;
    width: 280px !important;*/ /* 🔥 force visible change */
    /*display: block;
    margin: 0 auto;*/ /* center it */
/*}*/

/* =========================================================
   NOTIFICATION ICON
   ========================================================= */

.btn-notification {
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 6px;
}

/* =========================================================
   SECTION TITLES
   ========================================================= */
.user-management-page .section-title {
    font-size: 17px !important;
    font-weight: 700 !important;
    letter-spacing: 0.5px !important;
    text-transform: uppercase !important;
    color: #556b7a !important;
    margin-bottom: 12px !important;
}

.user-management-page .offcanvas-title {
    font-size: 18px !important;
    font-weight: 700 !important;
    color: #1F1F1F !important;
}