/* =====================================================================
   UJIRANI MWEMA — Global "decoration" theme layer
   ---------------------------------------------------------------------
   ONE global stylesheet that professionally restyles the shared Bootstrap
   / Mantis building blocks every page already uses:
       .page-header  .breadcrumb  .card  .table  .btn  .badge
       .form-control .form-floating  .modal  .nav-tabs  .alert  .pagination
   No per-page markup changes required — drop this in once via _Layout.

   Palette: Teal / green "professional" accent (chosen by the team).
   Loaded AFTER the template CSS so these rules win without !important
   except where DataTables / Bootstrap set inline-ish defaults.
   ===================================================================== */

:root {
    /* Brand accent (teal/green) */
    --uj-primary: #0d9488; /* teal-600  */
    --uj-primary-dark: #0f766e; /* teal-700  */
    --uj-primary-darker: #115e59; /* teal-800  */
    --uj-primary-soft: #ccfbf1; /* teal-100  */
    --uj-primary-tint: #f0fdfa; /* teal-50   */
    --uj-accent: #14b8a6; /* teal-500  */
    --uj-emerald: #10b981; /* emerald   */
    --uj-ink: #1f2d3d; /* headings  */
    --uj-muted: #6b7a90; /* muted txt */
    --uj-line: #e6eaf0; /* hairlines */
    --uj-card-radius: 14px;
    --uj-shadow-sm: 0 2px 6px rgba(16, 24, 40, .05);
    --uj-shadow: 0 8px 24px rgba(16, 24, 40, .07);
    --uj-shadow-lg: 0 16px 40px rgba(16, 24, 40, .12);
    --uj-grad: linear-gradient(135deg, var(--uj-primary) 0%, var(--uj-primary-dark) 55%, var(--uj-primary-darker) 100%);
}

/* Make Bootstrap's own --bs-primary follow the brand so every default
   .btn-primary / .text-primary / .bg-primary / link picks up the teal. */
:root {
    --bs-primary: #0d9488;
    --bs-primary-rgb: 13, 148, 136;
    --bs-link-color: #0f766e;
    --bs-link-color-rgb: 15, 118, 110;
    --bs-link-hover-color: #115e59;
}

body {
    background: #f4f7fb;
    color: #2b3445;
}

/* =====================================================================
   1) PAGE HEADER  +  BREADCRUMB
   ===================================================================== */
.page-header {
    margin-bottom: 1.25rem;
}

.page-header .page-block {
    position: relative;
    background: var(--uj-grad);
    border-radius: var(--uj-card-radius);
    padding: 18px 22px;
    color: #fff;
    box-shadow: var(--uj-shadow);
    overflow: hidden;
}

/* subtle decorative glow on the right */
.page-header .page-block::after {
    content: "";
    position: absolute;
    top: -40%;
    right: -60px;
    width: 220px;
    height: 220px;
    background: radial-gradient(circle, rgba(255,255,255,.18) 0%, rgba(255,255,255,0) 70%);
    pointer-events: none;
}

.page-header .page-header-title h5,
.page-header .page-header-title h4 {
    color: #fff;
    font-weight: 700;
    letter-spacing: .2px;
    margin: 0;
}

.page-header .breadcrumb {
    margin: 0 0 6px;
    padding: 0;
    background: transparent;
    font-size: .8rem;
}

    .page-header .breadcrumb .breadcrumb-item,
    .page-header .breadcrumb .breadcrumb-item a {
        color: rgba(255,255,255,.85);
        text-decoration: none;
    }

        .page-header .breadcrumb .breadcrumb-item a:hover {
            color: #fff;
            text-decoration: underline;
        }

    .page-header .breadcrumb .breadcrumb-item.active,
    .page-header .breadcrumb .breadcrumb-item[aria-current="page"] {
        color: #fff;
        font-weight: 600;
    }

    .page-header .breadcrumb .breadcrumb-item + .breadcrumb-item::before {
        color: rgba(255,255,255,.55);
    }

/* The page-header sometimes hosts a row of quick-nav buttons (e.g. the
   Ledger group). Make light/secondary buttons readable on the gradient. */
.page-header .page-block .btn-secondary,
.page-header .page-block .btn-light {
    background: rgba(255,255,255,.16);
    border-color: rgba(255,255,255,.25);
    color: #fff;
}

    .page-header .page-block .btn-secondary:hover,
    .page-header .page-block .btn-light:hover {
        background: rgba(255,255,255,.28);
        color: #fff;
    }

