/* Memorial Management System - Theme Token System */
/* This file defines all theme-aware variables for Light and Dark modes */

/* ===== DARK THEME (DEFAULT) ===== */
:root,
[data-bs-theme="dark"],
[data-theme="dark"] {
    /* Core Colors */
    --mm-bg-primary: #0D0D0D;
    --mm-bg-secondary: #1a1a1a;
    --mm-bg-surface: #222222;
    --mm-bg-elevated: #2a2a2a;
    
    /* Text Colors */
    --mm-text-primary: #F2F2F2;
    --mm-text-secondary: #C0C0C0;
    --mm-text-muted: #8a8a8a;
    --mm-text-placeholder: #6a6a6a;
    
    /* Border Colors */
    --mm-border-default: #444444;
    --mm-border-subtle: #333333;
    --mm-border-focus: #C8A96A;
    
    /* Brand Colors (Gold) */
    --mm-gold: #C8A96A;
    --mm-gold-bright: #D1B675;
    --mm-gold-button: #E1B866;
    --mm-gold-hover: #d4c090;
    
    /* Primary Action (Gold on Black) */
    --mm-primary: #E1B866;
    --mm-primary-hover: #C8A96A;
    --mm-primary-foreground: #000000;
    
    /* Form Controls */
    --mm-input-bg: #1a1a1a;
    --mm-input-bg-focus: #1f1f1f;
    --mm-input-text: #F2F2F2;
    --mm-input-border: #444444;
    --mm-input-border-focus: #C8A96A;
    --mm-input-placeholder: #6a6a6a;
    --mm-input-disabled-bg: #151515;
    --mm-input-disabled-text: #666666;
    --mm-input-readonly-bg: #1a1a1a;
    
    /* Focus Ring */
    --mm-focus-ring: rgba(200, 169, 106, 0.35);
    
    /* Semantic Colors */
    --mm-success: #8b7355;
    --mm-success-bg: rgba(139, 115, 85, 0.15);
    --mm-danger: #dc3545;
    --mm-danger-bg: rgba(220, 53, 69, 0.15);
    --mm-warning: #C8A96A;
    --mm-warning-bg: rgba(200, 169, 106, 0.15);
    --mm-info: #4682B4;
    --mm-info-bg: rgba(70, 130, 180, 0.15);
    
    /* Table */
    --mm-table-stripe: rgba(255, 255, 255, 0.02);
    --mm-table-hover: rgba(200, 169, 106, 0.1);
    --mm-table-border: #333333;
    
    /* Modal/Dropdown */
    --mm-overlay-bg: rgba(0, 0, 0, 0.7);
    --mm-dropdown-bg: #222222;
    --mm-dropdown-hover: rgba(200, 169, 106, 0.15);
}

/* ===== LIGHT THEME ===== */
[data-bs-theme="light"],
[data-theme="light"] {
    /* Core Colors */
    --mm-bg-primary: #F5F0E8;
    --mm-bg-secondary: #FFFFFF;
    --mm-bg-surface: #FFFFFF;
    --mm-bg-elevated: #FAFAFA;
    
    /* Text Colors */
    --mm-text-primary: #2D2D2D;
    --mm-text-secondary: #5D5D5D;
    --mm-text-muted: #7D7D7D;
    --mm-text-placeholder: #9D9D9D;
    
    /* Border Colors */
    --mm-border-default: #D0C4B0;
    --mm-border-subtle: #E0D8C8;
    --mm-border-focus: #A08050;
    
    /* Brand Colors (Gold - darker for light mode) */
    --mm-gold: #A08050;
    --mm-gold-bright: #B89060;
    --mm-gold-button: #9A7848;
    --mm-gold-hover: #8A6838;
    
    /* Primary Action */
    --mm-primary: #9A7848;
    --mm-primary-hover: #8A6838;
    --mm-primary-foreground: #FFFFFF;
    
    /* Form Controls */
    --mm-input-bg: #FFFFFF;
    --mm-input-bg-focus: #FFFFFF;
    --mm-input-text: #2D2D2D;
    --mm-input-border: #C8B898;
    --mm-input-border-focus: #A08050;
    --mm-input-placeholder: #9D9D9D;
    --mm-input-disabled-bg: #F0EBE3;
    --mm-input-disabled-text: #888888;
    --mm-input-readonly-bg: #F8F5F0;
    
    /* Focus Ring */
    --mm-focus-ring: rgba(160, 128, 80, 0.35);
    
    /* Semantic Colors */
    --mm-success: #6B5B4B;
    --mm-success-bg: rgba(107, 91, 75, 0.12);
    --mm-danger: #c92a2a;
    --mm-danger-bg: rgba(201, 42, 42, 0.12);
    --mm-warning: #A08050;
    --mm-warning-bg: rgba(160, 128, 80, 0.12);
    --mm-info: #3A6A94;
    --mm-info-bg: rgba(58, 106, 148, 0.12);
    
    /* Table */
    --mm-table-stripe: rgba(160, 128, 80, 0.05);
    --mm-table-hover: rgba(160, 128, 80, 0.12);
    --mm-table-border: #E0D8C8;
    
    /* Modal/Dropdown */
    --mm-overlay-bg: rgba(0, 0, 0, 0.5);
    --mm-dropdown-bg: #FFFFFF;
    --mm-dropdown-hover: rgba(160, 128, 80, 0.12);
}

