/* Golden Theme for Jewelry Shop POS System */

/* Main Golden Color Variables */
:root {
    --golden-primary: #DAA520;
    --golden-dark: #B8860B;
    --golden-light: #F4E4BC;
    --golden-accent: #FFD700;
    --golden-text: #8B4513;
    --golden-bg: #FFF8DC;
    --golden-card-bg: #FFFEF7;
}

/* Sidebar Golden Theme */
.bg-gradient-primary {
    background: linear-gradient(180deg, var(--golden-primary) 10%, var(--golden-dark) 100%) !important;
}

.sidebar .nav-item .nav-link {
    color: #FFF8DC !important;
}

.sidebar .nav-item .nav-link:hover {
    background-color: rgba(255, 215, 0, 0.2) !important;
}

.sidebar .nav-item .nav-link.active {
    background-color: rgba(255, 215, 0, 0.3) !important;
    color: #FFFFFF !important;
}

/* Topbar Golden Theme */
.topbar {
    background: linear-gradient(135deg, var(--golden-primary), var(--golden-accent)) !important;
}

.topbar .nav-link {
    color: #FFFFFF !important;
}

/* Cards and Headers */
.card-header {
    background: linear-gradient(135deg, var(--golden-light), var(--golden-accent)) !important;
    border-bottom: 2px solid var(--golden-primary) !important;
}

.card-header .text-primary {
    color: var(--golden-text) !important;
    font-weight: 600;
}

.card {
    background-color: var(--golden-card-bg) !important;
    border: 1px solid var(--golden-light) !important;
    box-shadow: 0 0.15rem 1.75rem 0 rgba(218, 165, 32, 0.15) !important;
}

/* Buttons */
.btn-primary {
    background: linear-gradient(135deg, var(--golden-primary), var(--golden-dark)) !important;
    border-color: var(--golden-dark) !important;
    color: #FFFFFF !important;
}

