﻿/* Custom SRKK theme enhancements */
[data-bs-theme=srkk] {
    /* Keep your existing dark theme variables */
    color-scheme: dark;
    --bs-body-color: #dee2e6;
    --bs-body-color-rgb: 222, 226, 230;
    --bs-body-bg: #212529;
    --bs-body-bg-rgb: 33, 37, 41;
    --bs-emphasis-color: #fff;
    --bs-emphasis-color-rgb: 255, 255, 255;
    --bs-secondary-color: rgba(222, 226, 230, 0.75);
    --bs-secondary-color-rgb: 222, 226, 230;
    --bs-secondary-bg: #343a40;
    --bs-secondary-bg-rgb: 52, 58, 64;
    --bs-tertiary-color: rgba(222, 226, 230, 0.5);
    --bs-tertiary-color-rgb: 222, 226, 230;
    --bs-tertiary-bg: #2b3035;
    --bs-tertiary-bg-rgb: 43, 48, 53;
    --bs-primary-text-emphasis: #6ea8fe;
    --bs-secondary-text-emphasis: #a7acb1;
    --bs-success-text-emphasis: #75b798;
    --bs-info-text-emphasis: #6edff6;
    --bs-warning-text-emphasis: #ffda6a;
    --bs-danger-text-emphasis: #ea868f;
    --bs-light-text-emphasis: #f8f9fa;
    --bs-dark-text-emphasis: #dee2e6;
    --bs-primary-bg-subtle: #031633;
    --bs-secondary-bg-subtle: #161719;
    --bs-success-bg-subtle: #051b11;
    --bs-info-bg-subtle: #032830;
    --bs-warning-bg-subtle: #332701;
    --bs-danger-bg-subtle: #2c0b0e;
    --bs-light-bg-subtle: #343a40;
    --bs-dark-bg-subtle: #1a1d20;
    --bs-primary-border-subtle: #084298;
    --bs-secondary-border-subtle: #41464b;
    --bs-success-border-subtle: #0f5132;
    --bs-info-border-subtle: #087990;
    --bs-warning-border-subtle: #997404;
    --bs-danger-border-subtle: #842029;
    --bs-light-border-subtle: #495057;
    --bs-dark-border-subtle: #343a40;
    --bs-heading-color: inherit;
    --bs-link-color: #6ea8fe;
    --bs-link-hover-color: #8bb9fe;
    --bs-link-color-rgb: 110, 168, 254;
    --bs-link-hover-color-rgb: 139, 185, 254;
    --bs-code-color: #e685b5;
    --bs-highlight-color: #dee2e6;
    --bs-highlight-bg: #664d03;
    --bs-border-color: #dee2e6;
    --bs-border-color-translucent: rgba(255, 255, 255, 0.15);
    --bs-form-valid-color: #75b798;
    --bs-form-valid-border-color: #75b798;
    --bs-form-invalid-color: #ea868f;
    --bs-form-invalid-border-color: #ea868f;
    /* Add some SRKK-specific enhancements */
    --srkk-card-bg: var(--bs-secondary-bg);
    --srkk-card-border: var(--bs-border-color);
    --srkk-input-focus: #0d6efd40;
    --srkk-hover-bg: rgba(255, 255, 255, 0.1);
    --srkk-heading-color: #f5a623;
    --srkk-table-header-bg: var(--bs-secondary-bg);
}

    /* Keep non-button links readable against dark surfaces in SRKK theme */
    [data-bs-theme=srkk] a:not(.btn):not(.nav-link):not(.dropdown-item):not(.navbar-brand) {
        color: var(--bs-link-color);
    }

        [data-bs-theme=srkk] a:not(.btn):not(.nav-link):not(.dropdown-item):not(.navbar-brand):hover,
        [data-bs-theme=srkk] a:not(.btn):not(.nav-link):not(.dropdown-item):not(.navbar-brand):focus {
            color: var(--bs-link-hover-color);
        }

    /* Enhanced form controls for SRKK theme */
    [data-bs-theme=srkk] .form-control {
        width: 100%;
        max-width: 400px;
        background-color: var(--bs-tertiary-bg);
        border-color: var(--bs-border-color);
        color: var(--bs-body-color);
    }

        [data-bs-theme=srkk] .form-control:focus {
            background-color: var(--bs-tertiary-bg);
            border-color: var(--bs-primary);
            box-shadow: 0 0 0 0.25rem var(--srkk-input-focus);
        }

    /* Table styles for SRKK theme */
    [data-bs-theme=srkk] .table {
        --bs-table-color: var(--bs-emphasis-color);
        --bs-table-bg: var(--bs-tertiary-bg);
        --bs-table-border-color: var(--bs-border-color);
        --bs-table-striped-bg: var(--bs-secondary-bg);
        --bs-table-striped-color: var(--bs-emphasis-color);
        --bs-table-active-bg: var(--bs-secondary-bg);
        --bs-table-active-color: var(--bs-emphasis-color);
        --bs-table-hover-bg: var(--bs-secondary-bg);
        --bs-table-hover-color: var(--bs-emphasis-color);
    }

        /* Table header styles for SRKK theme */
        [data-bs-theme=srkk] .table thead th,
        [data-bs-theme=srkk] .table th,
        [data-bs-theme=srkk] .table .h4.text-capitalize {
            background-color: var(--srkk-table-header-bg);
            color: var(--srkk-heading-color);
            border-bottom: 2px solid var(--bs-border-color);
        }

        /* Override Bootstrap's currentColor thead/tbody separator */
        [data-bs-theme=srkk] .table > :not(:first-child) {
            border-top-color: var(--bs-border-color);
        }

        /* Ensure proper contrast when hovering over header cells */
        [data-bs-theme=srkk] .table thead th:hover,
        [data-bs-theme=srkk] .table th:hover {
            background-color: var(--bs-secondary-bg);
            color: var(--srkk-heading-color);
        }

        /* Maintain heading color in table headers with h4 class */
        [data-bs-theme=srkk] .table th.h4,
        [data-bs-theme=srkk] .table td.h4 {
            color: var(--srkk-heading-color);
        }

        /* Ensure proper text contrast in header cells with links */
        [data-bs-theme=srkk] .table th a {
            color: var(--srkk-heading-color);
            text-decoration: none;
        }

            [data-bs-theme=srkk] .table th a:hover {
                color: var(--srkk-heading-color);
                text-decoration: underline;
            }

        [data-bs-theme=srkk] .table td,
        [data-bs-theme=srkk] .table th {
            color: var(--bs-body-color); /* or use #dee2e6 for light gray text */
        }


    /* Enhanced card styles */
    [data-bs-theme=srkk] .card {
        background-color: var(--srkk-card-bg);
        border-color: var(--srkk-card-border);
    }

    /* Keep your existing custom styles but update them for the theme */
    [data-bs-theme=srkk] .active-False {
        background-color: var(--bs-secondary-bg);
        color: var(--bs-secondary-color);
    }

    /* Update form check inputs for better visibility */
    [data-bs-theme=srkk] .form-check-input {
        background-color: var(--bs-tertiary-bg);
        border-color: var(--bs-border-color);
    }
    [data-bs-theme=srkk] .form-check-input[type=checkbox] {
        background-color: var(--bs-secondary-bg); 
        border-color: var(--bs-border-color);
    }

    [data-bs-theme=srkk] .form-check-input[type=checkbox]:not(:checked):hover {
        background-color: var(--srkk-hover-bg); 
    }

    [data-bs-theme=srkk] .form-check-input:checked {
        background-color: var(--bs-primary);
        border-color: var(--bs-primary);
    }

    /* Muted danger button for dark theme - accessible contrast on dark backgrounds */
    [data-bs-theme=srkk] .btn-danger-muted,
    [data-bs-theme=srkk] .table a.btn-danger-muted {
        background-color: var(--bs-danger-border-subtle);
        color: #fff;
        border-color: var(--bs-danger-border-subtle);
        text-decoration: none;
    }

        [data-bs-theme=srkk] .btn-danger-muted:hover,
        [data-bs-theme=srkk] .table a.btn-danger-muted:hover {
            background-color: #a52833;
            color: #fff;
            border-color: #a52833;
        }

    [data-bs-theme=srkk] .btn-default {
        background-color: var(--bs-tertiary-bg);
        border-color: var(--bs-border-color);
        color: var(--bs-emphasis-color);
    }

        [data-bs-theme=srkk] .btn-default:hover {
            background-color: var(--bs-secondary-bg);
            border-color: var(--bs-border-color);
            color: var(--bs-emphasis-color);
        }

    /* Links in tables */
    [data-bs-theme=srkk] .table a {
        color: var(--bs-link-color);
        text-decoration: none;
    }

        [data-bs-theme=srkk] .table a:hover {
            color: var(--bs-link-hover-color);
            text-decoration: underline;
        }

    /* Enhanced button styles */
    [data-bs-theme=srkk] .btn {
        padding: 8px 14px;
        font-size: 16px;
        line-height: 1.3333333;
        border-radius: 5px;
    }

