/* ============================================================
   COOPERATIVE MANAGEMENT SYSTEM - GLOBAL STYLESHEET
   ============================================================ */

/* ---- CSS Variables / Design Tokens ---- */
:root {
    --bg-primary: #0f1c2e;
    --bg-sidebar: #162236;
    --bg-card: #1e2f45;
    --bg-input: #162236;
    --accent: #c9a84c;
    --accent-hover: #e0bf5a;
    --text-primary: #e8edf2;
    --text-secondary: #8899aa;
    --text-muted: #556677;
    --border: rgba(136, 153, 170, 0.15);
    --success: #2ecc71;
    --warning: #f39c12;
    --danger: #e74c3c;
    --info: #3498db;
    --sidebar-width: 220px;
    --header-height: 64px;
    --radius: 12px;
    --radius-sm: 8px;
    --shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
    --transition: all 0.3s ease;
}

/* ---- Reset & Base ---- */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 15px;
    scroll-behavior: smooth;
}

body {
    font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
    background: var(--bg-primary);
    color: var(--text-primary);
    line-height: 1.6;
    min-height: 100vh;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: 'Playfair Display', serif;
    color: var(--text-primary);
    line-height: 1.3;
}

a {
    text-decoration: none;
    color: var(--accent);
    transition: var(--transition);
}

a:hover {
    color: var(--accent-hover);
}

/* ---- App Layout ---- */
.app-layout {
    display: flex;
    min-height: 100vh;
}

.main-wrapper {
    flex: 1;
    margin-left: var(--sidebar-width);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.main-content {
    flex: 1;
    padding: 30px;
}

/* ---- Sidebar ---- */
.sidebar {
    width: var(--sidebar-width);
    background: var(--bg-sidebar);
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    display: flex;
    flex-direction: column;
    z-index: 1000;
    border-right: 1px solid var(--border);
    transition: transform 0.3s ease;
}

.sidebar-brand {
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 12px;
    border-bottom: 1px solid var(--border);
}

.brand-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    object-fit: contain;
    flex-shrink: 0;
}

.brand-text h2 {
    font-family: 'Playfair Display', serif;
    font-size: 16px;
    color: var(--accent);
    margin: 0;
    line-height: 1.2;
}

.brand-text span {
    font-size: 11px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.sidebar-nav {
    flex: 1;
    padding: 16px 12px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    overflow-y: auto;
}

.nav-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 14px;
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    font-size: 14px;
    font-weight: 500;
    transition: var(--transition);
}

.nav-link:hover {
    background: rgba(201, 168, 76, 0.08);
    color: var(--accent);
}

.nav-link.active {
    background: rgba(201, 168, 76, 0.12);
    color: var(--accent);
    font-weight: 600;
}

.nav-icon {
    font-size: 18px;
    width: 24px;
    text-align: center;
    flex-shrink: 0;
}

.sidebar-footer {
    padding: 16px;
    border-top: 1px solid var(--border);
}

.user-info {
    display: flex;
    align-items: center;
    gap: 10px;
}

.user-avatar {
    width: 36px;
    height: 36px;
    background: linear-gradient(135deg, #c9a84c, #b8963f);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 14px;
    color: #0f1c2e;
    flex-shrink: 0;
}

.user-details {
    display: flex;
    flex-direction: column;
}

.user-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
}

.user-role {
    font-size: 11px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* ---- Top Header ---- */
.top-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 30px;
    height: var(--header-height);
    background: var(--bg-sidebar);
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    z-index: 100;
}

.page-title {
    font-size: 18px;
    font-family: 'Playfair Display', serif;
    color: var(--text-primary);
}

.header-right {
    display: flex;
    align-items: center;
    gap: 16px;
}

.header-user {
    font-size: 13px;
    color: var(--text-secondary);
}

.btn-logout {
    padding: 6px 16px;
    background: rgba(231, 76, 60, 0.15);
    color: var(--danger);
    border-radius: var(--radius-sm);
    font-size: 13px;
    font-weight: 600;
    border: 1px solid rgba(231, 76, 60, 0.2);
    transition: var(--transition);
}

.btn-logout:hover {
    background: var(--danger);
    color: #fff;
}

/* ---- Hamburger (Mobile) ---- */
.hamburger-btn {
    display: none;
    position: fixed;
    top: 16px;
    left: 16px;
    z-index: 1100;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 10px;
    cursor: pointer;
    flex-direction: column;
    gap: 4px;
}

