/* ============================================================
   User Profile Pages — Dark Theme Overrides
   Applies to: my-calls, my-chats, my-wallet, my-account,
   my-orders, my-report, my-puja-list, chat-history, etc.
   Uses SanatanSansaar design tokens from design-tokens.css
   ============================================================ */

/* ---------- Breadcrumb ---------- */
.moonastro-breadcrumb {
    background: var(--ss-surface-raised) !important;
    border-bottom: 1px solid rgba(212,175,55,0.15);
}
.moonastro-breadcrumb .breadcrumbs,
.moonastro-breadcrumb .breadcrumbs a {
    color: var(--ss-content-tertiary) !important;
    text-decoration: none;
}
.moonastro-breadcrumb .breadcrumbs a:hover {
    color: var(--ss-gold-700) !important;
}
.moonastro-breadcrumb .breadcrumbs .fa-home,
.moonastro-breadcrumb .breadcrumbs .fa-chevron-right {
    color: var(--ss-gold-700) !important;
}

/* ---------- .inpage card container ---------- */
.inpage {
    background: var(--ss-surface-raised) !important;
    border: 1px solid var(--ss-edge-subtle) !important;
    border-radius: var(--ss-radius-lg) !important;
    box-shadow: var(--ss-shadow-card);
    padding: 28px;
    margin-top: 24px;
    margin-bottom: 24px;
}

/* ---------- Page headings ---------- */
.inpage .h2,
.inpage h1,
.inpage h2,
.inpage h3,
.inpage .page-heading,
.inpage .colorblack {
    color: var(--ss-content) !important;
    font-family: var(--ss-font);
}

.inpage h1.h2 {
    background: var(--ss-astro-gradient-text);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 700;
    font-size: 1.5rem;
}

.inpage p,
.inpage .text-muted,
.inpage label {
    color: var(--ss-content-secondary) !important;
    font-family: var(--ss-font);
}

/* ---------- Tables ---------- */
.inpage .table {
    color: var(--ss-content-body) !important;
    border-collapse: separate;
    border-spacing: 0;
}

.inpage .table thead th {
    background: rgba(212,175,55,0.08) !important;
    color: var(--ss-gold-700) !important;
    border-bottom: 1px solid rgba(212,175,55,0.20) !important;
    border-top: none !important;
    font-weight: 600;
    font-size: 0.85rem;
    padding: 12px 16px;
    font-family: var(--ss-font);
    white-space: nowrap;
}

.inpage .table tbody td {
    border-bottom: 1px solid var(--ss-edge-subtle) !important;
    border-top: none !important;
    padding: 14px 16px;
    vertical-align: middle;
    color: var(--ss-content-body) !important;
    font-family: var(--ss-font);
    font-size: 0.9rem;
}

.inpage .table tbody tr:hover {
    background: rgba(212,175,55,0.03);
}

.inpage .table tbody tr:last-child td {
    border-bottom: none !important;
}

.inpage .table h5 {
    color: var(--ss-content) !important;
    font-size: 0.95rem;
    font-weight: 600;
    margin-bottom: 4px;
    font-family: var(--ss-font);
}

.inpage .table .font-12 {
    font-size: 0.78rem;
}

.inpage .table .text-muted {
    color: var(--ss-content-caption) !important;
}

.inpage .table .text-success {
    color: var(--ss-status-success) !important;
}

.inpage .table .text-danger {
    color: var(--ss-status-error) !important;
}

/* ---------- Table container scrollbar ---------- */
.table-container {
    max-height: 450px;
    overflow-y: auto;
    scrollbar-width: thin;
}
.table-container::-webkit-scrollbar { width: 6px; }
.table-container::-webkit-scrollbar-track { background: var(--ss-surface-inset); border-radius: 3px; }
.table-container::-webkit-scrollbar-thumb { background: rgba(212,175,55,0.35); border-radius: 3px; }
.table-container::-webkit-scrollbar-thumb:hover { background: rgba(212,175,55,0.60); }

