:root {
    --trust-blue: #1e3a8a;
    --integrity-teal: #0f766e;
    --clarity-white: #ffffff;
    --authority-gray: #334155;
    --warning-amber: #f59e0b;
    --error-red: #dc2626;
    --success-green: #16a34a;
    --highlight-gold: #fbbf24;
    --neutral-light-gray: #f1f5f9;
    --lightest-gray: #f8fafc; /* For alternating table rows */

    /* Spacing Variables */
    --spacing-xs: 5px;
    --spacing-sm: 10px;
    --spacing-md: 15px;
    --spacing-lg: 20px;
    --spacing-xl: 30px;

    /* Font Size Variables */
    --font-size-base: 1rem;    /* 16px */
    --font-size-sm: 0.875rem; /* 14px */
    --font-size-xs: 0.75rem;  /* 12px */
    --font-size-lg: 1.25rem;  /* 20px */
    --font-size-xl: 1.5rem;   /* 24px */
    --font-size-xxl: 2rem;    /* 32px */
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: var(--authority-gray);
    background-color: var(--clarity-white);
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    line-height: 1.6; /* Improved readability */
    font-size: var(--font-size-base); /* Base font size */
}

.container {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
    padding: var(--spacing-lg) 0;
}

h2 {
    color: var(--trust-blue);
    margin-bottom: var(--spacing-lg);
    line-height: 1.2;
    font-size: var(--font-size-xxl);
}
h3 { font-size: var(--font-size-xl); margin-bottom: var(--spacing-md); color: var(--trust-blue); }
h4 { font-size: var(--font-size-lg); margin-bottom: var(--spacing-sm); color: var(--authority-gray); }

.error {
    color: var(--error-red);
    background-color: #ffe0e0; /* Lighter red background */
    padding: var(--spacing-sm);
    border: 1px solid var(--error-red);
    border-radius: 5px;
    margin-bottom: var(--spacing-md);
}

.success {
    color: var(--success-green);
    background-color: #e0ffe0; /* Lighter green background */
    padding: var(--spacing-sm);
    border: 1px solid var(--success-green);
    border-radius: 5px;
    margin-bottom: var(--spacing-md);
}

.input-group {
    margin-bottom: var(--spacing-md);
}

.input-group label {
    display: block;
    margin-bottom: var(--spacing-xs);
    font-weight: bold;
    color: var(--authority-gray);
}

.input-group input[type="text"],
.input-group input[type="password"],
.input-group input[type="email"],
.input-group input[type="date"],
.input-group select,
.input-inline { /* Added .input-inline for consistency */
    width: 100%;
    max-width: 400px; /* Constrain width on larger screens */
    padding: var(--spacing-sm);
    border: 1px solid var(--authority-gray);
    border-radius: var(--spacing-xs);
    box-sizing: border-box; /* Include padding in width */
    font-size: var(--font-size-base);
    line-height: 1.5; /* Ensure good text alignment */
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.input-group input[type="text"]:focus,
.input-group input[type="password"]:focus,
.input-group input[type="email"]:focus,
.input-group input[type="date"]:focus,
.input-group select:focus,
.input-inline:focus {
    border-color: var(--trust-blue);
    box-shadow: 0 0 0 2px rgba(30, 58, 138, 0.2);
    outline: none;
}

.input-group select {
    cursor: pointer;
    appearance: none; /* Remove default arrow on some browsers */
    background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%231e3a8a%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13.6-6.4H18.6c-5%200-9.3%201.8-13.6%206.4-4.2%204.2-6.4%209.6-6.4%2016.4%200%206.8%202.2%2012.1%206.4%2016.4l123.6%20123.6c4.2%204.2%209.6%206.4%2016.4%206.4s12.1-2.2%2016.4-6.4L287%20102.2c4.2-4.2%206.4-9.6%206.4-16.4-.1-6.8-2.3-12.2-6.5-16.4z%22%2F%3E%3C%2Fsvg%3E');
    background-repeat: no-repeat;
    background-position: right 0.7em top 50%, 0 0;
    background-size: 0.65em auto, 100%;
    padding-right: 2.5em; /* Make space for the custom arrow */
}

.input-group input[type="checkbox"] {
    margin-right: var(--spacing-sm);
}

a {
    transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out;
}

a:hover {
    text-decoration: underline;
}

.btn, .btn-small { /* Combined .btn and .btn-small as they share many properties */
    display: inline-block; /* Ensures proper button layout, especially in forms */
    background-color: var(--trust-blue);
    color: var(--clarity-white);
    padding: var(--spacing-sm) var(--spacing-md);
    border: none;
    border-radius: var(--spacing-xs);
    cursor: pointer;
    font-size: var(--font-size-base);
    transition: background-color 0.3s ease, transform 0.1s ease, box-shadow 0.2s ease;
    text-decoration: none; /* For links styled as buttons */
    text-align: center;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
}

.btn:hover, .btn-small:hover {
    background-color: #172554;
    transform: translateY(-2px); /* Slightly more pronounced lift on hover */
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25); /* Stronger shadow on hover */
}

