/* Target cards ONLY when the application is flipped to dark mode */
[data-bs-theme="dark"] {
    --bs-card-bg: rgba(54, 69, 79, 0.85);       /* Charcoal Grey (#36454F) at 85% opacity */
    --bs-card-color: #ffffff;                    /* Pure white text */
    --bs-card-cap-bg: transparent;              /* Makes card-header transparent */
    --bs-card-border-color: rgba(255, 255, 255, 0.1); /* Subtle, faint white border */
}

/* Ensure list items inside the card also inherit transparency in dark mode */
[data-bs-theme="dark"] .header-dropdown-menu .list-group-item {
    color: rgba(255, 255, 255, 0.9);
    border-color: rgba(255, 255, 255, 0.1);
}

[data-bs-theme="dark"] .header-dropdown-menu .list-group-item:hover {
    background-color: rgba(255, 255, 255, 0.1); /* Subtle white highlight on hover */
    color: #ffffff;
}

/* Optional: Make the greeting text white in dark mode */
[data-bs-theme="dark"] .profile-greeting {
    color: #ffffff;
}

[data-bs-theme="dark"] .card {
    background-color: rgba(54, 69, 79, 0.65) !important; /* Charcoal Grey with 85% opacity */
    color: #ffffff !important; /* Forces internal text to change to white for readability */
}


/* Target responsive tables ONLY in dark mode */
[data-bs-theme="dark"] .table-responsive,
[data-bs-theme="dark"] .table-responsive .table {
    background-color: transparent !important;
}

/* Force the charcoal 85% opacity background onto all headers and data cells */
[data-bs-theme="dark"] .table-responsive .table th,
[data-bs-theme="dark"] .table-responsive .table td {
    background-color: rgba(54, 69, 79, 0.65) !important;
    color: #ffffff !important; /* Force text white */
    border-color: rgba(255, 255, 255, 0.15) !important; /* Faint white borders */
}

/* Fix for Striped Tables (.table-striped) */
[data-bs-theme="dark"] .table-responsive .table-striped tbody tr:nth-of-type(odd) td,
[data-bs-theme="dark"] .table-responsive .table-striped tbody tr:nth-of-type(odd) th {
    background-color: rgba(64, 79, 89, 0.65) !important; /* Slightly lighter charcoal for stripes */
}

/* Fix for Hoverable Tables (.table-hover) */
[data-bs-theme="dark"] .table-responsive .table-hover tbody tr:hover td,
[data-bs-theme="dark"] .table-responsive .table-hover tbody tr:hover th {
    background-color: rgba(74, 89, 99, 0.7) !important; /* Brighter highlight on hover */
    color: #ffffff !important;
}


/* Style the DataTables layout containers (Search box, Length dropdowns, Info text) */
[data-bs-theme="dark"] .dataTables_wrapper {
    color: #ffffff !important;
}

[data-bs-theme="dark"] .dataTables_wrapper .dataTables_length select,
[data-bs-theme="dark"] .dataTables_wrapper .dataTables_filter input {
    background-color: rgba(54, 69, 79, 0.65) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    border-radius: 4px;
    padding: 4px 8px;
}

/* Target the DataTables grid structure directly (Overrides DataTables internal engine) */
[data-bs-theme="dark"] table.dataTable,
[data-bs-theme="dark"] table.dataTable th,
[data-bs-theme="dark"] table.dataTable td {
    background-color: rgba(54, 69, 79, 0.65) !important;
    color: #ffffff !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
}

/* Handle DataTables native zebra striping rules */
[data-bs-theme="dark"] table.dataTable.stripe tbody tr.odd td,
[data-bs-theme="dark"] table.dataTable.display tbody tr.odd td {
    background-color: rgba(64, 79, 89, 0.65) !important; /* Slightly lighter charcoal stripe */
}

/* Handle DataTables native row hover rules */
[data-bs-theme="dark"] table.dataTable.hover tbody tr:hover td,
[data-bs-theme="dark"] table.dataTable.display tbody tr:hover td {
    background-color: rgba(74, 89, 99, 0.7) !important; /* Noticeable hover highlight */
}

