/* Custom styles for Earthtone Repair Manager */

/* Theme palettes */
:root {
    --earth-primary: #5a4a3a;
    --earth-primary-hover: #493c30;
    --earth-secondary: #8b7d6b;
    --earth-success: #6b8e6b;
    --earth-info: #6a8e9e;
    --earth-warning: #c4a35a;
    --earth-danger: #a66b5c;
    --earth-light: #f5f1e8;
    --earth-surface: #ebe5d9;
    --earth-dark: #3f3429;
    --earth-muted: #8b7d6b;
    --earth-link: #4a6b7c;
    --earth-link-hover: #36525f;
    --earth-primary-soft: #b9ad9f;
    --earth-success-soft: #b5d4b5;
    --earth-info-soft: #a8c4d4;
    --earth-warning-soft: #d9c79f;
    --earth-danger-soft: #d4a8a0;
    --earth-alert-success-bg: #d4e4d4;
    --earth-alert-info-bg: #d4e4e9;
    --earth-alert-warning-bg: #f4ead4;
    --earth-alert-danger-bg: #e9d9d4;
}

.theme-default {
    --earth-primary: #5a4a3a;
    --earth-primary-hover: #493c30;
    --earth-secondary: #8b7d6b;
    --earth-success: #6b8e6b;
    --earth-info: #6a8e9e;
    --earth-warning: #c4a35a;
    --earth-danger: #a66b5c;
    --earth-light: #f5f1e8;
    --earth-surface: #ebe5d9;
    --earth-dark: #3f3429;
    --earth-muted: #8b7d6b;
    --earth-link: #4a6b7c;
    --earth-link-hover: #36525f;
    --earth-primary-soft: #b9ad9f;
    --earth-success-soft: #b5d4b5;
    --earth-info-soft: #a8c4d4;
    --earth-warning-soft: #d9c79f;
    --earth-danger-soft: #d4a8a0;
    --earth-alert-success-bg: #d4e4d4;
    --earth-alert-info-bg: #d4e4e9;
    --earth-alert-warning-bg: #f4ead4;
    --earth-alert-danger-bg: #e9d9d4;
}

.theme-blue {
    --earth-primary: #4a6b7c;
    --earth-primary-hover: #3b5867;
    --earth-secondary: #6d7f8a;
    --earth-success: #5f8a78;
    --earth-info: #5f8da3;
    --earth-warning: #b99f67;
    --earth-danger: #a76666;
    --earth-light: #eef4f6;
    --earth-surface: #dfeaf0;
    --earth-dark: #2d4350;
    --earth-muted: #6f8490;
    --earth-link: #2f6f8f;
    --earth-link-hover: #254f66;
    --earth-primary-soft: #a8bfca;
    --earth-success-soft: #afcec1;
    --earth-info-soft: #add0df;
    --earth-warning-soft: #d8c79d;
    --earth-danger-soft: #d3adad;
    --earth-alert-success-bg: #d8ebe3;
    --earth-alert-info-bg: #d8eaf1;
    --earth-alert-warning-bg: #f0e6cb;
    --earth-alert-danger-bg: #ecdada;
}

.theme-green {
    --earth-primary: #6b8e6b;
    --earth-primary-hover: #5a7a5a;
    --earth-secondary: #7d8b6b;
    --earth-success: #5f956f;
    --earth-info: #648f8a;
    --earth-warning: #b49b55;
    --earth-danger: #a66b5c;
    --earth-light: #f1f6ef;
    --earth-surface: #e2eddf;
    --earth-dark: #3f5d3f;
    --earth-muted: #72866a;
    --earth-link: #4d7f6b;
    --earth-link-hover: #3d6655;
    --earth-primary-soft: #a8c5a8;
    --earth-success-soft: #afd5bc;
    --earth-info-soft: #acd0cc;
    --earth-warning-soft: #d6c78f;
    --earth-danger-soft: #d4a8a0;
    --earth-alert-success-bg: #d8ead8;
    --earth-alert-info-bg: #d8ebe8;
    --earth-alert-warning-bg: #efe6c6;
    --earth-alert-danger-bg: #eadad6;
}

