:root {
    --bs-gray: #30363d;       /* Borders and Dividers */
    --bs-primary: #EA4E94;    /* Action buttons (Pink) */
    --bs-secondary: #4EE0EA;  /* Links and info (Cyan) */
    --bs-accent: #E0EA4E;     /* Warnings/Notifications (Lime) */
}

/*:root {*/
/*    --bs-gray: #f6f8fa;       !* Very light gray for cards *!*/
/*    --bs-primary: #EA4E94;    !* Logo and key brand moments *!*/
/*    --bs-secondary: #8b949e;  !* Muted text (GitHub style) *!*/
/*    --bs-accent: #4EE0EA;     !* Subtle focus states *!*/
/*}*/

/* Start Overwrite Bootstrap */

/* .bg-body-tertiary {
    background-color: var(--bs-dark) !important;
} */

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

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

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

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

/* .bg-secondary {
    background-color: var(--bs-secondary) !important;
    color: black;
} */

.bg-accent {
    background-color: var(--bs-accent) !important;    
}


.border-danger {
    border-color: var(--bs-primary) !important; 
}

.btn-danger {
    background-color: var(--bs-primary) !important;
    border-color: var(--bs-primary) !important;
    color: white !important;
}

.btn-warning {
    background-color: var(--bs-secondary) !important;
    border-color: var(--bs-secondary) !important;
}

.btn-outline-danger {
    border-color: var(--bs-primary) !important;
    color: var(--bs-primary) !important;
}

.btn-outline-danger:hover {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary) !important;
    color: white !important;
}

.list-group-item.active {
    background-color: var(--bs-primary) !important;
}

.btn-outline-primary {
    border-color: var(--bs-primary) !important;
    color: var(--bs-primary) !important;
}

.btn-primary-solid {
    background-color: var(--bs-primary) !important;
    color: white;
}

.btn-primary-solid:hover {
    /* background-color: transparent !important; */
    border-color:  var(--bs-gray) !important;
}

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

.btn-primary {
    background-color: var(--bs-primary);
    /* border-color: var(--bs-border-color-translucent); */
    border-color: var(--bs-primary);
}

.btn-primary:hover {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
}

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

.btn-check:checked + .btn-primary {
    background-color: transparent;
    color: white;
    border-color: var(--bs-gray);    
}

.btn-check:checked + .btn-primary:hover {
    border-color: var(--bs-gray);    
}

.btn-check + .btn-primary:hover {
    background-color: transparent;
    border-color: var(--bs-gray);    
}

.btn-check + .btn-primary {
    border-color: transparent;
}

/* End Overwrite Bootstrap */

body {
    background-color: #121212;
}

.alert-info {
    color: var(--bs-info) !important;
    background-color: transparent !important;
    border-color: var(--bs-primary) !important;
} 

.bg-primary {
    background-color: var(--bs-primary);
}

#creatorSelect option:checked,
#creatorSelect option:focus,
#creatorSelect option:active {
    background-color: var(--bs-primary) !important; 
    color: var(--bs-white) !important; 
}

.btn-left-hover-no-border.active {
    color: var(--bs-primary);
    border-color: transparent;
    background-color: transparent;
}

.btn-left-hover-no-border.active:hover {
    color: var(--bs-primary);
    border-color: transparent;
    background-color: transparent;
}

.btn-left-hover-no-border {
    text-align: left;
    color: var(--bs-body-color);
    padding: .375rem 1rem;
    transition: all 0.3s ease;
    border: 1px solid transparent;
    border-radius: 2rem;
    background-color: transparent;
}

.btn-left-hover-no-border:hover {
    border-color: transparent;
    background-color: transparent;
    color: var(--bs-primary);
}

.blurred-content {
    filter: blur(20px);
    pointer-events: none;
}

.disabled-link {
    pointer-events: none;
    cursor: default;
}

