/* Premium Color Palette */
:root {
    --primary-color: #6096B4;
    --secondary-color: #93BFCF;
    --tertiary-color: #BDCDD6;
    --background-color: #EEE9DA;
    --container-bg: #FAFAF7;
    --text-dark: #2c3e50;
    --text-muted: #6c757d;
    --white: #ffffff;
    --success: #28a745;
    --warning: #ffc107;
    --danger: #dc3545;
    --info: #17a2b8;
}

/* Global Styles */
body {
    background-color: var(--background-color);
    color: var(--text-dark);
}

/* Navbar - Premium Theme */
.navbar.bg-primary {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%) !important;
    box-shadow: 0 2px 10px rgba(96, 150, 180, 0.3);
}

.navbar-brand,
.navbar .nav-link {
    color: var(--white) !important;
    transition: opacity 0.3s ease;
}

.navbar .nav-link:hover,
.navbar-brand:hover {
    opacity: 0.85;
}

.navbar .dropdown-menu {
    background-color: var(--container-bg);
    border: 1px solid var(--tertiary-color);
}

.navbar .dropdown-item:hover {
    background-color: var(--background-color);
}

/* Buttons */
.btn-primary {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
    border: none;
    color: var(--white);
    box-shadow: 0 2px 8px rgba(96, 150, 180, 0.3);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.btn-primary:hover,
.btn-primary:focus {
    background: linear-gradient(135deg, #537a94 0%, #7aa4b8 100%);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(96, 150, 180, 0.4);
    color: var(--white);
}

.btn-outline-primary {
    color: var(--primary-color);
    border-color: var(--primary-color);
    background-color: transparent;
}

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

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

.btn-secondary {
    background-color: var(--secondary-color);
    border-color: var(--secondary-color);
    color: var(--white);
}

.btn-secondary:hover {
    background-color: #7aa4b8;
    border-color: #7aa4b8;
}

/* Cards */
.card {
    border: 1px solid var(--tertiary-color);
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(96, 150, 180, 0.15);
    background-color: var(--container-bg);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(96, 150, 180, 0.25);
}

.card-header {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
    color: var(--white);
    border-bottom: none;
    border-radius: 12px 12px 0 0 !important;
}

/* Premium Cards (Dashboard) */
.card.bg-primary {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%) !important;
    border: none;
}

.card.bg-success {
    background: linear-gradient(135deg, #28a745 0%, #20c997 100%) !important;
    border: none;
}

.card.bg-warning {
    background: linear-gradient(135deg, #ffc107 0%, #ffdd57 100%) !important;
    border: none;
}

.card.bg-info {
    background: linear-gradient(135deg, var(--secondary-color) 0%, var(--tertiary-color) 100%) !important;
    border: none;
}

/* Tables */
.table {
    background-color: var(--container-bg);
}

.table tbody tr {
    background-color: var(--container-bg);
}

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

.table thead th {
    border-bottom: 2px solid var(--tertiary-color);
    color: var(--text-dark);
}

.table-hover tbody tr:hover {
    background-color: rgba(96, 150, 180, 0.08);
}

.table.table-sm th.sortable.active {
    background-color: rgba(96, 150, 180, 0.15) !important;
}

.table.table-sm th.sortable:hover {
    background-color: rgba(96, 150, 180, 0.1) !important;
}

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

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

.badge.bg-info {
    background-color: var(--tertiary-color) !important;
    color: var(--text-dark) !important;
}

/* Forms */
.form-control:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 0.2rem rgba(96, 150, 180, 0.25);
}

.form-select:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 0.2rem rgba(96, 150, 180, 0.25);
}

.input-group-text {
    background-color: var(--tertiary-color);
    border-color: var(--tertiary-color);
    color: var(--text-dark);
}

/* Pagination */
.pagination .page-link {
    color: var(--primary-color);
    border-color: var(--tertiary-color);
}

.pagination .page-link:hover {
    background-color: var(--background-color);
    border-color: var(--secondary-color);
}

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

.pagination .page-item.disabled .page-link {
    color: var(--text-muted);
    background-color: var(--container-bg);
}

/* Footer */
.footer.bg-light {
    background-color: var(--tertiary-color) !important;
    border-top: 2px solid var(--secondary-color);
}

.footer a {
    color: var(--primary-color);
    transition: color 0.2s ease;
}

.footer a:hover {
    color: var(--secondary-color);
}

/* Alerts */
.alert-info {
    background-color: rgba(147, 191, 207, 0.2);
    border-color: var(--secondary-color);
    color: var(--text-dark);
}

.alert-success {
    background-color: rgba(40, 167, 69, 0.15);
    border-color: #28a745;
}

.alert-warning {
    background-color: rgba(255, 193, 7, 0.15);
    border-color: #ffc107;
}

.alert-danger {
    background-color: rgba(220, 53, 69, 0.15);
    border-color: #dc3545;
}

/* Spinner */
.spinner-border.text-primary {
    color: var(--primary-color) !important;
}

/* Progress Bar */
.progress-bar {
    background-color: var(--primary-color);
}

.progress-bar.progress-bar-striped {
    background-image: linear-gradient(
        45deg,
        rgba(255, 255, 255, 0.15) 25%,
        transparent 25%,
        transparent 50%,
        rgba(255, 255, 255, 0.15) 50%,
        rgba(255, 255, 255, 0.15) 75%,
        transparent 75%,
        transparent
    );
}

/* Hero Section */
.display-4 {
    color: var(--primary-color);
}

.lead {
    color: var(--text-dark);
}

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

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

/* Icons in Cards */
.card-body i.fa-3x {
    opacity: 0.9;
}

.card.bg-primary i,
.card.bg-success i,
.card.bg-warning i,
.card.bg-info i {
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
}

/* Button Groups */
.btn-group .btn-outline-primary.active {
    background-color: var(--primary-color);
    color: var(--white);
}

.btn-group .btn-outline-success.active {
    background-color: #28a745;
    color: var(--white);
}

.btn-group .btn-outline-warning.active {
    background-color: #ffc107;
    color: var(--text-dark);
}

/* Sort Icons */
.sortable.active .sort-icon {
    color: var(--primary-color) !important;
}

/* QR Code Display */
.qr-code {
    color: var(--primary-color);
}

/* Media Cards */
.image-overlay-title,
.media-overlay-title {
    background: linear-gradient(
        180deg,
        rgba(96, 150, 180, 0.95) 0%,
        rgba(96, 150, 180, 0.85) 100%
    );
}

/* Custom Scrollbar */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

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

::-webkit-scrollbar-thumb {
    background: var(--tertiary-color);
    border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--secondary-color);
}

/* Modal */
.modal-content {
    background-color: var(--container-bg);
    border: 1px solid var(--tertiary-color);
}

.modal-header {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
    color: var(--white);
    border-bottom: none;
}

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

.modal-body {
    background-color: var(--container-bg);
}

.modal-footer {
    background-color: var(--container-bg);
    border-top: 1px solid var(--tertiary-color);
}

/* Input Groups */
.input-group .form-control {
    background-color: var(--container-bg);
}

/* List Groups */
.list-group-item {
    background-color: var(--container-bg);
    border-color: var(--tertiary-color);
}

.list-group-item:hover {
    background-color: var(--background-color);
}

/* Containers */
.container,
.container-fluid {
    background-color: transparent;
}

/* White backgrounds for specific elements */
.bg-white {
    background-color: var(--container-bg) !important;
}

/* Transitions */
a,
button,
.btn {
    transition: all 0.3s ease;
}