/* Non-color CSS Variables
 * Layout, radii, shadows, and structural styles ONLY
 * Colors and gradients are in variables.css
 * This file can be used independently for tenant overrides
 */

:root {
    color-scheme: light;

    /* NO COLORS HERE - colors are in variables.css or tenant theme CSS */

    /* Radii */
    --radius-xs: 0.125rem;
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 15px;
    --radius-xl: 20px;
    --radius-pill: 50px;
    --radius-rounded: 0.375rem;

    /* Shadows - Light theme */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 2px 10px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 20px rgba(0, 0, 0, 0.1);
    --shadow-focus: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
    --shadow-s: 0 4px 15px rgba(var(--brand-rgb, 102, 126, 234), 0.3);
    --shadow-m: 0 8px 25px rgba(var(--brand-rgb, 102, 126, 234), 0.3);
    --shadow-hov: 0 6px 20px rgba(var(--brand-rgb, 102, 126, 234), 0.4);
    --shadow-card: 0 20px 40px rgba(var(--black-rgb, 0, 0, 0), 0.1);
    --shadow-modal: 0 20px 60px rgba(var(--black-rgb, 0, 0, 0), 0.3), 0 8px 25px rgba(var(--black-rgb, 0, 0, 0), 0.15);

    /* Centralized card shadows */
    --shadow-main-card: 0 12px 30px rgba(0, 0, 0, 0.25);
    --shadow-combo-card: var(--shadow-main-card);
    --shadow-goal-item: var(--shadow-main-card);

    /* Layout widths */
    --content-max: 83.333333%;
    --content-narrow: 66.666667%;
    --content-wide: 100%;
}

/* Theme transition effects */
body {
    transition: background-color 0.3s ease, color 0.3s ease;
    background: var(--body-background);
    color: var(--color-text);
    min-height: 100vh;
}