/* Keep your existing responsive styles */
@media (min-width: 700px) {
    .br-responsive {
        display: none;
    }

    [data-bs-theme=srkk] input[type=checkbox].check-box {
        /*margin-left: 30px;*/
        width: 1.5em;
        height: 1.5em;
    }
}

/* Update specific input styles */
[data-bs-theme=srkk] input.datepicker {
    width: 100%;
    max-width: 180px;
    line-height: normal;
    background-color: var(--bs-tertiary-bg);
    color: var(--bs-body-color);
    border-color: var(--bs-border-color);
    padding-right: 2.5rem;
}

[data-bs-theme=srkk] input.flatpickr-input.form-control {
    width: 100%;
    max-width: 180px;
    line-height: normal;
    background-color: var(--bs-tertiary-bg);
    color: var(--bs-body-color);
    border-color: var(--bs-border-color);
    padding-right: 2.5rem;
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 1.1rem 1.1rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='rgba(255,255,255,0.85)' stroke-width='1.8' viewBox='0 0 16 16'%3E%3Crect x='1.5' y='2.5' width='13' height='12' rx='2'/%3E%3Cpath d='M4 1.5v3M12 1.5v3M1.5 6.5h13'/%3E%3C/svg%3E");
}

[data-bs-theme=srkk] .select-wrapper {
    position: relative;
    width: 100%;
    max-width: 400px;
}

    [data-bs-theme=srkk] .select-wrapper select {
        width: 100%;
        padding-right: 30px; /* space for arrow */
        background-color: var(--bs-tertiary-bg);
        color: var(--bs-body-color);
        border-color: var(--bs-border-color);
        appearance: none;
        -webkit-appearance: none;
        -moz-appearance: none;
        background-image: none; /* Remove native arrow for some browsers */
    }
    /* Add a custom arrow using a pseudo-element */
    [data-bs-theme=srkk] .select-wrapper::after {
        content: "▼";
        position: absolute;
        right: 12px;
        top: 50%;
        transform: translateY(-50%);
        pointer-events: none;
        color: var(--bs-body-color);
        font-size: 1rem;
        z-index: 2; /* Ensure arrow is above select */
    }

