/* custom-styles.css */

/* -------------------
    GLOBAL & LAYOUT
------------------- */

/* Body background */
body.landing-body {
    background-color: #f5f5f5;
}

/* Prevent horizontal overflow on small screens */
.landing-page-wrapper {
    overflow-x: hidden;
}

/* Add top padding to the main content area to prevent overlap with fixed header */
.main-content.landing-main {
    padding-top: 80px; /* Adjust this value if needed */
}

/* Menu Background White */
header.app-header, 
aside.app-sidebar {
    background-color: #fff !important;
    border-bottom: 1px solid #e9edf4;
}

/* (FIX) Logout button styling with high specificity */
header.app-header #logout-btn,
aside.app-sidebar #mobile-logout-btn {
    background-color: #c50405 !important;
    border-color: #c50405 !important;
    color: #fff !important;
    font-weight: 600;
}
header.app-header #logout-btn:hover,
aside.app-sidebar #mobile-logout-btn:hover {
    background-color: #a50304 !important;
    border-color: #a50304 !important;
}

/* (FIX) Style for the mobile menu (hamburger) icon */
header.app-header .sidemenu-toggle.header-link {
    border: 2px solid #c50405 !important;
    padding: 2px 5px !important;
    border-radius: 5px !important;
    line-height: 1 !important;
    height: auto !important;
    margin-inline-end: 0.5rem; /* Add some space on the right */
	margin-top:  1rem;
}
header.app-header .sidemenu-toggle.header-link .ri-menu-3-line {
    color: #c50405 !important;
}

/* Card Shadow */
.card.custom-card {
    box-shadow: 0 5px 25px rgba(0, 0, 0, 0.08);
    border: none !important;
    border-radius: 0.5rem;
}


/* -------------------
    PAGE TITLE
------------------- */
.proposal-title-container {
    text-align: center;
}
.proposal-title-main {
    background-color: #c50405; /* Primary Red */
    padding: 1rem 1.5rem;
    margin-bottom: 0.75rem;
}
.proposal-title-main h1 {
    color: #fff;
    font-weight: bold;
    margin: 0;
    font-size: 2.25rem;
}
.proposal-tagline {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    letter-spacing: 2px;
    font-weight: 500;
    color: #444;
    padding: 0 1rem;
    border-bottom: 1px solid #ddd;
    border-top: 1px solid #ddd;
    padding-bottom: 0.5rem;
    padding-top: 0.5rem;
}
.proposal-tagline span:not(:last-child)::after {
    content: '|';
    margin-left: 1rem;
    color: #aaa;
    font-weight: 100;
}
@media (max-width: 768px) {
    .proposal-title-main h1 {
        font-size: 1.75rem;
    }
    .proposal-tagline {
        font-size: 0.8rem;
        gap: 0.5rem;
    }
    .proposal-tagline span:not(:last-child)::after {
        margin-left: 0.5rem;
    }
}
/* Reduce card padding on extra small screens */
@media (max-width: 575.98px) {
    .card.custom-card .card-body {
        padding: 1.5rem 1rem !important;
    }
}


/* -------------------
    FIXES & OVERRIDES
------------------- */

/* Tab Pagination Styling */
.tab-style-3 .nav-item .nav-link.active {
    background-color: #fff !important;
    color: #c50405 !important; /* Red text */
}
.tab-style-3 .nav-item .nav-link.active::before {
    background: #fff !important; /* White inner circle */
    border: 1px solid #c50405 !important; /* Red border */
}
.tab-style-3 .nav-item .nav-link:not(.active)::before {
    border-color: #c50405 !important; /* Red border for non-active circles */
}

/* Form Border Color Override */
.main-content .card .form-control,
.main-content .card .form-select,
.main-content .card .choices__inner {
    border-color: #9b9da1 !important;
}
.main-content .card .form-control:focus,
.main-content .card .form-select:focus,
.main-content .card .choices[data-type*="select-one"] .choices__inner.is-focused {
    border-color: #9b9da1 !important;
    box-shadow: 0 0 0 0.25rem rgba(155, 157, 161, 0.25) !important;
}


/* -------------------
    FORMS & BUTTONS
------------------- */

/* Primary Button (Next) & Submit Button */
.main-content #next-tab-btn.btn-primary,
.main-content #submit-btn.btn-success {
    background-color: #c50405 !important;
    border-color: #c50405 !important;
    color: #fff !important;
}
.main-content #next-tab-btn.btn-primary:hover,
.main-content #submit-btn.btn-success:hover {
    background-color: #a50304 !important;
    border-color: #a50304 !important;
}

/* '+' (Add) buttons color set to yellow */
.main-content .add-photo-row,
.main-content .add-location-block,
.main-content .add-service-row {
    background-color: #c50405 !important; 
    border-color: #c50405 !important;
    color: #fff !important;
}
.main-content .add-photo-row:hover,
.main-content .add-location-block:hover,
.main-content .add-service-row:hover {
    background-color: #50545d !important;
    border-color: #50545d !important;
}