.btn-success {
    background-color: var(--success-green);
}

.btn-success:hover {
    background-color: #12873a;
}

.btn-error, .btn-delete {
    background-color: var(--error-red);
}

.btn-error:hover, .btn-delete:hover {
    background-color: #a31c1c;
}

.btn-logout {
    background-color: var(--authority-gray);
    margin-left: var(--spacing-md);
}
.btn-logout:hover {
    background-color: #1f2937;
}

.btn-small {
    padding: var(--spacing-xs) var(--spacing-sm);
    font-size: var(--font-size-sm);
}

.btn-cancel {
    background-color: #64748b; /* A neutral gray */
    margin-left: var(--spacing-sm);
}
.btn-cancel:hover {
    background-color: #475569;
}


/* General Focus Styles for Accessibility */
a:focus,
button:focus,
input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
input[type="date"]:focus,
input[type="file"]:focus,
select:focus,
textarea:focus {
    outline: 2px solid transparent; /* Remove default outline */
    outline-offset: 2px;
    box-shadow: 0 0 0 3px var(--highlight-gold), 0 0 0 6px var(--trust-blue); /* Custom focus ring */
}

/* Header Styling */
.main-header {
    background-color: var(--trust-blue);
    color: var(--clarity-white);
    padding: var(--spacing-sm) 0;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 var(--spacing-lg); /* Add padding to sides of header content */
}

.main-header .logo a {
    color: var(--clarity-white);
    text-decoration: none;
    font-size: var(--font-size-xl);
    font-weight: bold;
}

.main-nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
}

.main-nav ul li {
    margin-left: var(--spacing-lg);
    position: relative; /* For dropdown positioning */
}

/* Dropdown specific styles */
.main-nav ul li.has-dropdown > a {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs); /* Space between text and icon */
}

.main-nav ul li.has-dropdown .dropdown {
    display: none;
    position: absolute;
    background-color: var(--trust-blue); /* Same as header background */
    min-width: 200px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 10;
    list-style: none;
    padding: var(--spacing-sm) 0;
    border-radius: var(--spacing-xs);
    left: 0;
    top: calc(100% + 5px); /* Position below the parent link */
}

.main-nav ul li.has-dropdown:hover > .dropdown {
    display: block;
}

.main-nav ul li.has-dropdown .dropdown li {
    margin: 0; /* Override main nav margin */
    width: 100%;
}

.main-nav ul li.has-dropdown .dropdown li a {
    color: var(--clarity-white);
    padding: var(--spacing-sm) var(--spacing-md);
    text-decoration: none;
    display: block;
    text-align: left;
    white-space: nowrap; /* Prevent items from wrapping */
    transition: background-color 0.3s ease;
}

.main-nav ul li.has-dropdown .dropdown li a:hover {
    background-color: rgba(255, 255, 255, 0.2);
    text-decoration: none;
}
/* End Dropdown specific styles */

.main-nav ul li a {
    color: var(--clarity-white);
    text-decoration: none;
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--spacing-xs);
    transition: background-color 0.3s ease;
}

.main-nav ul li a:hover, .main-nav ul li a.active {
    background-color: rgba(255, 255, 255, 0.2);
}