[data-bs-theme=srkk] .grade-system-switch {
    flex-wrap: wrap;
}

    [data-bs-theme=srkk] .grade-system-switch .btn {
        font-size: 0.95rem;
    }

[data-bs-theme=srkk] .grade-card {
    overflow: hidden;
    border-color: var(--bs-border-color);
}

    [data-bs-theme=srkk] .grade-card .card-header {
        background-color: var(--bs-secondary-bg);
        border-bottom-color: var(--bs-border-color);
    }

[data-bs-theme=srkk] .grade-card__title {
    font-size: 1.1rem;
    font-weight: 600;
    line-height: 1.2;
}

[data-bs-theme=srkk] .grade-card__subtitle {
    font-size: 0.95rem;
    line-height: 1.25;
}

[data-bs-theme=srkk] .grade-card__value {
    font-size: 1rem;
    word-break: break-word;
}

[data-bs-theme=srkk] .grade-card .form-check {
    margin-top: 0.25rem;
}

[data-bs-theme=srkk] .grade-card .form-check-label {
    margin-left: 0.35rem;
}

[data-bs-theme=srkk] .grade-card .btn {
    min-height: 44px;
}

[data-bs-theme=srkk] .action-card,
[data-bs-theme=srkk] .danger-zone-card {
    border-color: var(--bs-border-color);
    background-color: var(--bs-tertiary-bg);
}