.page-header .page-block .btn.active {
    box-shadow: 0 0 0 2px rgba(255,255,255,.65) inset;
}

/* =====================================================================
   2) CARDS
   ===================================================================== */
.card {
    border: 1px solid var(--uj-line);
    border-radius: var(--uj-card-radius);
    box-shadow: var(--uj-shadow-sm);
    transition: box-shadow .25s ease, transform .25s ease;
    overflow: hidden;
}

    .card:hover {
        box-shadow: var(--uj-shadow);
    }

.card .card-header {
    background: #fff;
    border-bottom: 1px solid var(--uj-line);
    padding: 1rem 1.25rem;
    position: relative;
}

    /* teal accent bar on the left of every card header title */
    .card .card-header > h5,
    .card .card-header > h4,
    .card .card-header > .card-title {
        position: relative;
        padding-left: 12px;
        font-weight: 700;
        color: var(--uj-ink);
        margin-bottom: 0;
    }

        .card .card-header > h5::before,
        .card .card-header > h4::before,
        .card .card-header > .card-title::before {
            content: "";
            position: absolute;
            left: 0;
            top: 50%;
            transform: translateY(-50%);
            width: 4px;
            height: 1.05em;
            border-radius: 4px;
            background: var(--uj-grad);
        }

.card .card-body {
    padding: 1.25rem;
}

/* login card keeps its own rounded-4 + centered look */
#loginContainer .card {
    border-radius: 18px;
    box-shadow: var(--uj-shadow-lg);
}

/* =====================================================================
   3) TABLES  (polished & professional)
   ===================================================================== */

/* Wrap any .table inside a card-body in a clean rounded frame */
.card-body > .table-responsive,
.card-body > .dt-responsive {
    border-radius: 10px;
}

.table {
    --bs-table-bg: transparent;
    margin-bottom: 0;
    color: #36435a;
    border-color: var(--uj-line);
}

    /* ---- header: gradient colored strip ---- */
    .table > thead th,
    .table > thead td,
    .table .thead-secondary th,
    .table .thead-dark th {
        background: var(--uj-grad) !important;
        color: #fff !important;
        font-size: .74rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .6px;
        border-color: rgba(255,255,255,.15) !important;
        vertical-align: middle;
        padding: 13px 14px;
        white-space: nowrap;
    }

        .table > thead th a,
        .table > thead th i {
            color: #fff !important;
        }

    /* round the top corners of the header strip */
    .table > thead tr:first-child th:first-child {
        border-top-left-radius: 10px;
    }

    .table > thead tr:first-child th:last-child {
        border-top-right-radius: 10px;
    }

    /* ---- body rows ---- */
    .table > tbody > tr {
        transition: background-color .15s ease, box-shadow .15s ease, transform .15s ease;
    }

    .table > tbody > tr > td {
        padding: 12px 14px;
        vertical-align: middle;
        border-color: var(--uj-line);
    }

/* zebra (works whether or not .table-striped is present) */
.table:not(.table-borderless) > tbody > tr:nth-of-type(odd) > td {
    background-color: var(--uj-primary-tint);
}

.table:not(.table-borderless) > tbody > tr:nth-of-type(even) > td {
    background-color: #ffffff;
}

/* hover: gentle teal wash + lift */
.table-hover > tbody > tr:hover > td,
.table > tbody > tr:hover > td {
    background-color: var(--uj-primary-soft) !important;
}

.table > tbody > tr:hover {
    box-shadow: inset 3px 0 0 0 var(--uj-primary);
}

/* DataTables-rendered tables: override the old dark-header rule from site.css */
table.dataTable thead {
    background: transparent;
}

    table.dataTable thead th,
    table.dataTable thead td {
        background: var(--uj-grad) !important;
        color: #fff !important;
        border-color: rgba(255,255,255,.15) !important;
    }

table.dataTable.table-hover tbody tr:hover,
table.dataTable.table-hover tbody tr:hover td {
    background-color: var(--uj-primary-soft) !important;
}

/* DataTables chrome (search box, length select, info, paging) */
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
    border: 1px solid var(--uj-line);
    border-radius: 8px;
    padding: 6px 12px;
    outline: none;
    transition: border-color .2s, box-shadow .2s;
}

    .dataTables_wrapper .dataTables_filter input:focus,
    .dataTables_wrapper .dataTables_length select:focus {
        border-color: var(--uj-primary);
        box-shadow: 0 0 0 .2rem rgba(13,148,136,.18);
    }