.main-nav .user-info {
    display: flex;
    align-items: center;
    color: var(--clarity-white);
    font-size: var(--font-size-sm);
}

.main-nav .user-info span {
    margin-right: var(--spacing-sm);
}

/* Main Content Area */
.main-content {
    flex: 1; /* Allows content to grow and push footer down */
    padding: var(--spacing-lg) 0;
}
.main-content > .container {
    padding: var(--spacing-lg); /* Add padding to sides of main content */
}

.main-content p {
    max-width: 65ch; /* Optimize line length for readability */
}

/* Footer Styling */
.main-footer {
    background-color: var(--neutral-light-gray);
    color: var(--authority-gray); /* Change text color for better contrast on light background */
    padding: var(--spacing-lg) 0;
    text-align: center;
    margin-top: auto; /* Pushes footer to the bottom */
    font-size: var(--font-size-sm);
}
.main-footer p {
    margin: var(--spacing-xs) 0;
}

.social-links {
    margin-top: var(--spacing-sm);
    display: flex;
    justify-content: center;
    gap: var(--spacing-md);
    flex-wrap: wrap;
}

.social-links a {
    color: var(--trust-blue);
    text-decoration: none;
    font-weight: bold;
    transition: color 0.3s ease;
}

.social-links a:hover {
    color: var(--highlight-gold);
}

/* Table Styling */
.table-container {
    margin-top: var(--spacing-lg);
    background-color: var(--clarity-white);
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
    overflow: hidden; /* Ensures rounded corners apply to content */
}
.responsive-table { /* Renamed from .data-table to be consistent with responsive class */
    width: 100%;
    border-collapse: collapse;
    margin-top: 0; /* Managed by .table-container */
}

.responsive-table th, .responsive-table td {
    border: 1px solid var(--neutral-light-gray);
    padding: var(--spacing-sm) var(--spacing-md);
    text-align: left;
}

.responsive-table th {
    background-color: var(--neutral-light-gray);
    color: var(--authority-gray);
    font-weight: bold;
    text-transform: uppercase;
    font-size: var(--font-size-sm); /* Adjusted from 0.85em which is approx 13.6px. --font-size-sm is 14px */
    letter-spacing: 0.05em;
}

.responsive-table tbody tr:nth-child(even) {
    background-color: var(--lightest-gray);
}

.responsive-table tbody tr:hover {
    background-color: #e2e8f0; /* Lighter hover for rows */
}

.responsive-table td a {
    color: var(--trust-blue);
    text-decoration: none;
    font-weight: 500;
}

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

