@charset "UTF-8";

.repurate-logo {
    background-color: rgba(255, 255, 255, 0.92);
    background-blend-mode: lighten;
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-size: 65%;
    background-position:center;
    background-position-y: 70%;
}

.body {
    background-color: rgba(216, 240, 255, 1.00);
}

#flash-message{
    z-index: 10000;
}

.group-members-list-mobile {
    display: none;
}

.auth-nav-search {
    width: 360px;
}

.auth-nav-search-mobile {
    width: 100%;
}

.settings-nav .nav-link {
    border-radius: 8px;
    margin-bottom: 4px;
    transition: all 0.3s ease;
}

.settings-nav .nav-link:hover {
    background-color: rgba(var(--bs-primary-rgb), 0.1);
    color: var(--bs-primary);
}

.settings-nav .nav-link.active {
    background-color: var(--bs-primary);
    color: #fff;
}

/* ---- Django Form Error Styling (clean + red) ---- */
.errorlist {
    color: #dc3545 !important;   /* Bootstrap red */
    margin-top: 4px;
    padding-left: 1.25rem;       /* restores bullet indentation */
}

.errorlist li {
    color: #dc3545 !important;
    font-weight: normal;         /* normal weight */
    font-size: 0.875rem;         /* Bootstrap equivalent (14px) */
    list-style: disc !important; /* restore bullet */
}

/* ---- Root layout constraints (Soft UI theme overrides) -------------------
   The theme is desktop-first: its navbar, sidebar, and main-content rules
   assume a wide viewport with a visible sidebar (250px). Below 1200px the
   sidebar hides via translateX, but the navbar width calc and container
   margins stay. These overrides fix the structural layout so content fills
   the viewport on tablets and phones.
   -------------------------------------------------------------------------- */

