/*
    === CORPORATE DESIGN SYSTEM ===

    Q: Why is there a border at the top of the sidebar?
    A: There should NOT be a border at the top of the sidebar. The sidebar's border is only on the right side, as defined below.
    If you are seeing a border at the top, check for:
      - Inherited styles from other CSS files
      - Browser default styles
      - The .logo-wrapper previously had a border-bottom, but it is set to 0px here (effectively no border)
*/

/* === CORPORATE DESIGN SYSTEM === */

:root {
    --primary-color: #5A6F9C;
    --secondary-color: #6A7DAA;
    --accent-blue: #7A8BB8;
    --accent-orange: #DD6B20;
    --accent-orange-muted: #ED8936;
    --accent-orange-light: #F6AD55;
    --success-color: #38A169;
    --warning-color: #D69E2E;
    --danger-color: #E53E3E;
    --light-bg: #F8FAFC;
    --card-bg: #FFFFFF;
    --border-color: #E2E8F0;
    --text-primary: #000000; /* Pure black for maximum clarity */
    --text-muted: #000000; /* Pure black for muted text too */
    --text-light: #000000; /* Pure black for light text */
    --gradient-primary: linear-gradient(135deg, #5A6F9C, #6A7DAA);
    --gradient-secondary: linear-gradient(135deg, #6A7DAA, #7A8BB8);
    --gradient-accent: linear-gradient(135deg, #7A8BB8, #8DA1C6);
    --gradient-light: linear-gradient(135deg, #8DA1C6, #A4B8D4);
    --gradient-success: linear-gradient(135deg, #38A169, #48BB78);
    --gradient-warning: linear-gradient(135deg, #D69E2E, #ECC94B);
    --gradient-orange: linear-gradient(135deg, #DD6B20, #ED8936);
    --gradient-orange-muted: linear-gradient(135deg, #ED8936, #F6AD55);
}

.tooltip-inner {
    color: #ffffff !important;
}

body {
    font-family: 'Inter', sans-serif;
    background-color: var(--light-bg);
    color: #000000 !important;
    font-size: 0.875rem;
    font-weight: 700 !important; /* Bold for maximum visibility */
    line-height: 1.5; /* Improved line height for readability */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Force dark text on all content areas - navigation elements are handled separately */
.content-area, .content-area * {
    color: #000000 !important;
    font-weight: 700 !important;
}

/* Force all text elements to use darker colors */
body, p, div, span, li, td, th, label, input:not([type="submit"]):not([type="button"]), textarea, select, h1, h2, h3, h4, h5, h6, .card, .card-body, .card-header, .card-title, .card-text, .table, .table td, .table th, .form-label, .form-control, .form-select, .btn:not(.corporate-btn-primary):not(.btn-primary), code, pre, .small, small {
    color: #000000 !important;
    font-weight: 700 !important;
}

/* Ensure links use darker colors unless they're in navigation */
a:not(.nav-link):not(.dropdown-item):not(.sidebar-nav a) {
    color: var(--text-primary);
}

a:not(.nav-link):not(.dropdown-item):not(.sidebar-nav a):hover {
    color: var(--primary-color);
}

/* === MAIN LAYOUT === */
.main-layout {
    display: flex;
    min-height: 100vh;
    margin-top: 60px;
    position: relative;
}

/* === NAVBAR CENTER CONTENT === */
.navbar-center {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
}

.navbar-top .container-fluid {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
}

/* === LOGO WRAPPER === */
.logo-wrapper {
    position: fixed;
    top: 5px; /* Position logo 5px down from the top */
    left: 0;
    width: 250px;
    height: 100px;
    z-index: 1051;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none !important; /* Remove all borders */
    border-bottom: 0px solid rgba(255, 255, 255, 0.1); /* No border at the bottom */
    box-shadow: none !important; /* Remove any box shadows */
    outline: none !important; /* Remove any outlines */
    /* Match the navbar/sidebar gradient */
}


.sidebar-logo-overlapping {
    max-height: 90px;
    width: auto;
    margin: 0;  /* ensure no spacing */
    padding: 0;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
}

/* Overlapping Logo Effect */
.sidebar-logo-overlap {
    position: absolute;
    top: 5px; /* Position logo to start 5px down from the top */
    left: 0;
    width: 100%;
    padding: 0.5rem 0;
    z-index: 1050; /* Higher than navbar (1030) to appear in front */
}


/* === SIDEBAR === */
.sidebar {
    position: fixed;
    top: 0;
    left: 0;
    width: 250px;
    height: 100vh;
    background: var(--gradient-primary); /* Same background as navbar */
    flex-shrink: 0;
    overflow-y: auto;
    overflow-x: hidden;
    transition: width 0.3s ease;
    border-right: 1px solid rgba(255, 255, 255, 0.1); /* Only right border */
    box-shadow: 2px 0 4px rgba(90, 111, 156, 0.08);
    z-index: 1020; /* Below navbar (1030) but above content */
    padding-top: 60px; /* Account for navbar height */
}

.sidebar.collapsed {
    width: 60px;
}

/* Sidebar Logo at top */
.sidebar-logo {
    padding: 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    margin-bottom: 0.5rem;
}

.sidebar-logo a {
    text-decoration: none;
    display: flex;
    align-items: center;
    color: white;
}

.sidebar-logo a:hover {
    opacity: 0.9;
}

.sidebar-logo img {
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
}

/* Ensure sidebar navigation starts below logo */
.sidebar-nav {
    padding-top: 0.5rem;
}

.sidebar.collapsed ~ .content-area {
    margin-left: 60px;
}

/* Adjust navbar when sidebar is collapsed - handled via body class or JavaScript */
body.sidebar-collapsed .navbar-top {
    left: 60px;
}

.sidebar-inner {
    /* Increased padding-top to 10rem to push sidebar text further down.
       If this still has no effect, check for specificity issues or if another rule is overriding this one.
       You may need to use !important or increase selector specificity. */
    padding-top: 6rem !important;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}

/* Remove bullets from sidebar navigation */
.sidebar-nav,
.sidebar-nav ul,
.sidebar-nav li {
    list-style: none !important;
    margin: 0;
    padding: 0;
}

/* Lower the starting position of sidebar nav text */
.sidebar-nav .nav-link {
    color: rgba(255, 255, 255, 0.8);
    padding: 1.25rem 1rem 0.75rem 1rem; /* Increased top padding from 1.25rem to 2.25rem */
    display: flex;
    align-items: center;
    font-size: 1rem;
    font-weight: 500;
    transition: all 0.2s ease;
}

.sidebar-nav .nav-link.active {
    color: white;
    background: rgba(255, 255, 255, 0.15);
    border-right: 3px solid white;
}

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

.sidebar-nav .nav-link i {
    width: 20px;
    margin-right: 0.75rem;
}

.sidebar.collapsed .sidebar-nav .nav-link span,
.sidebar.collapsed .sidebar-section-title {
    display: none;
}

.sidebar.collapsed .sidebar-logo span,
.sidebar.collapsed .sidebar-logo .badge {
    display: none;
}

.sidebar.collapsed .sidebar-logo {
    padding: 1rem 0.5rem;
    justify-content: center;
}

.sidebar.collapsed .sidebar-nav .nav-link {
    text-align: center;
    padding: 0.75rem 0.5rem;
}

.sidebar.collapsed .sidebar-nav .nav-link i {
    margin-right: 0;
    font-size: 1rem;
}

/* Sidebar dropdown menu styling - expand downward inline */
.sidebar-nav .dropdown-menu {
    position: static !important;
    float: none !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
    display: none;
    overflow: hidden;
    transition: all 0.3s ease;
}

.sidebar-nav .dropdown-menu.show {
    display: block !important;
}

.sidebar-nav .dropdown-item {
    color: rgba(255, 255, 255, 0.8);
    padding: 1rem 1rem 1rem 2.5rem; /* Indent submenu items */
    font-size: 0.95rem;
    font-weight: 500;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    background: transparent;
    border: none;
    width: 100%;
    text-align: left;
}

.sidebar-nav .dropdown-item:hover {
    color: white;
    background: rgba(255, 255, 255, 0.1);
    transform: translateX(4px); /* Slight indent on hover */
}

.sidebar-nav .dropdown-item.active {
    color: white;
    background: rgba(255, 255, 255, 0.15);
    border-right: 3px solid white;
    font-weight: 600;
}

.sidebar-nav .dropdown-toggle {
    position: relative;
}

.sidebar-nav .dropdown-toggle::after {
    content: '▼';
    margin-left: auto;
    font-size: 0.7rem;
    transition: transform 0.3s ease;
    border: none;
    vertical-align: middle;
    display: inline-block;
}

.sidebar-nav .dropdown-toggle[aria-expanded="true"]::after {
    transform: rotate(180deg);
}

/* Ensure dropdown items don't have Bootstrap default styling */
.sidebar-nav .dropdown-item:focus,
.sidebar-nav .dropdown-item:active {
    background: rgba(255, 255, 255, 0.15);
    color: white;
}

/* Style the dropdown toggle when active/expanded */
.sidebar-nav .dropdown-toggle[aria-expanded="true"] {
    background: rgba(255, 255, 255, 0.15);
    border-right: 3px solid white;
}

/* Prevent Bootstrap from positioning dropdown absolutely in sidebar */
.sidebar-nav .dropdown {
    position: static;
}

/* Override Bootstrap's dropdown positioning for sidebar */
.sidebar-nav .dropdown-menu[data-bs-popper] {
    position: static !important;
    transform: none !important;
    top: auto !important;
    left: auto !important;
}

/* === NAVBAR TOP === */
.navbar-top {
    background: var(--gradient-primary);
    border: none !important; /* Remove all borders */
    border-bottom: none !important; /* Explicitly ensure no bottom border */
    border-top: none !important; /* Explicitly ensure no top border */
    border-left: none !important; /* Explicitly ensure no left border */
    border-right: none !important; /* Explicitly ensure no right border */
    padding: 0.25rem 0.75rem;
    height: 60px;
    position: fixed;
    top: 0;
    left: 250px; /* Start after sidebar */
    right: 0;
    z-index: 1030; /* Above sidebar */
    display: flex;
    align-items: center;
    box-shadow: none !important; /* Remove any box shadows */
    outline: none !important; /* Remove any outlines */
    transition: left 0.3s ease; /* Smooth transition when sidebar collapses */
    justify-content: flex-end; /* Push content to the right */
}

/* Navbar content styling */
.navbar-top .container-fluid {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
}

.navbar-top .navbar-nav {
    display: flex;
    align-items: center;
    margin: 0;
}

.navbar-top .nav-link {
    color: rgba(255, 255, 255, 0.9);
    padding: 0.5rem 0.75rem;
    border-radius: 6px;
    transition: all 0.2s ease;
}

.navbar-top .nav-link:hover {
    color: white;
    background: rgba(255, 255, 255, 0.1);
}

.navbar-top .dropdown-toggle {
    display: flex;
    align-items: center;
    color: rgba(255, 255, 255, 0.9);
    text-decoration: none;
}

.navbar-top .dropdown-toggle:hover {
    color: white;
}

.navbar-top .dropdown-menu {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    margin-top: 0.5rem;
}

.navbar-top .dropdown-item {
    color: var(--text-primary);
    padding: 0.5rem 1rem;
    transition: all 0.2s ease;
}

.navbar-top .dropdown-item:hover {
    background: var(--light-bg);
    color: var(--text-primary);
}

/* Stats styling in navbar */
.navbar-stats {
    display: flex;
    align-items: center;
    gap: 1rem;
}

/* Task Status Indicator */
.task-status-indicator {
    display: flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 0.5rem 0.75rem;
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.8rem;
    border: 1px solid rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    transition: all 0.3s ease;
}

.task-status-indicator:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.3);
}

.task-status-content {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.task-status-icon {
    display: flex;
    align-items: center;
    color: rgba(255, 255, 255, 0.9);
}

.task-status-icon i {
    font-size: 0.9rem;
}

.task-status-text {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.task-status-title {
    font-weight: 500;
    line-height: 1;
    color: rgba(255, 255, 255, 0.95);
}

.task-status-progress .progress {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 2px;
}

.task-status-progress .progress-bar {
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.9));
    border-radius: 2px;
    transition: width 0.3s ease;
}

.task-status-details {
    font-size: 0.7rem;
    line-height: 1.2;
    margin-top: 0.1rem;
}

.task-status-step {
    color: rgba(255, 255, 255, 0.8) !important;
    font-style: italic;
}

.task-status-time {
    font-size: 0.65rem;
    margin-top: 0.1rem;
}

.task-start-time {
    font-weight: 500;
}

.stat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.stat-number {
    font-size: 0.875rem;
    font-weight: 600;
    color: white;
    line-height: 1;
}

.stat-label {
    font-size: 0.625rem;
    color: rgba(255, 255, 255, 0.7);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 0.125rem;
}

/* Betfair Balance Styling */
.betfair-balance {
    position: relative;
    padding: 0.5rem 0.75rem;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    transition: all 0.3s ease;
}

.betfair-balance:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.3);
}

.betfair-balance.demo-mode {
    background: rgba(255, 193, 7, 0.1);
    border-color: rgba(255, 193, 7, 0.3);
}

.betfair-balance.demo-mode:hover {
    background: rgba(255, 193, 7, 0.15);
    border-color: rgba(255, 193, 7, 0.4);
}

.betfair-balance .stat-number {
    font-size: 0.9rem;
    font-weight: 700;
    color: white;
}

.betfair-balance .stat-label {
    font-size: 0.65rem;
    color: rgba(255, 255, 255, 0.9);
    margin-top: 0.1rem;
    text-transform: none;
    letter-spacing: normal;
}

.betfair-balance small {
    font-size: 0.6rem;
    margin-top: 0.1rem;
    opacity: 0.8;
}

/* Override any Bootstrap navbar borders */
.navbar {
    border: none !important;
}

.navbar-dark {
    border: none !important;
}

/* Ensure no borders on any navigation elements */
.navbar-nav,
.nav-item,
.nav-link {
    border: none !important;
}

/* Ensure no borders on container elements */
.container-fluid {
    border: none !important;
}

/* Ensure no borders on dropdown elements */
.dropdown-menu {
    border: none !important;
}

.dropdown-item {
    border: none !important;
}

/* Additional Bootstrap navbar overrides */
.navbar-expand-lg {
    border: none !important;
}

.navbar > .container-fluid {
    border: none !important;
}

/* Override any potential Bootstrap border utilities */
.border-0 {
    border: none !important;
}

/* Ensure no borders on any Bootstrap components */
.btn,
.form-control,
.card,
.list-group {
    border: none !important;
}

.navbar-top .avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.2);
    transition: 0.2s ease;
}

.navbar-top .avatar:hover {
    border-color: rgba(255, 255, 255, 0.4);
    transform: scale(1.05);
}

.navbar-top .dropdown-toggle {
    padding: 0.5rem;
    color: white;
    border-radius: 6px;
    transition: all 0.2s ease;
}

.navbar-top .dropdown-toggle:hover {
    background: rgba(255, 255, 255, 0.1);
}

.navbar-top .dropdown-toggle::after {
    display: none;
}

/* === MAIN CONTENT === */
.content-area {
    flex: 1;
    margin-left: 250px; /* Account for fixed sidebar width */
    padding: 1rem;
    background: var(--light-bg);
    overflow-y: auto;
    transition: all 0.3s ease;
    min-height: calc(100vh - 60px); /* Full height minus navbar */
}

.content-area.expanded {
    /* When sidebar is collapsed, content adjusts */
    margin-left: 60px;
}

/* Ensure proper spacing for non-authenticated users */
body:not(.authenticated) .content-area {
    margin-left: 250px;
}

/* === RESPONSIVE === */
@media (max-width: 991.98px) {
    .main-layout {
        position: relative;
    }
    
    .navbar-top {
        left: 0 !important; /* Full width on mobile */
    }
    
    .sidebar {
        position: fixed;
        top: 0;
        left: 0;
        height: 100vh;
        transform: translateX(-100%);
        z-index: 1000;
    }
    
    .sidebar.show {
        transform: translateX(0);
        z-index: 1040; /* Above navbar on mobile when shown */
    }
    
    .content-area {
        width: 100%;
        margin-left: 0 !important;
    }
    
    .logo-wrapper {
        width: 100%;
    }
    
    /* Mobile sidebar overlay */
    .sidebar-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.5);
        z-index: 999;
        opacity: 0;
        visibility: hidden;
        transition: all 0.3s ease;
    }
    
    .sidebar-overlay.show {
        opacity: 1;
        visibility: visible;
    }
}

/* Sidebar toggle button styling */
.sidebar-toggle {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.8);
    padding: 0.5rem;
    border-radius: 6px;
    transition: all 0.2s ease;
    cursor: pointer;
}