/* Style DataTables pagination buttons */
[data-bs-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button {
    color: #ffffff !important;
    border: 1px solid transparent !important;
    background: transparent !important;
}

[data-bs-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button.current,
[data-bs-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    background-color: rgba(54, 69, 79, 0.75) !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
    color: #ffffff !important;
}

[data-bs-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background: rgba(255, 255, 255, 0.1) !important;
    color: #ffffff !important;
}

/* Custom Primary Button Styles */
button.btn.btn-primary,
a.btn.btn-primary {
    background-color: #ee00ff;
    border-color: #ee00ff;
    color: #ffffff;
    border-radius: 50px; /* Forces fully rounded capsule ends */
    transition: all 0.2s ease-in-out;
}

/* Hover State - Softened variation of ee00ff for visual feedback */
button.btn.btn-primary:hover,
a.btn.btn-primary:hover {
    background-color: #ff40ff;
    border-color: #ff40ff;
    color: #ffffff;
}

/* Active / Pressed State */
button.btn.btn-primary:active,
a.btn.btn-primary:active,
button.btn.btn-primary.active,
a.btn.btn-primary.active {
    background-color: #cc00db;
    border-color: #cc00db;
    color: #ffffff;
}

/* Focus Outline State */
button.btn.btn-primary:focus,
a.btn.btn-primary:focus {
    background-color: #ff40ff;
    border-color: #ff40ff;
    /* Uses a semi-transparent version of your magenta accent color for the glow */
    box-shadow: 0 0 0 0.25rem rgba(238, 0, 255, 0.4); 
}

/* Custom Primary Button Styles */
button.btn.btn-secondary,
a.btn.btn-secondary {
    background-color: #2000ff;
    border-color: #2000ff;
    color: #ffffff;
    border-radius: 50px; /* Forces fully rounded capsule ends */
    transition: all 0.2s ease-in-out;
}

/* Hover State - Softened variation of 2000ff for visual feedback */
button.btn.btn-secondary:hover,
a.btn.btn-secondary:hover {
    background-color: #5940ff;
    border-color: #5940ff;
    color: #ffffff;
}

/* Active / Pressed State */
button.btn.btn-secondary:active,
a.btn.btn-secondary:active,
button.btn.btn-secondary.active,
a.btn.btn-secondary.active {
    background-color: #1a00cc;
    border-color: #1a00cc;
    color: #ffffff;
}

/* Focus Outline State */
button.btn.btn-secondary:focus,
a.btn.btn-secondary:focus {
    background-color: #5940ff;
    border-color: #5940ff;
    /* Uses a semi-transparent version of your blue accent color for the glow */
    box-shadow: 0 0 0 0.25rem rgba(32, 0, 255, 0.4); 
}

/* New Custom Transparent Button */
button.btn.btn-transparent,
a.btn.btn-transparent {
    background-color: transparent;
    border: 1px solid transparent;
    color: #ffffff;
    border-radius: 50px; /* Forces fully rounded capsule ends */
    transition: all 0.2s ease-in-out;
}

/* Hover State */
button.btn.btn-transparent:hover,
a.btn.btn-transparent:hover {
    background-color: rgba(255, 255, 255, 0.1);
    border-color: transparent;
    color: #ffffff;
}

/* Active / Pressed State */
button.btn.btn-transparent:active,
a.btn.btn-transparent:active,
button.btn.btn-transparent.active,
a.btn.btn-transparent.active {
    background-color: rgba(255, 255, 255, 0.2);
    border-color: #ffffff;
    color: #ffffff;
}

/* Focus Outline State */
button.btn.btn-transparent:focus,
a.btn.btn-transparent:focus {
    box-shadow: 0 0 0 0.25rem rgba(255, 255, 255, 0.25);
}

/* Base Icon Styling */
.social-icon {
    font-size: 1.5rem;  /* Controls the visual size of the icons */
    color: #ffffff;     /* Default color matches your text template theme */
    text-decoration: none;
    transition: all 0.2s ease-in-out;
}

/* Individual Brand Hover States */
.social-icon.si-whatsapp:hover {
    color: #25d366;     /* Official WhatsApp Green */
    transform: translateY(-3px); /* Subtle lift animation on hover */
}

.social-icon.si-facebook:hover {
    color: #1877f2;     /* Official Facebook Blue */
    transform: translateY(-3px);
}

.social-icon.si-linkedin:hover {
    color: #0a66c2;     /* Official LinkedIn Blue */
    transform: translateY(-3px);
}

.social-icon.si-instagram:hover {
    color: #e1306c;     /* Official Instagram Magenta */
    transform: translateY(-3px);
}

.custom-subbie-icon {
    color: #cc00cc;
    font-size: 1.5rem;
    cursor: pointer;
    transition: transform 0.2s ease-in-out, filter 0.2s ease-in-out;
}

.custom-subbie-icon:hover {
    filter: brightness(1.35);
    transform: scale(1.1);
}

.custom-contractor-icon {
    color: #0000cc;
    font-size: 1.5rem;
    cursor: pointer;
    transition: transform 0.2s ease-in-out, filter 0.2s ease-in-out;
}

.custom-contractor-icon:hover {
    filter: brightness(1.35);
    transform: scale(1.1);
}

/* Styles the main dropdown box for Bootstrap dark mode */
.form-select-dark {
    background-color: transparent !important;
    color: #fff !important;
    border-color: transparent !important;
    padding: 0;
}

/* Forces the dropdown list background to be dark */
.form-select-dark optgroup,
.form-select-dark option {
    background-color: #212529 !important;
    color: #fff !important;
    padding: 2px 4px !important; /* Reduces the padding / spacing */
}

/* Custom look for the group titles */
.form-select-dark optgroup {
    font-weight: bold;
    color: #adb5bd !important; /* Light grey text for headers */
}