.hamburger-btn span {
    display: block;
    width: 20px;
    height: 2px;
    background: var(--accent);
    border-radius: 2px;
    transition: var(--transition);
}

.hamburger-btn.active span:nth-child(1) {
    transform: rotate(45deg) translate(4px, 4px);
}

.hamburger-btn.active span:nth-child(2) {
    opacity: 0;
}

.hamburger-btn.active span:nth-child(3) {
    transform: rotate(-45deg) translate(4px, -4px);
}

.sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 900;
}

/* ---- Stat Cards ---- */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 20px;
    margin-bottom: 30px;
}

.stat-card {
    background: var(--bg-card);
    border-radius: var(--radius);
    padding: 24px;
    border: 1px solid var(--border);
    transition: var(--transition);
    position: relative;
    overflow: hidden;
}

.stat-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--accent), transparent);
}

.stat-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow);
}

.stat-card .stat-icon {
    font-size: 28px;
    margin-bottom: 12px;
}

.stat-card .stat-label {
    font-size: 12px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 6px;
}

.stat-card .stat-value {
    font-family: 'Playfair Display', serif;
    font-size: 26px;
    font-weight: 700;
    color: var(--accent);
}

.stat-card.success::before {
    background: linear-gradient(90deg, var(--success), transparent);
}

.stat-card.warning::before {
    background: linear-gradient(90deg, var(--warning), transparent);
}

.stat-card.danger::before {
    background: linear-gradient(90deg, var(--danger), transparent);
}

.stat-card.info::before {
    background: linear-gradient(90deg, var(--info), transparent);
}

/* ---- Content Cards ---- */
.content-card {
    background: var(--bg-card);
    border-radius: var(--radius);
    border: 1px solid var(--border);
    overflow: hidden;
    margin-bottom: 24px;
}

.card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 24px;
    border-bottom: 1px solid var(--border);
}

.card-header h3 {
    font-size: 16px;
    font-family: 'DM Sans', sans-serif;
    font-weight: 600;
}

.card-body {
    padding: 24px;
}

/* ---- Tables ---- */
.table-responsive {
    overflow-x: auto;
}

table {
    width: 100%;
    border-collapse: collapse;
}

table thead th {
    background: rgba(201, 168, 76, 0.06);
    padding: 12px 16px;
    text-align: left;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-secondary);
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
}

table tbody td {
    padding: 12px 16px;
    border-bottom: 1px solid var(--border);
    font-size: 14px;
    color: var(--text-primary);
}

table tbody tr:nth-child(even) {
    background: rgba(22, 34, 54, 0.5);
}

table tbody tr:hover {
    background: rgba(201, 168, 76, 0.04);
}

table tbody tr:last-child td {
    border-bottom: none;
}

/* ---- Badges ---- */
.badge {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;
    text-transform: capitalize;
}

.badge-active,
.badge-approved,
.badge-completed {
    background: rgba(46, 204, 113, 0.15);
    color: var(--success);
}

.badge-pending {
    background: rgba(243, 156, 18, 0.15);
    color: var(--warning);
}

.badge-inactive,
.badge-rejected {
    background: rgba(231, 76, 60, 0.15);
    color: var(--danger);
}

.badge-suspended {
    background: rgba(155, 89, 182, 0.15);
    color: #9b59b6;
}

.badge-savings {
    background: rgba(46, 204, 113, 0.15);
    color: var(--success);
}

.badge-loan_disbursement {
    background: rgba(52, 152, 219, 0.15);
    color: var(--info);
}

.badge-loan_repayment {
    background: rgba(243, 156, 18, 0.15);
    color: var(--warning);
}

/* ---- Forms ---- */
.form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
}

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-secondary);
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 10px 14px;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-size: 14px;
    font-family: 'DM Sans', sans-serif;
    transition: var(--transition);
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(201, 168, 76, 0.1);
}

.form-group select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%238899aa' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 36px;
}

.form-group textarea {
    resize: vertical;
    min-height: 80px;
}

/* ---- Buttons ---- */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 20px;
    border-radius: var(--radius-sm);
    font-size: 14px;
    font-weight: 600;
    font-family: 'DM Sans', sans-serif;
    cursor: pointer;
    border: none;
    transition: var(--transition);
    text-decoration: none;
}

