/* Custom styles for UltraPay Dashboard - Bootstrap 5.3.3 compatible */

/* UltraPay dark theme palette (approximate to provided mock) */
:root {
    --up-bg: #1e232a;              /* app background */
    --up-surface: #262c34;         /* cards, header */
    --up-sidebar: #222830;         /* sidebar */
    --up-border: rgba(255,255,255,0.06);
    --up-text: #e8edf3;
    --up-text-muted: #9aa5b1;
    --up-row: #242a33;             /* table rows */
    --up-row-alt: #20262e;         /* zebra */

    /* Metric tiles */
    --up-blue: #3a7bd5;            /* transactions */
    --up-green: #29b36b;           /* paid */
    --up-burgundy: #58151c;        /* errors */
    --up-purple: #7768d8;          /* in process */
    --up-dark-tile: #2b313b;       /* totals */
}

/* Custom background colors for order status */
.bg-unpaid {
    background-color: #6c757d !important; /* Bootstrap gray-600 */
}

.bg-error {
    background-color: #dc3545 !important; /* Bootstrap danger */
}

.bg-invalid {
    opacity: 0.3 !important;
}

/* Custom link style */
.a-main {
    color: #0dcaf0; /* Bootstrap cyan */
    text-decoration: none;
}

.a-main:hover {
    color: #0aa2c0; /* Darker cyan on hover */
    text-decoration: underline;
}

/* Page title styling */
.page-title {
    font-size: 1.5rem;
    font-weight: 600;
    color: #212529; /* Bootstrap dark */
    margin-bottom: 0;
}

/* Clock styling */
.clock {
    font-size: 0.875rem;
    color: #0dcaf0; /* Bootstrap cyan */
    font-weight: 600;
}

/* Dark theme adjustments */
.dark-theme .page-title {
    color: #f8f9fa; /* Bootstrap light */
}

.dark-theme .clock {
    color: #0dcaf0;
}

/* Custom card error styling */
.card.bg-error {
    background-color: #dc3545 !important;
    color: white;
}

.card.bg-error .card-body {
    color: white;
}

/* Status badge improvements */
.badge.bg-warning {
    background-color: #ffc107 !important;
    color: #000;
}

/* Table row status styling */
.table tbody tr.bg-unpaid {
    background-color: rgba(108, 117, 125, 0.1) !important;
}

.table tbody tr.bg-warning {
    background-color: rgba(255, 193, 7, 0.1) !important;
}

.table tbody tr.bg-invalid {
    opacity: 0.3 !important;
}

/* Additional Bootstrap enhancements */
.card {
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.2);
    border: 1px solid var(--up-border);
    background-color: var(--up-surface);
    color: var(--up-text);
    transition: box-shadow 0.15s ease-in-out;
}

.card:hover {
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
}

.btn {
    transition: all 0.15s ease-in-out;
}

.table th {
    font-weight: 600;
    border-bottom: 2px solid var(--up-border);
    background-color: var(--up-surface);
    color: var(--up-text-muted);
}

.badge {
    font-weight: 500;
}

/* Improved sidebar styling */
.offcanvas {
    box-shadow: 2px 0 4px rgba(0, 0, 0, 0.2);
    background-color: var(--up-sidebar) !important;
}

/* Prevent horizontal scrollbar in sidebar */
#sidebar { overflow-x: hidden; }
#sidebar .offcanvas-body { overflow-x: hidden; }

.offcanvas .nav-link {
    transition: all 0.15s ease-in-out;
    border-radius: 0.375rem;
    margin: 0.125rem 0;
}

.offcanvas .nav-link:hover {
    background-color: rgba(255, 255, 255, 0.1);
    transform: translateX(2px);
}

.offcanvas .nav-link.active {
    background-color: rgba(255, 255, 255, 0.2);
    font-weight: 600;
}

/* Header improvements */
.navbar {
    border-bottom: 1px solid var(--up-border);
    background-color: var(--up-surface) !important;
    color: var(--up-text);
}

.navbar-brand {
    font-size: 1.25rem;
}

/* Main content area */
main {
    min-height: calc(100vh - 76px); /* Adjust based on header height */
    background-color: var(--up-bg);
    color: var(--up-text);
}

/* Fixed left sidebar on desktop */
@media (min-width: 992px) {
    #sidebar.offcanvas-start {
        position: fixed;
        top: 0;
        left: 0;
        width: 260px; /* sidebar width */
        height: 100vh;
        transform: none !important; /* keep visible */
        visibility: visible !important;
        border-right: 1px solid var(--up-border);
    }

    .app-main {
        margin-left: 260px; /* match sidebar width */
    }

    /* ensure header sits beside sidebar */
    .app-main .navbar {
        margin-left: 0;
    }
}

/* Mobile behavior: offcanvas overlays (without blocking backdrop as configured) */
@media (max-width: 991.98px) {
    #sidebar.offcanvas-start {
        width: 260px;
    }
}

/* Dark body/global */
body,
.app-main {
    background-color: var(--up-bg) !important;
    color: var(--up-text) !important;
}