.sidebar-toggle:hover {
    color: white;
    background: rgba(255, 255, 255, 0.1);
}

/* === FOOTER === */
.footer {
    background: var(--card-bg);
    border-top: none; /* Removed border-top to eliminate unwanted line */
    padding: 1.5rem 0;
    margin-top: auto;
}

.footer-logo {
    max-height: 40px;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1));
}

/* === A11Y & UTILITIES === */
[aria-current="page"] {
    font-weight: 600;
    text-decoration: underline;
}

:focus-visible {
    outline: 2px solid var(--accent-orange);
    outline-offset: 2px;
}

/* === FILTER BAR COMPONENTS === */

/* Corporate Filter Bar Styles */
.filter-bar {
    background: var(--card-bg);
    border-radius: 8px;
    box-shadow: 0 1px 4px rgba(90, 111, 156, 0.08);
    padding: 1rem;
    margin-bottom: 1.5rem;
    border: 1px solid var(--border-color);
}

.filter-section {
    padding: 0.75rem;
    border-radius: 6px;
    background: var(--light-bg);
    border: 1px solid var(--border-color);
    height: 100%;
    display: flex;
    flex-direction: column;
}

.filter-section-title {
    font-size: 0.75rem;
    font-weight: 700 !important;
    color: var(--text-primary) !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 0.5rem;
}