/* Mobile Bottom Navigation */
@media (max-width: 768px) {
    .main-sidebar {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 1030;
        background-color: var(--bs-body-bg);
        border-top: 1px solid var(--bs-border-color);
        padding: 0.5rem 0;
        box-shadow: 0 -0.125rem 0.25rem rgba(0, 0, 0, 0.075);
    }

    .main-sidebar .d-flex.flex-column {
        flex-direction: row !important;
        justify-content: space-evenly !important;
        align-items: center;
        height: 100%;
    }

    .nav-item-container {
        width: auto !important;
        flex: 1;
        display: flex;
        justify-content: center;
    }

    .btn-left-hover-no-border {
        width: auto !important;
        padding: 0.5rem 0 !important;
        margin: 0 !important;
        border-radius: 0;
        border: none;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    
    .btn-left-hover-no-border:hover {
         border-color: transparent;
    }

    /* Icon size for mobile */
    .btn-left-hover-no-border i {
        font-size: 1.5rem;
        margin: 0 !important;
    }

    /* Ensure body content isn't covered by fixed nav */
    body {
        padding-bottom: 80px;
    }
}

/* Profile Avatar Responsive Positioning */
.profile-avatar {
    width: 180px;
    height: 180px;
    object-fit: cover;
    object-position: center;
    border: 4px solid white;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

@media (min-width: 768px) {
    .profile-avatar {
        width: 180px;
        height: 180px;
        left: 30px;
        transform: translateY(-50%);
        top: 50%; /* Reaffirm top */
        margin-top: 0;
    }
}

.cursor-pointer {
    cursor: pointer;
}

/* Modern Validation Errors */
.field-validation-error {
    color: var(--bs-danger);
    font-size: 0.875em;
    font-weight: 500;
    margin-top: 0.25rem;
    display: flex;
    align-items: center;
}

.field-validation-error::before {
    content: "\F312"; /* bootstrap-icons exclamation-circle */
    font-family: "bootstrap-icons", serif;
    margin-right: 0.25rem;
    font-size: 1em;
}

.input-validation-error {
    border-color: var(--bs-danger);
    padding-right: calc(1.5em + 0.75rem);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc3545'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5zM6 8.2af.75.75 0 000 1.5.75.75 0 000-1.5z'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right calc(0.375em + 0.1875rem) center;
    background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
}

.input-validation-error:focus {
    border-color: var(--bs-danger);
    box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.25);
}

.validation-summary-errors ul {
    list-style-type: none;
    padding-left: 0;
    margin-bottom: 0;
}

.check-primary {
    background-color: var(--bs-primary) !important;
    color: black !important;
    border-color: var(--bs-primary);
}

.check-secondary {
    border-color: var(--bs-primary) !important;
    color: var(--bs-primary) !important;
}

/* Rounded Scroller */

/* 1. Target the scrollable container */
.rounded-scroller {
    /* Optional: Hide scrollbar on Firefox/IE if needed, but not part of rounding */
    scrollbar-width: thin; 
    scrollbar-color: #888 #f1f1f1;
}

/* Utility: Hide scrollbar but allow scrolling */
.no-scrollbar {
    -ms-overflow-style: none !important;  /* IE and Edge */
    scrollbar-width: none !important;  /* Firefox */
}
.no-scrollbar::-webkit-scrollbar {
    display: none !important; /* Chrome, Safari and Opera */
    width: 0 !important;
    height: 0 !important;
    background: transparent !important;
    -webkit-appearance: none !important;
}

/* 2. WebKit (Chrome, Safari, Edge, modern browsers) Scrollbar Styling */
.rounded-scroller::-webkit-scrollbar {
    width: 8px; /* Width of the entire scrollbar */
    height: 8px; /* Height of horizontal scrollbar */
}

.rounded-scroller::-webkit-scrollbar-track {
    background: #f1f1f1; /* Color of the track */
    border-radius: 10px; /* Rounded corners for the track */
}

.rounded-scroller::-webkit-scrollbar-thumb {
    background: #888; /* Color of the scroll thumb */
    border-radius: 10px; /* Rounded corners for the thumb */
}

.rounded-scroller::-webkit-scrollbar-thumb:hover {
    background: #555; /* Color when hovering */
}

/* Global No Borders Request */ 
.card,
.btn, 
.form-control, 
.input-group-text, 
.nav-tabs .nav-link, 
.nav-pills .nav-link, 
.list-group-item,
.modal-content,
.dropdown-menu,
.popover, 
.toast,
.form-select {
    border: 0 !important;
}

/* Override utility classes if they are forcing borders */
.border, .border-top, .border-end, .border-bottom, .border-start {
    border: 0 !important;
}

/* Remove table borders if any */
.table > :not(caption) > * > * {
    border-bottom-width: 0 !important;
}

/* Exception: Profile Edit View, Post Views, Settings, Payments - Restore Borders */
.profile-edit-view.card, .profile-edit-view .card, .profile-edit-view .form-control, .profile-edit-view .input-group-text, .profile-edit-view .form-select, .profile-edit-view .btn:not(.btn-primary):not(.btn-danger):not(.btn-secondary),
.post-create-view.card, .post-create-view .card, .post-create-view .form-control, .post-create-view .input-group-text, .post-create-view .form-select, .post-create-view .btn:not(.btn-primary):not(.btn-danger):not(.btn-secondary),
.post-edit-view.card, .post-edit-view .card, .post-edit-view .form-control, .post-edit-view .input-group-text, .post-edit-view .form-select, .post-edit-view .btn:not(.btn-primary):not(.btn-danger):not(.btn-secondary),
.post-delete-view.card, .post-delete-view .card, .post-delete-view .form-control, .post-delete-view .input-group-text, .post-delete-view .form-select, .post-delete-view .btn:not(.btn-primary):not(.btn-danger):not(.btn-secondary),
.settings-index-view.card, .settings-index-view .card, .settings-index-view .form-control, .settings-index-view .input-group-text, .settings-index-view .form-select, .settings-index-view .btn:not(.btn-primary):not(.btn-danger):not(.btn-secondary),
.payments-index-view.card, .payments-index-view .card, .payments-index-view .form-control, .payments-index-view .input-group-text, .payments-index-view .form-select, .payments-index-view .btn:not(.btn-primary):not(.btn-danger):not(.btn-secondary) {
    border: 1px solid var(--bs-border-color) !important;
}

/* EXCEPTION TO EXCEPTION: Settings Dropdowns should be borderless */
.settings-index-view .form-select {
    border: 0 !important;
}

/* BUT Restore Border for specific 'Reason' dropdown as requested */
.settings-index-view #reasonSelect {
    border: 1px solid var(--bs-border-color) !important;
}