/* Readable, compact system font stack and slightly smaller base size */
html { font-size: 15px; } /* ~0.9375rem base for compact UI */
body { 
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
    line-height: 1.4;
}

/* Make tables and badges a bit more compact on mobile and desktop */
.table { font-size: .9rem; }
.badge { font-size: .75rem; }
.btn { font-size: .9rem; }
.navbar-brand { font-size: 1rem; }

/* Tables - dark rows */
.table {
    color: var(--up-text);
    background-color: #000 !important; /* full table background */
}
.table tbody tr {
    background-color: #000 !important; /* rows black */
}
.table tbody tr:nth-child(even) {
    background-color: #000 !important; /* override zebra for solid black */
}
.table td,
.table th {
    border-color: var(--up-border) !important;
}

/* Center loaders inside table cells */
.table .spinner-border {
    display: block;
    margin: .75rem auto;
}

/* Mobile-friendly tables: stack cells with labels */
@media (max-width: 576px) {
    .table-mobile thead { display: none; }
    .table-mobile tbody tr { display: block; padding: .75rem 0; border-bottom: 1px solid var(--up-border); }
    .table-mobile tbody tr:last-child { border-bottom: 0; }
    .table-mobile tbody td { display: flex; justify-content: space-between; gap: 1rem; padding: .5rem .75rem; border: 0; }
    .table-mobile tbody td::before {
        content: attr(data-label);
        font-weight: 600;
        color: var(--up-text-muted);
    }
    .table-mobile .dropdown, .table-mobile .badge { margin-left: .5rem; }
}

