/*
 * texcohub_theme.css — Global Theme Override
 * Applies Texcohub brand to ALL user-facing service & history pages
 * Brand: Space Grotesk | #07090E | #1A8FD1 | #2BB5F0
 */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700;800&display=swap');

/* ========= GLOBAL RESETS ========= */
*, *::before, *::after { box-sizing: border-box; }

html, body {
    font-family: 'Space Grotesk', sans-serif !important;
    background: #07090E !important;
    color: #EEF2FA !important;
    -webkit-font-smoothing: antialiased;
}

/* ========= TYPOGRAPHY OVERRIDES ========= */
h1, h2, h3, h4, h5, h6, p, span, label, input, select, textarea, button, a, td, th, li, div {
    font-family: 'Space Grotesk', sans-serif !important;
}

/* ========= BRAND COLOR VARIABLES (Override old CSS vars) ========= */
:root {
    /* Texcohub Brand */
    --primary:            #1A8FD1 !important;
    --primary-color:      #1A8FD1 !important;
    --primary-dark:       #0A7CC4 !important;
    --primary-light:      #2BB5F0 !important;
    --primary-glow:       rgba(26,143,209,0.22) !important;
    --primary-soft:       rgba(26,143,209,0.1) !important;
    --primary-border:     rgba(43,181,240,0.3) !important;

    /* Override old blue shades */
    --theme-primary:             #1A8FD1 !important;
    --theme-primary-hover:       #0A7CC4 !important;
    --theme-primary-light:       rgba(43,181,240,0.1) !important;
    --secondary-color:           #2BB5F0 !important;

    /* Backgrounds */
    --bg:              #07090E !important;
    --bg-body:         #07090E !important;
    --bg-primary:      #07090E !important;
    --bg-white:        #0F1420 !important;
    --bg-card:         #0F1420 !important;
    --bg-subtle:       #111827 !important;
    --bg-hover:        #1A2030 !important;
    --card-bg:         #0F1420 !important;

    /* Text */
    --text-primary:    #EEF2FA !important;
    --text-main:       #EEF2FA !important;
    --text-dark:       #EEF2FA !important;
    --text-secondary:  rgba(180,200,225,0.75) !important;
    --text-muted:      rgba(150,170,200,0.55) !important;
    --text-dim:        rgba(120,145,175,0.4) !important;

    /* Borders */
    --border:          rgba(43,181,240,0.13) !important;
    --border-color:    rgba(43,181,240,0.13) !important;
    --border-focus:    #2BB5F0 !important;
    --border-strong:   rgba(43,181,240,0.25) !important;
    --border-light:    rgba(43,181,240,0.1) !important;
    --border-dark:     rgba(43,181,240,0.15) !important;
    --input-border:    rgba(43,181,240,0.15) !important;

    /* Status Colors */
    --success:         #00D68F !important;
    --success-soft:    rgba(0,214,143,0.1) !important;
    --success-border:  rgba(0,214,143,0.25) !important;
    --theme-success:   #00D68F !important;
    --theme-success-light: rgba(0,214,143,0.1) !important;

    --warning:         #FFB627 !important;
    --warning-soft:    rgba(255,182,39,0.1) !important;
    --warning-border:  rgba(255,182,39,0.25) !important;
    --theme-warning:   #FFB627 !important;
    --theme-warning-light: rgba(255,182,39,0.1) !important;

    --danger-soft:     rgba(255,92,106,0.1) !important;
    --danger-border:   rgba(255,92,106,0.25) !important;
    --theme-danger:    #FF5C6A !important;
    --theme-danger-light: rgba(255,92,106,0.1) !important;
    --logout-red:      #FF5C6A !important;

    /* Shadows */
    --shadow:          0 8px 24px rgba(0,0,0,0.4) !important;
    --shadow-xs:       0 1px 4px rgba(0,0,0,0.3) !important;
    --shadow-sm:       0 4px 12px rgba(0,0,0,0.35) !important;
    --shadow-md:       0 8px 24px rgba(0,0,0,0.4) !important;
    --shadow-lg:       0 16px 40px rgba(0,0,0,0.45) !important;
    --shadow-light:    0 8px 24px rgba(0,0,0,0.4) !important;
    --shadow-primary:  0 8px 28px rgba(26,143,209,0.3) !important;

    /* Gradients */
    --gradient-primary: linear-gradient(135deg, #2BB5F0 0%, #0A7CC4 100%) !important;
    --font: 'Space Grotesk', sans-serif !important;
}

/* ========= CARDS & CONTAINERS ========= */
.history-card,
.card, .xl-card,
.service-card,
.auth-container,
.modal-card,
.info-card,
.order-card {
    background: #0F1420 !important;
    border: 1px solid rgba(43,181,240,0.13) !important;
    color: #EEF2FA !important;
}

/* ========= TABLE STYLING ========= */
.table th {
    background: #111827 !important;
    color: rgba(150,170,200,0.7) !important;
    border-bottom: 1px solid rgba(43,181,240,0.15) !important;
}

.table td {
    border-bottom: 1px solid rgba(43,181,240,0.08) !important;
    color: #EEF2FA !important;
}

.table tr:hover td {
    background: rgba(43,181,240,0.05) !important;
}

/* Card header */
.card-header {
    background: #111827 !important;
    border-bottom: 1px solid rgba(43,181,240,0.12) !important;
    color: #EEF2FA !important;
}

.card-header h3, .card-header h2 {
    color: #EEF2FA !important;
}

/* ========= INPUTS & SELECTS ========= */
input, select, textarea {
    background: #0A0E18 !important;
    border: 1px solid rgba(43,181,240,0.15) !important;
    color: #EEF2FA !important;
    border-radius: 10px !important;
}

input:focus, select:focus, textarea:focus {
    border-color: #1A8FD1 !important;
    box-shadow: 0 0 0 3px rgba(26,143,209,0.2) !important;
    outline: none !important;
}

input::placeholder, textarea::placeholder {
    color: rgba(120,145,175,0.45) !important;
}

/* ========= PAGE HEADER BANNER ========= */
.page-header {
    background: linear-gradient(135deg, #1A8FD1 0%, #0A7CC4 100%) !important;
    color: #fff !important;
    border-radius: 18px !important;
}

/* ========= BUTTONS ========= */
.xl-btn-buy,
.btn-primary,
.btn-auth,
.cta-button,
.xl-btn-search,
.xl-btn-load-more:hover,
.empty-btn {
    background: linear-gradient(135deg, #2BB5F0 0%, #0A7CC4 100%) !important;
    color: #fff !important;
    border: none !important;
    font-family: 'Space Grotesk', sans-serif !important;
    font-weight: 700 !important;
}

.xl-btn-outline,
.header-btn,
.btn-action {
    background: rgba(26,143,209,0.08) !important;
    border: 1px solid rgba(43,181,240,0.2) !important;
    color: rgba(180,200,225,0.8) !important;
    font-family: 'Space Grotesk', sans-serif !important;
}

.xl-btn-outline:hover, .header-btn:hover {
    background: rgba(26,143,209,0.18) !important;
    color: #2BB5F0 !important;
    border-color: rgba(43,181,240,0.4) !important;
}

/* Cancel button */
.btn-cancel {
    background: rgba(255,92,106,0.1) !important;
    color: #FF5C6A !important;
    border: 1px solid rgba(255,92,106,0.25) !important;
}

/* ========= BADGES / STATUS PILLS ========= */
.badge.completed, .badge-success, .xl-badge-stock {
    background: rgba(0,214,143,0.1) !important;
    color: #00D68F !important;
    border: 1px solid rgba(0,214,143,0.25) !important;
}

.badge.pending, .badge-warning {
    background: rgba(255,182,39,0.1) !important;
    color: #FFB627 !important;
    border: 1px solid rgba(255,182,39,0.25) !important;
}

.badge.cancelled, .badge.expired, .badge-danger {
    background: rgba(255,92,106,0.1) !important;
    color: #FF5C6A !important;
    border: 1px solid rgba(255,92,106,0.25) !important;
}

.stats-badge {
    background: rgba(43,181,240,0.1) !important;
    color: #2BB5F0 !important;
}

/* ========= CATEGORY SIDEBAR (buy_logs) ========= */
.xl-cat-sidebar {
    background: #111827 !important;
    border-right: 1px solid rgba(43,181,240,0.12) !important;
}

.xl-cat-head {
    background: #0F1420 !important;
    border-bottom: 1px solid rgba(43,181,240,0.1) !important;
}

.xl-cat-item {
    color: rgba(180,200,225,0.7) !important;
}

.xl-cat-item:hover {
    background: rgba(43,181,240,0.06) !important;
    color: #EEF2FA !important;
}

.xl-cat-item.active {
    background: rgba(26,143,209,0.12) !important;
    color: #2BB5F0 !important;
    border-right-color: #2BB5F0 !important;
}

/* ========= FILTER BAR ========= */
.xl-filter-bar {
    background: #111827 !important;
    border: 1px solid rgba(43,181,240,0.1) !important;
}

/* ========= MAIN CONTENT LAYOUT ========= */
.main-content, main.xl-main {
    background: #07090E !important;
}

/* ========= SWAL / SWEETALERT DARK SKIN ========= */
.swal2-popup {
    background: #0F1420 !important;
    border: 1px solid rgba(43,181,240,0.15) !important;
    color: #EEF2FA !important;
    border-radius: 22px !important;
}

.swal2-title {
    color: #EEF2FA !important;
}

.swal2-html-container {
    color: rgba(180,200,225,0.75) !important;
}

.swal2-confirm {
    background: linear-gradient(135deg, #2BB5F0, #0A7CC4) !important;
    border-radius: 12px !important;
    font-weight: 700 !important;
}

.swal2-cancel {
    background: #1A2030 !important;
    border: 1px solid rgba(43,181,240,0.15) !important;
    color: rgba(180,200,225,0.7) !important;
    border-radius: 12px !important;
}

/* ========= EMPTY STATE ========= */
.xl-empty, .empty-state {
    color: rgba(150,170,200,0.55) !important;
}

.xl-empty-icon, .empty-icon {
    background: #111827 !important;
    border: 1px solid rgba(43,181,240,0.12) !important;
    color: rgba(120,145,175,0.4) !important;
}

/* ========= SMS DISPLAY ========= */
.sms-display {
    background: #111827 !important;
    border: 1px dashed rgba(43,181,240,0.2) !important;
}

.sms-code-text {
    color: #00D68F !important;
}

.waiting-sms {
    background: rgba(255,182,39,0.08) !important;
    color: #FFB627 !important;
}

/* ========= PAGINATION ========= */
.pagination .btn, .pagination a {
    background: #0F1420 !important;
    border: 1px solid rgba(43,181,240,0.15) !important;
    color: #2BB5F0 !important;
    border-radius: 10px !important;
    padding: 8px 16px !important;
    text-decoration: none !important;
    font-weight: 600 !important;
    transition: all 0.25s !important;
}

.pagination .btn:hover, .pagination a:hover {
    background: rgba(43,181,240,0.15) !important;
    border-color: #2BB5F0 !important;
}

.pagination .page-info {
    color: rgba(150,170,200,0.6) !important;
    font-size: 0.85rem !important;
}

/* ========= SCROLLBAR ========= */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: #07090E; }
::-webkit-scrollbar-thumb { background: rgba(43,181,240,0.2); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: rgba(43,181,240,0.4); }