/* Einstein Account App: Custom CSS */

/* -------------------------------------------------- */
/* Variables and Theme Configuration */
/* -------------------------------------------------- */
:root {
    --app-body-bg: #f8f9fa;
    --app-section-bg: #fff;
    --app-section-border: #e9ecef;
    --app-table-header-bg: #f8f9fa;
    --app-table-header-color: #212529;
    --app-table-header-link: #212529;
    --bs-border-radius: 0.2rem;
    --bs-body-font-family: 'IBM Plex Sans', sans-serif;
    --bs-body-font-size: 0.9rem;

    /* Text colors */
    --color-text: #212529;
    --color-text-muted: #6c757d;

    /* Form colors */
    --form-placeholder: #bfc5cb;
    --form-border: #e3e6ea;
    --form-border-dark: #444950;
}

/* Dark mode */
[data-bs-theme='dark'] {
    --app-body-bg: #181a1b;
    --app-section-bg: #23272b;
    --app-section-border: #343a40;
    --app-table-header-bg: #2c3136;
    --app-table-header-color: #f8f9fa;
    --app-table-header-link: #f8f9fa;

    /* Text colors */
    --color-text: #f8f9fa;
    --color-text-muted: #adb5bd;

    /* Form colors */
    --form-placeholder: #6c757d;
}