/* ===== STANDARDIZED FORM CONTROLS ===== */
/* Apply these classes for guaranteed theme-aware styling */

/* Base input styling - applies to .mm-input, .mm-select, .mm-textarea */
.mm-input,
.mm-select,
.mm-textarea,
.form-control.mm-input,
.form-select.mm-select {
    background-color: var(--mm-input-bg) !important;
    color: var(--mm-input-text) !important;
    border: 1px solid var(--mm-input-border) !important;
    border-radius: 0.375rem;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.mm-input::placeholder,
.mm-textarea::placeholder {
    color: var(--mm-input-placeholder) !important;
    opacity: 1;
}

.mm-input:focus,
.mm-select:focus,
.mm-textarea:focus {
    background-color: var(--mm-input-bg-focus) !important;
    color: var(--mm-input-text) !important;
    border-color: var(--mm-input-border-focus) !important;
    box-shadow: 0 0 0 0.2rem var(--mm-focus-ring) !important;
    outline: none;
}

/* Disabled state */
.mm-input:disabled,
.mm-select:disabled,
.mm-textarea:disabled,
.mm-input[disabled],
.mm-select[disabled],
.mm-textarea[disabled] {
    background-color: var(--mm-input-disabled-bg) !important;
    color: var(--mm-input-disabled-text) !important;
    border-color: var(--mm-border-subtle) !important;
    cursor: not-allowed;
    opacity: 0.7;
}

/* Read-only state */
.mm-input[readonly],
.mm-textarea[readonly] {
    background-color: var(--mm-input-readonly-bg) !important;
    color: var(--mm-text-secondary) !important;
    border-color: var(--mm-border-subtle) !important;
}

/* Validation states */
.mm-input.is-invalid,
.mm-select.is-invalid,
.mm-textarea.is-invalid,
.mm-input:invalid:not(:placeholder-shown),
.mm-select:invalid,
.mm-textarea:invalid:not(:placeholder-shown) {
    border-color: var(--mm-danger) !important;
    background-color: var(--mm-input-bg) !important;
}

.mm-input.is-invalid:focus,
.mm-select.is-invalid:focus,
.mm-textarea.is-invalid:focus {
    box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25) !important;
}

.mm-input.is-valid,
.mm-select.is-valid,
.mm-textarea.is-valid {
    border-color: var(--mm-success) !important;
}

/* Input group addon */
.mm-input-group .input-group-text {
    background-color: var(--mm-bg-surface) !important;
    color: var(--mm-text-secondary) !important;
    border-color: var(--mm-input-border) !important;
}

/* Select dropdown arrow (for dark mode visibility) */
.mm-select {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23C8A96A' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 16px 12px;
    padding-right: 2.25rem;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

[data-bs-theme="light"] .mm-select,
[data-theme="light"] .mm-select {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23A08050' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}

/* Date/time inputs */
.mm-input[type="date"],
.mm-input[type="time"],
.mm-input[type="datetime-local"] {
    color-scheme: dark;
}

[data-bs-theme="light"] .mm-input[type="date"],
[data-bs-theme="light"] .mm-input[type="time"],
[data-bs-theme="light"] .mm-input[type="datetime-local"],
[data-theme="light"] .mm-input[type="date"],
[data-theme="light"] .mm-input[type="time"],
[data-theme="light"] .mm-input[type="datetime-local"] {
    color-scheme: light;
}

/* Autofill styling */
.mm-input:-webkit-autofill,
.mm-input:-webkit-autofill:hover,
.mm-input:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--mm-input-text) !important;
    -webkit-box-shadow: 0 0 0px 1000px var(--mm-input-bg) inset !important;
    box-shadow: 0 0 0px 1000px var(--mm-input-bg) inset !important;
    border-color: var(--mm-input-border-focus) !important;
}

/* ===== THEME-AWARE FORM LABELS ===== */
.mm-label,
.form-label {
    color: var(--mm-text-primary) !important;
    font-weight: 500;
}

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

/* ===== THEME-AWARE BUTTONS ===== */
.mm-btn-primary {
    background-color: var(--mm-primary) !important;
    border-color: var(--mm-primary) !important;
    color: var(--mm-primary-foreground) !important;
    font-weight: 600;
}

.mm-btn-primary:hover,
.mm-btn-primary:focus {
    background-color: var(--mm-primary-hover) !important;
    border-color: var(--mm-primary-hover) !important;
    color: var(--mm-primary-foreground) !important;
}

.mm-btn-outline {
    background-color: transparent !important;
    border-color: var(--mm-gold) !important;
    color: var(--mm-gold) !important;
}

.mm-btn-outline:hover {
    background-color: var(--mm-primary) !important;
    color: var(--mm-primary-foreground) !important;
}