/* Wider "Show N entries" dropdown so the value + dropdown arrow aren't cramped.
   Global so every DataTable gets it (no per-page override needed). */
.dataTables_wrapper .dataTables_length select {
    min-width: 90px;
    width: auto;
    padding-right: 2rem;
}

/* ---- Clear (×) button for live-search boxes (added by search-clear.js) ---- */
.search-clear-wrap {
    position: relative;
    display: inline-block;
}

    /* keep the wrapper full-width when the input was a block/col input */
    .search-clear-wrap:has(> .form-control) {
        display: block;
    }

    .search-clear-wrap > input.has-clear {
        padding-right: 2rem;
    }

.search-clear-btn {
    position: absolute;
    top: 50%;
    right: 6px;
    transform: translateY(-50%);
    display: none; /* shown by JS when there's a value */
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: #e6eaf0;
    color: #5b6b82;
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease;
}

    .search-clear-btn:hover {
        background: var(--uj-primary);
        color: #fff;
    }

.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    background: var(--uj-grad) !important;
    border-color: var(--uj-primary) !important;
    color: #fff !important;
    border-radius: 8px;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background: var(--uj-primary-soft) !important;
    border-color: var(--uj-primary-soft) !important;
    color: var(--uj-primary-dark) !important;
    border-radius: 8px;
}

/* table tools header (count badge alignment) */
.card-header .badge {
    vertical-align: middle;
}

/* =====================================================================
   4) BUTTONS
   ===================================================================== */
.btn {
    border-radius: 9px;
    font-weight: 600;
    letter-spacing: .2px;
    transition: transform .12s ease, box-shadow .2s ease, filter .2s ease;
}

    .btn:hover {
        transform: translateY(-1px);
    }

    .btn:active {
        transform: translateY(0);
    }

.btn-primary {
    background: var(--uj-grad);
    border: none;
    box-shadow: 0 4px 12px rgba(13,148,136,.28);
}

    .btn-primary:hover,
    .btn-primary:focus {
        background: var(--uj-grad);
        filter: brightness(1.06);
        box-shadow: 0 6px 16px rgba(13,148,136,.36);
    }

    .btn-primary:disabled,
    .btn-primary.disabled {
        background: var(--uj-primary);
        opacity: .65;
    }

.btn-outline-primary {
    color: var(--uj-primary-dark);
    border-color: var(--uj-primary);
}

    .btn-outline-primary:hover {
        background: var(--uj-grad);
        border-color: transparent;
        color: #fff;
    }

.btn-link {
    color: var(--uj-primary-dark);
}

/* small action buttons inside tables */
.table .btn-sm,
.table .avtar {
    border-radius: 8px;
}

/* "avtar" icon-action links used in listings */
.avtar.btn-link-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--uj-primary-dark);
    background: var(--uj-primary-tint);
    border-radius: 8px;
    transition: background .2s, color .2s, transform .12s;
}

    .avtar.btn-link-secondary:hover {
        background: var(--uj-primary);
        color: #fff;
        transform: translateY(-1px);
    }

/* =====================================================================
   5) BADGES & PILLS
   ===================================================================== */
.badge {
    font-weight: 600;
    letter-spacing: .3px;
    padding: .42em .7em;
    border-radius: 7px;
}

    .badge.rounded-pill {
        border-radius: 50rem;
    }

.bg-success {
    background-color: var(--uj-emerald) !important;
}

.text-primary {
    color: var(--uj-primary-dark) !important;
}

.bg-primary {
    background: var(--uj-grad) !important;
}

/* =====================================================================
   6) FORMS  (inputs, floating labels, selects, checks)
   ===================================================================== */
.form-control,
.form-select {
    border-radius: 9px;
    border: 1px solid #d8dee9;
    padding: .55rem .85rem;
    transition: border-color .2s, box-shadow .2s;
}

    .form-control:focus,
    .form-select:focus {
        border-color: var(--uj-primary);
        box-shadow: 0 0 0 .2rem rgba(13,148,136,.18);
    }

.form-floating > label {
    color: var(--uj-muted);
}

.form-floating > .form-control:focus ~ label,
.form-floating > .form-control:not(:placeholder-shown) ~ label,
.form-floating > .form-select ~ label {
    color: var(--uj-primary-dark);
}

