/* ========================================
   GLOBAL COLOR SCHEME - EARTH TONE PALETTE
   ======================================== */

:root {
    /* Primary Colors */
    --color-bistre: #391E10;
    /* Dark Brown - Primary Dark */
    --color-kordoba: #734128;
    /* Medium Brown - Primary */
    --color-lion: #C7A07A;
    /* Light Brown - Secondary */
    --color-dun: #E2CEB1;
    /* Beige - Light */
    --color-ivory: #FDFCE8;
    /* Cream - Background */

    /* Gradients */
    --gradient-primary: linear-gradient(135deg, #734128 0%, #391E10 100%);
    --gradient-secondary: linear-gradient(135deg, #C7A07A 0%, #734128 100%);
    --gradient-light: linear-gradient(135deg, #FDFCE8 0%, #E2CEB1 100%);

    /* Semantic Colors */
    --color-success: #4CAF50;
    --color-warning: #FF9800;
    --color-danger: #F44336;
    --color-info: #2196F3;
}

/* ========================================
   BODY & BACKGROUND
   ======================================== */

body {
    background: var(--gradient-primary) !important;
    font-family: 'Plus Jakarta Sans', sans-serif;
    min-height: 100vh;
    margin: 0;
    padding: 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ========================================
   SIDEBAR
   ======================================== */

.sidebar {
    background: rgba(253, 252, 232, 0.95) !important;
    /* Ivory with opacity */
    backdrop-filter: blur(10px);
}

.sidebar a {
    color: var(--color-kordoba) !important;
}

.sidebar a:hover,
.sidebar a.active {
    background: linear-gradient(90deg, rgba(199, 160, 122, 0.2), transparent) !important;
    color: var(--color-bistre) !important;
    border-left-color: var(--color-kordoba) !important;
}

.user-info {
    background: var(--gradient-primary) !important;
    color: var(--color-ivory) !important;
}

/* ========================================
   BADGES
   ======================================== */

.super-admin-badge,
.talent-badge {
    background: var(--gradient-secondary) !important;
    color: white !important;
}

.badge.bg-primary {
    background: var(--color-kordoba) !important;
}

.badge.bg-secondary {
    background: var(--color-lion) !important;
    color: var(--color-bistre) !important;
}

/* ========================================
   BUTTONS
   ======================================== */

.btn-primary {
    background: var(--color-kordoba) !important;
    border-color: var(--color-kordoba) !important;
    color: white !important;
}

.btn-primary:hover {
    background: var(--color-bistre) !important;
    border-color: var(--color-bistre) !important;
}

.btn-secondary {
    background: var(--color-lion) !important;
    border-color: var(--color-lion) !important;
    color: var(--color-bistre) !important;
}

.btn-secondary:hover {
    background: var(--color-dun) !important;
    border-color: var(--color-dun) !important;
}

/* Ensure colored buttons have white text */
.btn-danger,
.btn-success,
.btn-info,
.btn-warning {
    color: white !important;
}

.btn-danger:hover,
.btn-success:hover,
.btn-info:hover,
.btn-warning:hover {
    color: white !important;
}

/* ========================================
   CARDS
   ======================================== */

.card {
    background: var(--color-ivory) !important;
    border: none;
    border-radius: 15px;
    box-shadow: 0 5px 15px rgba(57, 30, 16, 0.1);
}

.card-header {
    background: var(--gradient-primary) !important;
    color: var(--color-ivory) !important;
}

.card-body {
    color: var(--color-bistre) !important;
}

.card-title {
    color: var(--color-kordoba) !important;
}

.card-text {
    color: var(--color-bistre) !important;
}

/* ========================================
   PAGE HEADER
   ======================================== */

.page-header,
.welcome-banner {
    background: var(--color-ivory) !important;
    color: var(--color-bistre) !important;
}

.page-header h2,
.page-header .text-primary {
    color: var(--color-kordoba) !important;
}

/* ========================================
   STAT CARDS
   ======================================== */

.stat-card {
    background: var(--color-ivory) !important;
}

.stat-card::before {
    background: rgba(199, 160, 122, 0.1) !important;
}

.stat-card .text-primary {
    color: var(--color-kordoba) !important;
}

.stat-card .stat-icon.text-primary {
    color: var(--color-kordoba) !important;
}

/* Stat card text colors with glow */
.stat-card h3 {
    color: var(--color-bistre) !important;
    text-shadow: 0 0 10px rgba(199, 160, 122, 0.5), 0 0 20px rgba(199, 160, 122, 0.3);
}

.stat-card p {
    color: var(--color-kordoba) !important;
    text-shadow: 0 0 8px rgba(199, 160, 122, 0.4);
}

.stat-card i {
    color: var(--color-kordoba) !important;
    text-shadow: 0 0 15px rgba(199, 160, 122, 0.5);
}

.stat-mini {
    background: var(--gradient-primary) !important;
    color: var(--color-ivory) !important;
}

/* ========================================
   TABLES
   ======================================== */

.table thead {
    background: var(--gradient-primary) !important;
    color: var(--color-ivory) !important;
}

.table tbody {
    color: var(--color-bistre) !important;
}

.table tbody td {
    color: var(--color-bistre) !important;
}

.table-hover tbody tr:hover {
    background: rgba(199, 160, 122, 0.1) !important;
}

/* ========================================
   FORMS
   ======================================== */

.form-control:focus {
    border-color: var(--color-kordoba) !important;
    box-shadow: 0 0 0 0.2rem rgba(115, 65, 40, 0.25) !important;
}

.form-label {
    color: var(--color-bistre) !important;
    font-weight: 600;
}

.form-control {
    color: var(--color-bistre) !important;
}

.form-select {
    color: var(--color-bistre) !important;
}

.form-text {
    color: var(--color-kordoba) !important;
}

.input-group-text {
    background: var(--color-dun) !important;
    border-color: var(--color-lion) !important;
    color: var(--color-bistre) !important;
}

/* ========================================
   MODALS
   ======================================== */

.modal-content {
    background: var(--color-ivory) !important;
}

.modal-header {
    background: var(--gradient-primary) !important;
    color: var(--color-ivory) !important;
}

.modal-title {
    color: var(--color-ivory) !important;
}

.modal-body {
    color: var(--color-bistre) !important;
}

.modal-footer {
    background: var(--color-dun) !important;
}

.btn-close {
    filter: brightness(0) invert(1);
}

/* ========================================
   ALERTS
   ======================================== */

.alert-success {
    background: rgba(76, 175, 80, 0.1) !important;
    border-color: var(--color-success) !important;
    color: #2e7d32 !important;
}

.alert-danger {
    background: rgba(244, 67, 54, 0.1) !important;
    border-color: var(--color-danger) !important;
    color: #c62828 !important;
}

/* ========================================
   PROGRESS BARS
   ======================================== */

.progress-bar {
    background: var(--color-kordoba) !important;
}

.progress-bar.bg-primary {
    background: var(--color-kordoba) !important;
}

/* ========================================
   LOGIN PAGE
   ======================================== */

.login-container {
    background: var(--gradient-primary) !important;
}

.login-card {
    background: var(--color-ivory) !important;
}

.login-header {
    background: var(--gradient-primary) !important;
    color: var(--color-ivory) !important;
}

/* ========================================
   LINKS
   ======================================== */

a:not(.btn) {
    color: var(--color-kordoba) !important;
}

a:not(.btn):hover {
    color: var(--color-bistre) !important;
}

/* Ensure button links have correct colors */
a.btn-danger,
a.btn-success,
a.btn-info,
a.btn-warning {
    color: white !important;
}

a.btn-danger:hover,
a.btn-success:hover,
a.btn-info:hover,
a.btn-warning:hover {
    color: white !important;
}

/* ========================================
   TEXT COLORS
   ======================================== */

.text-primary {
    color: var(--color-kordoba) !important;
}

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

/* ========================================
   ICONS
   ======================================== */

.setting-icon,
.fa-primary {
    color: var(--color-kordoba) !important;
}

/* ========================================
   CHARTS
   ======================================== */

/* Chart colors will be set in individual pages */

/* ========================================
   MISC
   ======================================== */

.info-box {
    background: var(--color-dun) !important;
    border-left-color: var(--color-kordoba) !important;
}

.user-talent-badge {
    background: var(--color-kordoba) !important;
    color: white !important;
}

.school-card:hover {
    box-shadow: 0 8px 20px rgba(57, 30, 16, 0.15) !important;
}

/* ========================================
   OPACITY UTILITIES
   ======================================== */

.opacity-25 {
    opacity: 0.25 !important;
}

.opacity-75 {
    opacity: 0.75 !important;
}

/* ========================================
   RESPONSIVE DESIGN - MOBILE FIRST
   ======================================== */

/* Mobile Menu Toggle Button */
.mobile-menu-toggle {
    display: none;
    position: fixed;
    top: 15px;
    left: 15px;
    z-index: 1001;
    background: var(--color-kordoba);
    color: white;
    border: none;
    padding: 10px 15px;
    border-radius: 8px;
    cursor: pointer;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
    transition: all 0.3s;
}

.mobile-menu-toggle:hover {
    background: var(--color-bistre);
    transform: scale(1.05);
}

.sidebar.mobile-open {
    transform: translateX(0) !important;
}

/* Overlay for mobile sidebar */
.sidebar-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 999;
}

.sidebar-overlay.active {
    display: block;
}

/* ========================================
   TABLET - 992px and below
   ======================================== */

@media (max-width: 992px) {

    /* Sidebar */
    .sidebar {
        transform: translateX(-100%);
        transition: transform 0.3s ease;
        position: fixed !important;
        z-index: 1000 !important;
    }

    .sidebar.mobile-open {
        transform: translateX(0);
    }

    .mobile-menu-toggle {
        display: block;
    }

    /* Content */
    .content {
        margin-left: 0 !important;
        padding: 80px 20px 20px 20px !important;
    }

    /* Page Header */
    .page-header,
    .welcome-banner {
        padding: 20px !important;
    }

    .page-header h2 {
        font-size: 1.5rem !important;
    }

    .page-header .col-md-4,
    .page-header .col-md-3 {
        display: none !important;
    }

    /* Cards */
    .card-body {
        padding: 15px !important;
    }

    /* Tables */
    .table-responsive {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .table {
        min-width: 800px;
    }

    /* Stat Cards */
    .stat-card {
        margin-bottom: 15px;
    }

    /* Grid Columns */
    .row>[class*='col-'] {
        margin-bottom: 15px;
    }
}

/* ========================================
   MOBILE - 768px and below
   ======================================== */

@media (max-width: 768px) {

    /* Content */
    .content {
        padding: 70px 15px 15px 15px !important;
    }

    /* Page Header */
    .page-header,
    .welcome-banner {
        padding: 15px !important;
        margin-bottom: 20px !important;
    }

    .page-header h2 {
        font-size: 1.3rem !important;
    }

    .page-header p {
        font-size: 0.85rem !important;
    }

    /* Cards */
    .card {
        margin-bottom: 15px !important;
    }

    .card-body .row {
        flex-direction: column;
    }

    .card-body .col-md-6,
    .card-body .col-md-4,
    .card-body .col-md-3 {
        width: 100% !important;
        margin-bottom: 15px;
    }

    /* Buttons */
    .btn {
        width: 100%;
        margin-bottom: 10px;
    }

    .btn-group .btn {
        width: auto;
    }

    .d-flex.gap-2,
    .d-flex.gap-3 {
        flex-direction: column;
    }

    /* Tables */
    .table {
        font-size: 0.85rem;
    }

    .table thead th,
    .table tbody td {
        padding: 10px 8px !important;
    }

    /* Badges */
    .badge {
        font-size: 0.7rem !important;
        padding: 4px 8px !important;
    }

    .badge-custom {
        font-size: 0.75rem !important;
        padding: 4px 10px !important;
    }

    /* Forms */
    .form-control,
    .form-select {
        font-size: 0.9rem !important;
    }

    .input-group {
        flex-wrap: wrap;
    }

    /* Modals */
    .modal-dialog {
        margin: 10px !important;
    }

    .modal-body {
        padding: 15px !important;
    }

    /* Stat Cards */
    .stat-card h3 {
        font-size: 2rem !important;
    }

    .stat-card p {
        font-size: 0.85rem !important;
    }
}

/* ========================================
   SMALL MOBILE - 576px and below
   ======================================== */

@media (max-width: 576px) {

    /* Mobile Menu */
    .mobile-menu-toggle {
        top: 10px;
        left: 10px;
        padding: 8px 12px;
        font-size: 0.9rem;
    }

    /* Content */
    .content {
        padding: 60px 10px 10px 10px !important;
    }

    /* Page Header */
    .page-header,
    .welcome-banner {
        padding: 12px !important;
        border-radius: 15px !important;
    }

    .page-header h2 {
        font-size: 1.1rem !important;
    }

    .page-header h2 i {
        font-size: 1rem !important;
    }

    .page-header p {
        font-size: 0.8rem !important;
    }

    /* Cards */
    .card {
        border-radius: 12px !important;
    }

    .card-body {
        padding: 12px !important;
    }

    .card-header {
        padding: 10px 12px !important;
        font-size: 0.9rem !important;
    }

    /* Buttons */
    .btn {
        font-size: 0.85rem !important;
        padding: 8px 12px !important;
    }

    .btn-sm {
        padding: 4px 8px !important;
        font-size: 0.75rem !important;
    }

    .btn i {
        font-size: 0.85rem !important;
    }

    /* Forms */
    .form-control,
    .form-select {
        font-size: 0.85rem !important;
        padding: 8px 12px !important;
    }

    .form-label {
        font-size: 0.85rem !important;
    }

    .input-group-text {
        padding: 8px 10px !important;
        font-size: 0.85rem !important;
    }

    /* Tables */
    .table {
        font-size: 0.75rem !important;
        min-width: 700px;
    }

    .table thead th,
    .table tbody td {
        padding: 8px 5px !important;
    }

    /* Sidebar */
    .sidebar {
        width: 240px !important;
    }

    .sidebar a {
        padding: 10px 15px !important;
        font-size: 0.9rem !important;
    }

    .sidebar a i {
        width: 20px !important;
        font-size: 0.9rem !important;
    }

    .user-info {
        padding: 15px !important;
    }

    .user-info i {
        font-size: 2rem !important;
    }

    .user-info h6 {
        font-size: 0.9rem !important;
    }

    .super-admin-badge,
    .talent-badge {
        font-size: 0.7rem !important;
        padding: 6px 12px !important;
    }

    /* Stat Cards */
    .stat-card {
        padding: 15px !important;
    }

    .stat-card h3 {
        font-size: 1.5rem !important;
    }

    .stat-card p {
        font-size: 0.75rem !important;
    }

    .stat-card i {
        font-size: 1.5rem !important;
    }

    /* Alerts */
    .alert {
        padding: 10px 12px !important;
        font-size: 0.85rem !important;
    }

    /* Modals */
    .modal-title {
        font-size: 1rem !important;
    }

    .modal-body {
        font-size: 0.85rem !important;
    }

    /* Badges */
    .badge {
        font-size: 0.65rem !important;
        padding: 3px 6px !important;
    }
}

/* ========================================
   EXTRA SMALL MOBILE - 400px and below
   ======================================== */

@media (max-width: 400px) {
    .content {
        padding: 55px 8px 8px 8px !important;
    }

    .page-header h2 {
        font-size: 1rem !important;
    }

    .card-body {
        padding: 10px !important;
    }

    .btn {
        font-size: 0.8rem !important;
        padding: 6px 10px !important;
    }

    .table {
        font-size: 0.7rem !important;
    }

    .sidebar {
        width: 220px !important;
    }
}

/* ========================================
   LANDSCAPE ORIENTATION
   ======================================== */

@media (max-height: 500px) and (orientation: landscape) {
    .sidebar {
        overflow-y: auto;
        max-height: 100vh;
    }

    .user-info {
        padding: 10px !important;
    }

    .user-info i {
        font-size: 1.5rem !important;
        margin-bottom: 5px !important;
    }

    .sidebar a {
        padding: 8px 15px !important;
    }
}

/* ========================================
   PRINT STYLES
   ======================================== */

@media print {

    .sidebar,
    .mobile-menu-toggle,
    .btn,
    .sidebar-overlay {
        display: none !important;
    }

    .content {
        margin-left: 0 !important;
        padding: 0 !important;
    }

    .card {
        box-shadow: none !important;
        border: 1px solid #ddd !important;
    }
}