/* Status Badges */
.status-badge {
    display: inline-block;
    padding: 4px 8px;
    border-radius: 12px;
    font-size: var(--font-size-xs);
    font-weight: bold;
    color: var(--clarity-white);
    text-align: center;
    min-width: 80px;
}
.status-pending { background-color: var(--warning-amber); }
.status-documents-uploaded { background-color: #60a5fa; } /* Blue */
.status-accounts-verified { background-color: var(--success-green); }
.status-accounts-rejected { background-color: var(--error-red); }
.status-ro-verified { background-color: #22c55e; } /* Darker Green */
.status-ro-rejected { background-color: var(--error-red); }
.status-qualified-voter { background-color: #16a34a; } /* Success Green */
.status-disqualified { background-color: var(--authority-gray); }
.status-debarred { background-color: #0f172a; } /* Darkest Gray */
.status-ceased-to-exist { background-color: #78716c; } /* Stone Gray */
.status-transferred { background-color: #a8a29e; } /* Light Stone Gray */
.status-inactive { background-color: var(--authority-gray); }


/* Form-specific styling for better alignment */
.form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* Two columns, responsive */
    gap: var(--spacing-lg); /* Gap between grid items */
    margin-bottom: var(--spacing-lg);
    align-items: start; /* Align items to the top of their cells */
}

/* Ensure input-group children of form-grid don't have their own bottom margin creating extra space */
.form-grid .input-group {
    margin-bottom: 0;
}

/* Search Form Styles */
.search-form-container {
    margin-bottom: var(--spacing-lg);
    display: flex; /* Use flex to align form and clear button */
    align-items: flex-end; /* Align items to the bottom */
    gap: var(--spacing-md);
}

.form-inline {
    display: flex;
    flex-wrap: wrap; /* Allow items to wrap on smaller screens */
    gap: var(--spacing-sm);
    align-items: center; /* Vertically align items */
    flex-grow: 1; /* Allow the form to take available space */
}

.form-inline .input-group {
    flex-grow: 1; /* Input field takes available space */
    margin-bottom: 0; /* Remove default input-group margin */
}

.form-inline .input-group input[type="text"] {
    max-width: none; /* Override max-width for inline input */
}

/* Visually hidden for screen readers */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

.input-group-inline {
    display: flex;
    gap: var(--spacing-sm);
    align-items: center;
    flex-wrap: wrap; /* Allow wrapping on small screens */
}
.input-group-inline label {
    margin-bottom: 0;
    white-space: nowrap;
}
.input-group-inline input[type="text"],
.input-group-inline select,
.input-group-inline button {
    flex-grow: 1; /* Allow items to grow */
    max-width: none; /* Override max-width for inline elements */
}


/* Page Actions (e.g., Add New Member, Export) */
.page-actions, .form-actions {
    margin-top: var(--spacing-lg);
    margin-bottom: var(--spacing-lg);
    display: flex;
    gap: var(--spacing-sm);
    flex-wrap: wrap;
    justify-content: flex-start; /* Default alignment */
}

/* Dashboard Widgets */
.dashboard-widgets {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-lg);
    margin-bottom: var(--spacing-xl);
    justify-content: center; /* Center widgets */
}

.widget {
    background-color: var(--clarity-white);
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
    padding: var(--spacing-lg);
    text-align: center;
    flex: 1; /* Allow widgets to grow */
    min-width: 250px; /* Minimum width for widgets */
    max-width: 300px; /* Maximum width for widgets */
}

.widget h3 {
    margin-top: 0;
    margin-bottom: var(--spacing-sm);
    color: var(--trust-blue);
    font-size: var(--font-size-lg);
}

.widget .count {
    font-size: var(--font-size-xxl);
    font-weight: bold;
    color: var(--authority-gray);
    margin-bottom: var(--spacing-md);
}

.widget .highlight-count {
    color: var(--warning-amber); /* Highlight pending items */
}

.widget .btn {
    margin-top: var(--spacing-sm);
}

/* --- Responsive Design --- */
*, *::before, *::after {
    box-sizing: border-box;
}

img {
    max-width: 100%;
    height: auto;
}

/* Hamburger Menu Button */
.menu-toggle {
    display: none; /* Hidden on desktop */
    background: none;
    border: 2px solid var(--clarity-white);
    color: var(--clarity-white);
    font-size: 1.5rem;
    cursor: pointer;
    padding: 5px 10px;
    border-radius: 5px;
}

@media (max-width: 850px) {
    .header-content {
        flex-wrap: wrap;
        justify-content: space-between;
    }

    .menu-toggle {
        display: block; /* Show on mobile */
    }

    .main-nav {
        width: 100%;
        display: none; /* Hidden by default on mobile */
    }
    
    .main-nav.active {
        display: block; /* Show when toggled */
    }

    .main-nav ul {
        flex-direction: column;
        align-items: flex-start;
        width: 100%;
        margin-top: var(--spacing-md);
    }

    .main-nav ul li {
        margin-left: 0;
        width: 100%;
        text-align: left;
    }

    .main-nav ul li a {
        display: block;
        padding: var(--spacing-sm);
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }

    /* Responsive adjustments for dropdowns */
    .main-nav ul li.has-dropdown {
        position: static; /* Remove relative positioning for mobile stacking */
    }

    .main-nav ul li.has-dropdown .dropdown {
        position: static; /* Remove absolute positioning */
        display: block; /* Always show dropdown content in mobile menu */
        background-color: transparent; /* Integrate with main menu background */
        box-shadow: none;
        min-width: auto;
        padding: 0;
        border-radius: 0;
    }

    .main-nav ul li.has-dropdown .dropdown li a {
        padding-left: var(--spacing-xl); /* Indent dropdown items */
        border-bottom: none; /* Remove border for sub-items */
    }

    .main-nav .user-info {
        flex-direction: column;
        align-items: flex-start;
        width: 100%;
        padding: 10px;
    }

    .main-nav .user-info span {
        margin: 0 0 var(--spacing-sm) 0;
    }
    .btn-logout {
        margin-left: 0;
    }

    /* Responsive Tables */
    .table-container {
        overflow-x: auto; /* Allow horizontal scrolling for tables that don't reflow */
    }
    
    .responsive-table {
        border: 0;
    }

    .responsive-table thead {
        display: none; /* Hide desktop headers */
    }

    .responsive-table tr {
        display: block;
        margin-bottom: var(--spacing-lg);
        border: 1px solid #ddd;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }

    .responsive-table td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        text-align: right;
        padding: var(--spacing-sm);
        border-bottom: 1px solid #eee;
    }

    .responsive-table td::before {
        content: attr(data-label);
        font-weight: bold;
        text-align: left;
        padding-right: var(--spacing-md);
        color: var(--trust-blue);
    }

    .responsive-table td:last-child {
        border-bottom: 0;
    }
    
    .actions-cell {
        flex-direction: column;
        align-items: flex-start;
    }

    .actions-cell form, .actions-cell a {
        width: 100%;
        margin-bottom: var(--spacing-xs);
    }
    .actions-cell button, .actions-cell .btn {
        width: 100%;
        text-align: center;
    }
    
    .payment-verification-form .input-group-inline {
        flex-direction: column;
        align-items: stretch;
    }
    .payment-verification-form .input-group-inline input {
        margin-bottom: var(--spacing-xs);
    }

    /* Ensure form actions stack on small screens */
    .form-actions {
        flex-direction: column;
        align-items: stretch; /* Stretch items to full width */
    }

    .form-actions .btn,
    .form-actions a.btn {
        width: 100%;
        margin-left: 0; /* Remove left margin for stacking */
        margin-bottom: var(--spacing-sm); /* Add spacing between stacked buttons */
    }

    /* Form grid stacks on small screens */
    .form-grid {
        grid-template-columns: 1fr;
    }

    /* DataTables specific adjustments for responsive tables */
    .responsive-table.dataTable thead .sorting,
    .responsive-table.dataTable thead .sorting_asc,
    .responsive-table.dataTable thead .sorting_desc {
        background-image: none !important; /* Remove DataTables sorting icons */
    }
    .responsive-table.dataTable thead th {
        border-bottom: none !important; /* Remove DataTables default header border */
    }

    /* Ensure DataTables search and pagination elements stack well on mobile */
    .dataTables_wrapper .dataTables_filter,
    .dataTables_wrapper .dataTables_paginate,
    .dataTables_wrapper .dataTables_info,
    .dataTables_wrapper .dataTables_length {
        text-align: center !important;
        margin: var(--spacing-sm) 0;
    }
    .dataTables_wrapper .dataTables_filter label,
    .dataTables_wrapper .dataTables_length label {
        display: block;
        width: 100%;
    }
    .dataTables_wrapper .dataTables_filter input,
    .dataTables_wrapper .dataTables_length select {
        width: calc(100% - 20px);
        margin-left: auto;
        margin-right: auto;
        display: block;
    }
}

/* Breadcrumb Styling */
.breadcrumb-nav {
    margin-bottom: var(--spacing-lg);
    background-color: var(--neutral-light-gray);
    padding: var(--spacing-sm) var(--spacing-lg);
    border-radius: var(--spacing-xs);
}

.breadcrumb {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: var(--font-size-sm);
}

.breadcrumb-item {
    display: flex;
    align-items: center;
}

.breadcrumb-item + .breadcrumb-item::before {
    display: inline-block;
    padding-right: var(--spacing-xs);
    color: var(--authority-gray);
    content: "/"; /* Separator */
    padding-left: var(--spacing-xs);
}

.breadcrumb-item a {
    color: var(--trust-blue);
    text-decoration: none;
}

.breadcrumb-item a:hover {
    text-decoration: underline;
}

.breadcrumb-item.active {
    color: var(--authority-gray);
    font-weight: bold;
}