/* ===== THEME-AWARE CARDS ===== */
.mm-card {
    background-color: var(--mm-bg-surface) !important;
    border: 1px solid var(--mm-border-default) !important;
    color: var(--mm-text-primary) !important;
}

.mm-card-header {
    background-color: var(--mm-bg-elevated) !important;
    border-bottom: 1px solid var(--mm-border-default) !important;
    color: var(--mm-text-primary) !important;
}

/* ===== THEME-AWARE TABLES ===== */
.mm-table {
    color: var(--mm-text-primary) !important;
}

.mm-table thead th {
    background-color: var(--mm-bg-elevated) !important;
    border-bottom: 2px solid var(--mm-gold) !important;
    color: var(--mm-gold) !important;
}

.mm-table tbody tr {
    border-bottom: 1px solid var(--mm-table-border) !important;
}

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

.mm-table-striped tbody tr:nth-of-type(odd) {
    background-color: var(--mm-table-stripe) !important;
}

/* Editable table cells */
.mm-table-input {
    background-color: var(--mm-input-bg) !important;
    color: var(--mm-input-text) !important;
    border: 1px solid var(--mm-input-border) !important;
    padding: 0.25rem 0.5rem;
}

.mm-table-input:focus {
    background-color: var(--mm-input-bg-focus) !important;
    border-color: var(--mm-input-border-focus) !important;
    box-shadow: 0 0 0 0.15rem var(--mm-focus-ring) !important;
}

/* ===== THEME-AWARE MODALS ===== */
.mm-modal .modal-content {
    background-color: var(--mm-bg-surface) !important;
    border: 1px solid var(--mm-gold) !important;
    color: var(--mm-text-primary) !important;
}

.mm-modal .modal-header {
    border-bottom: 1px solid var(--mm-border-default) !important;
}

.mm-modal .modal-footer {
    border-top: 1px solid var(--mm-border-default) !important;
}

/* ===== THEME-AWARE ALERTS ===== */
.mm-alert-success {
    background-color: var(--mm-success-bg) !important;
    border-left: 4px solid var(--mm-success) !important;
    color: var(--mm-text-primary) !important;
}

.mm-alert-danger {
    background-color: var(--mm-danger-bg) !important;
    border-left: 4px solid var(--mm-danger) !important;
    color: var(--mm-text-primary) !important;
}

.mm-alert-warning {
    background-color: var(--mm-warning-bg) !important;
    border-left: 4px solid var(--mm-warning) !important;
    color: var(--mm-text-primary) !important;
}

.mm-alert-info {
    background-color: var(--mm-info-bg) !important;
    border-left: 4px solid var(--mm-info) !important;
    color: var(--mm-text-primary) !important;
}

/* ===== FIX BOOTSTRAP FORM CONTROLS TO USE TOKENS ===== */
/* These override Bootstrap defaults to be theme-aware */

.form-control,
.form-select {
    background-color: var(--mm-input-bg);
    color: var(--mm-input-text);
    border-color: var(--mm-input-border);
}

.form-control:focus,
.form-select:focus {
    background-color: var(--mm-input-bg-focus);
    color: var(--mm-input-text);
    border-color: var(--mm-input-border-focus);
    box-shadow: 0 0 0 0.2rem var(--mm-focus-ring);
}

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

.form-control:disabled,
.form-select:disabled {
    background-color: var(--mm-input-disabled-bg);
    color: var(--mm-input-disabled-text);
}

.form-control[readonly] {
    background-color: var(--mm-input-readonly-bg);
}

.input-group-text {
    background-color: var(--mm-bg-surface);
    color: var(--mm-text-secondary);
    border-color: var(--mm-input-border);
}

/* Fix table inputs */
table .form-control,
table .form-select,
.table .form-control,
.table .form-select {
    background-color: var(--mm-input-bg);
    color: var(--mm-input-text);
    border-color: var(--mm-input-border);
}

table .form-control:focus,
table .form-select:focus,
.table .form-control:focus,
.table .form-select:focus {
    background-color: var(--mm-input-bg-focus);
    border-color: var(--mm-input-border-focus);
    box-shadow: 0 0 0 0.15rem var(--mm-focus-ring);
}

/* Fix checkboxes and radios */
.form-check-input {
    background-color: var(--mm-input-bg);
    border-color: var(--mm-input-border);
}

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

.form-check-input:focus {
    border-color: var(--mm-input-border-focus);
    box-shadow: 0 0 0 0.2rem var(--mm-focus-ring);
}

.form-check-label {
    color: var(--mm-text-primary);
}

/* Fix range inputs */
.form-range::-webkit-slider-thumb {
    background-color: var(--mm-primary);
}

.form-range::-moz-range-thumb {
    background-color: var(--mm-primary);
}

/* ===== VALIDATION FEEDBACK ===== */
.invalid-feedback,
.valid-feedback {
    font-size: 0.875rem;
}

.invalid-feedback {
    color: var(--mm-danger);
}

.valid-feedback {
    color: var(--mm-success);
}