.filter-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: flex-start;
    flex: 1;
}

.filter-group {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem;
    background: var(--card-bg);
    border-radius: 6px;
    border: 1px solid var(--border-color);
}

.filter-group-label {
    font-size: 0.75rem;
    font-weight: 600 !important;
    color: var(--text-primary) !important;
    white-space: nowrap;
}

/* Corporate Button Styles */
.corporate-btn {
    border-radius: 6px;
    font-weight: 500;
    padding: 0.375rem 0.75rem;
    font-size: 0.875rem;
    transition: all 0.2s ease;
    border: 1px solid var(--border-color);
}

.corporate-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(90, 111, 156, 0.15);
}

.corporate-btn-primary {
    background: var(--gradient-primary);
    color: white;
    border: none;
}

.corporate-btn-secondary {
    background: var(--card-bg);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
}

.corporate-btn-outline {
    background: transparent;
    color: var(--text-primary);
    border: 1px solid var(--border-color);
}

.corporate-btn-outline:hover {
    background: var(--light-bg);
    color: var(--text-primary);
}

/* Corporate Form Controls */
.corporate-dropdown {
    border-radius: 6px;
    border: 1px solid var(--border-color);
    background: var(--card-bg);
    color: var(--text-primary);
    font-size: 0.875rem;
    padding: 0.375rem 0.75rem;
}

