/* ============================================================================
   LUNEE ADMIN - PEACH THEME
   Custom CSS for Django Jazzmin Admin Dashboard
   Colors: Peach (#FF9A76), Olive Green (#6B8E23), Cherry Red (#C41E3A)
   ============================================================================ */

:root {
    /* Peach Colors */
    --peach-primary: #FF9A76;
    --peach-light: #FFB396;
    --peach-dark: #FF8C66;
    --peach-bg: #FFF5F0;
    --peach-hover: #FF7F5C;
    
    /* Semantic Colors */
    --olive-green: #6B8E23;
    --olive-green-light: #8FAE3C;
    --olive-green-dark: #556B1C;
    
    --cherry-red: #C41E3A;
    --cherry-red-light: #D63852;
    --cherry-red-dark: #9B172E;
    
    /* Neutral Colors */
    --dark-sidebar: #2C2C2C;
    --dark-text: #343a40;
    --light-bg: #f8f9fa;
    --white: #ffffff;
    
    /* Success & Info (keep standard) */
    --success-green: #28a745;
    --info-blue: #17a2b8;
}

/* ============================================================================
   NAVBAR - Peach Theme
   ============================================================================ */

.navbar-peach {
    background-color: var(--peach-primary) !important;
    border-bottom: 2px solid var(--peach-dark);
}

.navbar-peach .navbar-brand {
    color: var(--white) !important;
    font-weight: 600;
}

.navbar-peach .navbar-nav .nav-link {
    color: rgba(255, 255, 255, 0.9) !important;
}

.navbar-peach .navbar-nav .nav-link:hover {
    color: var(--white) !important;
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
}

.navbar-peach .navbar-nav .nav-link.active {
    color: var(--white) !important;
    background-color: var(--peach-dark);
    border-radius: 4px;
}

/* ============================================================================
   SIDEBAR - Dark with Peach Accents
   ============================================================================ */

.sidebar-dark-peach {
    background-color: var(--dark-sidebar) !important;
}

.sidebar-dark-peach .nav-link {
    color: rgba(255, 255, 255, 0.8) !important;
    transition: all 0.3s ease;
}

.sidebar-dark-peach .nav-link:hover {
    background-color: rgba(255, 154, 118, 0.15) !important;
    color: var(--peach-light) !important;
    padding-left: 1.25rem;
}

.sidebar-dark-peach .nav-link.active {
    background-color: var(--peach-primary) !important;
    color: var(--white) !important;
    border-left: 4px solid var(--peach-dark);
    font-weight: 600;
}

.sidebar-dark-peach .nav-link i {
    color: var(--peach-light);
}

.sidebar-dark-peach .nav-link.active i {
    color: var(--white);
}

/* Sidebar Brand */
.sidebar-dark-peach .brand-link {
    background-color: #1f1f1f !important;
    border-bottom: 1px solid rgba(255, 154, 118, 0.3);
}

.sidebar-dark-peach .brand-text {
    color: var(--peach-light) !important;
    font-weight: 700;
}

/* ============================================================================
   BUTTONS - Peach, Olive Green, Cherry Red
   ============================================================================ */

/* Primary Peach Button */
.btn-peach {
    background-color: var(--peach-primary);
    border-color: var(--peach-primary);
    color: var(--white);
    font-weight: 500;
    transition: all 0.3s ease;
}

.btn-peach:hover {
    background-color: var(--peach-hover);
    border-color: var(--peach-dark);
    color: var(--white);
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(255, 154, 118, 0.3);
}

.btn-peach:active,
.btn-peach:focus {
    background-color: var(--peach-dark);
    border-color: var(--peach-dark);
    color: var(--white);
    box-shadow: 0 0 0 0.2rem rgba(255, 154, 118, 0.5);
}

/* Secondary Outline Peach Button */
.btn-outline-peach {
    border-color: var(--peach-primary);
    color: var(--peach-primary);
    background-color: transparent;
    font-weight: 500;
}

.btn-outline-peach:hover {
    background-color: var(--peach-primary);
    border-color: var(--peach-primary);
    color: var(--white);
}

.btn-outline-peach:active,
.btn-outline-peach:focus {
    background-color: var(--peach-dark);
    border-color: var(--peach-dark);
    color: var(--white);
    box-shadow: 0 0 0 0.2rem rgba(255, 154, 118, 0.5);
}