/* '-' (Remove) buttons color remains red */
.main-content .remove-photo-row,
.main-content .remove-location-block,
.main-content .remove-service-row {
    background-color: #50545d !important;
    border-color: #50545d !important;
	color: #fff;
}
.main-content .remove-photo-row:hover,
.main-content .remove-location-block:hover,
.main-content .remove-service-row:hover {
    background-color: #50545d !important;
    border-color: #50545d !important;
}

/* Back Button Color */
#back-tab-btn.btn-secondary {
    background-color: #50545d !important;
    border-color: #50545d !important;
    color: #fff !important;
    font-weight: 600;
}
#back-tab-btn.btn-secondary:hover {
    background-color: #c50405 !important;
    border-color: #c50405 !important;
}

/* Red box before labels */
.form-label::before {
    content: '';
    display: inline-block;
    width: 9px;
    height: 9px;
    background-color: #c50405;
    margin-right: 10px;
    vertical-align: 2px;
}

/* Choices.js dropdown highlight color */
.choices__list--dropdown .choices__item--selectable.is-highlighted {
    background-color: #c50405 !important;
}

@media (max-width: 991.98px) {
    .app-header .horizontal-logo .header-logo img {
        height: 3rem !important;
}}

@media (min-width: 992px) and (min-width: 992px) {
    [data-nav-layout=horizontal] .horizontal-logo .header-logo img {
        height: 5rem !important;
}}

@media (min-width: 992px) {
    [data-nav-layout=horizontal] .horizontal-logo {
padding: 0rem 0 !important;}}

.landing-body .demo-footer {
    padding-top: 0rem !important;
}

.tab-style-3 .nav-item .nav-link.active:after
/* Specificity: (0,4,1) */
 {
    border-color: #c50405 !important;
    color: #c50405 !important;
}

/* --- Login & Authentication Page Styles --- */

/* Style for the main page container */
.login-page-container {
    background-color: #f5f5f5; /* Light gray background for the whole page */
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

/* The main card that holds both columns */
.login-card {
    display: flex;
    flex-direction: row;
    width: 100%;
    max-width: 900px;
    min-height: auto;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    border: none;
    border-radius: 0.5rem;
    overflow: hidden; /* Important for keeping rounded corners */
}

/* Left panel for the logo */
.login-logo-panel {
    background-color: #e9ecef; /* Light gray background */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
}

.login-logo-img {
    max-width: 200px; /* Control logo size */
    height: auto;
}

/* Right panel for the form */
.login-form-panel {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    background-color: #fff;
}

.login_form {
    width: 100%;
    max-width: 400px;
}

/* Form element styling */
.login_form .form-label::before {
    content: '';
    display: inline-block;
    width: 9px;
    height: 9px;
    background-color: #c50405;
    margin-right: 10px;
    vertical-align: 2px;
}

.login_form .form-control {
    border-color: #9b9da1 !important;
}

.login_form .form-control:focus {
    border-color: #9b9da1 !important;
    box-shadow: 0 0 0 0.25rem rgba(155, 157, 161, 0.25) !important;
}

/* Main Action Button Color */
.login_form .btn.btn-primary {
    background-color: #c50405 !important;
    border-color: #c50405 !important;
    color: #fff !important;
    font-weight: 600;
}

.login_form .btn.btn-primary:hover {
    background-color: #a50304 !important;
    border-color: #a50304 !important;
}

/* Link Styling */
.login_form .text-start a,
.login_form .card-footer a {
    color: #c50405;
    font-weight: 600;
    text-decoration: none;
}

.login_form .text-start a:hover,
.login_form .card-footer a:hover {
    text-decoration: underline;
}

/* --- Table Action Buttons --- */
.table .btn-action-edit {
    background-color: transparent !important;
    border: 1px solid #50545d  !important; /* Yellow border */
    color: #50545d  !important;
}
.table .btn-action-edit:hover {
    background-color: #50545d  !important;
    color: #fff !important;
}

.table .btn-action-download {
    background-color: transparent !important;
    border: 1px solid #c50405 !important; /* Red border */
    color: #c50405 !important;
}
.table .btn-action-download:hover {
    background-color: #c50405 !important;
    color: #fff !important;
}

.bg-warning-transparent {
    background-color: rgb(182 183 188) !important;
    color: rgb(85 89 97) !important;
}

.btn-primary {
    background-color: rgb(197 4 5) !important;
    border-color: rgb(197 4 5) !important;
    color: #fff !important;
}

.page-item.active .page-link {
    color: #fff;
    background-color: rgb(197 4 5) !important;;
    border-color: rgb(197 4 5) !important;;
}

.btn-primary:hover {
    background-color: #50545d !important;
    border-color: #50545d !important;
    color: #fff !important;
}