/* ============================================
   Dark Glassmorphism Theme - Menu Management & Unified Dashboard
   Use with base.html for consistent dark glass UI
   ============================================ */

/* Ensure menu-management pages have dark background */
body .container {
    color: rgba(255, 255, 255, 0.95);
}

/* Glass cards - override any light backgrounds */
.function-card,
.overview-card,
.section-header,
.quick-actions,
.dashboard-header,
.action-card,
.phase-card,
.staff-card,
.metric-card,
.stat-card,
.dashboard-grid .card,
.menu-management-page .card,
.analytics-card,
.analytics-header,
.optimization-card,
.optimization-header,
.customer-header,
.customer-table,
.search-box,
.date-filter,
.date-range,
.filter-section,
.brand-selector,
.menu-stats,
.recent-instances,
.station-filter,
.completed-orders,
.stat-card,
.activity-card,
.menu-type-card,
.menu-card,
.chart-container,
.recommendation-item,
.brand-performance,
.course-menu-header,
.table-responsive,
.kds-header,
.order-card {
    background: rgba(255, 255, 255, 0.06) !important;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
    color: rgba(255, 255, 255, 0.95) !important;
}

.function-card:hover,
.action-card:hover,
.phase-card:hover,
.analytics-card:hover,
.optimization-card:hover,
.menu-type-card:hover,
.menu-card:hover,
.recommendation-item:hover,
.brand-performance:hover {
    background: rgba(255, 255, 255, 0.1) !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4) !important;
}

.function-title,
.section-header h2,
.quick-actions h3,
.card-title,
.phase-title {
    color: #fff !important;
}

.function-description,
.section-header p,
.stat-label,
.phase-description,
.text-muted {
    color: rgba(255, 255, 255, 0.75) !important;
}

.stat-number,
.metric-number,
.overview-number {
    color: rgba(255, 255, 255, 0.95) !important;
}

.function-stats,
.stat-item {
    border-color: rgba(255, 255, 255, 0.1) !important;
}

/* Dashboard header glass */
.dashboard-header {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.25) 0%, rgba(118, 75, 162, 0.25) 100%) !important;
    backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

/* Section headers */
.section-header {
    background: rgba(255, 255, 255, 0.05) !important;
    border-left-color: rgba(102, 126, 234, 0.8) !important;
}

/* Overview stats cards */
.overview-card {
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
}

/* Quick actions panel */
.quick-actions {
    background: rgba(255, 255, 255, 0.06) !important;
    border-left-color: rgba(40, 167, 69, 0.6) !important;
}

/* Priority borders (keep accent) */
.function-card.priority-high { border-left: 4px solid rgba(220, 53, 69, 0.9); }
.function-card.priority-medium { border-left: 4px solid rgba(255, 193, 7, 0.9); }
.function-card.priority-low { border-left: 4px solid rgba(40, 167, 69, 0.9); }

/* Buttons in quick actions - ensure visibility */
.action-buttons .btn-outline-primary,
.action-buttons .btn-outline-info,
.action-buttons .btn-outline-success {
    border-color: rgba(255, 255, 255, 0.4);
    color: rgba(255, 255, 255, 0.95);
}
.action-buttons .btn-outline-primary:hover,
.action-buttons .btn-outline-info:hover,
.action-buttons .btn-outline-success:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.6);
    color: #fff;
}

.action-buttons .btn-warning {
    background: linear-gradient(135deg, #ed8936 0%, #dd6b20 100%);
    border: none;
    color: #fff;
}
.action-buttons .btn-danger {
    background: linear-gradient(135deg, #fc8181 0%, #e53e3e 100%);
    border: none;
    color: #fff;
}

/* Tables inside glass pages */
.table {
    color: rgba(255, 255, 255, 0.9);
}
.table thead th {
    background: rgba(102, 126, 234, 0.2);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.1);
}
.table tbody td {
    border-color: rgba(255, 255, 255, 0.06);
}

/* Back button / nav */
.back-nav a,
.back-button {
    color: rgba(255, 255, 255, 0.95) !important;
}
.back-nav a:hover,
.back-button:hover {
    color: #fff !important;
}

/* Full-page containers - transparent so body shows */
.analytics-container {
    background: transparent !important;
    color: rgba(255, 255, 255, 0.95);
}

/* Section titles and labels */
.section-title {
    color: #fff !important;
    border-bottom-color: rgba(102, 126, 234, 0.5) !important;
}
.metric-label,
.performance-metric .metric-label {
    color: rgba(255, 255, 255, 0.8) !important;
}
.metric-value,
.performance-metric .metric-value {
    color: rgba(255, 255, 255, 0.95) !important;
}
.progress-bar {
    background: rgba(255, 255, 255, 0.15) !important;
}
.activity-item,
.activity-info strong,
.activity-time {
    color: rgba(255, 255, 255, 0.9) !important;
}
.activity-item {
    border-bottom-color: rgba(255, 255, 255, 0.1) !important;
}
.menu-type-title,
.menu-name {
    color: #fff !important;
}
.menu-type-description,
.menu-description,
.meta-item {
    color: rgba(255, 255, 255, 0.75) !important;
}
.menu-type-stats,
.menu-footer {
    border-color: rgba(255, 255, 255, 0.1) !important;
}
.status-active {
    background: rgba(40, 167, 69, 0.25);
    color: #81c784;
}
.status-inactive {
    background: rgba(220, 53, 69, 0.25);
    color: #f87171;
}
.order-card .order-number,
.order-card .item-name,
.order-card .order-meta,
.order-card .timer {
    color: rgba(255, 255, 255, 0.95) !important;
}
.order-card .item-status {
    color: rgba(255, 255, 255, 0.8) !important;
}
.stat-content h3,
.stat-content p {
    color: rgba(255, 255, 255, 0.95) !important;
}
.stat-content p {
    opacity: 0.9;
}

/* Modal dark glass */
.modal-content {
    background: rgba(26, 26, 46, 0.98) !important;
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    color: #fff;
}
.modal-header {
    border-color: rgba(255, 255, 255, 0.1) !important;
}
.modal-title {
    color: #fff !important;
}
.modal-body {
    color: rgba(255, 255, 255, 0.9);
}
.modal-footer {
    border-color: rgba(255, 255, 255, 0.1) !important;
}
.btn-close {
    filter: invert(1);
    opacity: 0.8;
}

/* Footer */
footer.bg-dark {
    background: rgba(15, 15, 25, 0.95) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.8);
}