.corporate-input-group {
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid var(--border-color);
}

.corporate-input-group .form-control {
    border: none;
    background: var(--card-bg);
    color: var(--text-primary) !important;
}

.corporate-input-group .input-group-text {
    background: var(--light-bg);
    border: none;
    color: var(--text-muted);
}

/* Status Badge Styles */
.status-badge {
    border-radius: 12px;
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    padding: 0.2rem 0.5rem;
}

.status-badge-success {
    background: var(--gradient-success);
    color: white;
}

.status-badge-warning {
    background: var(--gradient-warning);
    color: white;
}

/* Corporate Table Styles */
.corporate-table {
    font-size: 0.875rem;
    border-collapse: separate;
    border-spacing: 0;
    background: var(--card-bg);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.corporate-table thead th {
    background: var(--light-bg);
    border: none;
    padding: 0.75rem 0.5rem;
    font-weight: 700 !important;
    color: #000000 !important;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 2px solid var(--border-color);
}

.corporate-table tbody tr {
    transition: background-color 0.15s ease-in-out;
    color: #000000 !important; /* Darker row text */
}

.corporate-table tbody tr:hover {
    background-color: var(--light-bg);
}

.corporate-table tbody td {
    padding: 0.75rem 0.5rem;
    border: none;
    border-bottom: 1px solid var(--border-color);
    vertical-align: middle;
    color: #000000 !important; /* Darker cell text */
    font-weight: 700 !important;
}

.corporate-table tbody tr:last-child td {
    border-bottom: none;
}

.corporate-table .badge {
    font-size: 0.75rem;
    font-weight: 500;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
}

.corporate-table .btn-group-sm .btn {
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
    border-radius: 4px;
}

.corporate-table .text-nowrap {
    white-space: nowrap;
}

.corporate-table .align-middle {
    vertical-align: middle;
}

/* Betfair Mapping Dropdown Styles */
.betfair-mapping-select {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");
    background-position: right 0.5rem center;
    background-repeat: no-repeat;
    background-size: 1.5em 1.5em;
    padding-right: 2.5rem;
    appearance: none;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.betfair-mapping-select:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 0.2rem rgba(90, 111, 156, 0.25);
    outline: 0;
}

.betfair-mapping-select:hover {
    border-color: var(--secondary-color);
}

/* Make dropdown options more readable */
.betfair-mapping-select option {
    padding: 0.5rem;
    font-size: 0.8rem;
    background: var(--card-bg);
    color: var(--text-primary);
}

.betfair-mapping-select option:hover {
    background: var(--light-bg);
}

/* Compact table for better space utilization */
.corporate-table th,
.corporate-table td {
    padding: 0.5rem 0.375rem;
}

.corporate-table thead th {
    padding: 0.625rem 0.375rem;
}

/* Responsive table adjustments */
@media (max-width: 1200px) {
    .corporate-table {
        font-size: 0.8rem;
    }
    
    .corporate-table th,
    .corporate-table td {
        padding: 0.375rem 0.25rem;
    }
    
    .corporate-table thead th {
        padding: 0.5rem 0.25rem;
    }
}

@media (max-width: 768px) {
    .corporate-table {
        font-size: 0.75rem;
    }
    
    .corporate-table .btn-group-sm .btn {
        padding: 0.125rem 0.375rem;
        font-size: 0.7rem;
    }
}

/* Filter Row Layout */
.filter-row {
    display: flex;
    gap: 1rem;
}

.filter-row .col-12,
.filter-row .col-lg-6 {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.filter-row .filter-section {
    flex: 1;
    min-height: 120px;
    height: 100%;
}

/* Responsive Design */
@media (max-width: 768px) {
    .filter-row {
        flex-direction: column;
    }
    
    .filter-controls {
        flex-direction: column;
        align-items: stretch;
    }
    
    .filter-group {
        flex-direction: column;
        align-items: stretch;
    }

    .filter-row .filter-section {
        min-height: auto;
    }
}

/* === TEAM MATCHING PAGE (Muted Styling) === */
.tm-page .card {
    border: 1px solid var(--border-color);
    box-shadow: none;
}

.tm-page .card-header.bg-success,
.tm-page .card-header.bg-warning,
.tm-page .card-header.bg-danger,
.tm-page .card-header.bg-info {
    background: var(--card-bg) !important;
    color: var(--text-primary) !important;
    border-bottom: 1px solid var(--border-color) !important;
}

.tm-page .badge.bg-success,
.tm-page .badge.bg-warning,
.tm-page .badge.bg-danger,
.tm-page .badge.bg-info,
.tm-page .badge.bg-secondary {
    background: var(--light-bg) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border-color) !important;
    font-weight: 500;
}

.tm-page .form-select {
    border: 1px solid var(--border-color);
    background: var(--card-bg);
    color: var(--text-primary);
    border-radius: 6px;
}

.tm-page .btn.btn-primary,
.tm-page .btn.btn-outline-primary,
.tm-page .btn.btn-success,
.tm-page .btn.btn-outline-secondary,
.tm-page .btn.btn-warning,
.tm-page .btn.btn-danger {
    border-radius: 6px;
    border: 1px solid var(--border-color);
    background: var(--card-bg);
    color: var(--text-primary);
}

.tm-page .btn.btn-primary:hover,
.tm-page .btn.btn-outline-primary:hover,
.tm-page .btn.btn-success:hover,
.tm-page .btn.btn-outline-secondary:hover,
.tm-page .btn.btn-warning:hover,
.tm-page .btn.btn-danger:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(90, 111, 156, 0.12);
}