.theme-purple {
    --earth-primary: #7c6b8e;
    --earth-primary-hover: #68587a;
    --earth-secondary: #8a7a91;
    --earth-success: #6f8e7a;
    --earth-info: #6f7fa3;
    --earth-warning: #b69a62;
    --earth-danger: #a66373;
    --earth-light: #f3f0f6;
    --earth-surface: #e7e0ee;
    --earth-dark: #4d405a;
    --earth-muted: #82738c;
    --earth-link: #695592;
    --earth-link-hover: #514171;
    --earth-primary-soft: #b9adc7;
    --earth-success-soft: #b4d0bd;
    --earth-info-soft: #b4bedb;
    --earth-warning-soft: #d8c596;
    --earth-danger-soft: #d6aab5;
    --earth-alert-success-bg: #dceade;
    --earth-alert-info-bg: #dfe3f0;
    --earth-alert-warning-bg: #f0e5cc;
    --earth-alert-danger-bg: #ecd9de;
}

.theme-red {
    --earth-primary: #a66b5c;
    --earth-primary-hover: #8e584a;
    --earth-secondary: #94746b;
    --earth-success: #758c66;
    --earth-info: #6c8794;
    --earth-warning: #bf9554;
    --earth-danger: #a85b5b;
    --earth-light: #f7f0ed;
    --earth-surface: #eddfda;
    --earth-dark: #624036;
    --earth-muted: #927468;
    --earth-link: #8d594d;
    --earth-link-hover: #6d443b;
    --earth-primary-soft: #d0aaa0;
    --earth-success-soft: #becdab;
    --earth-info-soft: #b4c9d1;
    --earth-warning-soft: #dec291;
    --earth-danger-soft: #d4a3a3;
    --earth-alert-success-bg: #e2ead7;
    --earth-alert-info-bg: #dfe9ed;
    --earth-alert-warning-bg: #f1e2c7;
    --earth-alert-danger-bg: #eed8d8;
}

body {
    min-height: 100vh;
    background-color: var(--earth-light);
}

.jumbotron {
    background-color: var(--earth-surface);
}

.card {
    margin-bottom: 1rem;
    border: none;
    box-shadow: 0 0.125rem 0.25rem rgba(90, 74, 58, 0.1);
}

.navbar-brand {
    font-weight: bold;
    font-size: 1.5rem;
}

.app-navbar {
    background-color: var(--earth-primary) !important;
}

.alert {
    border-radius: 0.25rem;
}

/* Dashboard card hover effects */
.dashboard-card {
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
    cursor: pointer;
}

.dashboard-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 0.5rem 1rem rgba(90, 74, 58, 0.2);
}

.document-library-list {
    max-height: 760px;
    overflow-y: auto;
}

.document-preview-frame {
    width: 100%;
    min-height: 680px;
    border: 1px solid rgba(90, 74, 58, 0.2);
    border-radius: 0.25rem;
    background: white;
}

@media (max-width: 991.98px) {
    .document-preview-frame {
        min-height: 520px;
    }
}

/* Earthy Bootstrap overrides */
.btn-primary {
    background-color: var(--earth-primary);
    border-color: var(--earth-primary);
    color: white;
}

.btn-primary:hover, .btn-primary:focus {
    background-color: var(--earth-primary-hover);
    border-color: var(--earth-primary-hover);
}

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

.btn-outline-primary:hover, .btn-outline-primary:focus {
    background-color: var(--earth-primary);
    border-color: var(--earth-primary);
    color: white;
}

.btn-success {
    background-color: var(--earth-success);
    border-color: var(--earth-success);
    color: white;
}

.btn-success:hover, .btn-success:focus {
    background-color: var(--earth-dark);
    border-color: var(--earth-dark);
}

.btn-info {
    background-color: var(--earth-info);
    border-color: var(--earth-info);
    color: white;
}

.btn-info:hover, .btn-info:focus {
    background-color: var(--earth-link-hover);
    border-color: var(--earth-link-hover);
}

.btn-warning {
    background-color: var(--earth-warning);
    border-color: var(--earth-warning);
    color: white;
}

.btn-warning:hover, .btn-warning:focus {
    background-color: var(--earth-primary-hover);
    border-color: var(--earth-primary-hover);
}

.btn-danger {
    background-color: var(--earth-danger);
    border-color: var(--earth-danger);
    color: white;
}