.btn-primary:hover {
    background: linear-gradient(135deg, var(--golden-dark), #996515) !important;
    border-color: #996515 !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(218, 165, 32, 0.3);
}

.btn-outline-primary {
    color: var(--golden-primary) !important;
    border-color: var(--golden-primary) !important;
}

.btn-outline-primary:hover {
    background-color: var(--golden-primary) !important;
    border-color: var(--golden-primary) !important;
    color: #FFFFFF !important;
}

/* Secondary buttons for golden theme */
.btn-secondary {
    background: linear-gradient(135deg, #8B7355, #A0906A) !important;
    border-color: #8B7355 !important;
}

.btn-secondary:hover {
    background: linear-gradient(135deg, #6D5940, #8B7355) !important;
    border-color: #6D5940 !important;
}

/* Success buttons with emerald green to complement gold */
.btn-success {
    background: linear-gradient(135deg, #228B22, #32CD32) !important;
    border-color: #228B22 !important;
}

/* Tables */
.table th {
    background: linear-gradient(135deg, var(--golden-light), #F0E68C) !important;
    color: var(--golden-text) !important;
    border-color: var(--golden-primary) !important;
    font-weight: 600;
}

.table td {
    border-color: var(--golden-light) !important;
}

.table-bordered {
    border: 2px solid var(--golden-primary) !important;
}

/* DataTables styling */
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    background: var(--golden-primary) !important;
    border: 1px solid var(--golden-primary) !important;
    color: white !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background: var(--golden-light) !important;
    border: 1px solid var(--golden-primary) !important;
}

/* Text Colors */
.text-primary {
    color: var(--golden-primary) !important;
}

.font-weight-bold.text-primary {
    color: var(--golden-text) !important;
}

/* Badges */
.badge-info {
    background-color: var(--golden-accent) !important;
    color: var(--golden-text) !important;
}

.badge-success {
    background-color: #32CD32 !important;
    color: #000 !important;
}

.badge-primary {
    background-color: var(--golden-primary) !important;
    color: #000 !important;
}

.badge-info {
    background-color: #17a2b8 !important;
    color: #fff !important;
}

/* Border colors for cards */
.border-left-primary {
    border-left: 0.25rem solid var(--golden-primary) !important;
}

.border-left-success {
    border-left: 0.25rem solid #32CD32 !important;
}

.border-left-info {
    border-left: 0.25rem solid var(--golden-accent) !important;
}

.border-left-warning {
    border-left: 0.25rem solid #FF8C00 !important;
}

/* Input Fields */
.form-control:focus {
    border-color: var(--golden-primary) !important;
    box-shadow: 0 0 0 0.2rem rgba(218, 165, 32, 0.25) !important;
}

/* Modal styling */
.modal-header {
    background: linear-gradient(135deg, var(--golden-light), var(--golden-accent)) !important;
    border-bottom: 2px solid var(--golden-primary) !important;
}

.modal-title {
    color: var(--golden-text) !important;
    font-weight: 600;
}

/* Progress bars */
.progress-bar {
    background: linear-gradient(135deg, var(--golden-primary), var(--golden-accent)) !important;
}

/* Alerts */
.alert-success {
    background-color: rgba(50, 205, 50, 0.1) !important;
    border-color: #32CD32 !important;
    color: #228B22 !important;
}

.alert-warning {
    background-color: rgba(255, 140, 0, 0.1) !important;
    border-color: #FF8C00 !important;
    color: #E67E22 !important;
}

.alert-info {
    background-color: rgba(218, 165, 32, 0.1) !important;
    border-color: var(--golden-primary) !important;
    color: var(--golden-text) !important;
}

/* Special styling for jewelry shop */
.jewelry-header {
    color: var(--golden-primary) !important;
    font-weight: 700;
    text-shadow: 2px 2px 4px rgba(218, 165, 32, 0.3);
    background: none !important;
}

/* Ensure all text in headers is visible */
.jewelry-header * {
    color: inherit !important;
}

.jewelry-header .badge {
    color: #000 !important;
}

.jewelry-header .text-muted {
    color: #6c757d !important;
}

.golden-shadow {
    box-shadow: 0 4px 8px rgba(218, 165, 32, 0.2) !important;
}

/* Hover effects for interactive elements */
.card:hover {
    transform: translateY(-2px);
    box-shadow: 0 0.5rem 2rem 0 rgba(218, 165, 32, 0.25) !important;
    transition: all 0.3s ease;
}

/* Custom scrollbar */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: var(--golden-light);
}

::-webkit-scrollbar-thumb {
    background: var(--golden-primary);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--golden-dark);
}

/* Print media - maintain professional look */
@media print {
    .card-header {
        background: #F5F5F5 !important;
        color: #333 !important;
    }
    
    .btn {
        background: #FFF !important;
        color: #333 !important;
        border: 1px solid #333 !important;
    }
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .sidebar {
        background: linear-gradient(180deg, var(--golden-primary) 0%, var(--golden-dark) 100%) !important;
    }
}

/* Animation for golden theme */
@keyframes goldenShimmer {
    0% {
        background-position: -200px 0;
    }
    100% {
        background-position: calc(200px + 100%) 0;
    }
}

.golden-shimmer {
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 215, 0, 0.2),
        transparent
    );
    background-size: 200px 100%;
    animation: goldenShimmer 2s infinite;
}

/* Product cards styling for POS system */
.products {
    background: var(--golden-card-bg, #FFFEF7) !important;
    border: 1px solid var(--golden-light, #F4E4BC) !important;
    border-radius: 0.35rem;
    padding: 15px;
    margin: 10px 0;
    text-align: center;
    transition: all 0.3s ease;
}

.products:hover {
    transform: translateY(-3px);
    box-shadow: 0 0.5rem 1.5rem 0 rgba(218, 165, 32, 0.25) !important;
    border-color: var(--golden-primary, #DAA520) !important;
}

.products h6 {
    margin-bottom: 8px;
    font-weight: 600;
}

.products .jewelry-header {
    background: linear-gradient(135deg, var(--golden-accent, #FFD700), #FFE55C, var(--golden-primary, #DAA520)) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text;
    font-weight: 700;
}

.products .btn {
    width: 100%;
    margin-top: 10px;
    font-weight: 600;
}

.products .form-control {
    border: 2px solid var(--golden-light, #F4E4BC);
    text-align: center;
    font-weight: 600;
}

.products .form-control:focus {
    border-color: var(--golden-primary, #DAA520);
    box-shadow: 0 0 0 0.2rem rgba(218, 165, 32, 0.25);
}

/* Tab content styling */
.tab-content {
    background: var(--golden-bg, #FFF8DC);
    border-radius: 0.35rem;
    padding: 20px;
    margin-top: 10px;
}

.tab-pane {
    background: transparent;
}

/* Enhanced jewelry icons */
.jewelry-header i {
    color: var(--golden-accent, #FFD700) !important;
    text-shadow: 1px 1px 2px rgba(218, 165, 32, 0.3);
}