@media (max-width: 1200px) {
    /* -- Structural resets ------------------------------------------------- */

    /* Theme: width: calc(100% - 19.375rem), no mobile override.
       At 375px this evaluates to ~101px. Reset to full width. */
    .navbar-main.fixed-top {
        width: 100% !important;
        left: 0 !important;
    }

    /* Theme: margin-top: 7.1875rem !important on container after fixed navbar.
       Too much vertical space on small screens. */
    .navbar-main.fixed-top + [class*=container] {
        margin-top: 5rem !important;
    }

    /* Main content: ensure full width when sidebar is hidden */
    .g-sidenav-show .main-content {
        margin-left: 0 !important;
        width: 100% !important;
    }

    .g-sidenav-show .sidenav.fixed-start ~ .main-content {
        margin-left: 0 !important;
    }

    /* Prevent any horizontal overflow from theme calc remnants */
    .main-content {
        max-width: 100vw;
        overflow-x: hidden;
        overflow-wrap: anywhere;
    }

    /* Constrain form controls and media to their containers.
       Exclude .form-check-input (checkboxes, radios, toggle switches)
       whose widths are set by Bootstrap and must not be clamped. */
    .main-content input:not(.form-check-input),
    .main-content select,
    .main-content textarea,
    .main-content img {
        max-width: 100%;
        box-sizing: border-box;
    }

    /* -- Component overrides below ----------------------------------------- */

    #transact .table-responsive,
    #transact .table-responsive-cards,
    #needs_rating .table-responsive,
    #needs_rating .table-responsive-cards,
    #dispute .table-responsive,
    #dispute .table-responsive-cards {
        overflow-x: visible;
    }

    .table-cards thead {
        display: none;
    }

    .table-cards tbody tr {
        display: block;
        border: 1px solid #e5e7eb;
        border-radius: 0.75rem;
        padding: 0.75rem;
        margin: 0.75rem 0;
        background: #fff;
        width: 100%;
        box-sizing: border-box;
        overflow: hidden;
    }

    .table-cards tbody td {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        gap: 0.75rem;
        padding: 0.35rem 0;
        border: 0;
        white-space: normal;
        min-width: 0;
        max-width: 100%;
    }

    .table-cards td[data-label="Status"] {
        align-items: flex-start;
    }

    .table-cards .transaction-status-stack {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 0.25rem;
        min-width: 0;
    }

    .table-cards .transaction-status-stack .badge {
        white-space: nowrap;
        text-align: center;
    }

    .table-cards .transaction-status-meta {
        display: flex;
        align-items: center;
    }

    .table-cards tbody td > * {
        max-width: 100%;
        overflow-wrap: anywhere;
        word-break: break-word;
    }

    .table-cards .badge {
        display: inline-block;
        max-width: 100%;
        white-space: normal;
        text-align: left;
    }

    .table-cards .badge.badge-sm,
    .table-cards .badge.bg-info,
    .table-cards .badge.bg-success,
    .table-cards .badge.bg-warning,
    .table-cards .badge.bg-secondary,
    .table-cards .badge.bg-danger {
        white-space: nowrap;
        min-width: 4.75rem;
        text-align: center;
    }

    #recent_transactions .recent-tx-action {
        min-width: 3.25rem;
        min-height: 2.25rem;
        padding: 0.35rem 0.6rem;
    }

    #recent_transactions .recent-tx-action i {
        font-size: 1rem;
    }

    @media (max-width: 576px) {
        #recent_transactions .recent-tx-action {
            min-width: 4.25rem;
            min-height: 2.75rem;
            padding: 0.45rem 0.85rem;
        }

        #recent_transactions .recent-tx-action i {
            font-size: 1.25rem;
        }
    }

    .table-cards .col-2,
    .table-cards .col-4,
    .table-cards .col-6,
    .table-cards .col-8 {
        width: auto;
        max-width: 100%;
        padding-left: 0;
        padding-right: 0;
    }

    .table-cards.table-cards-stack tbody td {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.35rem;
        overflow-wrap: anywhere;
        word-break: break-word;
    }

    .table-cards.table-cards-stack tbody td::before {
        margin-bottom: 0.1rem;
    }

    .group-members-card {
        overflow-x: hidden;
    }

    .group-members-body {
        padding: 0.75rem !important;
        overflow-x: hidden;
    }

    .group-members-table {
        width: 100%;
    }

    .group-members-table tbody tr {
        margin: 0.5rem 0;
    }

    .group-members-table tbody td {
        flex-direction: column !important;
        align-items: flex-start !important;
        justify-content: flex-start;
        gap: 0.35rem;
        min-width: 0;
    }

    .group-members-table tbody td > * {
        max-width: 100%;
        overflow-wrap: anywhere;
        word-break: break-word;
    }

    .group-members-table-desktop {
        display: none;
    }

    .group-members-list-mobile {
        display: block;
    }

    .table-cards tbody td::before {
        content: attr(data-label);
        flex: 0 0 auto;
        font-weight: 600;
        color: #6c757d;
    }

    .table-cards .text-truncate,
    .table-cards .text-nowrap {
        white-space: normal;
    }

    .article-list-container .article .cover {
        display: none;
    }

    .article-list-container,
    .category-detail {
        overflow-x: hidden;
    }

    .article-list-container .card,
    .category-detail .card {
        max-width: 100%;
        width: 100%;
    }

    .article-list-container .list-group,
    .article-list-container .list-group-item,
    .category-detail .list-group,
    .category-detail .list-group-item {
        white-space: normal;
        word-break: break-word;
        overflow-wrap: anywhere;
    }
}

/* ---- Small-screen tightening (phones, < 576px) -------------------------- */
@media (max-width: 575.98px) {
    /* Theme locks card padding at 1.5rem; too wide for narrow viewports */
    .card .card-header,
    .card .card-body {
        padding: 0.5rem !important;
    }

    /* Tighten container gutters */
    .container-fluid {
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
    }

    /* Tighten nested containers: accordion body, alerts */
    .accordion-body {
        padding: 0.5rem !important;
    }

    .alert {
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
    }

    /* Tables inside .table-responsive can overflow when the template sets
       overflow-x: visible. Force tables to respect container width. */
    .table-responsive table {
        table-layout: fixed;
        width: 100% !important;
    }

    /* Reduce top margin further on small screens */
    .navbar-main.fixed-top + [class*=container] {
        margin-top: 4.5rem !important;
    }
}

