/* ============================================================
   CREDFICO SOCIETY DASHBOARD — GLOBAL STYLESHEET (v2)
   Single source of truth for all inner-content cards, tables,
   buttons, forms, status pills, and modals across EVERY
   plugin/report/shortcode (Maintenance Bill, Defaulter Notice,
   Receipt Voucher, Bill Register, Outstanding Report, etc.)

   Theme adopted from the Receipt Voucher plugin's look:
   navy header (#26439c), pill-style status badges, soft
   rounded cards. This is now the ONE default theme — every
   report should use these classes instead of writing its own
   inline <style> block.

   Mobile-responsive (table → stacked cards) baked in below.
   ============================================================ */

:root{
    --cf-navy:        #1e3a8a;   /* headings, titles */
    --cf-navy-header:  #26439c;   /* table header background (Receipt Voucher look) */
    --cf-navy-soft:    #1e293b;
    --cf-accent:       #2563eb;
    --cf-accent-dk:    #1d4ed8;
    --cf-text:         #1e293b;
    --cf-text-soft:    #334155;
    --cf-subtext:      #6b7280;
    --cf-border:       #e5e7eb;
    --cf-row-border:   #e5e7eb;
    --cf-bg:           #f1f5f9;

    --cf-blue:    #2563eb;  /* Pay Now / PDF / Voucher / primary action */
    --cf-blue-h:  #1d4ed8;
    --cf-green:   #16a34a;  /* WhatsApp / Approve / Save / success */
    --cf-green-h: #15803d;
    --cf-orange:  #f59e0b;  /* Email */
    --cf-orange-h:#d97706;
    --cf-red:     #dc2626;  /* Reject / destructive */
    --cf-red-h:   #b91c1c;
    --cf-gray:    #6b7280;  /* Reset / Cancel / neutral */
    --cf-gray-h:  #4b5563;
}

/* ============================================
   CARD WRAPPER — every report/page content sits in this
   ============================================ */
.cf-card{
    background:#fff;
    padding:20px;
    border-radius:16px;
    box-shadow:0 2px 12px rgba(0,0,0,.08);
    margin-top:8px;
}

.cf-card h2,
.cf-card h3{
    margin:0 0 16px;
    font-weight:700;
    font-size:18px;
    color:var(--cf-navy);
}

/* Heading row — title on left, filters/buttons on right.
   Compact spacing: this is a section header, not a hero block. */
.cf-heading-row{
    display:flex;
    justify-content:space-between;
    align-items:center;
    flex-wrap:wrap;
    gap:12px;
    margin-bottom:14px;
}

/* When a toolbar immediately follows a heading-row (title above,
   Filter/Send Bulk buttons below), tighten the gap between them —
   prevents the large double-margin gap seen with two stacked blocks. */
.cf-heading-row + .cf-toolbar{
    margin-top:-4px;
}

/* ============================================
   TOOLBAR — filter row + bulk action buttons
   ============================================ */
.cf-toolbar{
    display:flex;
    gap:10px;
    align-items:center;
    flex-wrap:wrap;
    margin-bottom:14px;
}

.cf-toolbar form{
    display:flex;
    gap:10px;
    align-items:center;
    flex-wrap:wrap;
    margin:0;
}

/* ============================================
   FORM GRID — used by entry/data-entry forms
   ============================================ */
.cf-form-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:16px;
    margin-bottom:20px;
}

.cf-form-group{
    display:flex;
    flex-direction:column;
}

.cf-form-group.full{
    grid-column:1 / -1;
}

.cf-form-group label{
    font-size:13px;
    font-weight:600;
    color:#374151;
    margin-bottom:6px;
}

.cf-form-group label.required:after{
    content:" *";
    color:var(--cf-red);
}

.cf-form-group input,
.cf-form-group select,
.cf-form-group textarea,
select,
.cf-input{
    height:42px;
    padding:0 12px;
    border:1px solid #d1d5db;
    border-radius:6px;
    background:#fff;
    font-size:14px;
    color:var(--cf-text-soft);
    transition:border-color .15s, box-shadow .15s;
}

select{
    min-width:180px;
}

.cf-form-group textarea{
    height:80px;
    padding:10px 12px;
    resize:vertical;
}

.cf-form-group input:focus,
.cf-form-group select:focus,
.cf-form-group textarea:focus,
select:focus,
.cf-input:focus{
    outline:none;
    border-color:var(--cf-accent);
    box-shadow:0 0 0 3px rgba(37,99,235,.15);
}

.cf-form-group input.cf-field-error,
.cf-form-group select.cf-field-error{
    border-color:var(--cf-red);
    box-shadow:0 0 0 3px rgba(220,38,38,.12);
}

.cf-form-actions{
    display:flex;
    gap:10px;
    margin-top:10px;
}