/* Global placeholder styling */
::placeholder {
    color: var(--color-text-secondary, #6c757d);
    opacity: 0.7;
}

input::placeholder,
textarea::placeholder,
.form-control::placeholder,
.form-select::placeholder {
    color: var(--color-text-secondary, #6c757d);
    opacity: 0.7;
}

/* Global input/form styling */
input,
textarea,
.form-control,
.form-select,
select {
    background-color: var(--color-surface, #ffffff) !important;
    color: var(--color-text, #333333) !important;
    border-color: var(--color-border, #e1e1e1) !important;
}

input:focus,
textarea:focus,
.form-control:focus,
.form-select:focus,
select:focus {
    background-color: var(--color-surface, #ffffff) !important;
    color: var(--color-text, #333333) !important;
    border-color: var(--brand-1, #667eea) !important;
    box-shadow: 0 0 0 0.2rem rgba(var(--brand-rgb, 102, 126, 234), 0.25) !important;
}


/* Dark Theme Override - Non-color variables */
.theme-dark {
    color-scheme: dark;

    /* Shadows - Dark variants */
    --shadow-sm: 0 1px 2px rgba(255, 255, 255, 0.05);
    --shadow-md: 0 2px 10px rgba(255, 255, 255, 0.08);
    --shadow-lg: 0 10px 20px rgba(255, 255, 255, 0.1);
    --shadow-focus: 0 0 0 0.2rem rgba(102, 126, 234, 0.4);
    --shadow-s: 0 4px 15px rgba(255, 255, 255, 0.1);
    --shadow-m: 0 8px 25px rgba(255, 255, 255, 0.12);
    --shadow-hov: 0 6px 20px rgba(var(--brand-rgb, 102, 126, 234), 0.3);
    --shadow-card: 0 20px 40px rgba(255, 255, 255, 0.08);
    --shadow-modal: 0 20px 60px rgba(255, 255, 255, 0.15), 0 8px 25px rgba(255, 255, 255, 0.08);

    /* Centralized card shadows - Dark theme */
    --shadow-main-card: 0 12px 30px rgba(255, 255, 255, 0.1);
    --shadow-combo-card: var(--shadow-main-card);
    --shadow-goal-item: var(--shadow-main-card);
}

/* Bootstrap component overrides for dark theme */
.theme-dark .card,
.theme-dark .modal-content,
.theme-dark .dropdown-menu,
.theme-dark .navbar {
    background-color: var(--color-surface) !important;
    color: var(--color-text) !important;
    border-color: var(--gray-300) !important;
}

.theme-dark .card-body,
.theme-dark .modal-body,
.theme-dark .modal-header,
.theme-dark .modal-footer {
    background-color: transparent !important;
    color: var(--color-text) !important;
}

.theme-dark .form-control,
.theme-dark .form-select,
.theme-dark textarea,
.theme-dark input {
    background-color: var(--color-surface) !important;
    color: var(--color-text) !important;
    border-color: var(--color-border) !important;
}

.theme-dark .form-control:focus,
.theme-dark .form-select:focus,
.theme-dark textarea:focus,
.theme-dark input:focus {
    background-color: var(--color-surface) !important;
    color: var(--color-text) !important;
    border-color: var(--brand-1) !important;
    box-shadow: 0 0 0 0.2rem rgba(var(--brand-rgb), 0.25) !important;
}

.theme-dark .form-control::placeholder,
.theme-dark textarea::placeholder {
    color: var(--color-text-secondary) !important;
    opacity: 0.7;
}

/* Dark theme for search and filter inputs */
.theme-dark input[type="search"] {
    background-color: var(--color-surface) !important;
    color: var(--color-text) !important;
    border-color: var(--color-border) !important;
}

.theme-dark .btn-primary,
.theme-dark .btn-secondary {
    color: var(--color-text) !important;
    border-color: var(--gray-300) !important;
}

.theme-dark .btn-primary:hover,
.theme-dark .btn-secondary:hover {
    background-color: var(--brand-1) !important;
    color: var(--white) !important;
}

/* Dark theme overrides for page containers and content */
.theme-dark .page-header-card,
.theme-dark .main-card,
.theme-dark .content-card,
.theme-dark .admin-card {
    background-color: var(--color-surface) !important;
    color: var(--color-text) !important;
    border-color: var(--gray-300) !important;
}

.theme-dark .list-group-item {
    background-color: var(--color-surface) !important;
    color: var(--color-text) !important;
    border-color: var(--gray-300) !important;
}

.theme-dark .list-group-item:hover {
    background-color: var(--gray-100) !important;
}

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

.theme-dark .page-title,
.theme-dark .page-description,
.theme-dark h1,
.theme-dark h2,
.theme-dark h3,
.theme-dark h4,
.theme-dark h5,
.theme-dark h6 {
    color: var(--color-text) !important;
}

/* Dark theme for content containers */
.theme-dark .page-wrapper,
.theme-dark .content-container {
    background-color: transparent !important;
    color: var(--color-text) !important;
}

/* Dark theme for footer */
.theme-dark .footer,
.theme-dark footer,
.theme-dark .site-footer,
.theme-dark .page-footer {
    background-color: var(--color-surface) !important;
    color: var(--color-text) !important;
    border-color: var(--gray-300) !important;
    border-top: 1px solid var(--gray-300) !important;
}

.theme-dark .footer a,
.theme-dark footer a,
.theme-dark .site-footer a,
.theme-dark .page-footer a {
    color: var(--color-text-secondary) !important;
}

.theme-dark .footer a:hover,
.theme-dark footer a:hover,
.theme-dark .site-footer a:hover,
.theme-dark .page-footer a:hover {
    color: var(--brand-1) !important;
}

.theme-dark .footer .text-muted,
.theme-dark footer .text-muted,
.theme-dark .site-footer .text-muted,
.theme-dark .page-footer .text-muted {
    color: var(--color-text-secondary) !important;
}

/* Dark theme for tables */
.theme-dark .table {
    color: var(--color-text) !important;
    background-color: var(--color-surface) !important;
}

.theme-dark .table th {
    background-color: var(--gray-100) !important;
    color: var(--color-text) !important;
    border-color: var(--gray-300) !important;
}

.theme-dark .table td {
    background-color: var(--color-surface) !important;
    color: var(--color-text) !important;
    border-color: var(--gray-300) !important;
}

.theme-dark .table-striped > tbody > tr:nth-of-type(odd) > td,
.theme-dark .table-striped > tbody > tr:nth-of-type(odd) > th {
    background-color: var(--gray-100) !important;
}

.theme-dark .table-hover > tbody > tr:hover > td,
.theme-dark .table-hover > tbody > tr:hover > th {
    background-color: var(--gray-200) !important;
}

/* Dark theme for data tables and grids */
.theme-dark .dataTables_wrapper,
.theme-dark .dataTable {
    background-color: var(--color-surface) !important;
    color: var(--color-text) !important;
}

.theme-dark .dataTables_info,
.theme-dark .dataTables_length,
.theme-dark .dataTables_filter {
    color: var(--color-text) !important;
}

.theme-dark .dataTables_paginate .paginate_button {
    background-color: var(--gray-100) !important;
    color: var(--color-text) !important;
    border-color: var(--gray-300) !important;
}

.theme-dark .dataTables_paginate .paginate_button:hover {
    background-color: var(--gray-200) !important;
    color: var(--color-text) !important;
}

/* Dark theme for pagination */
.theme-dark .pagination .page-item .page-link {
    background-color: var(--color-surface) !important;
    color: var(--color-text) !important;
    border-color: var(--gray-300) !important;
}

.theme-dark .pagination .page-item.active .page-link {
    background-color: var(--brand-1) !important;
    color: var(--white) !important;
    border-color: var(--brand-1) !important;
}

.theme-dark .pagination .page-item:hover .page-link {
    background-color: var(--gray-100) !important;
    color: var(--color-text) !important;
}

/* Dark theme for dropdowns in tables */
.theme-dark select.form-select,
.theme-dark select.form-control {
    background-color: var(--color-surface) !important;
    color: var(--color-text) !important;
    border-color: var(--color-border) !important;
}

.theme-dark select.form-select option,
.theme-dark select.form-control option {
    background-color: var(--color-surface) !important;
    color: var(--color-text) !important;
}

/* Dark theme for badges and labels */
.theme-dark .badge.bg-secondary {
    background-color: var(--gray-600) !important;
    color: var(--color-text) !important;
}

.theme-dark .badge.bg-light {
    background-color: var(--gray-100) !important;
    color: var(--color-text) !important;
}

/* Dark theme for alerts */
.theme-dark .alert {
    background-color: var(--gray-100) !important;
    color: var(--color-text) !important;
    border-color: var(--gray-300) !important;
}

.theme-dark .alert-info {
    background-color: rgba(var(--info-rgb), 0.1) !important;
    color: var(--info-text) !important;
    border-color: var(--info) !important;
}

.theme-dark .alert-success {
    background-color: rgba(var(--success-rgb), 0.1) !important;
    color: var(--success-text) !important;
    border-color: var(--success) !important;
}

.theme-dark .alert-warning {
    background-color: rgba(var(--warning-rgb), 0.1) !important;
    color: var(--warning-text) !important;
    border-color: var(--warning) !important;
}

.theme-dark .alert-danger {
    background-color: rgba(var(--danger-rgb), 0.1) !important;
    color: var(--danger-text) !important;
    border-color: var(--danger) !important;
}