[data-bs-theme=srkk] .action-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

    [data-bs-theme=srkk] .action-row + .action-row {
        margin-top: 0.75rem;
    }

    [data-bs-theme=srkk] .action-row .btn {
        min-height: 44px;
    }

[data-bs-theme=srkk] .danger-zone-card p {
    color: var(--bs-secondary-color);
}

[data-bs-theme=srkk] .cert-card {
    border-color: var(--bs-border-color);
    background-color: var(--bs-tertiary-bg);
}

    [data-bs-theme=srkk] .cert-card .card-header {
        border-bottom-color: var(--bs-border-color);
        background-color: var(--bs-secondary-bg);
    }

[data-bs-theme=srkk] .cert-card--expired {
    border-left: 4px solid var(--bs-danger);
}

[data-bs-theme=srkk] .cert-card--expiring {
    border-left: 4px solid var(--bs-warning);
}

@media (max-width: 991.98px) {
    [data-bs-theme=srkk] .action-row .btn,
    [data-bs-theme=srkk] .action-row input[type=submit] {
        flex: 1 1 100%;
    }
}

[data-bs-theme=srkk] select:focus {
    outline: none; /* Remove default outline */
    border-color: #888; /* Highlight border */
}

[data-bs-theme=srkk] input[type=email] {
    width: 100%;
    max-width: 400px;
}
/* Enhance dropdown styles */
[data-bs-theme=srkk] .dropdown-menu {
    background-color: var(--bs-secondary-bg);
    border-color: var(--bs-border-color);
}

[data-bs-theme=srkk] .dropdown-item {
    color: var(--bs-body-color);
}

    [data-bs-theme=srkk] .dropdown-item:hover {
        background-color: var(--srkk-hover-bg);
        color: var(--bs-emphasis-color);
    }

[data-bs-theme=srkk] .member-delete-modal .modal-content {
    background-color: var(--bs-tertiary-bg);
    color: var(--bs-emphasis-color);
    border-color: var(--bs-border-color);
}

[data-bs-theme=srkk] .member-delete-modal .modal-header,
[data-bs-theme=srkk] .member-delete-modal .modal-footer {
    border-color: var(--bs-border-color);
}

[data-bs-theme=srkk] .member-delete-modal .modal-header {
    justify-content: flex-start;
    gap: 0.75rem;
}

[data-bs-theme=srkk] .member-delete-modal .modal-title {
    color: var(--bs-emphasis-color);
    margin: 0;
    text-align: left;
}

[data-bs-theme=srkk] .member-delete-modal .btn-close {
    filter: var(--bs-btn-close-white-filter);
    opacity: 0.85;
    margin: 0 0 0 auto;
}

    [data-bs-theme=srkk] .member-delete-modal .btn-close:hover {
        opacity: 1;
    }