/* ============================================
   TABLE — navy header (Receipt Voucher look),
   now the default for ALL reports.
   ============================================ */
.cf-table{
    width:100%;
    border-collapse:collapse;
    margin-top:6px;
    background:#fff;
    font-size:13.5px;
}

.cf-table th{
    background:var(--cf-navy-header);
    color:#fff;
    padding:9px 12px;
    font-size:13px;
    font-weight:600;
    text-align:left;
    white-space:nowrap;
}

.cf-table td{
    padding:6px 12px;
    border:1px solid var(--cf-row-border);
    vertical-align:middle;
    color:var(--cf-text-soft);
    text-align:left; /* explicit default — never rely on inherited/browser default */
}

.cf-table tr:hover td{
    background:#f8fafc;
}

/* Checkbox column */
.cf-table th:first-child,
.cf-table td:first-child{
    text-align:center;
    width:44px;
}

.cf-table input[type="checkbox"]{
    width:16px;
    height:16px;
    cursor:pointer;
    accent-color:var(--cf-accent);
}

/* Member / name column — always LEFT aligned (never centered),
   regardless of table cell defaults */
.cf-table td.cf-col-member,
.cf-table td[data-label="Member"]{
    font-weight:600;
    color:var(--cf-navy);
    text-align:left;
}
.cf-table th.cf-col-member{
    text-align:left;
}

/* In WIDE tables (horizontal-scroll reports like Bill Register,
   Member Master), force every cell onto a single line. The whole
   point of horizontal scroll is to avoid wrapping — letting Member/
   Mobile/Email wrap defeats that and bloats row height for no
   reason. Scroll sideways instead of wrapping down. */
.cf-table.cf-table-wide td,
.cf-table.cf-table-wide th{
    white-space:nowrap;
}

/* Amount column */
.cf-table td.cf-col-amount,
.cf-table th.cf-col-amount{
    text-align:right;
}

/* Date column — dates are always short, fixed-format text;
   never let them wrap onto multiple lines. min-width keeps the
   column from being squeezed so tight that nowrap text overflows. */
.cf-table td.cf-col-date{
    white-space:nowrap !important;
    min-width:95px;
}

/* Actions column */
.cf-table td.cf-col-actions,
.cf-table th.cf-col-actions{
    text-align:right !important;
    white-space:nowrap;
}

.cf-table-scroll{
    overflow-x:auto;
}

/* ============================================
   STICKY COLUMN — freeze a column (e.g. "Flat" / "Member")
   while horizontally scrolling a wide table (Bill Register,
   and any other report with many numeric columns).
   Usage: add class="cf-col-sticky" to both the <th> and the
   matching <td> in that column.
   ============================================ */
.cf-table .cf-col-sticky{
    position:sticky;
    left:0;
    z-index:5;
    background:#fff;
}
/* Shadow only on the LAST frozen column of a group (e.g. "Name" when
   Sr+Flat+Name are all frozen) — avoids faint shadow lines between
   every individual sticky cell. */
.cf-table .cf-col-sticky.cf-col-sticky-last{
    box-shadow:2px 0 4px rgba(0,0,0,0.06);
}
.cf-table th.cf-col-sticky{
    background:var(--cf-navy-header);
    color:#fff;
    z-index:6; /* header sticky column sits above body sticky column */
}
.cf-table tr:hover td.cf-col-sticky{
    background:#f8fafc;
}

/* ============================================
   STATUS PILLS — Receipt Voucher style
   ============================================ */