/* ---------- Buttons inside tables ---------- */
.inpage .btn-chat {
    background: var(--ss-astro-gradient) !important;
    color: var(--ss-content-inverse) !important;
    border: none !important;
    border-radius: var(--ss-radius) !important;
    font-weight: 600;
    font-size: 0.8rem;
    padding: 6px 16px;
    transition: var(--ss-transition);
    font-family: var(--ss-font);
    text-decoration: none;
}
.inpage .btn-chat:hover {
    background: var(--ss-astro-gradient-hover) !important;
    box-shadow: var(--ss-glow-gold-sm);
    transform: translateY(-1px);
}

/* ---------- Forms inside .inpage ---------- */
.inpage .form-control {
    background: var(--ss-surface-overlay) !important;
    border: 1px solid var(--ss-edge) !important;
    color: var(--ss-content) !important;
    border-radius: var(--ss-radius) !important;
    font-family: var(--ss-font);
}
.inpage .form-control::placeholder {
    color: var(--ss-hint) !important;
}
.inpage .form-control:focus {
    border-color: var(--ss-gold-700) !important;
    box-shadow: var(--ss-focus-ring) !important;
}

/* ---------- Table-responsive override (no visible horizontal bar) ---------- */
.inpage .table-responsive {
    border: none !important;
    overflow-x: auto;
    scrollbar-width: thin;
}

/* ---------- Review modal dark theme ---------- */
#reviewmodal .modal-content {
    background: var(--ss-surface-overlay) !important;
    border: 1px solid var(--ss-edge-subtle) !important;
    color: var(--ss-content) !important;
    border-radius: var(--ss-radius-lg) !important;
}
#reviewmodal .modal-header {
    border-bottom: 1px solid var(--ss-edge-subtle) !important;
}
#reviewmodal .modal-title {
    color: var(--ss-content) !important;
    font-family: var(--ss-font);
}
#reviewmodal .modal-header .close {
    color: var(--ss-content-tertiary) !important;
    text-shadow: none;
    opacity: 1;
}
#reviewmodal .modal-body label {
    color: var(--ss-content-secondary) !important;
}

/* ---------- Wallet page — balance & tabs ---------- */
.inpage .border-bottom {
    border-color: var(--ss-edge-subtle) !important;
}

.inpage .orangecolor,
.inpage .color-red,
.inpage #wallbalance {
    color: var(--ss-gold-500) !important;
    font-weight: 700;
}

.inpage .nav-tabs {
    border-bottom: 1px solid var(--ss-edge-subtle) !important;
}

.inpage .nav-tabs a,
.inpage .nav-tabs a.text-dark {
    color: var(--ss-content-secondary) !important;
    font-family: var(--ss-font);
    font-weight: 500;
    font-size: 0.9rem;
    border-bottom: 2px solid transparent;
    transition: color 0.2s, border-color 0.2s;
    text-decoration: none;
}

.inpage .nav-tabs a:hover {
    color: var(--ss-content) !important;
}

.inpage .nav-tabs a.colorbrown,
.inpage .nav-tabs a.borderbrown,
.inpage .nav-tabs a.active,
.inpage .nav-tabs a[aria-selected="true"] {
    color: var(--ss-gold-700) !important;
    border-bottom-color: var(--ss-gold-700) !important;
    font-weight: 600;
}

/* ---------- Star rating ---------- */
.star-rating label::before {
    color: var(--ss-content-caption);
}
.star-rating input:checked ~ label::before {
    color: var(--ss-gold-700);
}

/* ---------- Empty state ---------- */
.inpage .table tbody:empty::after {
    content: 'No records found';
    display: block;
    padding: 32px;
    text-align: center;
    color: var(--ss-content-caption);
    font-family: var(--ss-font);
    font-size: 0.9rem;
}

/* ---------- Mobile responsive ---------- */
@media (max-width: 767.98px) {
    .inpage {
        padding: 16px;
        margin-top: 12px;
        border-radius: 0 !important;
        border-left: none !important;
        border-right: none !important;
    }

    .inpage h1.h2 {
        font-size: 1.25rem;
    }

    .inpage .table thead th {
        font-size: 0.78rem;
        padding: 10px 12px;
    }

    .inpage .table tbody td {
        padding: 10px 12px;
        font-size: 0.82rem;
    }

    .inpage .table h5 {
        font-size: 0.85rem;
    }
}