[data-bs-theme=srkk] .navbar {
    --bs-navbar-color: var(--bs-emphasis-color);
    --bs-navbar-hover-color: var(--bs-link-hover-color);
    --bs-navbar-active-color: var(--bs-link-hover-color);
}

[data-bs-theme=srkk] .navbar-toggler {
    border-color: rgba(255, 255, 255, 0.6);
    background-color: var(--bs-secondary-bg);
}

    [data-bs-theme=srkk] .navbar-toggler:focus {
        box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.25);
    }

[data-bs-theme=srkk] .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255,255,255,0.95%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

[data-bs-theme=srkk] .navbar-brand {
    color: var(--bs-emphasis-color);
}

[data-bs-theme=srkk] .nav-link {
    color: var(--bs-emphasis-color);
}

    [data-bs-theme=srkk] .nav-link:hover,
    [data-bs-theme=srkk] .nav-link:focus {
        color: var(--bs-link-hover-color);
    }

/* Raise outline button contrast for dark theme contexts */
[data-bs-theme=srkk] .btn-outline-danger {
    --bs-btn-color: #f1aeb5;
    --bs-btn-border-color: #f1aeb5;
    --bs-btn-hover-color: #212529;
    --bs-btn-hover-bg: #f1aeb5;
    --bs-btn-hover-border-color: #f1aeb5;
    --bs-btn-active-color: #212529;
    --bs-btn-active-bg: #f1aeb5;
    --bs-btn-active-border-color: #f1aeb5;
    --bs-btn-disabled-color: #f1aeb5;
    --bs-btn-disabled-border-color: #f1aeb5;
}

[data-bs-theme=srkk] .dropdown-menu {
    --bs-dropdown-color: var(--bs-emphasis-color);
    --bs-dropdown-bg: var(--bs-tertiary-bg);
    --bs-dropdown-border-color: var(--bs-border-color);
    --bs-dropdown-link-color: var(--bs-emphasis-color);
    --bs-dropdown-link-hover-color: var(--bs-emphasis-color);
    --bs-dropdown-link-hover-bg: var(--bs-secondary-bg);
}

[data-bs-theme=srkk] .active {
    color: var(--bs-emphasis-color);
}

[data-bs-theme=srkk] .inactive {
    background-color: var(--bs-dark-bg-subtle) !important;
    color: var(--bs-secondary-color);
    position: relative;
}

/* Generic members table: fit viewport instead of horizontal scrolling. */
.members-table {
    width: 100%;
    overflow: visible;
}

.members-table__table {
    width: 100%;
    table-layout: fixed;
}

.members-table__table--auto {
    table-layout: auto;
}

.members-table__table th,
.members-table__table td {
    overflow-wrap: anywhere;
    word-break: break-word;
}

.members-table__col-insurance-reference {
    white-space: nowrap;
    width: 1%;
}

.members-table__col-association-no,
.members-table__col-actions {
    white-space: nowrap;
    width: 1%;
}

.members-table__action-toggle {
    white-space: nowrap;
}

.members-table__expiry-date-compact {
    display: none;
}

@media (max-width: 991px) {
    .members-table__table tr.h4,
    .members-table__table .h4 {
        font-size: 1rem;
    }

    .members-table__table .members-table__action-toggle {
        padding: 4px 8px;
        font-size: 0.9rem;
        line-height: 1.2;
    }
}

@media (max-width: 575px) {
    .members-table__table tr.h4,
    .members-table__table .h4 {
        font-size: 0.9rem;
    }

    .members-table__table th,
    .members-table__table td {
        padding: 0.35rem;
    }
}

@media (max-width: 468px) {
    .members-table__expiry-date-full {
        display: none;
    }

    .members-table__expiry-date-compact {
        display: inline;
    }

    .members-table__table .members-table__action-toggle {
        padding: 0.25rem 0.5rem;
        font-size: 0.85rem;
    }
}
