/* Spark Studio Salem Custom Theme Overrides for MemberMatters */

/* 1. Global Dark Theme Background & Toolbar Override */
body, .q-page-container, .q-layout, .bg-toolbar, .q-header, .q-footer {
    background-color: #121212 !important;
}

.q-header, .q-header .q-toolbar, .bg-toolbar {
    background-color: #181818 !important;
    color: #ffffff !important;
    border-bottom: 1px solid #2a2a2a !important;
}

/* 2. Flyout / Sidebar Drawer Header Override (Simple Grey Header with Golden Text) */
.q-drawer {
    background-color: #181818 !important;
    color: #e0e0e0 !important;
}

.q-drawer .absolute-top,
.q-drawer .q-img,
.q-drawer .q-img__content,
.q-drawer .bg-primary,
.q-drawer .bg-toolbar,
.q-drawer__header {
    background-image: none !important;
    background-color: #222222 !important;
    color: #FDD30B !important;
    border-bottom: 1px solid #2d2d2d !important;
}

/* Hide the default blue origami/fabric swatch background image */
.q-drawer .q-img__image {
    display: none !important;
    background-image: none !important;
}

.q-drawer .absolute-bottom {
    background-color: #222222 !important;
    color: #FDD30B !important;
}

/* User Name, Screen Name, Profile Icon in Golden Yellow */
.q-drawer .text-weight-bold,
.q-drawer .absolute-bottom .text-weight-bold,
.q-drawer .absolute-bottom div,
.q-drawer .absolute-bottom .q-icon,
.q-drawer .absolute-bottom .q-avatar {
    color: #FDD30B !important;
}

/* 3. Text Inputs & Form Fields - Contain Background strictly inside .q-field__control */

/* Outer wrapper elements MUST be transparent so background doesn't spill over into bottom margins/hints */
.q-field,
.q-field__inner,
.q-field__bottom {
    background: transparent !important;
}

/* ONLY .q-field__control gets the dark input background, border, and border-radius */
.q-field__control {
    background-color: #2e2e2e !important;
    border: 1px solid #4a4a4a !important;
    border-radius: 8px !important;
    overflow: hidden !important;
}

/* Filled / Standard Quasar input overlays - keep transparent or matching background */
.q-field--filled .q-field__control,
.q-field--filled .q-field__control:before,
.q-field--filled .q-field__control:after,
.q-field--standard .q-field__control:before,
.q-field--standard .q-field__control:after {
    background-color: #2e2e2e !important;
    border-color: #4a4a4a !important;
}

/* Focused State */
.q-field--focused .q-field__control {
    border-color: #FDD30B !important;
    box-shadow: 0 0 0 1px #FDD30B !important;
}

/* Inner input native element */
.q-field__control-container,
.q-field__native,
.q-field__input,
input,
textarea,
select {
    background-color: transparent !important;
    color: #ffffff !important;
}

/* Override WebKit / Chrome / Safari / Edge Autofill Light Background */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 1000px #2e2e2e inset !important;
    -webkit-text-fill-color: #ffffff !important;
    caret-color: #ffffff !important;
    transition: background-color 5000s ease-in-out 0s !important;
}

/* High Contrast Yellow Floating Labels on Dark Background */
.q-field__label {
    color: #FDD30B !important;
    font-weight: 600 !important;
}

.q-field--focused .q-field__label,
.q-field--float .q-field__label {
    color: #FDD30B !important;
    font-weight: 700 !important;
}

.q-field__native, .q-field__input {
    color: #ffffff !important;
}

/* 4. Action Buttons (Login, Submit, Reset Password) */
.q-btn.bg-accent, .q-btn.bg-primary, button[type="submit"], .bg-accent {
    background-color: #FDD30B !important;
    color: #121212 !important;
    font-weight: 700 !important;
}

.q-btn.bg-accent .q-btn__content, .q-btn.bg-primary .q-btn__content {
    color: #121212 !important;
}