/* Restore specific card header/footer borders */
.profile-edit-view .card-header, .profile-edit-view .card-footer,
.post-create-view .card-header, .post-create-view .card-footer,
.post-edit-view .card-header, .post-edit-view .card-footer,
.post-delete-view .card-header, .post-delete-view .card-footer,
.settings-index-view .card-header, .settings-index-view .card-footer,
.payments-index-view .card-header, .payments-index-view .card-footer {
     border-color: var(--bs-border-color) !important;
     border-bottom: 1px solid var(--bs-border-color) !important;
}

.profile-edit-view .card-footer,
.post-create-view .card-footer,
.post-edit-view .card-footer,
.post-delete-view .card-footer,
.settings-index-view .card-footer,
.payments-index-view .card-footer {
     border-top: 1px solid var(--bs-border-color) !important;
     border-bottom: 0 !important;
}

/* Ensure secondary/primary buttons don't get a gray border if they are filled style */
.profile-edit-view .btn-primary, .profile-edit-view .btn-secondary, .profile-edit-view .btn-danger,
.post-create-view .btn-primary, .post-create-view .btn-secondary, .post-create-view .btn-danger,
.post-edit-view .btn-primary, .post-edit-view .btn-secondary, .post-edit-view .btn-danger,
.post-delete-view .btn-primary, .post-delete-view .btn-secondary, .post-delete-view .btn-danger,
.settings-index-view .btn-primary, .settings-index-view .btn-secondary, .settings-index-view .btn-danger,
.payments-index-view .btn-primary, .payments-index-view .btn-secondary, .payments-index-view .btn-danger {
    border: 1px solid transparent !important;
}

/* Exception: Social Media Icons (Outline Buttons) */
.btn-outline-light {
    border: 1px solid #f8f9fa !important; /* Restore standard light border */
}

/* If you want to be more specific to Profile Index social icons, 
   we can wrap them or rely on them being btn-outline-light */
   
/* Profile Post Filters: Muted background for inactive state */
.js-filter-checkbox + .btn {
    background-color: rgba(255, 255, 255, 0.1) !important; /* Muted/Glassy background */
    color: var(--bs-white) !important;
}

.js-filter-checkbox + .btn:hover {
    background-color: rgba(255, 255, 255, 0.2) !important;
}

.js-filter-checkbox:checked + .btn {
    background-color: var(--bs-primary) !important;
    color: white !important;
}

.card-enable-border {
    border: 1px solid #6c757d !important;
}/* Sticky Footer */
.footer {
    position: fixed;
    bottom: 0;
    width: 100%;
    background: rgba(18, 18, 18, 0.8);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-top: 1px solid rgba(255, 255, 255, 0.05) !important;
    padding: 0.75rem 0;
    z-index: 1020;
    transition: all 0.3s ease;
}

.footer:hover {
    background: rgba(18, 18, 18, 0.95);
    border-top-color: rgba(234, 78, 148, 0.3) !important;
}

body {
    padding-bottom: 60px; /* Space for the sticky footer */
}

@media (max-width: 768px) {
    /* Stack footer above the bottom navigation in the main layout */
    .footer-main {
        bottom: 56px; /* Sits right above the mobile bottom nav */
        padding: 0.5rem 0;
        font-size: 0.8rem;
    }
    
    /* Default padding for mobile with just the sticky footer */
    body {
        padding-bottom: 60px;
    }

    /* Extra padding if the mobile nav is likely present (original had 80px) */
    body:has(.main-sidebar) {
        padding-bottom: 110px;
    }
}