.btn-primary {
    background: linear-gradient(135deg, #c9a84c, #b8963f);
    color: #0f1c2e;
}

.btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 15px rgba(201, 168, 76, 0.3);
    color: #0f1c2e;
}

.btn-success {
    background: rgba(46, 204, 113, 0.15);
    color: var(--success);
    border: 1px solid rgba(46, 204, 113, 0.3);
}

.btn-success:hover {
    background: var(--success);
    color: #fff;
}

.btn-danger {
    background: rgba(231, 76, 60, 0.15);
    color: var(--danger);
    border: 1px solid rgba(231, 76, 60, 0.3);
}

.btn-danger:hover {
    background: var(--danger);
    color: #fff;
}

.btn-sm {
    padding: 6px 14px;
    font-size: 12px;
}

.btn-group {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

/* ---- Alerts ---- */
.alert {
    padding: 14px 20px;
    border-radius: var(--radius-sm);
    margin-bottom: 20px;
    font-size: 14px;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 10px;
}

.alert-success {
    background: rgba(46, 204, 113, 0.12);
    color: var(--success);
    border: 1px solid rgba(46, 204, 113, 0.2);
}

.alert-danger {
    background: rgba(231, 76, 60, 0.12);
    color: var(--danger);
    border: 1px solid rgba(231, 76, 60, 0.2);
}

.alert-warning {
    background: rgba(243, 156, 18, 0.12);
    color: var(--warning);
    border: 1px solid rgba(243, 156, 18, 0.2);
}

/* ---- Filter Bar ---- */
.filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 20px;
    align-items: flex-end;
}

.filter-bar .form-group {
    margin-bottom: 0;
    min-width: 180px;
}

/* ---- Bar Chart (Pure CSS) ---- */
.bar-chart {
    display: flex;
    align-items: flex-end;
    gap: 16px;
    height: 200px;
    padding: 20px 0;
    border-bottom: 2px solid var(--border);
}

.bar-chart .bar-wrapper {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
    justify-content: flex-end;
}