.form-check-input:checked {
    background-color: var(--uj-primary);
    border-color: var(--uj-primary);
}

.form-check-input:focus {
    border-color: var(--uj-primary);
    box-shadow: 0 0 0 .2rem rgba(13,148,136,.18);
}

.input-group-text {
    background: var(--uj-primary-tint);
    border-color: #d8dee9;
    color: var(--uj-primary-dark);
    border-radius: 9px;
}

/* keep the global focus ring tidy (override site.css blue glow) */
.btn:focus,
.btn:active:focus,
.btn-link.nav-link:focus,
.form-control:focus,
.form-check-input:focus {
    box-shadow: 0 0 0 .2rem rgba(13,148,136,.20);
}

/* =====================================================================
   7) MODALS
   ===================================================================== */
.modal-content {
    border: none;
    border-radius: 16px;
    box-shadow: var(--uj-shadow-lg);
    overflow: hidden;
}

.modal-header {
    border-bottom: 1px solid var(--uj-line);
}

    /* brand the common bg-primary headers (used across the app's modals) */
    .modal-header.bg-primary,
    .modal-header.bg-primary.text-white {
        background: var(--uj-grad) !important;
    }

.modal-footer {
    border-top: 1px solid var(--uj-line);
    background: #fbfdff;
}

/* =====================================================================
   8) TABS / NAV-PILLS
   ===================================================================== */
.nav-tabs .nav-link.active,
.nav-pills .nav-link.active {
    color: var(--uj-primary-dark);
    border-color: transparent transparent var(--uj-primary) transparent;
}

.nav-pills .nav-link.active {
    background: var(--uj-grad);
    color: #fff;
    border-radius: 8px;
}

.nav-tabs .nav-link:hover {
    color: var(--uj-primary-dark);
}

/* =====================================================================
   9) ALERTS, PROGRESS, MISC
   ===================================================================== */
.alert {
    border: none;
    border-left: 4px solid;
    border-radius: 10px;
}

.alert-success {
    border-left-color: var(--uj-emerald);
    background: #ecfdf5;
    color: #065f46;
}

.alert-danger {
    border-left-color: #ef4444;
    background: #fef2f2;
    color: #991b1b;
}

.alert-info {
    border-left-color: var(--uj-primary);
    background: var(--uj-primary-tint);
    color: var(--uj-primary-darker);
}

.alert-warning {
    border-left-color: #f59e0b;
    background: #fffbeb;
    color: #92400e;
}

.progress {
    border-radius: 50rem;
    background: #eef2f7;
}

hr {
    border-color: var(--uj-line);
    opacity: 1;
}

/* footer */
.pc-footer .footer-wrapper a {
    color: var(--uj-primary-dark);
    text-decoration: none;
}

    .pc-footer .footer-wrapper a:hover {
        text-decoration: underline;
    }

/* =====================================================================
   10) MOBILE "table -> cards" — keep the stacked-card look on the brand
   (the layout already turns tables into cards on small screens; just give
    those cards the teal accent so they match the desktop polish.)
   ===================================================================== */
@media (max-width: 767.98px) {
    .table:not(.no-card-stack) > tbody > tr {
        border: 1px solid var(--uj-line) !important;
        border-left: 4px solid var(--uj-primary) !important;
        border-radius: 12px !important;
        box-shadow: var(--uj-shadow-sm) !important;
        background: #fff !important;
    }

        .table:not(.no-card-stack) > tbody > tr > td {
            background: transparent !important;
        }

            .table:not(.no-card-stack) > tbody > tr > td::before {
                color: var(--uj-primary-dark) !important;
            }
}

/* =====================================================================
   11) MODAL / REPORT TABLES -> cards on mobile
   ---------------------------------------------------------------------
   The print/report bodies shown INSIDE on-screen modals (and the inline
   member-profile previews) use custom table classes — .report-table,
   .dep-table, .detail-table, .finance-table — NOT Bootstrap's .table, so
   the global "table -> cards" rule above never touched them and they
   overflowed on phones. Stack them into cards here.

   SCREEN-ONLY (max-width 767.98px): printed PDFs/exports use @media print
   or open in a new tab at desktop width, so this never affects the
   generated documents. Labels come from each cell's data-label, which the
   layout's labelizer JS now fills for these tables too. Opt out with
   .no-card-stack.
   ===================================================================== */
