/* 
 * MileMinder Light Theme - Design System Integration
 * Clean, modern light theme that works with our design system
 */

/* ====================
   Bootstrap Integration
   ==================== */

/* Ensure Bootstrap uses our design system colors */
:root {
    --bs-body-bg: var(--neutral-50);
    --bs-body-color: var(--neutral-800);
    --bs-card-bg: #ffffff;
    --bs-card-color: var(--neutral-800);
    --bs-card-cap-bg: var(--neutral-50);
    --bs-border-color: var(--neutral-200);
    --bs-light: var(--neutral-50);
    --bs-dark: var(--neutral-800);
}

/* ====================
   Force Light Theme
   ==================== */

/* Disable any dark theme attempts */
[data-bs-theme="dark"] {
    color-scheme: light !important;
}

html {
    background-color: var(--neutral-50);
    color-scheme: light !important;
}

body {
    background-color: var(--neutral-50);
    color: var(--neutral-800);
    color-scheme: light !important;
}

/* ====================
   Clean Background Override
   ==================== */

/* Remove any potential dark backgrounds */
body.dark-theme,
body.dark-mode,
body.bg-dark,
.bg-dark,
.bg-black,
.dark-theme,
.dark-mode {
    background-color: var(--neutral-50) !important;
    color: var(--neutral-800) !important;
}

/* Target any element with inline dark styles */
*[style*="background: black"],
*[style*="background:#000"],
*[style*="background-color: black"],
*[style*="background-color:#000"] {
    background-color: #ffffff !important;
}

/* ====================
   Container Styling
   ==================== */

.container,
.container-fluid,
main,
#wrapper,
#app,
#root,
.wrapper,
.app-wrapper,
.main-wrapper,
.content-wrapper,
.page-wrapper,
.content,
.main-content,
.page-content,
.admin-content {
    background-color: transparent;
}

/* ====================
   Navigation Styling
   ==================== */

.navbar-light {
    background-color: #ffffff;
    border-bottom: 1px solid var(--neutral-200);
    box-shadow: var(--shadow-sm);
}

.navbar-light .navbar-brand {
    color: var(--neutral-900);
    font-weight: var(--font-semibold);
}

.navbar-light .navbar-brand:hover {
    color: var(--primary-600);
}

.navbar-light .nav-link {
    color: var(--neutral-700);
    font-weight: var(--font-medium);
}

.navbar-light .nav-link:hover {
    color: var(--primary-600);
    background-color: var(--primary-50);
}

.navbar-light .nav-link.active {
    color: var(--primary-700);
    background-color: var(--primary-100);
}

.navbar-toggler {
    border-color: var(--neutral-300);
}

.navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%2875, 85, 99, 0.8%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* ====================
   Form Elements
   ==================== */

.form-control {
    border: 1px solid var(--neutral-300);
    background-color: #ffffff;
    color: var(--neutral-800);
}

.form-control:focus {
    border-color: var(--primary-500);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
    background-color: #ffffff;
    color: var(--neutral-900);
}

.form-control:disabled {
    background-color: var(--neutral-100);
    opacity: 0.7;
}

.form-select {
    border: 1px solid var(--neutral-300);
    background-color: #ffffff;
    color: var(--neutral-800);
}

.form-select:focus {
    border-color: var(--primary-500);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.form-check-input {
    border: 1px solid var(--neutral-300);
    background-color: #ffffff;
}

.form-check-input:checked {
    background-color: var(--primary-600);
    border-color: var(--primary-600);
}

.input-group-text {
    border: 1px solid var(--neutral-300);
    background-color: var(--neutral-100);
    color: var(--neutral-700);
}

/* ====================
   Table Enhancements
   ==================== */

/* Special handling for table-primary to maintain current company highlighting */
.table-primary,
.table-primary > th,
.table-primary > td,
.table > tbody > tr.table-primary,
.table > tbody > tr.table-primary > th,
.table > tbody > tr.table-primary > td,
tr.table-primary,
tr.table-primary > th,
tr.table-primary > td,
.current-company-row,
.current-company-row > td,
.current-company-row > th {
    background-color: var(--neutral-50) !important;
    border-left: 3px solid var(--success-600) !important;
    --bs-table-bg: var(--neutral-50) !important;
    --bs-table-accent-bg: var(--neutral-50) !important;
}

.table-primary:hover,
.current-company-row:hover,
.current-company-row:hover > td,
.current-company-row:hover > th {
    background-color: var(--neutral-100) !important;
}

/* Excessive hours highlighting */
tr.excessive-hours {
    background-color: var(--error-50) !important;
}

tr.excessive-hours:hover {
    background-color: var(--error-100) !important;
}

/* ====================
   Modal Styling
   ==================== */

.modal-content {
    background-color: #ffffff;
    color: var(--neutral-800);
    border: none;
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-xl);
}

.modal-header {
    background-color: var(--neutral-50);
    color: var(--neutral-800);
    border-bottom: 1px solid var(--neutral-200);
}