/* Warning Button - Olive Green */
.btn-warning {
    background-color: var(--olive-green) !important;
    border-color: var(--olive-green) !important;
    color: var(--white) !important;
}

.btn-warning:hover {
    background-color: var(--olive-green-light) !important;
    border-color: var(--olive-green-light) !important;
    color: var(--white) !important;
}

/* Danger Button - Cherry Red */
.btn-danger {
    background-color: var(--cherry-red) !important;
    border-color: var(--cherry-red) !important;
    color: var(--white) !important;
}

.btn-danger:hover {
    background-color: var(--cherry-red-light) !important;
    border-color: var(--cherry-red-light) !important;
    color: var(--white) !important;
}

/* ============================================================================
   CARDS & PANELS
   ============================================================================ */

.card {
    border-left: 3px solid var(--peach-primary);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
}

.card:hover {
    box-shadow: 0 4px 12px rgba(255, 154, 118, 0.15);
    transform: translateY(-2px);
}

.card-header {
    background-color: var(--peach-bg);
    border-bottom: 2px solid var(--peach-light);
    font-weight: 600;
    color: var(--dark-text);
}

/* Info Box - Dashboard Metrics */
.info-box {
    border-left: 4px solid var(--peach-primary);
}

.info-box-icon {
    background-color: var(--peach-primary) !important;
    color: var(--white) !important;
}

.info-box:hover {
    box-shadow: 0 4px 12px rgba(255, 154, 118, 0.2);
}

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

.table {
    border-radius: 8px;
    overflow: hidden;
}

.table thead th {
    background-color: var(--peach-bg);
    color: var(--dark-text);
    font-weight: 600;
    border-bottom: 2px solid var(--peach-primary);
}

.table-striped tbody tr:nth-of-type(odd) {
    background-color: rgba(255, 154, 118, 0.05);
}

.table-hover tbody tr:hover {
    background-color: rgba(255, 154, 118, 0.1);
    cursor: pointer;
}

/* Action Column Icons */
.table td a {
    color: var(--peach-primary);
    transition: color 0.3s ease;
}

.table td a:hover {
    color: var(--peach-dark);
    text-decoration: none;
}

/* ============================================================================
   LINKS & TEXT
   ============================================================================ */

a {
    color: var(--peach-primary);
    transition: color 0.3s ease;
}

a:hover {
    color: var(--peach-dark);
    text-decoration: none;
}

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

.text-olive {
    color: var(--olive-green) !important;
}

.text-cherry {
    color: var(--cherry-red) !important;
}

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

.form-control:focus {
    border-color: var(--peach-primary);
    box-shadow: 0 0 0 0.2rem rgba(255, 154, 118, 0.25);
}

.form-control.is-valid {
    border-color: var(--success-green);
}

.form-control.is-valid:focus {
    box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.25);
}

.form-control.is-invalid {
    border-color: var(--cherry-red);
}

.form-control.is-invalid:focus {
    box-shadow: 0 0 0 0.2rem rgba(196, 30, 58, 0.25);
}

/* Custom Checkbox/Radio */
.custom-control-input:checked ~ .custom-control-label::before {
    background-color: var(--peach-primary);
    border-color: var(--peach-primary);
}

.custom-control-input:focus ~ .custom-control-label::before {
    box-shadow: 0 0 0 0.2rem rgba(255, 154, 118, 0.25);
}

/* Select Dropdown */
.select2-container--default .select2-selection--single:focus,
.select2-container--default .select2-selection--multiple:focus {
    border-color: var(--peach-primary);
    outline: 0;
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: var(--peach-primary);
    color: var(--white);
}

/* ============================================================================
   BADGES & LABELS
   ============================================================================ */

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

.badge-olive {
    background-color: var(--olive-green);
    color: var(--white);
}

.badge-cherry {
    background-color: var(--cherry-red);
    color: var(--white);
}

.label-peach {
    background-color: var(--peach-bg);
    color: var(--peach-dark);
    padding: 4px 12px;
    border-radius: 4px;
    font-weight: 500;
}

/* ============================================================================
   ALERTS & MESSAGES
   ============================================================================ */

.alert-warning {
    background-color: rgba(107, 142, 35, 0.1);
    border-color: var(--olive-green);
    color: var(--olive-green-dark);
}

.alert-warning .alert-link {
    color: var(--olive-green-dark);
    font-weight: 600;
}