.tm-page .btn.corporate-btn-primary {
    background: var(--gradient-primary);
    color: #fff;
    border: none;
}

.tm-page .btn.corporate-btn-outline {
    background: transparent;
}

.tm-page .text-muted {
    color: var(--text-muted) !important;
}

.tm-page .section-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
}

.tm-page .section-subtitle {
    font-size: 0.875rem;
    color: var(--text-muted);
}

.tm-page .list-scroll {
    max-height: 300px;
    overflow-y: auto;
}

/* === GLOBAL MUTED UI (apply via .muted-ui on a container) === */
.muted-ui .card,
.muted-ui .modal-content,
.muted-ui .dropdown-menu {
    border: 1px solid var(--border-color);
    box-shadow: none;
}

.muted-ui .card-header,
.muted-ui .modal-header {
    background: var(--card-bg);
    color: var(--text-primary);
    border-bottom: 1px solid var(--border-color);
}

.muted-ui .badge,
.muted-ui .alert {
    background: var(--light-bg);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
}

.muted-ui .btn {
    border-radius: 6px;
    border: 1px solid var(--border-color);
    background: var(--card-bg);
    color: var(--text-primary);
}

.muted-ui .btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(90, 111, 156, 0.12);
}

.muted-ui .btn-primary,
.muted-ui .btn-success,
.muted-ui .btn-warning,
.muted-ui .btn-danger {
    background: var(--card-bg);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
}

