/* =====================================================
   SCORELOCK – MODERN PROFESSIONAL UI
   Tech: Bootstrap 5.3 + jQuery
   ===================================================== */

/* -------------------------------
   1. ROOT VARIABLES
-------------------------------- */
:root {
    --sl-primary: #0b2a63;
    --sl-primary-rgb: 11, 31, 59;

    --sl-secondary: #1FBF75;
    --sl-secondary-rgb: 31, 191, 117;

    --sl-accent: #ffde59;
    --sl-accent-rgb: 255, 222, 89;

    --sl-indigo: #667eea;
    --sl-indigo-rgb: 102, 126, 234;

    --sl-bg: #F5F7FA;
    --sl-white: #FFFFFF;

    --sl-text-main: #1E1E1E;
    --sl-text-muted: #6B7280;

    --sl-border: #E5E7EB;

    --sl-success: #1FBF75;
    --sl-warning: #F59E0B;
    --sl-danger: #E5533D;
    --sl-info: #3B82F6;

    --sl-yellow-pastel: #f7ec59;
    --sl-yellow-pastel-rgb: 247, 236, 89;

    --sl-radius-sm: 6px;
    --sl-radius-md: 10px;
    --sl-radius-lg: 14px;

    --sl-shadow-sm: 0 1px 2px rgba(0,0,0,.05);
    --sl-shadow-md: 0 4px 10px rgba(0,0,0,.08);
}

/* -------------------------------
   2. GLOBAL RESET
-------------------------------- */
body {
    background-color: var(--sl-bg);
    color: var(--sl-text-main);
    font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 16px;
    line-height: 1.6;
}

a {
    text-decoration: none;
    color: var(--sl-primary);
}

a:hover {
    color: #08162a;
}

/* -------------------------------
   3. PAGE CONTAINERS
-------------------------------- */
.sl-page {
    padding: 24px 16px 120px;
}

.sl-card {
    background: var(--sl-white);
    border-radius: var(--sl-radius-md);
    box-shadow: var(--sl-shadow-md);
    border: 2px solid var(--sl-border);
    padding: 24px;
    margin-bottom: 20px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.sl-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.12);
}

.sl-card-header {
    font-weight: 700;
    font-size: 18px;
    margin-bottom: 16px;
    color: var(--sl-primary);
}

/* -------------------------------
   4. BUTTONS
-------------------------------- */
.btn-sl-primary,
.btn.btn-primary {
    background-color: var(--sl-primary) !important;
    color: #fff !important;
    border-radius: var(--sl-radius-sm);
    padding: 12px 24px;
    border: none !important;
    font-weight: 600;
    transition: all 0.2s ease;
}

.btn-sl-primary:hover,
.btn.btn-primary:hover {
    background-color: #08162a !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(11, 31, 59, 0.3);
}

.btn-sl-secondary,
.btn.btn-success {
    background-color: var(--sl-secondary) !important;
    color: #fff !important;
    border-radius: var(--sl-radius-sm);
    padding: 12px 24px;
    border: none !important;
    font-weight: 600;
    transition: all 0.2s ease;
}

.btn-sl-secondary:hover,
.btn.btn-success:hover {
    background-color: #17a765 !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(31, 191, 117, 0.3);
}

.btn-sl-outline {
    border: 2px solid var(--sl-primary) !important;
    color: var(--sl-primary) !important;
    background: transparent !important;
    border-radius: var(--sl-radius-sm);
    padding: 12px 24px;
    font-weight: 600;
    transition: all 0.2s ease;
}

.btn-sl-outline:hover {
    background-color: var(--sl-primary) !important;
    color: #fff !important;
}

/* Disabled */
.btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* -------------------------------
   5. TABLES (FIFA STYLE)
-------------------------------- */
.sl-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}

.sl-table thead th {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--sl-text-muted);
    padding: 10px;
    border-bottom: 1px solid var(--sl-border);
}

.sl-table tbody tr {
    background: #fff;
}

.sl-table tbody tr + tr {
    border-top: 1px solid var(--sl-border);
}

.sl-table td {
    padding: 12px 10px;
    vertical-align: middle;
}