.alert-danger {
    background-color: rgba(196, 30, 58, 0.1);
    border-color: var(--cherry-red);
    color: var(--cherry-red-dark);
}

.alert-danger .alert-link {
    color: var(--cherry-red-dark);
    font-weight: 600;
}

.alert-success {
    background-color: rgba(40, 167, 69, 0.1);
    border-color: var(--success-green);
    color: #155724;
}

.alert-info {
    background-color: rgba(23, 162, 184, 0.1);
    border-color: var(--info-blue);
    color: #0c5460;
}

/* ============================================================================
   PAGINATION
   ============================================================================ */

.pagination .page-item.active .page-link {
    background-color: var(--peach-primary);
    border-color: var(--peach-primary);
    color: var(--white);
}

.pagination .page-link {
    color: var(--peach-primary);
    border-color: #dee2e6;
}

.pagination .page-link:hover {
    color: var(--peach-dark);
    background-color: var(--peach-bg);
    border-color: var(--peach-light);
}

.pagination .page-link:focus {
    box-shadow: 0 0 0 0.2rem rgba(255, 154, 118, 0.25);
}

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

.progress-bar {
    background-color: var(--peach-primary);
}

.progress-bar-success {
    background-color: var(--success-green);
}

.progress-bar-warning {
    background-color: var(--olive-green);
}

.progress-bar-danger {
    background-color: var(--cherry-red);
}

/* ============================================================================
   BREADCRUMBS
   ============================================================================ */

.breadcrumb {
    background-color: var(--peach-bg);
    border-radius: 6px;
}

.breadcrumb-item.active {
    color: var(--peach-dark);
    font-weight: 500;
}

.breadcrumb-item + .breadcrumb-item::before {
    color: var(--peach-primary);
}

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

.modal-header {
    background-color: var(--peach-bg);
    border-bottom: 2px solid var(--peach-primary);
}

.modal-title {
    color: var(--peach-dark);
    font-weight: 600;
}

.modal-footer {
    border-top: 1px solid rgba(255, 154, 118, 0.2);
}

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

.login-page {
    background: linear-gradient(135deg, var(--peach-bg) 0%, var(--white) 100%);
}

.login-box {
    border-top: 4px solid var(--peach-primary);
    box-shadow: 0 8px 24px rgba(255, 154, 118, 0.15);
}

.login-logo a {
    color: var(--peach-primary);
    font-weight: 700;
}

.login-box-msg {
    color: var(--dark-text);
    font-weight: 500;
}

/* ============================================================================
   DASHBOARD SPECIFIC
   ============================================================================ */

/* Metric Cards */
.small-box {
    border-radius: 8px;
    transition: all 0.3s ease;
}

.small-box:hover {
    transform: translateY(-4px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
}

.small-box > .inner {
    padding: 20px;
}

.small-box h3 {
    font-weight: 700;
    color: var(--peach-dark);
}

.small-box .icon {
    color: rgba(255, 255, 255, 0.5);
}

/* Activity Feed */
.timeline::before {
    background: var(--peach-light);
}

.timeline > li > .timeline-item {
    border-left: 3px solid var(--peach-primary);
}

.timeline > li > .timeline-item > .time {
    color: var(--peach-dark);
    font-weight: 500;
}

/* ============================================================================
   RESPONSIVE TWEAKS
   ============================================================================ */

@media (max-width: 768px) {
    .sidebar-dark-peach .nav-link:hover {
        padding-left: 1rem;
    }
    
    .card {
        margin-bottom: 1rem;
    }
}

/* ============================================================================
   UTILITY CLASSES
   ============================================================================ */

.bg-peach {
    background-color: var(--peach-primary) !important;
    color: var(--white) !important;
}

.bg-peach-light {
    background-color: var(--peach-light) !important;
}

.bg-peach-bg {
    background-color: var(--peach-bg) !important;
}

.bg-olive {
    background-color: var(--olive-green) !important;
    color: var(--white) !important;
}

.bg-cherry {
    background-color: var(--cherry-red) !important;
    color: var(--white) !important;
}

.border-peach {
    border-color: var(--peach-primary) !important;
}

.border-olive {
    border-color: var(--olive-green) !important;
}

.border-cherry {
    border-color: var(--cherry-red) !important;
}

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

@media print {
    .sidebar,
    .navbar,
    .btn,
    .pagination {
        display: none !important;
    }
    
    .card {
        border: 1px solid #ddd;
        box-shadow: none;
    }
}