.bar-chart .bar {
    width: 40px;
    background: linear-gradient(180deg, var(--accent), #b8963f);
    border-radius: 6px 6px 0 0;
    transition: var(--transition);
    min-height: 4px;
    position: relative;
}

.bar-chart .bar:hover {
    opacity: 0.8;
}

.bar-chart .bar-value {
    font-size: 11px;
    color: var(--accent);
    font-weight: 600;
    margin-bottom: 4px;
    white-space: nowrap;
}

.bar-chart .bar-label {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 8px;
    text-align: center;
    max-width: 80px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ---- Utilities ---- */
.text-accent {
    color: var(--accent);
}

.text-success {
    color: var(--success);
}

.text-warning {
    color: var(--warning);
}

.text-danger {
    color: var(--danger);
}

.text-muted {
    color: var(--text-muted);
}

.mb-0 {
    margin-bottom: 0;
}

.mb-1 {
    margin-bottom: 8px;
}

.mb-2 {
    margin-bottom: 16px;
}

.mb-3 {
    margin-bottom: 24px;
}

.mt-2 {
    margin-top: 16px;
}

.mt-3 {
    margin-top: 24px;
}

.d-flex {
    display: flex;
}

.align-center {
    align-items: center;
}

.justify-between {
    justify-content: space-between;
}

.gap-1 {
    gap: 8px;
}

.gap-2 {
    gap: 16px;
}

.section-title {
    font-family: 'Playfair Display', serif;
    font-size: 20px;
    margin-bottom: 20px;
    color: var(--text-primary);
}

.empty-state {
    text-align: center;
    padding: 40px 20px;
    color: var(--text-muted);
}

.empty-state .empty-icon {
    font-size: 48px;
    margin-bottom: 12px;
}

.empty-state p {
    font-size: 14px;
}

/* Quick link cards */
.quick-links {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
    margin-top: 20px;
}

.quick-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    transition: var(--transition);
    color: var(--text-primary);
}

.quick-link:hover {
    border-color: var(--accent);
    transform: translateY(-1px);
    color: var(--accent);
}

.quick-link .ql-icon {
    font-size: 24px;
}

/* ---- Responsive ---- */
@media (max-width: 768px) {
    .hamburger-btn {
        display: flex;
    }

    .sidebar {
        transform: translateX(-100%);
    }

    .sidebar.open {
        transform: translateX(0);
    }

    .sidebar-overlay.open {
        display: block;
    }

    .main-wrapper {
        margin-left: 0;
    }

    .top-header {
        padding: 0 16px 0 60px;
    }

    .main-content {
        padding: 20px 16px;
    }

    .stats-grid {
        grid-template-columns: 1fr;
    }

    .form-grid {
        grid-template-columns: 1fr;
    }

    .header-user {
        display: none;
    }

    .filter-bar {
        flex-direction: column;
    }

    .filter-bar .form-group {
        width: 100%;
    }

    .bar-chart {
        overflow-x: auto;
        min-width: 400px;
    }
}

@media (max-width: 480px) {
    .page-title {
        font-size: 15px;
    }

    .stat-card .stat-value {
        font-size: 20px;
    }

    table {
        font-size: 13px;
    }

    table thead th,
    table tbody td {
        padding: 8px 10px;
    }
}

/* ============================================================
   Mobile catch-all overrides — neutralize inline styles that
   bypass the base responsive rules. Uses attribute selectors
   plus !important to outrank inline `style=""` attributes.
   ============================================================ */
@media (max-width: 768px) {

    /* (A) Collapse all inline multi-column grids to a single column */
    [style*="grid-template-columns"][style*="px"],
    [style*="grid-template-columns"][style*="1fr 1fr"],
    [style*="grid-template-columns"][style*="2fr 1fr"],
    [style*="grid-template-columns"][style*="1fr 2fr"],
    [style*="grid-template-columns"][style*="repeat(2"],
    [style*="grid-template-columns"][style*="repeat(3"],
    [style*="grid-template-columns"][style*="repeat(4"],
    .stats-grid,
    .card-grid {
        grid-template-columns: 1fr !important;
    }

    /* (B) Make every table horizontally scrollable */
    .content-card table,
    .card-body table,
    main table {
        display: block !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        white-space: nowrap;
        max-width: 100%;
    }

    /* Tables explicitly wrapped already shouldn't double up */
    .table-responsive table {
        display: table !important;
        white-space: normal;
    }

    /* (C) Disable inline sticky positioning on narrow screens */
    [style*="position:sticky"],
    [style*="position: sticky"] {
        position: static !important;
        top: auto !important;
        bottom: auto !important;
    }

    /* (E) Force flex containers to wrap if author forgot */
    [style*="display:flex"],
    [style*="display: flex"] {
        flex-wrap: wrap !important;
    }

    /* Inline fixed min/max widths that block shrinking */
    [style*="min-width: 6"],
    [style*="min-width:6"],
    [style*="min-width: 7"],
    [style*="min-width:7"],
    [style*="min-width: 8"],
    [style*="min-width:8"] {
        min-width: 0 !important;
    }

    /* Big inline gaps look bad on mobile — soften */
    [style*="gap: 30px"],
    [style*="gap:30px"],
    [style*="gap: 40px"],
    [style*="gap:40px"] {
        gap: 16px !important;
    }

    /* Reduce padding on heavy inline-padded cards */
    [style*="padding: 40px"],
    [style*="padding:40px"] {
        padding: 20px !important;
    }

    /* Header / page-title row — let action buttons wrap below title */
    .card-header,
    .top-header {
        flex-wrap: wrap;
        gap: 8px;
    }

    /* Buttons in tight groups should stack full-width */
    .card-header .btn,
    .card-header form {
        flex-shrink: 0;
    }

    /* Alerts / flash messages — full width with margin */
    .alert {
        margin: 12px 0;
        padding: 12px 14px;
        font-size: 0.9rem;
    }
}

/* Smaller phones — tighten further */
@media (max-width: 480px) {
    /* Stack action buttons full-width inside card headers */
    .card-header {
        flex-direction: column;
        align-items: stretch;
    }

    .card-header .btn,
    .card-header .btn-sm {
        width: 100%;
        text-align: center;
        justify-content: center;
    }

    /* Form inputs need full width, not max-200px */
    .form-control,
    input[type="text"],
    input[type="number"],
    input[type="email"],
    input[type="date"],
    select,
    textarea {
        max-width: 100% !important;
        width: 100%;
        box-sizing: border-box;
    }

    /* Quick-link / nav-grid stat cards full-width */
    .stats-grid .stat-card {
        padding: 16px;
    }

    .stat-card .stat-icon {
        font-size: 22px;
    }

    /* Modal content adapt */
    .modal-content,
    .dropdown-panel {
        max-width: 94vw !important;
        width: 94vw !important;
    }
}

/* ============================================================
   V2 ENHANCEMENTS — Additional Styles
   ============================================================ */

/* ---- CSS Variable Addition ---- */
:root {
    --gold: #c9a84c;
}

/* ---- Outline Button ---- */
.btn-outline {
    background: transparent;
    color: var(--accent);
    border: 1px solid rgba(201, 168, 76, 0.3);
}

.btn-outline:hover {
    background: rgba(201, 168, 76, 0.1);
    color: var(--accent-hover);
}

/* ---- Row Danger (defaulting loans) ---- */
.row-danger {
    background: rgba(231, 76, 60, 0.08) !important;
    border-left: 3px solid var(--danger);
}

/* ---- Action Dropdown (details/summary pattern) ---- */
.action-dropdown summary {
    list-style: none;
    cursor: pointer;
}

.action-dropdown summary::-webkit-details-marker {
    display: none;
}

.action-dropdown .dropdown-panel {
    animation: dropIn 0.2s ease;
}

@keyframes dropIn {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Close dropdown when clicking elsewhere */
.action-dropdown:not([open]) .dropdown-panel {
    display: none;
}

/* ---- Report Tabs ---- */
.report-tabs .btn {
    border-radius: 20px;
}

.report-tabs .btn-primary {
    box-shadow: 0 2px 10px rgba(201, 168, 76, 0.3);
}

/* ---- Print Title (visible only in print) ---- */
.print-title {
    font-family: 'Playfair Display', serif;
    font-size: 20px;
    margin-bottom: 16px;
    padding-bottom: 8px;
    border-bottom: 2px solid rgba(201, 168, 76, 0.2);
}

/* ---- Section subtitle ---- */
.section-subtitle {
    font-size: 14px;
    color: var(--text-secondary);
    margin-bottom: 12px;
    font-weight: 500;
}

/* ---- No-Print utility ---- */
@media print {

    .no-print,
    .sidebar,
    .top-header,
    .hamburger-btn,
    .sidebar-overlay,
    .btn,
    form,
    .report-tabs,
    .alert {
        display: none !important;
    }

    body {
        background: white !important;
        color: #1a1a1a !important;
        font-size: 12px;
        print-color-adjust: exact;
        -webkit-print-color-adjust: exact;
    }

    .main-wrapper {
        margin-left: 0 !important;
    }

    .main-content {
        padding: 0 !important;
    }

    .content-card,
    .stat-card {
        background: white !important;
        border: 1px solid #ddd !important;
        box-shadow: none !important;
        break-inside: avoid;
        page-break-inside: avoid;
    }

    .content-card .card-header {
        background: #f8f9fa !important;
        border-bottom: 1px solid #ddd !important;
    }

    .stat-card::before {
        display: none;
    }

    .stat-card .stat-value {
        color: #1a1a1a !important;
    }

    .stat-card .stat-label {
        color: #666 !important;
    }

    .card-header h3,
    .print-title {
        color: #1a1a1a !important;
    }

    table {
        font-size: 11px;
    }

    table thead th {
        background: #f0f0f0 !important;
        color: #333 !important;
        border-bottom: 2px solid #999;
    }

    table tbody td {
        color: #1a1a1a !important;
        border-bottom: 1px solid #ddd;
    }

    table tbody tr:nth-child(even) {
        background: #f9f9f9 !important;
    }

    .badge {
        border: 1px solid #999;
        color: #333 !important;
        background: #eee !important;
    }

    .text-success {
        color: #2a7a2a !important;
    }

    .text-warning {
        color: #8a6d1b !important;
    }

    .text-danger {
        color: #a71d1d !important;
    }

    .text-muted {
        color: #888 !important;
    }

    .stats-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .printable {
        display: block !important;
    }

    @page {
        margin: 1.5cm;
        size: A4;
    }
}

/* ─────────────────────────────────────────────────────────
   Legacy class aliases — used by finance_requests.php,
   expenses.php, fund_requests.php, and other admin pages
   that adopted a slightly different naming convention.
───────────────────────────────────────────────────────── */

/* Grid of summary cards (auto-fit) */
.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 20px;
    margin-bottom: 24px;
}

/* Generic content card */
.card {
    background: var(--bg-card);
    border-radius: var(--radius);
    border: 1px solid var(--border);
    padding: 20px;
    margin-bottom: 16px;
}

.card.text-center { text-align: center; }
.card h3 {
    font-family: 'Playfair Display', serif;
    font-size: 22px;
    font-weight: 700;
    color: var(--accent);
    margin: 0;
}
.card h3 + p,
.card p {
    color: var(--text-muted);
    font-size: 12px;
    margin: 4px 0;
}

/* Section header (page title block) */
.section-header {
    margin-bottom: 20px;
}
.section-header .section-label {
    display: block;
    color: var(--text-muted);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 4px;
}
.section-header h2 {
    font-family: 'Playfair Display', serif;
    font-size: 26px;
    font-weight: 700;
    margin: 0 0 8px;
    color: var(--text);
}
.section-header .gold-line {
    width: 60px;
    height: 3px;
    background: linear-gradient(90deg, var(--accent), transparent);
    border-radius: 2px;
}

/* Button aliases */
.btn-navy {
    background: var(--bg-card);
    color: var(--text);
    border: 1px solid var(--accent);
}
.btn-navy:hover {
    background: var(--accent);
    color: #1a1a2e;
}
.btn-gold {
    background: linear-gradient(135deg, #c9a84c, #e8c96a);
    color: #1a1a2e;
    border: none;
    font-weight: 600;
}
.btn-gold:hover {
    filter: brightness(1.08);
}

/* Utilities */
.w-100 { width: 100%; }
.slide-up { animation: slideUp 0.4s ease both; }
@keyframes slideUp {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   GLOBAL: tables should always be horizontally scrollable inside
   their container at any screen size. This stops wide tables
   (admin members, transactions, etc.) from clipping their right
   columns and forces them to scroll INSIDE the card, not the page.
   ============================================================ */
.table-responsive {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

body {
    word-wrap: break-word;
    overflow-wrap: break-word;
}

img, video, iframe, svg, canvas {
    max-width: 100%;
    height: auto;
}

/* ============================================================
   MOBILE HARD GUARDS — prevent the PAGE itself from scrolling
   sideways on phones (but tables inside still scroll internally).
   ============================================================ */
@media (max-width: 768px) {
    html, body {
        overflow-x: hidden !important;
        max-width: 100vw;
    }
}

@media (max-width: 768px) {
    :root {
        --sidebar-width: 260px;
    }

    /* Tighten frame paddings so cards actually fit */
    .main-content {
        padding: 14px 12px !important;
    }

    .top-header {
        padding: 0 12px 0 56px !important;
        min-height: 56px;
    }

    /* Cards on phones — slim padding */
    .content-card .card-header,
    .content-card .card-body {
        padding: 14px 14px !important;
    }

    .stat-card {
        padding: 16px !important;
    }

    /* Any inline width="800" / style="width:600px" → respect viewport */
    [style*="width:"],
    [width] {
        max-width: 100% !important;
    }

    /* Forms — full-width and break long content */
    .form-control, input, select, textarea {
        max-width: 100% !important;
        width: 100% !important;
        box-sizing: border-box;
    }

    /* Long reference codes / membership numbers / receipt #s
       should wrap so they don't push the layout — but NOT badges/pills,
       which need their text to stay on one line. */
    code, kbd, samp, .reference-code {
        word-break: break-all;
    }

    /* Badges and pills keep their text together */
    .badge {
        white-space: nowrap !important;
        display: inline-block;
    }

    /* Headings shrink to fit */
    h1 { font-size: 22px; }
    h2 { font-size: 19px; }
    h3 { font-size: 16px; }

    /* Page title in top header */
    .page-title {
        font-size: 15px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* Tables: scroll inside their own card, never the page */
    .content-card table,
    .card-body table,
    main table {
        display: block !important;
        overflow-x: auto !important;
        max-width: 100%;
        white-space: nowrap;
    }

    /* Allow header rows of cards to stack title above buttons */
    .card-header {
        flex-wrap: wrap !important;
        gap: 8px;
        align-items: flex-start;
    }
    .card-header h3 {
        flex: 1 1 100%;
        min-width: 0;
    }
}

@media (max-width: 480px) {
    .main-content { padding: 10px 8px !important; }
    .content-card .card-header,
    .content-card .card-body { padding: 12px !important; }
    .stat-card { padding: 14px !important; }

    /* Buttons stack full-width inside card headers */
    .card-header .btn,
    .card-header .btn-sm {
        width: 100%;
        text-align: center;
        justify-content: center;
    }
}