/* Secondary / Flat Buttons (e.g. Reset Password) */
.q-btn--flat.text-primary, .q-btn--flat.text-accent, .text-primary, .text-accent {
    color: #FDD30B !important;
}

/* Card Styling */
.q-card {
    background-color: #1a1a1a !important;
    border: 1px solid #2a2a2a !important;
    border-radius: 10px !important;
    color: #ffffff !important;
}

/* 5. Tab Controls Styling - Grey Background with Golden Text */
.q-tabs,
.q-tabs--horizontal,
.q-tabs__content,
.q-tabs.bg-primary,
.q-tabs.bg-accent,
.q-tabs.bg-toolbar {
    background-color: #242424 !important;
    color: #FDD30B !important;
    border-radius: 8px 8px 0 0 !important;
}

.q-tab {
    color: #e0d080 !important;
    opacity: 0.9;
    transition: all 0.2s ease;
}

.q-tab:hover {
    color: #FDD30B !important;
    opacity: 1;
    background-color: rgba(253, 211, 11, 0.1) !important;
}

.q-tab--active {
    color: #FDD30B !important;
    opacity: 1 !important;
    font-weight: 700 !important;
    background-color: #2e2e2e !important;
}

.q-tab__label,
.q-tab__icon,
.q-tab .q-tab__content {
    color: #FDD30B !important;
}

.q-tab--active .q-tab__label,
.q-tab--active .q-tab__icon {
    color: #FDD30B !important;
    font-weight: 700 !important;
}

/* Active tab bottom indicator line */
.q-tab__indicator {
    background-color: #FDD30B !important;
    height: 3px !important;
}

/* 6. Global Proactive Quasar Component Overrides */

/* Badges & Chips with Primary/Accent Background */
.q-badge--primary,
.q-badge.bg-primary,
.q-chip--primary,
.q-chip.bg-primary,
.q-avatar--primary,
.q-badge--accent,
.q-badge.bg-accent,
.q-chip--accent,
.q-chip.bg-accent {
    background-color: #FDD30B !important;
    color: #121212 !important;
    font-weight: 700 !important;
}

.q-chip__content,
.q-badge {
    color: #121212 !important;
}

/* Tables & Data Grids */
.q-table__card,
.q-table {
    background-color: #1a1a1a !important;
    color: #e0e0e0 !important;
}

.q-table th {
    background-color: #222222 !important;
    color: #FDD30B !important;
    font-weight: 700 !important;
    border-bottom: 1px solid #333333 !important;
}

.q-table td {
    border-bottom: 1px solid #2a2a2a !important;
}

.q-table tbody tr:hover {
    background-color: #262626 !important;
}

/* Dropdown Menus, Select Popups & Modals */
.q-menu,
.q-popover,
.q-dialog .q-card,
.q-menu .q-item {
    background-color: #1f1f1f !important;
    color: #ffffff !important;
    border: 1px solid #333333 !important;
}

.q-menu .q-item--active,
.q-menu .q-item:hover {
    background-color: #2c2c2c !important;
    color: #FDD30B !important;
}

/* Checkboxes, Radios & Switches */
.q-checkbox__bg,
.q-radio__inner--truthy,
.q-toggle__track {
    color: #FDD30B !important;
}

.q-checkbox__svg {
    color: #121212 !important;
}

/* Pagination Controls */
.q-pagination .q-btn--outline,
.q-pagination .q-btn--flat {
    color: #FDD30B !important;
}

.q-pagination .q-btn.bg-primary {
    background-color: #FDD30B !important;
    color: #121212 !important;
}

/* Alert Banners & Notifications */
.q-banner.bg-primary,
.q-banner.bg-info {
    background-color: #FDD30B !important;
    color: #121212 !important;
}

/* Progress Bars & Loading Spinners */
.q-linear-progress__model,
.q-spinner {
    color: #FDD30B !important;
}

.q-linear-progress__track {
    background-color: #333333 !important;
}