/* Site-wide color palette using CSS variables for DRY principles */
:root {
    /* Primary Colors */
    --color-background: #E9E9E9;        /* Site background */
    --color-text-primary: #282828;      /* Most text */
    --color-border: #231F20;            /* Visual borders and line elements */
    --color-text-small: #868686;        /* Small text like field identifiers */
    --color-placeholder: #D4D4D5;       /* Placeholder text in form fields */
    --color-form-bg: #D9D9D9;           /* Form backgrounds */
    
    /* Override Bootstrap 5 CSS variables */
    --bs-dark: var(--color-text-primary);
    --bs-dark-rgb: 40, 40, 40;
    
    /* Additional utility colors derived from the palette */
    --color-white: #FFFFFF;
    --color-black: #000000;
    
    /* Semantic colors */
    --color-success: #28a745;
    --color-warning: #ffc107;
    --color-danger: #dc3545;
    --color-info: #17a2b8;
    
    /* Component-specific colors */
    --color-navbar-bg: rgba(255, 255, 255, 0.95);
    --color-navbar-text: var(--color-text-primary);
    --color-card-bg: var(--color-white);
    --color-card-border: var(--color-border);
    
    /* Table colors */
    --color-table-border: var(--color-border);
    --color-table-header-bg: var(--color-form-bg);
    --color-table-row-hover: rgba(217, 217, 217, 0.5);
    
    /* Button colors */
    --color-btn-primary-bg: var(--color-text-primary);
    --color-btn-primary-text: var(--color-white);
    --color-btn-secondary-bg: var(--color-form-bg);
    --color-btn-secondary-text: var(--color-text-primary);
    
    /* Input colors */
    --color-input-bg: var(--color-form-bg);
    --color-input-border: var(--color-border);
    --color-input-text: var(--color-text-primary);
    --color-input-placeholder: var(--color-placeholder);
    --color-input-focus-border: var(--color-text-primary);
    
    /* Label colors */
    --color-label: var(--color-text-small);
}

/* Global color application */
body {
    background-color: var(--color-background);
    color: var(--color-text-primary);
}

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

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

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

/* Background color classes */
.bg-site {
    background-color: var(--color-background) !important;
}

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

/* Border color classes */
.border-primary-color {
    border-color: var(--color-border) !important;
}

/* Form control styles */
.form-control,
.form-select,
input[type="text"],
input[type="email"],
input[type="number"],
input[type="date"],
input[type="time"],
input[type="password"],
input[type="file"],
textarea,
select {
    background-color: var(--color-input-bg);
    border: 1px solid var(--color-input-border);
    color: var(--color-input-text);
}

.form-control::placeholder,
input::placeholder,
textarea::placeholder {
    color: var(--color-input-placeholder);
}

.form-control:focus,
.form-select:focus,
input:focus,
textarea:focus,
select:focus {
    background-color: var(--color-white);
    border-color: var(--color-input-focus-border);
    color: var(--color-input-text);
    box-shadow: 0 0 0 0.2rem rgba(40, 40, 40, 0.1);
}

/* Label styles */
label,
.form-label {
    color: var(--color-label);
    font-size: 0.9rem;
    font-weight: 500;
}

/* Table styles - Override Bootstrap defaults globally */
.table {
    color: var(--color-text-primary) !important;
    border-color: var(--color-table-border) !important;
    background-color: var(--color-background) !important;
}

.table thead th {
    background-color: var(--color-table-header-bg) !important;
    border-color: var(--color-table-border) !important;
    color: var(--color-text-primary) !important;
    font-weight: 600;
}

.table td,
.table th {
    border-color: var(--color-table-border) !important;
    color: var(--color-text-primary) !important;
    background-color: var(--color-background) !important;
}

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

.table-bordered {
    border-color: var(--color-table-border) !important;
}

.table-bordered td,
.table-bordered th {
    border-color: var(--color-table-border) !important;
}

.table-hover tbody tr:hover {
    background-color: var(--color-table-row-hover) !important;
    color: var(--color-text-primary) !important;
}

.table-striped > tbody > tr:nth-of-type(odd) > * {
    background-color: rgba(217, 217, 217, 0.15) !important;
}


/* Card styles */
.card {
    background-color: var(--color-card-bg);
    border: 1px solid var(--color-card-border);
    color: var(--color-text-primary);
}

.card-header {
    background-color: var(--color-form-bg);
    border-bottom: 1px solid var(--color-card-border);
    color: var(--color-text-primary);
}

/* Override transparent cards */
.transparent-card {
    background-color: var(--color-white) !important;
    border: 1px solid var(--color-border) !important;
}

/* Button styles */
.btn-primary {
    background-color: var(--color-btn-primary-bg);
    border-color: var(--color-btn-primary-bg);
    color: var(--color-btn-primary-text);
}

.btn-primary:hover {
    background-color: var(--color-text-small);
    border-color: var(--color-text-small);
}

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

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

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

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

/* Navbar styles */
.navbar-brand,
.navbar-nav .nav-link {
    color: var(--color-navbar-text) !important;
}

.navbar-nav .nav-link:hover {
    color: var(--color-text-small) !important;
}

/* Alert styles with new color scheme */
.alert {
    border: 1px solid var(--color-border);
}

/* Breadcrumb styles */
.breadcrumb {
    background-color: var(--color-form-bg);
}

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

.breadcrumb-item.active {
    color: var(--color-text-small);
}

/* Text color overrides for consistency */
.text-light {
    color: var(--color-text-primary) !important;
}

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

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

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

/* Heading consistency */
h1, h2, h3, h4, h5, h6 {
    color: var(--color-text-primary) !important;
}