.sl-table td.numeric {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* -------------------------------
   6. STATUS BADGES
-------------------------------- */
.sl-badge {
    display: inline-block;
    padding: 6px 14px;
    font-size: 12px;
    border-radius: 999px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.sl-badge-draft {
    background: linear-gradient(135deg, #E5E7EB 0%, #bfc1c8 100%) !important;
    color: #374151 !important;
}

.sl-badge-closed { background: #FEF3C7; color: #92400E; }

.sl-badge-active {
    background: linear-gradient(135deg, #dae1ff 0%, #667eea 100%) !important;
    color: #fff !important;
}
.sl-badge-success {
    background: linear-gradient(135deg, #DCFCE7 0%, #1FBF75 100%) !important;
    color: #006334;
}
.sl-badge-failed {
    background: linear-gradient(135deg, #FFE3E0 0%, #EF6351 100%) !important;
    color: #ae1500;
}

.sl-badge-info {background-color: #d1e8ff;color: #296EB4;}
.sl-text-info, .text-info--hover:hover {color: #296EB4 !important;}

.sl-badge-indigo {background-color: #dae1ff;color: #667eea;}
.sl-text-indigo, .text-info--hover:hover {color: #667eea !important;}

.sl-badge-yellow-pastel {background-color: var(--sl-yellow-pastel);color: #2B2D42;}
.sl-text-yellow-pastel, .text-yellow-pastel--hover:hover {color: var(--sl-yellow-pastel) !important;}
.sl-card-yellow-pastel {background-color: var(--sl-yellow-pastel) !important;color: #2B2D42 !important;}

.sl-badge-melon {background-color: #FFE3E0;color: #EF6351;}


/* Bootstrap badge overrides */
.badge {
    padding: 6px 14px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
}

/* -------------------------------
   7. MATCH CARD (USER SIDE)
-------------------------------- */
.sl-match-card {
    background: linear-gradient(135deg, #F5F7FA 0%, #fdeff2 100%) !important;
    border-radius: var(--sl-radius-lg);
    padding: 20px;
    border: 2px solid var(--sl-border);
    box-shadow: var(--sl-shadow-md);
    cursor: pointer;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.sl-match-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 30px rgba(0,0,0,0.15);
    border-color: var(--sl-secondary);
}

.sl-match-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--sl-primary);
}

.sl-match-meta {
    font-size: 13px;
    color: var(--sl-text-muted);
    margin-top: 6px;
}

.sl-match-card-sm {
    padding: 14px;
    border-radius: 14px;
}

.sl-match-teams {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 8px 0 10px;
}

.sl-match-teams .team {
    text-align: center;
    flex: 1;
}

.sl-match-teams .flag {
    font-size: 2.65rem;
    line-height: 1;
}

.sl-match-teams .name {
    display: block;
    margin-top: 0px;
    font-size: 1rem !important;
    font-weight: 600;
}

.sl-match-teams .vs {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--sl-primary);
    padding: 0 6px;
}

.sl-match-meta {
    border-top: 1px solid var(--sl-border);
    padding-top: 8px;
    display: grid;
    grid-template-columns: 1fr;
    gap: 6px;
    font-size: 0.8rem;
}

.sl-match-meta i {
    color: var(--sl-secondary);
    margin-right: 6px;
}

.sl-match-meta .reward {
    color: var(--sl-success);
    font-weight: 600;
}

.btn-sm {
    padding: 8px 12px;
    font-size: 0.9rem;
    border-radius: 10px;
}

/* -------------------------------
   8. BOTTOM DOCK (NAVIGATION)
-------------------------------- */
.sl-dock {
    position: fixed;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%);
    background: #fff;
    border-radius: 999px;
    box-shadow: var(--sl-shadow-md);
    padding: 10px 16px;
    display: flex;
    gap: 20px;
    z-index: 999;
}

.sl-dock-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 11px;
    color: var(--sl-text-muted);
}

.sl-dock-item.active {
    color: var(--sl-primary);
}

.sl-dock-item i {
    font-size: 18px;
    margin-bottom: 2px;
}

/* -------------------------------
   9. FORMS
-------------------------------- */
.form-control,
.form-select {
    border-radius: var(--sl-radius-sm);
    border: 2px solid var(--sl-border);
    font-size: 15px;
    padding: 12px 16px;
    transition: all 0.2s ease;
}

.form-control:focus,
.form-select:focus {
    border-color: var(--sl-primary) !important;
    box-shadow: 0 0 0 4px rgba(11, 31, 59, 0.1) !important;
    outline: none !important;
}

.form-label {
    font-weight: 600;
    color: var(--sl-text-main);
    margin-bottom: 8px;
}

/* -------------------------------
   10. MONEY TRANSFER STATES
-------------------------------- */
.sl-transfer-success {
    color: var(--sl-success);
}

.sl-transfer-pending {
    color: var(--sl-warning);
}

.sl-transfer-failed {
    color: var(--sl-danger);
}

/* -------------------------------
   11. UTILITIES
-------------------------------- */
.sl-muted {
    color: var(--sl-text-muted);
}

.sl-divider {
    height: 1px;
    background: var(--sl-border);
    margin: 16px 0;
}

/* -------------------------------
   12. GLOBAL BOOTSTRAP OVERRIDES
-------------------------------- */

/* Navbar enhancements */
.navbar {
    box-shadow: var(--sl-shadow-md);
}

.navbar-brand {
    font-weight: 700 !important;
    font-size: 1.5rem !important;
}

/* Alert enhancements */
.alert {
    --bs-alert-border: 0 solid var(--bs-alert-border-color);
    --bs-alert-bg: transparent;
    --bs-alert-padding-x: 1rem;
    --bs-alert-padding-y: 1rem;
    --bs-alert-margin-bottom: 1rem;
    --bs-alert-color: inherit;
    --bs-alert-border-color: transparent;
    --bs-alert-border-radius: var(--bs-border-radius);
    --bs-alert-link-color: inherit;
    border-radius: var(--sl-radius-md) !important;
    font-weight: 500;
    padding: 16px 20px !important;
    border: none !important;
}

.alert-success {
    background-color: rgba(31, 191, 117, 0.1) !important;
    border-color: var(--sl-success) !important;
    color: #166534 !important;
}

.alert-danger {
    background-color: rgba(229, 83, 61, 0.1) !important;
    border-color: var(--sl-danger) !important;
    color: #991B1B !important;
}

.alert-info {
    background: linear-gradient(135deg, #a1c4fd 0%, #c2e9fb 100%) !important;
    border-color: transparent !important;
    color: #0553d1 !important;
}

.alert-warning {
    background-color: rgba(245, 158, 11, 0.1) !important;
    border-color: var(--sl-warning) !important;
    color: #92400E !important;
}

/* Card enhancements for Bootstrap cards */
.card {
    border-radius: var(--sl-radius-md) !important;
    border: 0 solid var(--sl-border) !important;
    box-shadow: var(--sl-shadow-sm) !important;
}

.card-header {
    background-color: var(--sl-bg) !important;
    border-bottom: 2px solid var(--sl-border) !important;
    font-weight: 700;
    padding: 16px 20px !important;
}

/* Table enhancements */
.table {
    border-radius: var(--sl-radius-sm);
}

.table thead th {
    background-color: var(--sl-bg) !important;
    border-bottom: 2px solid var(--sl-border) !important;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 12px;
    letter-spacing: 0.5px;
    padding: 14px 12px !important;
}

.table tbody tr {
    transition: background-color 0.15s ease;
}

.table tbody tr:hover {
    background-color: rgba(11, 31, 59, 0.02) !important;
}

/* Modal enhancements */
.modal-content {
    border-radius: var(--sl-radius-lg) !important;
    border: none !important;
    box-shadow: 0 20px 60px rgba(0,0,0,0.3) !important;
}

.modal-header {
    border-bottom: 2px solid var(--sl-border) !important;
    padding: 20px 24px !important;
}

.modal-footer {
    border-top: 2px solid var(--sl-border) !important;
    padding: 16px 24px !important;
}

/* Input group enhancements */
.input-group-text {
    background-color: var(--sl-bg) !important;
    border: 2px solid var(--sl-border) !important;
    font-weight: 600;
}

/* Pagination */
.pagination .page-link {
    color: var(--sl-primary) !important;
    border: 2px solid var(--sl-border) !important;
    font-weight: 600;
}

.pagination .page-item.active .page-link {
    background-color: var(--sl-primary) !important;
    border-color: var(--sl-primary) !important;
}
.sl-text-primary, .sl-text-primary--hover:hover {color: var(--sl-primary) !important;}
.sl-text-secondary, .sl-text-secondary--hover:hover {color: var(--sl-secondary) !important;}
.sl-text-accent, .sl-text-accent--hover:hover {color: var(--sl-accent) !important;}

.sl-text-success {color: var(--sl-success) !important;}
.sl-text-warning {color: var(--sl-warning) !important;}
.sl-text-danger {color: var(--sl-danger) !important;}

.sl-bg-sky {background: linear-gradient(135deg, #a1c4fd 0%, #c2e9fb 100%) !important;}
.sl-bg-peach {background: linear-gradient(135deg, #fbc2eb 0%, #a6c1ee 100%) !important;}
.sl-bg-light-lime {background: linear-gradient(135deg, #d4fc79 0%, #96e6a1 100%) !important;}
.sl-bg-light-mint {background: linear-gradient(135deg, #90e3c8 0%, var(--sl-secondary) 100%) !important;}
.sl-bg-sand {background: linear-gradient(135deg, #fceabb 0%, #f8b500 100%) !important;}
.sl-bg-light-pink {background: linear-gradient(135deg, #ffdde1 0%, #ee9ca7 100%) !important;}
.sl-bg-light-lavender {background: linear-gradient(135deg, #e0c3fc 0%, #8ec5fc 100%) !important;}

.sl-bg-primary {background: var(--sl-primary) !important}
.sl-bg-secondary {background: var(--sl-secondary) !important}


.lead-0-5 { font-size: 0.5rem !important; }
.lead-0-55 { font-size: 0.55rem !important; }
.lead-0-6 { font-size: 0.6rem !important; }
.lead-0-65 { font-size: 0.65rem !important; }
.lead-0-7 { font-size: 0.7rem !important; }
.lead-0-75 { font-size: 0.75rem !important; }
.lead-0-8 { font-size: 0.8rem !important; }
.lead-0-85 { font-size: 0.85rem !important; }
.lead-0-9 { font-size: 0.9rem !important; }
.lead-0-95 { font-size: 0.95rem !important; }

.lead-1 { font-size: 1rem !important; }
.lead-1-05 { font-size: 1.05rem !important; }
.lead-1-1 { font-size: 1.1rem !important; }
.lead-1-15 { font-size: 1.15rem !important; }
.lead-1-2 { font-size: 1.2rem !important; }
.lead-1-25 { font-size: 1.25rem !important; }
.lead-1-3 { font-size: 1.3rem !important; }
.lead-1-35 { font-size: 1.35rem !important; }
.lead-1-4 { font-size: 1.4rem !important; }
.lead-1-45 { font-size: 1.45rem !important; }
.lead-1-5 { font-size: 1.5rem !important; }
.lead-1-55 { font-size: 1.55rem !important; }
.lead-1-6 { font-size: 1.6rem !important; }
.lead-1-65 { font-size: 1.65rem !important; }
.lead-1-7 { font-size: 1.7rem !important; }
.lead-1-75 { font-size: 1.75rem !important; }
.lead-1-8 { font-size: 1.8rem !important; }
.lead-1-85 { font-size: 1.85rem !important; }
.lead-1-9 { font-size: 1.9rem !important; }
.lead-1-95 { font-size: 1.95rem !important; }

.lead-2 { font-size: 2rem !important; }
.lead-2-05 { font-size: 2.05rem !important; }
.lead-2-1 { font-size: 2.1rem !important; }
.lead-2-15 { font-size: 2.15rem !important; }
.lead-2-2 { font-size: 2.2rem !important; }
.lead-2-25 { font-size: 2.25rem !important; }
.lead-2-3 { font-size: 2.3rem !important; }
.lead-2-35 { font-size: 2.35rem !important; }
.lead-2-4 { font-size: 2.4rem !important; }
.lead-2-45 { font-size: 2.45rem !important; }
.lead-2-5 { font-size: 2.5rem !important; }
.lead-2-55 { font-size: 2.55rem !important; }
.lead-2-6 { font-size: 2.6rem !important; }
.lead-2-65 { font-size: 2.65rem !important; }
.lead-2-7 { font-size: 2.7rem !important; }
.lead-2-75 { font-size: 2.75rem !important; }
.lead-2-8 { font-size: 2.8rem !important; }
.lead-2-85 { font-size: 2.85rem !important; }
.lead-2-9 { font-size: 2.9rem !important; }
.lead-2-95 { font-size: 2.95rem !important; }

.lead-3 { font-size: 3rem !important; }
.lead-3-05 { font-size: 3.05rem !important; }
.lead-3-1 { font-size: 3.1rem !important; }
.lead-3-15 { font-size: 3.15rem !important; }
.lead-3-2 { font-size: 3.2rem !important; }
.lead-3-25 { font-size: 3.25rem !important; }
.lead-3-3 { font-size: 3.3rem !important; }
.lead-3-35 { font-size: 3.35rem !important; }
.lead-3-4 { font-size: 3.4rem !important; }
.lead-3-45 { font-size: 3.45rem !important; }
.lead-3-5 { font-size: 3.5rem !important; }
.lead-3-55 { font-size: 3.55rem !important; }
.lead-3-6 { font-size: 3.6rem !important; }
.lead-3-65 { font-size: 3.65rem !important; }
.lead-3-7 { font-size: 3.7rem !important; }
.lead-3-75 { font-size: 3.75rem !important; }
.lead-3-8 { font-size: 3.8rem !important; }
.lead-3-85 { font-size: 3.85rem !important; }
.lead-3-9 { font-size: 3.9rem !important; }
.lead-3-95 { font-size: 3.95rem !important; }

.lead-4 { font-size: 4rem !important; }

@media (min-width: 768px) {
    .w-md-25 { width: 25% !important; }
    .w-md-33 { width: 33.333333% !important; }
    .w-md-50 { width: 50% !important; }
    .w-md-66 { width: 66.666667% !important; }
    .w-md-75 { width: 75% !important; }
    .w-md-100 { width: 100% !important; }
}

.w-1{width:1%!important}
.w-2{width:2%!important}
.w-3{width:3%!important}
.w-4{width:4%!important}
.w-5{width:5%!important}
.w-6{width:6%!important}
.w-7{width:7%!important}
.w-8{width:8%!important}
.w-9{width:9%!important}
.w-10{width:10%!important}

.w-11{width:11%!important}
.w-12{width:12%!important}
.w-13{width:13%!important}
.w-14{width:14%!important}
.w-15{width:15%!important}
.w-16{width:16%!important}
.w-17{width:17%!important}
.w-18{width:18%!important}
.w-19{width:19%!important}
.w-20{width:20%!important}

.w-21{width:21%!important}
.w-22{width:22%!important}
.w-23{width:23%!important}
.w-24{width:24%!important}
.w-25{width:25%!important}
.w-26{width:26%!important}
.w-27{width:27%!important}
.w-28{width:28%!important}
.w-29{width:29%!important}
.w-30{width:30%!important}

.w-31{width:31%!important}
.w-32{width:32%!important}
.w-33{width:33%!important}
.w-34{width:34%!important}
.w-35{width:35%!important}
.w-36{width:36%!important}
.w-37{width:37%!important}
.w-38{width:38%!important}
.w-39{width:39%!important}
.w-40{width:40%!important}

.w-41{width:41%!important}
.w-42{width:42%!important}
.w-43{width:43%!important}
.w-44{width:44%!important}
.w-45{width:45%!important}
.w-46{width:46%!important}
.w-47{width:47%!important}
.w-48{width:48%!important}
.w-49{width:49%!important}
.w-50{width:50%!important}

.w-51{width:51%!important}
.w-52{width:52%!important}
.w-53{width:53%!important}
.w-54{width:54%!important}
.w-55{width:55%!important}
.w-56{width:56%!important}
.w-57{width:57%!important}
.w-58{width:58%!important}
.w-59{width:59%!important}
.w-60{width:60%!important}

.w-61{width:61%!important}
.w-62{width:62%!important}
.w-63{width:63%!important}
.w-64{width:64%!important}
.w-65{width:65%!important}
.w-66{width:66%!important}
.w-67{width:67%!important}
.w-68{width:68%!important}
.w-69{width:69%!important}
.w-70{width:70%!important}

.w-71{width:71%!important}
.w-72{width:72%!important}
.w-73{width:73%!important}
.w-74{width:74%!important}
.w-75{width:75%!important}
.w-76{width:76%!important}
.w-77{width:77%!important}
.w-78{width:78%!important}
.w-79{width:79%!important}
.w-80{width:80%!important}

.w-81{width:81%!important}
.w-82{width:82%!important}
.w-83{width:83%!important}
.w-84{width:84%!important}
.w-85{width:85%!important}
.w-86{width:86%!important}
.w-87{width:87%!important}
.w-88{width:88%!important}
.w-89{width:89%!important}
.w-90{width:90%!important}

.w-91{width:91%!important}
.w-92{width:92%!important}
.w-93{width:93%!important}
.w-94{width:94%!important}
.w-95{width:95%!important}
.w-96{width:96%!important}
.w-97{width:97%!important}
.w-98{width:98%!important}
.w-99{width:99%!important}
.w-100{width:100%!important}