.cf-status{
    padding:6px 14px;
    border-radius:999px;
    font-size:12px;
    font-weight:700;
    display:inline-block;
    text-transform:capitalize;
    letter-spacing:0.2px;
}
.cf-status.pending,
.cf-status-sent,
.cf-status-pending{        background:#fef3c7; color:#92400e; }
.cf-status.approved,
.cf-status-paid,
.cf-status-approved{       background:#dcfce7; color:#166534; }
.cf-status.rejected,
.cf-status-overdue,
.cf-status-unpaid,
.cf-status-rejected{       background:#fee2e2; color:#991b1b; }
.cf-status-default{        background:#e5e7eb; color:#374151; }

/* Small "Manager" / "Member" source tag, used next to names */
.cf-source-tag{
    font-size:10px;
    padding:2px 7px;
    border-radius:999px;
    background:#e0e7ff;
    color:#3730a3;
    font-weight:700;
    margin-left:6px;
}

/* ============================================
   BUTTONS — consistent action colors across ALL plugins
   ============================================ */
.cf-btn{
    padding:9px 18px;
    border:none;
    border-radius:6px;
    cursor:pointer;
    text-decoration:none;
    display:inline-block;
    font-size:14px;
    font-weight:600;
    color:#fff;
    transition:opacity .15s ease, transform .05s ease, box-shadow .15s ease;
    margin:2px;
}

.cf-btn:active{
    transform:translateY(1px);
}
.cf-btn:hover{
    opacity:.92;
    box-shadow:0 3px 8px rgba(0,0,0,0.12);
}

/* Small variant — used inside table action cells */
.cf-btn-sm{
    padding:5px 10px;
    border-radius:6px;
    font-size:12px;
    font-weight:600;
    white-space:nowrap;
}

/* Inside a table, ALL action buttons default to the compact size —
   PDF/WhatsApp/Email/Approve/Reject etc. don't need full .cf-btn height */
.cf-table .cf-btn{
    padding:5px 10px;
    font-size:12px;
    margin:1px;
}

/* Action-specific colors — identical everywhere */

/* Blue — Pay Now / PDF / Voucher / View / primary action */
.cf-btn.cf-pdf,
.cf-btn.cf-download,
.cf-btn.cf-primary,
.cf-btn.cf-voucher{
    background:var(--cf-blue);
}
.cf-btn.cf-pdf:hover,
.cf-btn.cf-download:hover,
.cf-btn.cf-primary:hover,
.cf-btn.cf-voucher:hover{
    background:var(--cf-blue-h);
}

/* Green — WhatsApp / Approve / Save / Success */
.cf-btn.cf-wp,
.cf-btn.cf-success,
.cf-btn.cf-approve,
.cf-btn.cf-save{
    background:var(--cf-green);
}
.cf-btn.cf-wp:hover,
.cf-btn.cf-success:hover,
.cf-btn.cf-approve:hover,
.cf-btn.cf-save:hover{
    background:var(--cf-green-h);
}

/* Orange — Email */
.cf-btn.cf-email{
    background:var(--cf-orange);
}
.cf-btn.cf-email:hover{
    background:var(--cf-orange-h);
}

/* Red — Reject / destructive */
.cf-btn.cf-danger,
.cf-btn.cf-reject{
    background:var(--cf-red);
}
.cf-btn.cf-danger:hover,
.cf-btn.cf-reject:hover{
    background:var(--cf-red-h);
}

/* Gray — Reset / Cancel / neutral / secondary */
.cf-btn.cf-secondary,
.cf-btn.cf-reset,
.cf-btn.cf-cancel{
    background:var(--cf-gray);
}
.cf-btn.cf-secondary:hover,
.cf-btn.cf-reset:hover,
.cf-btn.cf-cancel:hover{
    background:var(--cf-gray-h);
}

/* Navy filled — "Filter" submit button */
.cf-btn.cf-filter{
    background:var(--cf-navy-header);
}
.cf-btn.cf-filter:hover{
    background:var(--cf-navy-soft);
}

/* Outline variant — secondary choices */
.cf-btn.cf-outline{
    background:#fff;
    color:var(--cf-accent);
    border:1px solid var(--cf-accent);
}
.cf-btn.cf-outline:hover{
    background:#eff6ff;
    opacity:1;
}

.cf-btn:disabled,
.cf-btn.cf-disabled{
    background:var(--cf-gray);
    opacity:.55;
    cursor:not-allowed;
    pointer-events:none;
}

/* ============================================
   MESSAGE BANNERS — success / error feedback
   ============================================ */
.cf-msg{
    padding:10px 14px;
    border-radius:6px;
    margin-bottom:14px;
    font-size:14px;
    display:none;
}
.cf-msg.ok{  background:#dcfce7; color:#166534; display:block; }
.cf-msg.err{ background:#fee2e2; color:#991b1b; display:block; }

/* ============================================
   EMPTY STATE
   ============================================ */
.cf-empty{
    text-align:center;
    padding:40px 20px;
    color:var(--cf-subtext);
    font-size:14px;
}

/* ============================================
   PAGINATION — round number badge, prev/next
   ============================================ */
.cf-pagination{
    margin-top:20px;
    display:flex;
    justify-content:center;
    align-items:center;
    gap:12px;
}
.cf-pagination .cf-page-num{
    width:36px;
    height:36px;
    border-radius:50%;
    background:var(--cf-navy-header);
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-weight:700;
    font-size:14px;
}

/* ============================================
   MODAL — popup forms (e.g. Record Receipt, Select Bank)
   ============================================ */
.cf-modal-overlay{
    position:fixed;
    top:0; left:0;
    width:100%; height:100%;
    background:rgba(0,0,0,0.55);
    z-index:9999;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:20px;
}
.cf-modal-box{
    background:#fff;
    border-radius:16px;
    padding:24px;
    max-width:640px;
    width:100%;
    max-height:90vh;
    overflow-y:auto;
    box-shadow:0 10px 40px rgba(0,0,0,.25);
}
.cf-modal-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:16px;
}
.cf-modal-header h2,
.cf-modal-header h3{
    margin:0;
}
.cf-modal-close{
    background:none;
    border:none;
    font-size:28px;
    line-height:1;
    cursor:pointer;
    color:var(--cf-subtext);
    padding:0 4px;
}
.cf-modal-close:hover{
    color:#111;
}

/* ============================================
   MOBILE RESPONSIVE — table becomes stacked cards
   below 768px. Apply by giving each <td> a
   data-label="Column Name" attr matching its <th>,
   and wrapping table in <thead>/<tbody>.
   ============================================ */
@media (max-width:768px){

    .cf-heading-row,
    .cf-toolbar{
        flex-direction:column;
        align-items:stretch;
    }
    .cf-heading-row + .cf-toolbar,
    .cf-heading-row .cf-toolbar{
        margin-top:10px;
    }
    .cf-toolbar form{
        width:100%;
    }
    .cf-toolbar form .cf-input,
    .cf-toolbar form select{
        flex:1;
    }
    .cf-toolbar > .cf-btn,
    .cf-toolbar > form,
    .cf-toolbar > a.cf-btn,
    .cf-heading-row > .cf-btn,
    .cf-heading-row > select{
        width:100%;
        text-align:center;
        box-sizing:border-box;
    }

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

    .cf-card{
        padding:16px;
        border-radius:12px;
    }

    /* ============================================
       WIDE TABLES (e.g. Bill Register with 16 columns) —
       opt OUT of the card-stack conversion above. These stay
       as real scrollable tables (horizontal scroll) even on
       mobile, so a sticky frozen column (.cf-col-sticky) keeps
       working. Add class="cf-table cf-table-wide" to use this.
       ============================================ */
    .cf-table.cf-table-wide{
        border:1px solid var(--cf-border);
        background:#fff;
        box-shadow:0 1px 3px rgba(15,23,42,0.04);
        border-radius:8px;
    }
    .cf-table.cf-table-wide thead{
        display:table-header-group;
    }
    .cf-table.cf-table-wide tr{
        display:table-row;
        background:transparent;
        border:none;
        border-radius:0;
        margin-bottom:0;
        padding:0;
        box-shadow:none;
    }
    .cf-table.cf-table-wide td{
        display:table-cell;
        text-align:inherit;
        padding:6px 10px;
        font-size:12.5px;
    }
    .cf-table.cf-table-wide td::before{
        content:none;
    }

    .cf-table{
        border:none;
        background:transparent;
        box-shadow:none;
        border-radius:0;
    }

    .cf-table thead{
        display:none;
    }

    .cf-table tr{
        display:block;
        background:#fff;
        border:1px solid var(--cf-border);
        border-radius:12px;
        margin-bottom:12px;
        padding:14px;
        box-shadow:0 1px 3px rgba(15,23,42,0.08);
    }

    .cf-table td{
        display:flex;
        justify-content:space-between;
        align-items:center;
        gap:10px;
        padding:7px 0;
        border:none;
        text-align:right !important;
        font-size:13.5px;
    }

    .cf-table td::before{
        content:attr(data-label);
        font-weight:600;
        color:var(--cf-subtext);
        font-size:11.5px;
        text-transform:uppercase;
        letter-spacing:0.3px;
        text-align:left;
        flex-shrink:0;
    }

    /* Checkbox cell — no label, align left */
    .cf-table td:first-child{
        justify-content:flex-start;
        width:auto;
    }
    .cf-table td:first-child::before{
        content:'';
    }

    /* Member/name cell — becomes the card's title row */
    .cf-table td.cf-col-member,
    .cf-table td[data-label="Member"]{
        font-weight:700;
        color:var(--cf-navy);
        font-size:15px;
        padding-top:4px;
        padding-bottom:10px;
        border-bottom:1px solid var(--cf-row-border);
        margin-bottom:6px;
    }
    .cf-table td.cf-col-member::before,
    .cf-table td[data-label="Member"]::before{
        content:'';
    }

    /* Actions cell — buttons wrap into a tidy row, right-aligned */
    .cf-table td.cf-col-actions,
    .cf-table td[data-label="Action"],
    .cf-table td[data-label="Actions"]{
        flex-wrap:wrap;
        justify-content:flex-end;
        padding-top:10px;
        margin-top:4px;
        border-top:1px solid var(--cf-row-border);
        white-space:normal !important;
    }
    .cf-table td.cf-col-actions::before,
    .cf-table td[data-label="Action"]::before,
    .cf-table td[data-label="Actions"]::before{
        content:'';
    }
    .cf-table td.cf-col-actions .cf-btn,
    .cf-table td[data-label="Action"] .cf-btn,
    .cf-table td[data-label="Actions"] .cf-btn{
        flex:1;
        text-align:center;
        margin:3px;
        min-width:80px;
    }

    .cf-modal-box{
        padding:18px;
        border-radius:12px;
    }
}