/* 
   Shared Styles for All Views
   Include this in your wwwroot/css/view-utilities.css 
   and reference in _Layout.cshtml
*/

/* Remove old dark theme styles from views */
.glass-card {
    background: var(--card-bg) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 12px !important;
    padding: 1.5rem !important;
    box-shadow: var(--shadow-sm) !important;
}

/* Override any hardcoded dark backgrounds */
.bg-dark {
    background: var(--bg-tertiary) !important;
}

.table-dark {
    background: var(--card-bg) !important;
}

    .table-dark th {
        background: var(--bg-tertiary) !important;
        color: var(--text-secondary) !important;
        border-color: var(--border-color) !important;
    }

    .table-dark td {
        background: var(--card-bg) !important;
        color: var(--text-primary) !important;
        border-color: var(--border-color) !important;
    }

/* Fix form controls */
.form-control,
.form-select {
    background: var(--bg-tertiary) !important;
    border: 1px solid var(--border-color) !important;
    color: var(--text-primary) !important;
    font-size: 0.875rem !important;
}

    .form-control:focus,
    .form-select:focus {
        background: var(--bg-secondary) !important;
        border-color: var(--primary-color) !important;
        box-shadow: 0 0 0 3px rgba(255, 107, 53, 0.1) !important;
    }

/* Fix badges */
.badge {
    font-size: 0.7rem !important;
    padding: 0.25rem 0.5rem !important;
    font-weight: 600 !important;
}

    .badge.bg-primary {
        background: rgba(255, 107, 53, 0.1) !important;
        color: var(--primary-color) !important;
    }

    .badge.bg-success {
        background: rgba(0, 184, 148, 0.1) !important;
        color: var(--success-color) !important;
    }

    .badge.bg-warning {
        background: rgba(253, 203, 110, 0.1) !important;
        color: var(--warning-color) !important;
    }

    .badge.bg-danger {
        background: rgba(238, 90, 111, 0.1) !important;
        color: var(--danger-color) !important;
    }

/* Fix buttons */
.btn {
    font-size: 0.875rem !important;
    padding: 0.5rem 1rem !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
}

.btn-primary,
.btn-primary-custom {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%) !important;
    border: none !important;
    color: white !important;
}

.btn-outline-light {
    background: transparent !important;
    border: 1px solid var(--border-color) !important;
    color: var(--text-primary) !important;
}

    .btn-outline-light:hover {
        background: var(--bg-tertiary) !important;
        border-color: var(--primary-color) !important;
        color: var(--primary-color) !important;
    }

/* Chart container fixes for all views */
.chart-container,
.chart-box {
    position: relative;
    height: 250px !important;
    width: 100%;
}

    .chart-container canvas,
    .chart-box canvas {
        max-height: 100% !important;
        max-width: 100% !important;
    }

/* Specific chart sizes */
.chart-small {
    height: 200px !important;
}

.chart-medium {
    height: 300px !important;
}

.chart-large {
    height: 400px !important;
}

/* Map containers */
.map-container {
    height: 600px !important;
    border-radius: 12px;
    overflow: hidden;
}

.map-result {
    height: 550px !important;
    border-radius: 12px;
    overflow: hidden;
}

/* Fix text colors */
.text-white {
    color: var(--text-primary) !important;
}

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

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

/* Fix card headers */
.card-header,
.modal-header {
    background: var(--bg-tertiary) !important;
    border-bottom: 1px solid var(--border-color) !important;
}

/* Fix modal backgrounds */
.modal-content {
    background: var(--card-bg) !important;
    border: 1px solid var(--border-color) !important;
}

/* SweetAlert2 theme fixes */
.swal2-popup {
    background: var(--card-bg) !important;
    color: var(--text-primary) !important;
}

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

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

.swal2-input,
.swal2-select,
.swal2-textarea {
    background: var(--bg-tertiary) !important;
    border: 1px solid var(--border-color) !important;
    color: var(--text-primary) !important;
}

/* Remove any gradient backgrounds that don't match */
.gradient-bg,
.linear-gradient {
    background: var(--card-bg) !important;
}

/* Consistent spacing */
.mb-4 {
    margin-bottom: 1.5rem !important;
}

.mb-3 {
    margin-bottom: 1rem !important;
}

.p-4 {
    padding: 1.5rem !important;
}

.p-3 {
    padding: 1rem !important;
}

/* Headings consistency */
h1 {
    font-size: 1.75rem !important;
}

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

h3 {
    font-size: 1.25rem !important;
}

h4 {
    font-size: 1.1rem !important;
}

h5 {
    font-size: 1rem !important;
}

h6 {
    font-size: 0.875rem !important;
}

/* Alert items consistency */
.alert-item,
.supply-card,
.analytics-card,
.cert-card {
    background: var(--card-bg) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 12px !important;
    padding: 1.25rem !important;
    margin-bottom: 1rem !important;
}

/* Status badges consistency */
.status-badge {
    padding: 0.25rem 0.75rem !important;
    border-radius: 20px !important;
    font-size: 0.75rem !important;
    font-weight: 600 !important;
}

    .status-badge.active,
    .status-badge.delivered {
        background: rgba(0, 184, 148, 0.1) !important;
        color: var(--success-color) !important;
    }

    .status-badge.pending,
    .status-badge.in-transit {
        background: rgba(253, 203, 110, 0.1) !important;
        color: var(--warning-color) !important;
    }

    .status-badge.blocked,
    .status-badge.failed {
        background: rgba(238, 90, 111, 0.1) !important;
        color: var(--danger-color) !important;
    }

/* Progress bars */
.progress {
    background: var(--bg-tertiary) !important;
    height: 8px !important;
}

.progress-bar {
    background: linear-gradient(90deg, var(--primary-color), var(--primary-dark)) !important;
}

/* Tooltips */
.tooltip-inner {
    background: var(--bg-primary) !important;
    color: var(--text-primary) !important;
    font-size: 0.75rem !important;
}

/* Breadcrumbs */
.breadcrumb {
    background: transparent !important;
    padding: 0 !important;
    margin-bottom: 1rem !important;
}

.breadcrumb-item {
    font-size: 0.875rem !important;
}

    .breadcrumb-item + .breadcrumb-item::before {
        color: var(--text-muted) !important;
    }

    .breadcrumb-item a {
        color: var(--text-secondary) !important;
        text-decoration: none !important;
    }

    .breadcrumb-item.active {
        color: var(--text-primary) !important;
    }