.btn-danger:hover, .btn-danger:focus {
    background-color: var(--earth-primary-hover);
    border-color: var(--earth-primary-hover);
}

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

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

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

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

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

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

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

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

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

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

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

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

.badge.bg-primary {
    background-color: var(--earth-primary) !important;
}

.badge.bg-success {
    background-color: var(--earth-success) !important;
}

.badge.bg-info {
    background-color: var(--earth-info) !important;
}

.badge.bg-warning {
    background-color: var(--earth-warning) !important;
}

.badge.bg-danger {
    background-color: var(--earth-danger) !important;
}

.alert-success {
    background-color: var(--earth-alert-success-bg);
    border-color: var(--earth-success);
    color: var(--earth-dark);
}

.alert-info {
    background-color: var(--earth-alert-info-bg);
    border-color: var(--earth-info);
    color: var(--earth-dark);
}

.alert-warning {
    background-color: var(--earth-alert-warning-bg);
    border-color: var(--earth-warning);
    color: var(--earth-dark);
}

.alert-danger {
    background-color: var(--earth-alert-danger-bg);
    border-color: var(--earth-danger);
    color: var(--earth-dark);
}

footer.bg-light {
    background-color: var(--earth-surface) !important;
    border-top-color: var(--earth-muted) !important;
}

/* Dashboard cards with pastel earthy backgrounds */
.dashboard-card.bg-primary {
    background-color: var(--earth-primary-soft) !important;
}

.dashboard-card.bg-warning {
    background-color: var(--earth-warning-soft) !important;
}

.dashboard-card.bg-success {
    background-color: var(--earth-success-soft) !important;
}

.dashboard-card.bg-info {
    background-color: var(--earth-info-soft) !important;
}

.dashboard-card.bg-danger {
    background-color: var(--earth-danger-soft) !important;
}

.dashboard-card.text-white {
    color: var(--earth-dark) !important;
}

.card-header.bg-primary {
    background-color: var(--earth-primary) !important;
}

.card-header.bg-secondary {
    background-color: var(--earth-secondary) !important;
}

.card.border-primary {
    border-color: var(--earth-primary) !important;
}

/* Styled links in tables and lists */
.table a:not(.btn) {
    color: var(--earth-link) !important;
    text-decoration: none;
    transition: color 0.2s ease;
    position: relative;
}

.table a:not(.btn):hover {
    color: var(--earth-link-hover) !important;
}

.table a:not(.btn).fw-bold:hover {
    text-decoration: underline;
    text-decoration-color: var(--earth-link);
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
}

/* Links in list groups (dashboard, etc.) */
.list-group-item a:not(.btn) {
    color: var(--earth-link) !important;
    text-decoration: none;
    transition: color 0.2s ease;
}

.list-group-item a:not(.btn):hover {
    color: var(--earth-link-hover) !important;
    text-decoration: underline;
    text-decoration-color: var(--earth-link);
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
}

/* General text links (not in tables or buttons) */
p a:not(.btn), .text-muted a:not(.btn) {
    color: var(--earth-link) !important;
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color 0.2s ease;
}

p a:not(.btn):hover, .text-muted a:not(.btn):hover {
    color: var(--earth-link-hover) !important;
    border-bottom-color: var(--earth-link);
}

.form-control:focus,
.form-select:focus {
    border-color: var(--earth-primary);
    box-shadow: 0 0 0 0.25rem color-mix(in srgb, var(--earth-primary) 25%, transparent);
}

.theme-preview {
    border: 1px solid var(--earth-primary-soft);
    border-radius: 0.375rem;
    overflow: hidden;
    background-color: var(--earth-light);
}

.theme-preview-nav {
    align-items: center;
    background-color: var(--earth-primary);
    color: white;
    display: flex;
    justify-content: space-between;
    padding: 0.75rem 1rem;
}

.theme-preview-body {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    padding: 1rem;
}

.theme-preview-body a {
    color: var(--earth-link);
    font-weight: 600;
    text-decoration: none;
}

.theme-preview-footer {
    background-color: var(--earth-surface);
    display: flex;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
}

.theme-preview-swatch {
    border-radius: 999px;
    display: inline-block;
    height: 1rem;
    width: 1rem;
}