/* Metric tiles color alignment */
/* Analytics metric cards into white style */
.analytics-card { background-color: #fff !important; color: #1f2937 !important; border: 1px solid rgba(0,0,0,.08) !important; }
.analytics-card .text-body-secondary { color: #6b7280 !important; }
.analytics-card .icon { color: #6b7280; }

/* Keep existing variants for other areas */
.bg-info { background-color: var(--up-blue) !important; color: #fff !important; }
.bg-success { background-color: var(--up-green) !important; color: #fff !important; }
.bg-danger, .bg-error { background-color: var(--up-burgundy) !important; color: #fff !important; }
.bg-primary { background-color: var(--up-purple) !important; color: #fff !important; }
.card.metric-dark { background-color: var(--up-dark-tile) !important; }

/* Make analytics icons bigger in metric cards */
.card .icon-xxl {
    width: 3.5rem !important;
    height: 3.5rem !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.card .icon-xxl .ti { font-size: 2.25rem !important; line-height: 1; }

/* Make analytics labels and icons white on colored metric cards */
.card[class*="bg-"] .text-body-secondary { color: #fff !important; }
.card[class*="bg-"] .icon-xxl .ti { color: #fff !important; }

/* Muted helper text */
.text-body-secondary, .text-muted { color: var(--up-text-muted) !important; }

/* Pagination - copied from style.css dark theme, adapted to our colors */
#pagination-element { border-top: 1px solid var(--up-border); padding-top: .75rem; }
#pagination-element .pagination { margin-bottom: 0; gap: .5rem; }

/* Expose CoreUI-like variables so the default rules in style.css apply */
.dark-theme .pagination,
.app-main .pagination {
    --cui-pagination-color: #948dd2;
    --cui-pagination-bg: transparent;
    --cui-pagination-border-color: rgba(255, 255, 255, 0.075);
    --cui-pagination-hover-color: #a9a4db;
    --cui-pagination-hover-bg: rgba(255, 255, 255, 0.075);
    --cui-pagination-hover-border-color: rgba(255, 255, 255, 0.12);
    --cui-pagination-focus-color: #a9a4db;
    --cui-pagination-focus-bg: rgba(255, 255, 255, 0.075);
    --cui-pagination-active-color: #fff;
    --cui-pagination-active-bg: #3e3e3e;
    --cui-pagination-active-border-color: #3e3e3e;
    --cui-pagination-disabled-color: var(--up-text-muted);
    --cui-pagination-disabled-bg: transparent;
    --cui-pagination-disabled-border-color: rgba(255, 255, 255, 0.075);
}

/* Minor tweaks to match the screenshot */
#pagination-element .page-link { border-radius: .35rem; padding: .35rem .6rem; }
ul.pagination li {
    background-color: transparent;
    border: 1px solid var(--up-border);
    border-radius: .35rem;
    display: flex;
    align-items: center;
}
ul.pagination li:hover { background-color: #3e3e3e; }
ul.pagination li a { text-decoration: none; color: #fff; padding: 5px 10px; min-width: 40px !important; text-align: center; }
ul.pagination li.active { background-color: #3e3e3e; border-color: var(--up-border); }

#pagination-element select.form-control, #pagination-element .form-control { background-color: var(--up-surface); color: var(--up-text); border: 1px solid var(--up-border); }

/* Pagination link resets so border sits on li */
#pagination-element .page-item .page-link { border: 0; background: transparent; color: var(--up-text); display: flex; align-items: center; justify-content: center; }
#pagination-element .page-item.active .page-link { background: transparent; color: #fff; }
#pagination-element .page-link { padding: 5px 10px; min-width: 40px !important; text-align: center; }
#pagination-element .page-item:first-child .page-link,
#pagination-element .page-item:last-child .page-link { min-width: auto; padding-left: .9rem; padding-right: .9rem; }

/* Pagination base from style.css (copied) */
.pagination {
    display: flex;
    list-style: none
}

html:not([dir=rtl]) .pagination { padding-left: 0 }
*[dir=rtl] .pagination { padding-right: 0 }

.page-link {
    position: relative;
    display: block;
    color: var(--cui-pagination-color,#321fdb);
    text-decoration: none;
    background-color: var(--cui-pagination-bg,#fff);
    border: 1px solid var(--cui-pagination-border-color,#c4c9d0);
    padding: .375rem .75rem
}

@media(prefers-reduced-motion:reduce) { .page-link { transition: none } }

.page-link:hover {
    z-index: 2;
    color: var(--cui-pagination-hover-color,#2819af);
    background-color: var(--cui-pagination-hover-bg,#d8dbe0);
    border-color: var(--cui-pagination-hover-border-color,#c4c9d0)
}

.page-link:focus {
    z-index: 3;
    color: var(--cui-pagination-focus-color,#2819af);
    background-color: var(--cui-pagination-focus-bg,#d8dbe0);
    outline: 0;
    box-shadow: 0 0 0 .25rem rgba(50,31,219,.25)
}

html:not([dir=rtl]) .page-item:not(:first-child) .page-link { margin-left: -1px }
*[dir=rtl] .page-item:not(:first-child) .page-link { margin-right: -1px }

.page-item.active .page-link {
    z-index: 3;
    color: var(--cui-pagination-active-color,rgba(255,255,255,0.87));
    background-color: var(--cui-pagination-active-bg,#321fdb);
    border-color: var(--cui-pagination-active-border-color,#321fdb)
}

.page-item.disabled .page-link {
    color: var(--cui-pagination-disabled-color,#8a93a2);
    pointer-events: none;
    background-color: var(--cui-pagination-disabled-bg,#fff);
    border-color: var(--cui-pagination-disabled-border-color,#c4c9d0)
}

html:not([dir=rtl]) .page-item:first-child .page-link { border-top-left-radius: .25rem; border-bottom-left-radius: .25rem }
*[dir=rtl] .page-item:first-child .page-link { border-top-right-radius: .25rem; border-bottom-right-radius: .25rem }
html:not([dir=rtl]) .page-item:last-child .page-link { border-top-right-radius: .25rem; border-bottom-right-radius: .25rem }
*[dir=rtl] .page-item:last-child .page-link { border-top-left-radius: .25rem; border-bottom-left-radius: .25rem }

.pagination-lg .page-link { padding: .75rem 1.5rem; font-size: 1.25rem }
html:not([dir=rtl]) .pagination-lg .page-item:first-child .page-link { border-top-left-radius: .3rem; border-bottom-left-radius: .3rem }
*[dir=rtl] .pagination-lg .page-item:first-child .page-link { border-top-right-radius: .3rem; border-bottom-right-radius: .3rem }
html:not([dir=rtl]) .pagination-lg .page-item:last-child .page-link { border-top-right-radius: .3rem; border-bottom-right-radius: .3rem }
*[dir=rtl] .pagination-lg .page-item:last-child .page-link { border-top-left-radius: .3rem; border-bottom-left-radius: .3rem }

.pagination-sm .page-link { padding: .25rem .5rem; font-size: .875rem }
html:not([dir=rtl]) .pagination-sm .page-item:first-child .page-link { border-top-left-radius: .2rem; border-bottom-left-radius: .2rem }
*[dir=rtl] .pagination-sm .page-item:first-child .page-link { border-top-right-radius: .2rem; border-bottom-right-radius: .2rem }
html:not([dir=rtl]) .pagination-sm .page-item:last-child .page-link { border-top-right-radius: .2rem; border-bottom-right-radius: .2rem }
*[dir=rtl] .pagination-sm .page-item:last-child .page-link { border-top-left-radius: .2rem; border-bottom-left-radius: .2rem }

/* Status indicators */
.bg-unpaid {
    background-color: #6c757d !important;
    color: white;
}

.bg-error {
    background-color: #dc3545 !important;
    color: white;
}

/* Responsive improvements */
@media (max-width: 768px) {
    .page-title {
        font-size: 1.25rem;
    }
    
    .clock {
        font-size: 0.75rem;
    }
    
    .card {
        margin-bottom: 1rem;
    }
    
    .table-responsive {
        border-radius: 0.375rem;
    }
}

/* Global page overlay loader */
.page-overlay-loading {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.45);
    display: none; /* hidden by default */
    align-items: center;
    justify-content: center;
    z-index: 5000; /* ensure above offcanvas/header/dropdowns */
    backdrop-filter: blur(1px);
}

.page-overlay-loading.show { display: flex; }

.page-overlay-loading .spinner-border { width: 3rem; height: 3rem; }

/* PWA install button tweaks */
#installPwaBtn {
    box-shadow: 0 0.25rem 0.75rem rgba(0,0,0,0.35);
}