.muted-ui .btn-primary.corporate-btn-primary {
    background: var(--gradient-primary);
    color: #fff;
    border: none;
}

.muted-ui .form-select,
.muted-ui .form-control {
    border: 1px solid var(--border-color);
    background: var(--card-bg);
    color: var(--text-primary) !important;
    border-radius: 6px;
}

/* Ensure all form inputs have darker text */
.form-control,
.form-select,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="date"],
input[type="time"],
input[type="datetime-local"],
textarea,
select {
    color: #000000 !important;
    font-weight: 700 !important;
}

/* Placeholder text should be darker too */
.form-control::placeholder,
.form-select::placeholder {
    color: #000000 !important;
    opacity: 0.7;
    font-weight: 700 !important;
}

/* Global rule to darken all text elements */
*, *::before, *::after {
    color: inherit;
}

/* Force dark text on all common elements */
.card-title,
.card-subtitle,
.card-text,
.list-group-item,
.alert,
.badge:not(.bg-success):not(.bg-danger):not(.bg-warning):not(.bg-info):not(.bg-primary):not(.bg-secondary),
.btn:not(.corporate-btn-primary):not(.corporate-btn-outline):not(.btn-primary),
.dropdown-item:not(.navbar-top .dropdown-item) {
    color: #000000 !important;
    font-weight: 700 !important;
}