@media (max-width: 767.98px) {

    /* ---- Column tables WITH a header row (.report-table / .dep-table) ---- */
    .report-table:not(.no-card-stack) thead,
    .dep-table:not(.no-card-stack) thead {
        display: none !important;
    }

    .report-table:not(.no-card-stack),
    .report-table:not(.no-card-stack) tbody,
    .report-table:not(.no-card-stack) tr,
    .report-table:not(.no-card-stack) td,
    .dep-table:not(.no-card-stack),
    .dep-table:not(.no-card-stack) tbody,
    .dep-table:not(.no-card-stack) tr,
    .dep-table:not(.no-card-stack) td {
        display: block !important;
        width: 100% !important;
    }

    .report-table:not(.no-card-stack) tbody tr,
    .dep-table:not(.no-card-stack) tbody tr {
        margin-bottom: 12px;
        border: 1px solid var(--uj-line);
        border-left: 4px solid var(--uj-primary);
        border-radius: 12px;
        padding: 6px 12px;
        background: #fff;
        box-shadow: var(--uj-shadow-sm);
    }

    .report-table:not(.no-card-stack) tbody td,
    .dep-table:not(.no-card-stack) tbody td {
        text-align: left !important;
        border: 0 !important;
        border-bottom: 1px solid #f1f1f1 !important;
        padding: 8px 4px !important;
        white-space: normal !important;
        font-size: 13px;
    }

        .report-table:not(.no-card-stack) tbody td:last-child,
        .dep-table:not(.no-card-stack) tbody td:last-child {
            border-bottom: 0 !important;
        }

        .report-table:not(.no-card-stack) tbody td::before,
        .dep-table:not(.no-card-stack) tbody td::before {
            content: attr(data-label);
            display: block;
            font-size: .72rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: .4px;
            color: var(--uj-primary-dark);
            margin-bottom: 3px;
        }

        /* "No records" rows span the card cleanly */
        .report-table:not(.no-card-stack) tbody td[colspan],
        .dep-table:not(.no-card-stack) tbody td[colspan] {
            text-align: center !important;
        }

            .report-table:not(.no-card-stack) tbody td[colspan]::before,
            .dep-table:not(.no-card-stack) tbody td[colspan]::before {
                content: "";
            }

    /* hide the GRAND TOTAL footer row's empty cells; show the total clearly */
    .report-table:not(.no-card-stack) tfoot,
    .report-table:not(.no-card-stack) tfoot tr,
    .report-table:not(.no-card-stack) tfoot th {
        display: block !important;
        width: 100% !important;
    }

    .report-table:not(.no-card-stack) tfoot tr {
        border-radius: 10px;
        background: var(--uj-primary-tint);
        border: 1px solid var(--uj-primary-soft);
        padding: 6px 12px;
        margin-top: 4px;
        text-align: center;
    }

        .report-table:not(.no-card-stack) tfoot th:empty {
            display: none !important;
        }

    /* ---- Key/value tables (.detail-table / .finance-table): th|td per row ---- */
    .detail-table:not(.no-card-stack),
    .detail-table:not(.no-card-stack) tbody,
    .detail-table:not(.no-card-stack) tr,
    .detail-table:not(.no-card-stack) th,
    .detail-table:not(.no-card-stack) td,
    .finance-table:not(.no-card-stack),
    .finance-table:not(.no-card-stack) tbody,
    .finance-table:not(.no-card-stack) tr,
    .finance-table:not(.no-card-stack) th,
    .finance-table:not(.no-card-stack) td {
        display: block !important;
        width: 100% !important;
    }

    .detail-table:not(.no-card-stack) tr,
    .finance-table:not(.no-card-stack) tr {
        margin-bottom: 10px;
        border: 1px solid var(--uj-line);
        border-left: 4px solid var(--uj-primary);
        border-radius: 12px;
        padding: 6px 12px;
        background: #fff;
        box-shadow: var(--uj-shadow-sm);
    }

    .detail-table:not(.no-card-stack) th,
    .finance-table:not(.no-card-stack) th {
        border: 0 !important;
        padding: 6px 4px 0 !important;
        text-align: left !important;
        font-size: .72rem;
        text-transform: uppercase;
        letter-spacing: .4px;
        color: var(--uj-primary-dark);
        background: transparent !important;
    }

    .detail-table:not(.no-card-stack) td,
    .finance-table:not(.no-card-stack) td {
        border: 0 !important;
        padding: 0 4px 6px !important;
        text-align: left !important;
        font-size: 14px;
    }
}