/* ═══════════════════════════════════════════════════════════════════════════
   Vitale Concept — Global Style Overrides
   Beauty salon theme: warm rose palette, clean & modern
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1. Custom Properties ─────────────────────────────────────────────────── */
:root {
    --vc-primary: #C9918B;
    --vc-primary-hover: #B07D75;
    --vc-primary-light: #F0DAD6;
    --vc-primary-subtle: #F7EDEB;
    --vc-primary-text: #7D5A55;

    --vc-bg: #FAF7F5;
    --vc-surface: #FFFFFF;
    --vc-border: #EDE4E0;

    --vc-text: #3D3535;
    --vc-text-muted: #6E6161;

    --vc-success: #7EB89A;
    --vc-success-subtle: #E8F5EE;
    --vc-warning: #E2B866;
    --vc-warning-subtle: #FDF5E6;
    --vc-danger: #D97070;
    --vc-danger-subtle: #FBEAEA;
    --vc-info: #8BAEC9;

    --vc-radius: 0.625rem;
    --vc-radius-lg: 0.875rem;
    --vc-shadow-sm: 0 1px 3px rgba(61, 53, 53, 0.06);
    --vc-shadow: 0 2px 8px rgba(61, 53, 53, 0.08);
    --vc-shadow-lg: 0 4px 16px rgba(61, 53, 53, 0.1);
    --vc-transition: 0.2s ease;
}

/* ── 2. Bootstrap Variable Overrides ──────────────────────────────────────── */
:root {
    --bs-primary: var(--vc-primary);
    --bs-primary-rgb: 201, 145, 139;
    --bs-body-bg: var(--vc-bg);
    --bs-body-color: var(--vc-text);
    --bs-border-color: var(--vc-border);
    --bs-link-color: #7D5A55;
    --bs-link-hover-color: #6B4E49;
}