@media (max-width: 991.98px) {
    .auth-nav-search {
        display: none;
    }
}

/* ---- WCAG AA contrast palette (#321) ------------------------------------
   The Soft UI theme's default gradients, alerts, and badge colors fail
   WCAG AA contrast. Below is a unified palette built around brand teal
   (#008080), with every value verified via scripts/contrast-check.

   Role        Deep        Mid         Badge       Alert tint (dark→light)
   ────────────────────────────────────────────────────────────────────────
   Primary     #006666     #008080     #008080     #e0f2f1 → #b2dfdb
   Secondary   #475569     #64748b     #475569     #f1f5f9 → #e2e8f0
   Success     #047857     #059669     #047857     #ecfdf5 → #d1fae5
   Info        #0e7490     #0891b2     #0e7490     #a5d8ff → #74c0fc
   Warning     #d97706→#fbbf24 (dark text #78350f)  #fff7ed → #fed7aa
   Danger      #b91c1c     #dc2626     #b91c1c     #fef2f2 → #fecaca
   ──────────────────────────────────────────────────────────────────────── */

/* --- Gradient buttons & headers (white text) --- */
.bg-gradient-primary,
.btn.bg-gradient-primary {
    background-image: linear-gradient(310deg, #006666 0%, #008080 100%) !important;
}

.bg-gradient-secondary,
.btn.bg-gradient-secondary {
    background-image: linear-gradient(310deg, #475569 0%, #64748b 100%) !important;
}

.bg-gradient-success,
.btn.bg-gradient-success {
    background-image: linear-gradient(310deg, #047857 0%, #059669 100%) !important;
}

.bg-gradient-info,
.btn.bg-gradient-info {
    background-image: linear-gradient(310deg, #0e7490 0%, #0891b2 100%) !important;
}

.bg-gradient-warning,
.btn.bg-gradient-warning {
    background-image: linear-gradient(310deg, #d97706 0%, #fbbf24 100%) !important;
    color: #78350f !important;
}

.bg-gradient-danger,
.btn.bg-gradient-danger {
    background-image: linear-gradient(310deg, #b91c1c 0%, #dc2626 100%) !important;
}

/* --- Alert tints (dark text on pastel gradient) --- */
.alert-primary {
    background-image: linear-gradient(310deg, #e0f2f1 0%, #b2dfdb 100%) !important;
}

.alert-secondary {
    background-image: linear-gradient(310deg, #f1f5f9 0%, #e2e8f0 100%) !important;
}

.alert-success {
    background-image: linear-gradient(310deg, #ecfdf5 0%, #d1fae5 100%) !important;
}

.alert-info {
    background-image: linear-gradient(310deg, #a5d8ff 0%, #74c0fc 100%) !important;
}

.alert-warning {
    background-image: linear-gradient(310deg, #fff7ed 0%, #fed7aa 100%) !important;
}

.alert-danger {
    background-image: linear-gradient(310deg, #fef2f2 0%, #fecaca 100%) !important;
}

/* --- Card header contrast (stronger teal tint for visibility) --- */
.card-header {
    background: linear-gradient(135deg, rgba(0, 128, 128, 0.12) 0%, rgba(0, 128, 128, 0.06) 100%) !important;
    border-bottom: 2px solid #008080;
}

.card-header.bg-light {
    background: #f1f5f9 !important;
}

/* --- Badge solid-color overrides (white text, "deep" shade) --- */
.badge.bg-secondary {
    background-color: #475569 !important;
}

.badge.bg-success {
    background-color: #047857 !important;
}

.badge.bg-info {
    background-color: #0e7490 !important;
}

.badge.bg-warning {
    background-color: #fbbf24 !important;
    color: #78350f !important;
}

.badge.bg-danger {
    background-color: #b91c1c !important;
}

/* --- Text utility overrides (on white backgrounds) --- */
.text-warning {
    color: #b45309 !important;
}

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

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