.modal-body {
    background-color: #ffffff;
    color: var(--neutral-800);
}

.modal-footer {
    background-color: var(--neutral-50);
    color: var(--neutral-800);
    border-top: 1px solid var(--neutral-200);
}

.modal-title {
    color: var(--neutral-900);
    font-weight: var(--font-semibold);
}

.modal-backdrop {
    background-color: #000;
    opacity: 0.5;
}

.modal-header .btn-close {
    background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%236b7280'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e") center/1em auto no-repeat;
    opacity: 0.7;
    transition: opacity var(--transition-fast) ease;
}

.modal-header .btn-close:hover {
    opacity: 1;
}

/* Modal form elements */
.modal-body .form-control,
.modal-body .form-select {
    background-color: #ffffff;
    color: var(--neutral-800);
    border: 1px solid var(--neutral-300);
}

.modal-body .form-control:focus,
.modal-body .form-select:focus {
    background-color: #ffffff;
    color: var(--neutral-900);
    border-color: var(--primary-500);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.modal-body .form-label {
    color: var(--neutral-700);
    font-weight: var(--font-medium);
}

.modal-body .form-check-label {
    color: var(--neutral-700);
}

.modal-body .form-text,
.modal-body .form-control-plaintext {
    color: var(--neutral-600);
}

/* ====================
   Typography Fixes
   ==================== */

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.display-1, .display-2, .display-3, .display-4, .display-5, .display-6 {
    color: var(--neutral-900);
}

/* Override specific elements that might have conflicting colors */
p:not(.text-muted):not(.text-primary):not(.text-danger):not(.text-success):not(.text-warning):not(.text-info):not(.text-white),
span:not(.text-muted):not(.text-primary):not(.text-danger):not(.text-success):not(.text-warning):not(.text-info):not(.text-white):not(.badge),
div:not(.alert):not(.badge),
td:not(.table-primary),
th:not(.table-primary),
li:not(.breadcrumb-item) {
    color: var(--neutral-800);
}

/* ====================
   Utility Color Classes
   ==================== */

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

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

.text-danger {
    color: var(--error-600) !important;
}

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

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

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

.text-white {
    color: #ffffff !important;
}

/* ====================
   Button Overrides
   ==================== */

/* Override any gray button defaults to use design system colors */
.btn-secondary {
    background-color: #ffffff;
    color: var(--neutral-700);
    border-color: var(--neutral-300);
}

.btn-secondary:hover {
    background-color: var(--neutral-50);
    border-color: var(--neutral-400);
    color: var(--neutral-800);
}

/* ====================
   Navigation Components
   ==================== */

/* Bottom navigation for mobile */
.bottom-nav {
    background-color: #ffffff;
    border-top: 1px solid var(--neutral-200);
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.1);
}

.bottom-nav a {
    color: var(--neutral-600);
    transition: color var(--transition-fast) ease;
}

.bottom-nav a:hover,
.bottom-nav a.active {
    color: var(--primary-600);
}

/* Breadcrumbs */
.breadcrumb {
    background-color: transparent;
}

.breadcrumb-item a {
    color: var(--primary-600);
}

.breadcrumb-item.active {
    color: var(--neutral-700);
}

/* Dropdown menus */
.dropdown-menu {
    border: 1px solid var(--neutral-200);
    box-shadow: var(--shadow-lg);
    background-color: #ffffff;
    /* Ensure proper scrolling in light theme */
    scrollbar-color: var(--neutral-300) transparent;
}

.dropdown-item {
    color: var(--neutral-700);
    transition: all var(--transition-fast) ease;
}

.dropdown-item:hover {
    background-color: var(--neutral-100);
    color: var(--neutral-900);
}

.dropdown-item:focus {
    background-color: var(--primary-50);
    color: var(--primary-700);
    outline: none;
}

/* ====================
   Badge & Alert Styling
   ==================== */

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

.badge-secondary {
    background-color: var(--neutral-600);
}

.alert-primary {
    color: var(--primary-800);
    background-color: var(--primary-50);
    border-color: var(--primary-200);
}

/* ====================
   Footer
   ==================== */

footer {
    background-color: var(--neutral-50);
    border-top: 1px solid var(--neutral-200);
    color: var(--neutral-700);
}

/* ====================
   Loading States
   ==================== */

select.loading {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cpath fill='%2359730246' d='M10 3a7 7 0 100 14 7 7 0 000-14zm0 12a5 5 0 110-10 5 5 0 010 10z' opacity='.3'/%3E%3Cpath fill='%2359730246' d='M10 3a7 7 0 017 7h2a9 9 0 00-9-9v2z'%3E%3CanimateTransform attributeName='transform' attributeType='XML' type='rotate' from='0 10 10' to='360 10 10' dur='1s' repeatCount='indefinite'/%3E%3C/path%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 20px 20px;
    padding-right: 40px !important;
}

select:disabled {
    background-color: var(--neutral-100);
    cursor: not-allowed;
    opacity: 0.7;
}

/* ====================
   Accessibility & Performance
   ==================== */

/* Respect reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}