:root {
    --bs-black-rgb: 73, 80, 87;
    --bs-btn-hover-bg: #db1e2e;
    --bs-btn-hover-border-color: #db1e2e;
    --primary: #db1e2e;
    --primary-dark: #7a0f17;
    --white: #ffffff;
    --black: #000000;
    --black-rgb: 73, 80, 87;
    --gray-50: #f8f9fa;
    --gray-100: #f1f3f5;
    --gray-200: #e9ecef;
    --gray-300: #dee2e6;
    --gray-400: #ced4da;
    --gray-500: #adb5bd;
    --gray-600: #6c757d;
    --gray-700: #495057;
    --gray-800: #2c3e50;
    --gray-900: #212529;

    /* Accent */
    --accent-light: #fdecee;

    /* Text colors */
    --text-main: var(--gray-900);
    --text-muted: var(--gray-600);
    --text-invert: #ecf0f1;
}

.btn-primary{
    --bs-btn-active-bg: #db1e2e !important;
    --bs-btn-active-border-color: #db1e2e !important;
    --bs-btn-hover-bg: #db1e2e;
    --bs-btn-hover-border-color: #db1e2e;
}

.btn {
    box-shadow: none !important;
  }

body {
    margin: 0;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.auth-container {
    min-height: 100vh;
    background: linear-gradient(135deg, var(--gray-50) 0%, var(--gray-200) 100%);
}

.auth-card {
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid var(--gray-300);
    border-radius: 1rem;
    backdrop-filter: blur(6px);
    box-shadow: none;
    transition: all 0.3s ease-in-out;
}

.auth-card:hover {
    border-color: var(--gray-500);
}

.form-control,
.input-group-text {
    border-radius: 0.5rem;
}

.form-control {
    background: var(--white);
    border: 1px solid var(--gray-400);
    color: var(--text-main);
}

.form-control:focus {
    box-shadow: none;
    border-color: var(--gray-400);
}

.form-check-input:focus {
    outline: 0;
    box-shadow: none;
  }

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

.input-group-text {
    border: 1px solid var(--gray-400);
    background: var(--gray-100);
    color: var(--gray-700);
}

.input-group-text-btn-toggle {
    border: 1px solid var(--gray-400);
    background: var(--gray-100);
    color: var(--gray-700);
}

.input-group-text-btn-toggle:active,
.input-group-text-btn-toggle:hover {
    border: 1px solid var(--gray-400) !important;
    background: var(--gray-200) !important;
    color: var(--gray-700) !important;
  }

.btn-primary {
    background-color: var(--gray-600);
    border: none;
    border-radius: 0.5rem;
    font-weight: 600;
}

.btn-primary:hover {
    background-color: var(--gray-700);
}

.fade-form {
    display: none;
    animation: fadeIn 0.5s ease-in-out;
}

.client-area {
    background: var(--gray-50);
    min-height: 100vh;
}

.sidebar {
    background: var(--gray-800);
    min-height: 100vh;
    transition: all 0.3s;
}

.sidebar .nav-link {
    color: var(--text-invert);
    padding: 1rem 1.5rem;
    border-radius: 0;
    transition: all 0.3s;
}

.sidebar .nav-link:hover,
.sidebar .nav-link.active {
    background: var(--primary);
    color: var(--white);
}

.content-area {
    padding: 2rem;
}

.avatar{
    cursor: default !important;
}

.card {
    box-shadow: none;
    border: 1px solid var(--gray-300);
    border-radius: 0.75rem;
}

.card-invert {
    background-color: var(--gray-800);
    color: var(--text-invert);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 0.75rem;
    box-shadow: none;
}

.status-badge {
    font-size: 0.75rem;
    padding: 0.25rem 0.5rem;
}

.invoice-item {
    border-left: 4px solid var(--primary);
    transition: all 0.3s;
}

.invoice-item:hover {
    border-left-color: var(--primary-dark);
    transform: translateX(5px);
}

.payment-method {
    cursor: pointer;
    transition: all 0.3s;
}

.payment-method:hover {
    background: var(--gray-50);
}

.payment-method.selected {
    background: var(--accent-light);
    border-color: var(--primary);
}

.password-message-item {
    font-size: 0.9rem;
    margin: 2px 0;
}

.password-message-item.valid {
    color: #198754;
}

.password-message-item.invalid {
    color: #db1e2e;
}

.password-message-item.valid i::before {
    content: "\f00c" !important;
}

@media (max-width: 768px) {
    .sidebar {
        position: fixed;
        left: -100%;
        width: 280px;
        z-index: 1000;
    }

    .sidebar.show {
        left: 0;
    }

    .content-area {
        padding: 1rem;
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}