.muted-ui .table thead th {
    background: var(--light-bg);
    border-bottom: 1px solid var(--border-color);
}

.muted-ui .table tbody td {
    border-bottom: 1px solid var(--border-color);
}

.muted-ui .list-group-item {
    border: 1px solid var(--border-color);
}

/* === MATCHING PAGE STYLES === */
.matching-panel {
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 1rem;
    background: var(--card-bg);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    transition: all 0.2s ease;
}

.matching-panel:hover {
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.matching-panel.api-teams {
    border-left: 4px solid var(--primary-color);
}

.matching-panel.betfair-teams {
    border-left: 4px solid var(--success-color);
}

.matching-panel select {
    border: 1px solid var(--border-color);
    border-radius: 6px;
}

.matching-panel select:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 2px rgba(90, 111, 156, 0.2);
}

.matching-link-btn {
    background: var(--gradient-primary);
    border: none;
    border-radius: 6px;
    padding: 0.75rem 1.5rem;
    color: white;
    font-weight: 500;
    transition: all 0.2s ease;
}

.matching-link-btn:hover:not(:disabled) {
    background: var(--gradient-secondary);
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.matching-link-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

.team-count-badge {
    background: var(--gradient-light);
    color: var(--text-primary);
    border-radius: 12px;
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
    font-weight: 500;
}

/* === CORPORATE BASE TEMPLATE STYLES === */

/* Corporate Typography */
body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Helvetica Neue", Arial, sans-serif;
    background-color: var(--light-bg);
    color: #000000 !important;
    font-size: 0.875rem;
    font-weight: 700 !important;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Make all headings darker and clearer */
h1, h2, h3, h4, h5, h6 {
    color: #000000 !important;
    font-weight: 700 !important;
}

/* Make paragraph and body text darker */
p, div, span, li, td, th, label {
    color: #000000 !important;
    font-weight: 700 !important;
}

/* Card text should be darker */
.card,
.corporate-card,
.corporate-card-body,
.corporate-card-header {
    color: #000000 !important;
}

.card-body,
.card-header,
.card-title,
.card-text {
    color: #000000 !important;
    font-weight: 700 !important;
}

/* Override Bootstrap's lighter text-muted to be darker but still muted */
.text-muted,
.text-muted *,
small.text-muted,
.text-muted small,
.corporate-footer .text-muted {
    color: #000000 !important;
    font-weight: 700 !important;
}

/* Ensure all small text is darker */
small,
.small {
    color: #000000 !important;
    font-weight: 700 !important;
}

/* Corporate Layout */
.main-layout {
    display: flex;
    min-height: 100vh;
    flex-direction: column;
}

.navbar-top {
    background: var(--gradient-primary);
    border-bottom: 1px solid var(--border-color);
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.navbar-brand img {
    height: 33px;
    transition: transform 0.2s ease;
}

.navbar-brand:hover img {
    transform: scale(1.05);
}

/* Corporate Buttons */
.corporate-btn {
    background: var(--gradient-primary);
    border: none;
    color: white;
    padding: 0.5rem 1rem;
    border-radius: 6px;
    font-weight: 500;
    transition: all 0.2s ease;
}

.corporate-btn:hover {
    background: var(--gradient-secondary);
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
    color: white;
}

.corporate-btn-outline {
    background: transparent;
    border: 2px solid var(--primary-color);
    color: var(--primary-color);
    padding: 0.5rem 1rem;
    border-radius: 6px;
    font-weight: 500;
    transition: all 0.2s ease;
}

.corporate-btn-outline:hover {
    background: var(--primary-color);
    color: white;
    transform: translateY(-1px);
}

/* Corporate Cards */
.corporate-card {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    transition: all 0.2s ease;
}

.corporate-card:hover {
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    transform: translateY(-1px);
}

.corporate-card-header {
    background: linear-gradient(135deg, #f8fafc, #f1f5f9);
    border-bottom: 1px solid var(--border-color);
    padding: 1rem;
    border-radius: 8px 8px 0 0;
}

.corporate-card-header.dark {
    background: var(--primary-color);
    color: white;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.corporate-card-header.dark h5,
.corporate-card-header.dark h4,
.corporate-card-header.dark h3 {
    color: white;
    font-weight: 600;
}

.corporate-card-body {
    padding: 1.5rem;
}

/* Corporate Tables */
.corporate-table {
    background: var(--card-bg);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.corporate-table thead th {
    background: var(--gradient-light);
    color: #000000 !important;
    font-weight: 700 !important;
    border: none;
    padding: 1rem;
}

.corporate-table tbody td {
    padding: 0.75rem 1rem;
    border-top: 1px solid var(--border-color);
    vertical-align: middle;
    color: #000000 !important;
    font-weight: 700 !important;
}

.corporate-table tbody tr:hover {
    background-color: #f8fafc;
}

/* Corporate Badges */
.corporate-badge {
    padding: 0.35rem 0.75rem;
    border-radius: 16px;
    font-weight: 500;
    font-size: 0.75rem;
    letter-spacing: 0.025em;
}

.corporate-badge-primary {
    background: var(--gradient-primary);
    color: white;
}

.corporate-badge-success {
    background: var(--gradient-success);
    color: white;
}

.corporate-badge-warning {
    background: var(--gradient-warning);
    color: white;
}

.corporate-badge-danger {
    background: var(--gradient-danger);
    color: white;
}

/* Corporate Forms */
.corporate-form-control {
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    transition: all 0.2s ease;
}

.corporate-form-control:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(90, 111, 156, 0.1);
}

.corporate-form-label {
    color: #000000 !important;
    font-weight: 700 !important;
    margin-bottom: 0.5rem;
}

/* Corporate Navigation */
.corporate-nav-link {
    color: rgba(255, 255, 255, 0.9);
    font-weight: 500;
    padding: 0.5rem 1rem;
    border-radius: 6px;
    transition: all 0.2s ease;
}

.corporate-nav-link:hover {
    color: white;
    background: rgba(255, 255, 255, 0.1);
}

.corporate-nav-link.active {
    color: white;
    background: rgba(255, 255, 255, 0.2);
}

/* Corporate Footer */
.corporate-footer {
    background: var(--gradient-primary);
    color: white;
    margin-top: auto;
    padding: 2rem 0;
}

.corporate-footer .footer-logo {
    height: 30px;
    opacity: 0.9;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1));
}

.corporate-footer .text-muted {
    color: rgba(255, 255, 255, 0.8) !important;
}

/* Corporate Alerts */
.corporate-alert {
    border: none;
    border-radius: 8px;
    padding: 1rem 1.25rem;
    margin-bottom: 1rem;
}

.corporate-alert-success {
    background: linear-gradient(135deg, #f0f9ff, #e0f2fe);
    color: #0c4a6e;
    border-left: 4px solid var(--success-color);
}

.corporate-alert-warning {
    background: linear-gradient(135deg, #fffbeb, #fef3c7);
    color: #92400e;
    border-left: 4px solid var(--warning-color);
}

.corporate-alert-danger {
    background: linear-gradient(135deg, #fef2f2, #fee2e2);
    color: #991b1b;
    border-left: 4px solid var(--danger-color);
}

.corporate-alert-info {
    background: linear-gradient(135deg, #f0f9ff, #e0f2fe);
    color: #0c4a6e;
    border-left: 4px solid var(--primary-color);
}

/* Corporate Status Indicators */
.corporate-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.25rem 0.75rem;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 500;
}

.corporate-status-badge::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}

.corporate-status-badge.active {
    background: rgba(56, 161, 105, 0.1);
    color: var(--success-color);
}

.corporate-status-badge.inactive {
    background: rgba(229, 62, 62, 0.1);
    color: var(--danger-color);
}

.corporate-status-badge.pending {
    background: rgba(214, 158, 46, 0.1);
    color: var(--warning-color);
}

/* Corporate Muted UI */
.muted-ui {
    opacity: 0.7;
}

.muted-ui .corporate-card,
.muted-ui .corporate-table,
.muted-ui .corporate-btn {
    opacity: 0.6;
}

/* Corporate Responsive Design */
@media (max-width: 768px) {
    .corporate-card-body {
        padding: 1rem;
    }
    
    .corporate-table thead th,
    .corporate-table tbody td {
        padding: 0.5rem;
    }
    
    .navbar-brand img {
        height: 28px;
    }
}