/* DPC Members Table Styles */
#dpcMembersTable {
    width: 100%;
    margin-bottom: 0;
}

#dpcMembersTable th,
#dpcMembersTable td {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.table-responsive {
    overflow-x: hidden;
}

@media (max-width: 768px) {
    .table-responsive {
        overflow-x: auto;
    }
}

/* Button Icon Sizing */
.btn img {
    max-width: 48px !important;
    max-height: 32px !important;
    height: auto !important;
    width: auto !important;
    vertical-align: middle;
    margin-right: 0.5rem;
}

/* Smaller icons for inline buttons */
.btn-sm img,
.btn-xs img {
    max-width: 24px !important;
    max-height: 20px !important;
}

/* Dropdown menu background - keep white/default */
.dropdown-menu {
    background-color: #ffffff !important;
}

/* Dropdown item styling - light bluish background */
.dropdown-item {
    background-color: #f0f8ff !important; /* Alice blue - light bluish tint */
    margin-bottom: 2px;
    margin-left: 4px;
    margin-right: 4px;
    border-radius: 4px;
}

.dropdown-item:hover,
.dropdown-item:focus {
    background-color: #d4ebf7 !important; /* Slightly darker blue on hover */
}

.dropdown-item:active {
    background-color: #b3d9f2 !important; /* Even darker when clicked */
}

/* Keep dividers unaffected */
.dropdown-divider {
    background-color: rgba(0,0,0,0.15) !important;
    margin: 0.5rem 0;
}

/* Ensure primary action buttons remain visible on phones */
@media (max-width: 575.98px) {
    .page-header .col-auto.ms-auto,
    .card-header .col-auto.ms-auto {
        width: 100%;
    }

    .page-header .btn-list,
    .card-header .btn-list,
    .btn-list.mobile-stack {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .page-header .btn-list .btn,
    .card-header .btn-list .btn,
    .btn-list.mobile-stack .btn {
        flex: 1 1 100%;
    }

    .page-header .btn-list .btn.d-none.d-sm-inline-block,
    .card-header .btn-list .btn.d-none.d-sm-inline-block,
    .btn-list .btn.d-none.d-sm-inline-block,
    .page-header .btn-list .btn.d-none.d-sm-inline,
    .card-header .btn-list .btn.d-none.d-sm-inline,
    .btn-list .btn.d-none.d-sm-inline {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
    }

    .page-header .btn-list .d-none.d-sm-inline,
    .card-header .btn-list .d-none.d-sm-inline,
    .btn-list .d-none.d-sm-inline {
        display: inline-flex !important;
    }
}

/* Mobile Menu Enhancement - Larger, More Readable Navigation */
@media (max-width: 991.98px) {
    /* Increase menu item font size on mobile */
    .navbar-nav .nav-link {
        font-size: 1.35rem !important;
        padding: 1rem 1.25rem !important;
        line-height: 1.7 !important;
        font-weight: 500 !important;
    }

    /* Larger dropdown items */
    .navbar-nav .dropdown-menu {
        font-size: 1.25rem !important;
        min-width: 100% !important;
    }

    .navbar-nav .dropdown-item {
        font-size: 1.25rem !important;
        padding: 1rem 1.5rem !important;
        line-height: 1.8 !important;
        white-space: normal !important;
    }

    /* Ensure icons are visible and properly sized */
    .navbar-nav .nav-link-icon {
        width: 2.75rem !important;
        height: 2.5rem !important;
        margin-right: 0.75rem !important;
    }

    .navbar-nav .nav-link-icon img {
        width: 100% !important;
        height: auto !important;
        max-width: 38px !important;
    }

    /* Increase spacing between menu items */
    .navbar-nav .nav-item {
        margin-bottom: 0.5rem;
        border-bottom: 1px solid rgba(0,0,0,0.1);
    }

    /* Better touch targets */
    .navbar-nav .dropdown-toggle::after {
        font-size: 1.35rem;
        margin-left: 0.75rem;
    }

    /* Improve dropdown menu spacing */
    .navbar-nav .dropdown-menu {
        padding: 0.85rem 0 !important;
        margin-top: 0.5rem !important;
        border-radius: 8px !important;
    }

    /* Icons in dropdown items */
    .navbar-nav .dropdown-item img {
        max-width: 28px !important;
        max-height: 28px !important;
        margin-right: 0.85rem !important;
    }

    /* Make the hamburger menu icon larger */
    .navbar-toggler.custom-menu-btn {
        padding: 0.6rem 0.9rem;
        border: 2px solid rgba(0,0,0,0.2) !important;
        border-radius: 8px;
        background: transparent;
    }

    .navbar-toggler .menu-icon-bi {
        font-size: 2.1rem !important;
        color: #000;
        display: block;
    }

    .navbar-toggler-icon {
        display: none !important;
    }
}

/* Extra styles for small mobile devices (phones) */
@media (max-width: 767px) {
    /* Even larger menu items for phones */
    .navbar-nav .nav-link {
        font-size: 1.5rem !important;
        padding: 1.2rem 1.35rem !important;
        line-height: 1.8 !important;
        font-weight: 600 !important;
    }

    /* Larger dropdown items */
    .navbar-nav .dropdown-menu {
        font-size: 1.4rem !important;
        min-width: 100% !important;
    }

    .navbar-nav .dropdown-item {
        font-size: 1.4rem !important;
        padding: 1.1rem 1.6rem !important;
        line-height: 1.9 !important;
        white-space: normal !important;
    }

    /* Increase icon size */
    .navbar-nav .nav-link-icon {
        width: 3.1rem !important;
        height: 2.8rem !important;
        margin-right: 1rem !important;
    }

    .navbar-nav .nav-link-icon img {
        max-width: 44px !important;
    }

    /* Larger dropdown toggle arrow */
    .navbar-nav .dropdown-toggle::after {
        font-size: 1.5rem;
        margin-left: 1rem;
    }

    /* Increase spacing between menu items */
    .navbar-nav .nav-item {
        margin-bottom: 0.5rem;
        border-bottom: 1px solid rgba(0,0,0,0.12);
        padding-bottom: 0.4rem;
    }

    /* More padding in dropdown menus */
    .navbar-nav .dropdown-menu {
        padding: 1rem 0 !important;
        margin-top: 0.75rem !important;
        border-radius: 10px !important;
    }

    /* Icons in dropdown items on phones */
    .navbar-nav .dropdown-item img {
        max-width: 34px !important;
        max-height: 34px !important;
        margin-right: 1rem !important;
    }

    /* Make hamburger even larger on phones */
    .navbar-toggler.custom-menu-btn {
        padding: 0.8rem 1rem;
        border: 2px solid rgba(0,0,0,0.25) !important;
        border-radius: 10px;
        background: transparent;
    }

    .navbar-toggler .menu-icon-bi {
        font-size: 2.4rem !important;
        color: #000;
        display: block;
    }

    .navbar-toggler:focus {
        box-shadow: 0 0 0 0.25rem rgba(13,110,253,.25);
    }

    .navbar-toggler-icon {
        display: none !important;
    }

    /* Ensure the navbar brand/logo is appropriately sized */
    .navbar-brand img {
        max-height: 3rem;
    }
}