/* -------------------------------------------------- */
/* Base Styles and Typography */
/* -------------------------------------------------- */
body {
    background-color: var(--app-body-bg, #f8f9fa) !important;
}

body .dropdown-menu,
body .dropdown-menu .dropdown-item {
    font-size: var(--bs-body-font-size) !important;
}

input, select, textarea, label,
.form-control, .form-label {
    font-size: var(--bs-body-font-size) !important;
}

.hidden-text {
    font-family: monospace !important;
    font-size: 0.85rem;  
}

/* -------------------------------------------------- */
/* Links and Navigation */
/* -------------------------------------------------- */
a {
    text-decoration: none !important;
}

a:hover, a:focus {
    text-decoration: underline;
}

/* -------------------------------------------------- */
/* Form Elements */
/* -------------------------------------------------- */
.form-control::placeholder,
.form-select[data-placeholder]:not(:focus) {
    color: var(--form-placeholder) !important;
    opacity: 1;
}

/* Input group text styling */
.input-group-text {
    font-size: var(--bs-body-font-size) !important;
    color: var(--color-text) !important;
    background-color: var(--bs-secondary-bg) !important;
    border-color: var(--form-border) !important;
}

[data-bs-theme='dark'] .input-group-text {
    border-color: var(--form-border-dark) !important;
}

[data-bs-theme='dark'] .form-control::placeholder,
[data-bs-theme='dark'] .form-select[data-placeholder]:not(:focus) {
    color: var(--form-placeholder) !important;
    opacity: 1;
}

.form-control, .form-select, textarea {
    border-color: var(--form-border) !important;
}

[data-bs-theme='dark'] .form-control, 
[data-bs-theme='dark'] .form-select, 
[data-bs-theme='dark'] textarea {
    border-color: var(--form-border-dark) !important;
}

/* Form select specific styles */
.form-select {
    color: var(--color-text) !important;
}

.form-select option {
    color: var(--color-text) !important;
    background-color: var(--app-section-bg) !important;
}

[data-bs-theme='dark'] .form-select {
    color: var(--color-text) !important;
}

[data-bs-theme='dark'] .form-select option {
    color: var(--color-text) !important;
    background-color: var(--app-section-bg) !important;
}

/* State select specific styles */
.form-select[data-selected-state=""] {
    color: var(--form-placeholder) !important;
}

.form-select[data-selected-state]:not([data-selected-state=""]) {
    color: var(--color-text) !important;
}

[data-bs-theme='dark'] .form-select[data-selected-state=""] {
    color: var(--form-placeholder) !important;
}

[data-bs-theme='dark'] .form-select[data-selected-state]:not([data-selected-state=""]) {
    color: var(--color-text) !important;
}

.form-select.unsaved,
.role-permissions-menu.unsaved {
    background-color: var(--bs-warning-bg-subtle, #fff3cd) !important;
    border-color: var(--bs-warning-border-subtle, #ffe69c) !important;
}

.form-select.saved,
.role-permissions-menu.saved {
    background-color: var(--bs-success-bg-subtle, #d1e7dd) !important;
    border-color: var(--bs-success-border-subtle, #a3cfbb) !important;
}

.form-select.error,
.role-permissions-menu.error {
    background-color: var(--bs-danger-bg-subtle, #f8d7da) !important;
    border-color: var(--bs-danger-border-subtle, #f1aeb5) !important;
}

/* -------------------------------------------------- */
/* Tables and Lists */
/* -------------------------------------------------- */
.list-container {
    background-color: var(--app-section-bg) !important;
    border: 1px solid var(--app-section-border) !important;
}

/* -------------------------------------------------- */
/* Buttons and Interactive Elements */
/* -------------------------------------------------- */
.btn, .btn-primary, .btn-outline-primary, .btn-secondary, .btn-danger, 
.btn-success, .btn-warning, .btn-info, .btn-light, .btn-dark {
    border-radius: var(--bs-border-radius) !important;
    font-size: var(--bs-body-font-size) !important;
}

/* -------------------------------------------------- */
/* Dropdowns and Menus */
/* -------------------------------------------------- */
.dropdown-menu {
    font-size: var(--bs-dropdown-font-size) !important;
}

/* Proper styling for text-danger dropdown items */
.dropdown-item.text-danger {
    color: var(--bs-danger) !important;
}

.dropdown-item.text-danger:hover {
    color: var(--bs-danger) !important;
    background-color: var(--bs-secondary-bg) !important;
}

.dropdown-item.text-danger:active,
.dropdown-item.text-danger.active {
    color: #fff !important;
    background-color: var(--bs-danger) !important;
}

/* Dark theme support for text-danger dropdown items */
[data-bs-theme='dark'] .dropdown-item.text-danger {
    color: var(--bs-danger) !important;
}

[data-bs-theme='dark'] .dropdown-item.text-danger:hover {
    color: var(--bs-danger) !important;
    background-color: var(--bs-secondary-bg) !important;
}

[data-bs-theme='dark'] .dropdown-item.text-danger:active,
[data-bs-theme='dark'] .dropdown-item.text-danger.active {
    color: #fff !important;
    background-color: var(--bs-danger) !important;
}

.role-permissions-menu {
    width: max-content;
    min-width: 8rem;
    max-width: 16rem;
}

.role-permissions-menu,
.role-permissions-menu option {
    color: var(--color-text) !important;
}

[data-bs-theme='dark'] .role-permissions-menu,
[data-bs-theme='dark'] .role-permissions-menu option {
    color: var(--color-text) !important;
}

/* -------------------------------------------------- */
/* Badges and Status Indicators */
/* -------------------------------------------------- */
.badge.bg-success-subtle,
.badge.bg-secondary-subtle,
.badge.bg-danger-subtle,
.badge.bg-warning-subtle {
    font-size: 0.8rem;
    font-weight: 400;
    padding: 0.3em 0.75em;
    text-align: center;
    width: 5rem;
}

[data-bs-theme='dark'] .badge.bg-success-subtle {
    background-color: #198754 !important;
    color: #fff !important;
}

[data-bs-theme='dark'] .badge.bg-warning-subtle {
    background-color: #ffc107 !important;
    color: #fff !important;
}

[data-bs-theme='dark'] .badge.bg-danger-subtle {
    background-color: #dc3545 !important;
    color: #fff !important;
}

[data-bs-theme='dark'] .badge.bg-secondary-subtle {
    background-color: #495057 !important;
    color: #fff !important;
}

.badge.min-wide {
    min-width: 10rem;
    display: inline-block;
    text-align: center;
}

/* -------------------------------------------------- */
/* Layout and Spacing */
/* -------------------------------------------------- */
.detail-label {
    width: 7rem;
}

.sidebar-custom {
    width: 34.375rem !important;
    max-width: 100vw;
    background-color: var(--app-body-bg, #f8f9fa) !important;
}

/* -------------------------------------------------- */
/* Dashboard Components */
/* -------------------------------------------------- */
.dashboard-profile-image {
    height: 4rem;
    width: 4rem;
    object-fit: cover;
}

.dashboard-profile-image-action-btn {
    border-radius: 50% !important;
    height: 1.75rem !important;
    width: 1.75rem !important;
}

.dashboard-card {
    max-width: 50rem;
    width: 100%;
}

.dashboard-card-header {
    padding-top: 1.5rem;
}

.dashboard-card-action {
    min-height: 9.375rem;
}

/* -------------------------------------------------- */
/* Authentication Components */
/* -------------------------------------------------- */
.totp_qrcode_image {
    height: auto;
    margin: -0.5rem;
    max-width: 11.25em;
}

.eye-toggle {
    cursor: pointer;
    font-size: 0.9rem;
    position: absolute;
    right: 0.625rem;
    top: 0.625rem;
}

.divider-or {
    align-items: center;
    display: flex;
    margin: 1rem 0;
    text-align: center;
}

.divider-line {
    flex-grow: 1;
    height: 0.0625rem;
    background: #dee2e6;
}

[data-bs-theme='dark'] .divider-line {
    background: #444950;
}

.divider-text {
    font-size: 0.75rem;
    margin: 0 0.5rem;
    padding: 0 0.25rem;
}

.google-icon {
    width: 1.25rem;
    height: 1.25rem;
    object-fit: contain;
    display: inline-block;
}

/* -------------------------------------------------- */
/* Progress Indicators */
/* -------------------------------------------------- */
.progress {
    height: 0.25rem !important;
}

.progress-bar-inactive {
    width: 100% !important;
    opacity: 0.3 !important;
}

/* -------------------------------------------------- */
/* Pagination */
/* -------------------------------------------------- */
.pagination, .pagination .page-link {
    font-size: var(--bs-body-font-size) !important;
}

/* -------------------------------------------------- */
/* Images and Media */
/* -------------------------------------------------- */
.logo-image {
    max-width: 4.5rem;
    height: auto;
}