/* ── 3. Base ──────────────────────────────────────────────────────────────── */
body {
    background-color: var(--vc-bg);
    color: var(--vc-text);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

a {
    color: var(--vc-primary-text);
    transition: color var(--vc-transition);
}

a:hover {
    color: #6B4E49;
}

hr {
    border-color: var(--vc-border);
    opacity: 1;
}

::selection {
    background-color: var(--vc-primary-light);
    color: var(--vc-text);
}

/* ── 4. Typography ────────────────────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    color: var(--vc-text);
    font-weight: 600;
}

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

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

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

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

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

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

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

.small, small {
    color: inherit;
}

/* ── 5. Backgrounds ───────────────────────────────────────────────────────── */
.bg-light {
    background-color: var(--vc-bg) !important;
}

.bg-white {
    background-color: var(--vc-surface) !important;
}

.bg-body {
    background-color: var(--vc-surface) !important;
}

/* ── 6. Borders ───────────────────────────────────────────────────────────── */
.border {
    border-color: var(--vc-border) !important;
}

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

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

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

/* ── 7. Form Controls ─────────────────────────────────────────────────────── */
.form-control {
    border: 1px solid var(--vc-border);
    border-radius: var(--vc-radius);
    color: var(--vc-text);
    background-color: var(--vc-surface);
    transition: border-color var(--vc-transition), box-shadow var(--vc-transition);
}

.form-control:focus {
    border-color: var(--vc-primary);
    box-shadow: 0 0 0 3px rgba(201, 145, 139, 0.15);
    background-color: var(--vc-surface);
    color: var(--vc-text);
}

.form-control::placeholder {
    color: var(--vc-text-muted);
    opacity: 0.6;
}

.form-select {
    border: 1px solid var(--vc-border);
    border-radius: var(--vc-radius);
    color: var(--vc-text);
    background-color: var(--vc-surface);
    transition: border-color var(--vc-transition), box-shadow var(--vc-transition);
}

.form-select:focus {
    border-color: var(--vc-primary);
    box-shadow: 0 0 0 3px rgba(201, 145, 139, 0.15);
}

.form-label {
    color: var(--vc-text-muted);
    font-weight: 500;
    font-size: 0.8125rem;
    letter-spacing: 0.02em;
}

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

.form-check-input:focus {
    box-shadow: 0 0 0 3px rgba(201, 145, 139, 0.15);
    border-color: var(--vc-primary);
}

/* ── 8. Buttons ───────────────────────────────────────────────────────────── */
.btn {
    border-radius: var(--vc-radius);
    font-weight: 500;
    transition: all var(--vc-transition);
}

.btn-primary {
    background-color: var(--vc-primary);
    border-color: var(--vc-primary);
    color: #fff;
}

.btn-primary:hover,
.btn-primary:active {
    background-color: var(--vc-primary-hover);
    border-color: var(--vc-primary-hover);
    color: #fff;
}

.btn-primary:focus {
    background-color: var(--vc-primary-hover);
    border-color: var(--vc-primary-hover);
    box-shadow: 0 0 0 3px rgba(201, 145, 139, 0.25);
    color: #fff;
}

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

.btn-outline-primary:hover,
.btn-outline-primary:active {
    background-color: var(--vc-primary-subtle);
    border-color: var(--vc-primary);
    color: var(--vc-primary-text);
}

.btn-outline-primary:focus {
    box-shadow: 0 0 0 3px rgba(201, 145, 139, 0.15);
}

.btn-outline-secondary {
    color: var(--vc-text-muted);
    border-color: var(--vc-border);
}

.btn-outline-secondary:hover,
.btn-outline-secondary:active {
    background-color: var(--vc-primary-subtle);
    border-color: var(--vc-primary-light);
    color: var(--vc-text);
}

.btn-outline-secondary:focus {
    box-shadow: 0 0 0 3px rgba(201, 145, 139, 0.12);
}

.btn-danger {
    background-color: var(--vc-danger);
    border-color: var(--vc-danger);
    color: #fff;
}

.btn-danger:hover,
.btn-danger:active {
    background-color: #C55E5E;
    border-color: #C55E5E;
    color: #fff;
}

.btn-danger:focus {
    box-shadow: 0 0 0 3px rgba(217, 112, 112, 0.25);
}

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

.btn-success:hover,
.btn-success:active {
    background-color: #6CA586;
    border-color: #6CA586;
}

.btn-link {
    color: var(--vc-primary-text);
}

.btn-link:hover {
    color: #6B4E49;
}

.btn-link.text-danger {
    color: var(--vc-danger) !important;
}

.btn-link.text-danger:hover {
    color: #C55E5E !important;
}

.btn-close:focus {
    box-shadow: 0 0 0 3px rgba(201, 145, 139, 0.15);
}

/* ── 9. List Group ────────────────────────────────────────────────────────── */
.list-group {
    border-radius: var(--vc-radius-lg);
}

.list-group-item {
    border-color: var(--vc-border);
    color: var(--vc-text);
    transition: background-color var(--vc-transition), box-shadow var(--vc-transition);
}

a.list-group-item:hover,
a.list-group-item:focus {
    background-color: var(--vc-primary-subtle);
    border-color: var(--vc-primary-light);
}

.list-group-item.border-start {
    border-left: 3px solid var(--vc-primary-light) !important;
}

.list-group-item + .list-group-item {
    border-top-color: var(--vc-border);
}

/* ── 10. Cards / Surfaces ─────────────────────────────────────────────────── */
.border.rounded-2 {
    border-color: var(--vc-border) !important;
    border-radius: var(--vc-radius-lg) !important;
    box-shadow: var(--vc-shadow-sm);
}

/* ── 11. Modals ───────────────────────────────────────────────────────────── */
.modal-content {
    border: none;
    border-radius: var(--vc-radius-lg);
    box-shadow: var(--vc-shadow-lg);
}

.modal-header {
    border-bottom-color: var(--vc-border);
}

.modal-header .modal-title {
    font-weight: 600;
    color: var(--vc-text);
}

.modal-footer {
    border-top-color: var(--vc-border);
}

.modal-backdrop.show {
    opacity: 0.3;
}

/* ── 12. Badges ───────────────────────────────────────────────────────────── */
.badge {
    font-weight: 500;
    letter-spacing: 0.02em;
}

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

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

.badge.bg-secondary {
    background-color: #A89C98 !important;
    color: #fff;
}

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

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

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

/* ── 13. Tables ───────────────────────────────────────────────────────────── */
.table {
    color: var(--vc-text);
}

.table th {
    color: var(--vc-text-muted);
    font-weight: 600;
    font-size: 0.8125rem;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    border-bottom-color: var(--vc-border);
}

.table td {
    border-bottom-color: var(--vc-border);
}

.table-borderless td,
.table-borderless th {
    border: none;
}

.table thead.border-bottom {
    border-color: var(--vc-border) !important;
}

/* ── 14. Spinner ──────────────────────────────────────────────────────────── */
.spinner-border {
    color: var(--vc-primary);
}

/* ── 15. Scrollbar (Webkit) ───────────────────────────────────────────────── */
::-webkit-scrollbar {
    width: 6px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background-color: var(--vc-primary-light);
    border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
    background-color: var(--vc-primary);
}

/* ── 16. Crispy Forms Overrides ───────────────────────────────────────────── */
.asteriskField {
    color: var(--vc-danger);
}

/* ── 17. Utilities ────────────────────────────────────────────────────────── */
.fw-semibold {
    color: inherit;
}

.rounded-2 {
    border-radius: var(--vc-radius-lg) !important;
}