:root {
    --custom-primary: #0080ff;
    --custom-primary-hover: #0073e5;
    --custom-primary-active: #0066cc;
    --custom-primary-light: #d8ebff;
    --custom-primary-text: #ffffff;
}

/* ============================================================================
   BUG FIX 34: Frontend Editor Launcher (Triangle + Apps Button)
   IMPORTANT: Text/icons are ALWAYS WHITE (#ffffff) per user requirement
   Do NOT use {text_color} here - user explicitly wants white
   ============================================================================ */
.o_frontend_to_backend_nav::before {
    border-top-color: #0080ff !important;
    border-left-color: #0080ff !important;
}

.o_frontend_to_backend_nav .o_frontend_to_backend_apps_btn {
    background-color: #0080ff !important;
    color: #ffffff !important;
}

.o_frontend_to_backend_nav .o_frontend_to_backend_apps_btn:hover {
    background-color: #0073e5 !important;
    color: #ffffff !important;
}

/* BUG FIX 40: "所有應用程式" button - the icon is fa-th (FontAwesome grid icon) */
/* The button itself has class "fa fa-th" - it IS the icon, not a container */
.o_frontend_to_backend_nav .o_frontend_to_backend_apps_btn.fa,
.o_frontend_to_backend_nav .o_frontend_to_backend_apps_btn.fa-th,
.o_frontend_to_backend_nav a.o_frontend_to_backend_apps_btn {
    color: #ffffff !important;
}

/* The ::before pseudo-element contains the actual icon glyph */
.o_frontend_to_backend_nav .o_frontend_to_backend_apps_btn.fa::before,
.o_frontend_to_backend_nav .o_frontend_to_backend_apps_btn.fa-th::before,
.o_frontend_to_backend_nav a.o_frontend_to_backend_apps_btn::before {
    color: #ffffff !important;
}

/* BUG FIX 41: Ensure the grid icon (fa-th) is visible */
.o_frontend_to_backend_nav .fa-th,
.o_frontend_to_backend_nav .fa-th::before,
.o_frontend_to_backend_apps_btn.fa-th,
.o_frontend_to_backend_apps_btn.fa-th::before {
    color: #ffffff !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* ============================================================================
   BUG FIX 42: Mobile Hamburger Menu Icon (三條線)
   The .navbar-toggler-icon uses CSS background-image (SVG) not color property
   We need to override the SVG with a white version
   ============================================================================ */

/* Mobile navbar hamburger button - make icon white */
.o_header_mobile .navbar-toggler-icon,
.navbar-toggler-icon {
    /* Override Bootstrap's default SVG with white-colored SVG */
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
}

/* Mobile navbar background - use primary color */
.o_header_mobile,
.o_header_mobile .navbar,
header .navbar.o_header_mobile,
nav.o_header_mobile {
    background-color: #0080ff !important;
}

/* Mobile navbar text should be white */
.o_header_mobile .nav-link,
.o_header_mobile .navbar-brand,
.o_header_mobile a {
    color: #ffffff !important;
}

/* Mobile offcanvas menu header */
.o_navbar_mobile .offcanvas-header {
    background-color: #0080ff !important;
}

.o_navbar_mobile .offcanvas-header .btn-close {
    filter: invert(1) !important;
}

/* ============================================================================
   BUG FIX 43: Mobile Sidebar "所有應用程式" Button
   The .o_sidebar_topbar contains "所有應用程式" button with cyan background
   Both icon (oi-apps) and text (span.px-2) must be WHITE for contrast
   ============================================================================ */

/* The "所有應用程式" button in mobile sidebar header */
.o_sidebar_topbar a.btn.btn-primary,
.o_sidebar_topbar .btn-primary,
.o_sidebar_topbar a.btn-primary {
    background-color: #0080ff !important;
    border-color: #0080ff !important;
    color: #ffffff !important;
}

/* Ensure the icon inside the button is white */
.o_sidebar_topbar a.btn.btn-primary .oi,
.o_sidebar_topbar a.btn.btn-primary .oi-apps,
.o_sidebar_topbar a.btn.btn-primary i,
.o_sidebar_topbar .btn-primary .oi,
.o_sidebar_topbar .btn-primary .oi-apps,
.o_sidebar_topbar .btn-primary i {
    color: #ffffff !important;
}

/* Ensure the text inside the button is white - 所有應用程式 */
.o_sidebar_topbar a.btn.btn-primary span,
.o_sidebar_topbar a.btn.btn-primary span.px-2,
.o_sidebar_topbar .btn-primary span {
    color: #ffffff !important;
}

/* ============================================================================
   BUG FIX 44: Mobile Hamburger Icon (三條線) in Backend Navbar
   The .o_menu_toggle contains fa-bars icon - must be WHITE on cyan navbar
   Currently showing as cyan (same as background) - invisible!
   ============================================================================ */

/* Mobile menu toggle hamburger icon */
.o_menu_toggle,
.o_menu_toggle i,
.o_menu_toggle .fa,
.o_menu_toggle .fa-bars,
a.o_menu_toggle,
a.o_menu_toggle i,
a.o_menu_toggle .fa-bars {
    color: #ffffff !important;
}

/* The ::before pseudo-element for FontAwesome icons */
.o_menu_toggle .fa::before,
.o_menu_toggle .fa-bars::before,
a.o_menu_toggle .fa::before,
a.o_menu_toggle .fa-bars::before {
    color: #ffffff !important;
}

/* Also ensure mobile navbar has proper colors */
.o_main_navbar .o_menu_toggle,
.o_main_navbar .o_menu_toggle i,
.o_main_navbar .o_menu_toggle .fa-bars,
.o_main_navbar a.o_menu_toggle,
.o_main_navbar a.o_menu_toggle i {
    color: #ffffff !important;
}

/* ============================================================================
   PORTAL & PUBLIC USER — Unified Brand Color
   All portal pages, login/signup, and public-facing pages
   ============================================================================ */

/* ---- Portal / Frontend Navbar ---- */
header#top .navbar,
header .navbar,
.o_frontend_header,
nav.navbar.navbar-expand-lg {
    background-color: #ffffff !important;
    border-bottom: 1px solid #dee2e6 !important;
}

header#top .navbar .nav-link,
header#top .navbar .navbar-nav .nav-link,
header .navbar .nav-link,
.o_frontend_header .nav-link,
header#top .navbar .navbar-brand,
header .navbar .navbar-brand {
    color: #212529 !important;
}

header#top .navbar .nav-link:hover,
header#top .navbar .nav-link:focus,
header .navbar .nav-link:hover,
header .navbar .nav-link:focus,
.o_frontend_header .nav-link:hover {
    color: #0080ff !important;
    opacity: 1;
}

/* Navbar dropdown items (user menu, etc.) */
header .navbar .dropdown-menu .dropdown-item:active,
header .navbar .dropdown-menu .dropdown-item.active {
    background-color: #0080ff !important;
    color: #ffffff !important;
}

header .navbar .dropdown-menu .dropdown-item:hover,
header .navbar .dropdown-menu .dropdown-item:focus {
    background-color: #d8ebff !important;
    color: #0080ff !important;
}

/* Navbar toggler (hamburger) for portal mobile */
header .navbar .navbar-toggler {
    border-color: rgba(0,0,0,0.2) !important;
}

header .navbar .navbar-toggler .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%2833, 37, 41, 0.75%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
}

/* eCommerce cart icon in navbar */
header .navbar .badge,
header .navbar .my_cart_quantity {
    background-color: #0080ff !important;
    color: #ffffff !important;
}

/* ---- Portal "My Account" Home Page Icons & Cards ---- */
.o_portal_my_home .o_portal_category .o_portal_category_icon,
.o_portal_my_home .o_portal_index .o_portal_category_icon {
    color: #0080ff !important;
}

.o_portal_my_home .o_portal_category:hover .o_portal_category_icon,
.o_portal_my_home .o_portal_index:hover .o_portal_category_icon {
    color: #0073e5 !important;
}

/* Portal doc count badges */
.o_portal_my_home .badge.bg-primary,
.o_portal_my_home .badge.rounded-pill.bg-primary {
    background-color: #0080ff !important;
    color: #ffffff !important;
}

/* ---- Portal Sidebar ---- */
.o_portal_sidebar .nav-link.active,
.o_portal_sidebar .nav-link:hover {
    color: #0080ff !important;
}

.o_portal_sidebar .nav-link.active {
    border-color: #0080ff !important;
}

/* ---- Portal Submenu / Breadcrumb / Navbar Bar ---- */
.o_portal_submenu,
.o_portal_submenu .breadcrumb,
.o_portal .o_portal_submenu,
.o_portal_navbar,
.o_portal .o_portal_navbar {
    background-color: #ffffff !important;
    border-bottom: 1px solid #dee2e6 !important;
}

.o_portal_submenu .breadcrumb-item,
.o_portal_submenu .breadcrumb-item a,
.o_portal_submenu .breadcrumb-item.active,
.o_portal_navbar .navbar-brand,
.o_portal_navbar .nav-link {
    color: #212529 !important;
}

.o_portal .breadcrumb-item a {
    color: #0080ff !important;
}

.o_portal .breadcrumb-item a:hover {
    color: #0073e5 !important;
}

/* ---- General Links (Frontend) ---- */
#wrapwrap a:not(.btn):not(.nav-link):not(.dropdown-item),
.o_portal a:not(.btn):not(.nav-link):not(.dropdown-item),
main a:not(.btn):not(.nav-link):not(.dropdown-item) {
    color: #0080ff !important;
}

#wrapwrap a:not(.btn):not(.nav-link):not(.dropdown-item):hover,
.o_portal a:not(.btn):not(.nav-link):not(.dropdown-item):hover,
main a:not(.btn):not(.nav-link):not(.dropdown-item):hover {
    color: #0073e5 !important;
}

/* ---- Buttons (Frontend) ---- */
#wrapwrap .btn-primary,
.o_portal .btn-primary,
main .btn-primary {
    background-color: #0080ff !important;
    border-color: #0080ff !important;
    color: #ffffff !important;
}

#wrapwrap .btn-primary:hover,
.o_portal .btn-primary:hover,
main .btn-primary:hover {
    background-color: #0073e5 !important;
    border-color: #0073e5 !important;
    color: #ffffff !important;
}

#wrapwrap .btn-primary:active,
#wrapwrap .btn-primary:focus,
.o_portal .btn-primary:active,
.o_portal .btn-primary:focus,
main .btn-primary:active,
main .btn-primary:focus {
    background-color: #0066cc !important;
    border-color: #0066cc !important;
    color: #ffffff !important;
}

#wrapwrap .btn-outline-primary,
.o_portal .btn-outline-primary,
main .btn-outline-primary {
    color: #0080ff !important;
    border-color: #0080ff !important;
}

#wrapwrap .btn-outline-primary:hover,
.o_portal .btn-outline-primary:hover,
main .btn-outline-primary:hover {
    background-color: #0080ff !important;
    border-color: #0080ff !important;
    color: #ffffff !important;
}

/* ---- Form Inputs Focus (Frontend) ---- */
#wrapwrap .form-control:focus,
#wrapwrap .form-select:focus,
.o_portal .form-control:focus,
.o_portal .form-select:focus,
main .form-control:focus,
main .form-select:focus {
    border-color: #0080ff !important;
    box-shadow: 0 0 0 0.25rem #0080ff40 !important;
}

/* ---- Pagination (Frontend) ---- */
#wrapwrap .page-item.active .page-link,
.o_portal .page-item.active .page-link {
    background-color: #0080ff !important;
    border-color: #0080ff !important;
    color: #ffffff !important;
}

#wrapwrap .page-link,
.o_portal .page-link {
    color: #0080ff !important;
}

#wrapwrap .page-link:hover,
.o_portal .page-link:hover {
    color: #0073e5 !important;
}

/* ---- Badges (Frontend) ---- */
.o_portal .badge.text-bg-primary,
.o_portal .badge.bg-primary,
#wrapwrap .badge.text-bg-primary,
#wrapwrap .badge.bg-primary {
    background-color: #0080ff !important;
    color: #ffffff !important;
}

/* Portal status badges (Draft, Sent, Confirmed, etc.) */
.o_portal .badge.bg-info {
    background-color: #0080ff !important;
    color: #ffffff !important;
}

/* ---- Progress Bars (Frontend) ---- */
#wrapwrap .progress-bar,
.o_portal .progress-bar {
    background-color: #0080ff !important;
}

/* ---- Tables (Portal) ---- */
.o_portal .table a,
.o_portal table a {
    color: #0080ff !important;
}

.o_portal .table a:hover,
.o_portal table a:hover {
    color: #0073e5 !important;
}

/* ---- Login / Signup / Password Reset Pages ---- */
.oe_login_form .btn-primary,
.oe_signup_form .btn-primary,
.oe_reset_password_form .btn-primary,
form[action="/web/login"] .btn-primary,
form[action="/web/signup"] .btn-primary,
form[action="/web/reset_password"] .btn-primary {
    background-color: #0080ff !important;
    border-color: #0080ff !important;
    color: #ffffff !important;
}

.oe_login_form .btn-primary:hover,
.oe_signup_form .btn-primary:hover,
.oe_reset_password_form .btn-primary:hover,
form[action="/web/login"] .btn-primary:hover,
form[action="/web/signup"] .btn-primary:hover,
form[action="/web/reset_password"] .btn-primary:hover {
    background-color: #0073e5 !important;
    border-color: #0073e5 !important;
    color: #ffffff !important;
}

/* Login form input focus */
.oe_login_form .form-control:focus,
.oe_signup_form .form-control:focus,
.oe_reset_password_form .form-control:focus {
    border-color: #0080ff !important;
    box-shadow: 0 0 0 0.25rem #0080ff40 !important;
}

/* Login page links */
.oe_login_form a,
.oe_signup_form a,
.oe_reset_password_form a {
    color: #0080ff !important;
}

.oe_login_form a:hover,
.oe_signup_form a:hover,
.oe_reset_password_form a:hover {
    color: #0073e5 !important;
}

/* Login page btn-link buttons (Choose user / Use another user) */
.oe_login_form .btn-link,
.oe_login_form .o_user_switch_btn,
.o_user_switch .btn-link {
    color: #0080ff !important;
}

.oe_login_form .btn-link:hover,
.oe_login_form .o_user_switch_btn:hover,
.o_user_switch .btn-link:hover {
    color: #0073e5 !important;
}

/* User switch list items */
.o_user_switch .list-group-item:hover,
.o_user_switch .list-group-item:focus {
    background-color: #d8ebff !important;
    border-color: #0080ff !important;
}

.o_user_switch .list-group-item:active,
.o_user_switch .list-group-item.active {
    background-color: #0080ff !important;
    border-color: #0080ff !important;
    color: #ffffff !important;
}

/* ---- Footer ---- */
#wrapwrap footer a:hover,
footer a:hover {
    color: #0080ff !important;
}

/* ---- Checkboxes & Radio Buttons (Frontend) ---- */
#wrapwrap .form-check-input:checked,
.o_portal .form-check-input:checked {
    background-color: #0080ff !important;
    border-color: #0080ff !important;
}

#wrapwrap .form-check-input:focus,
.o_portal .form-check-input:focus {
    border-color: #0080ff !important;
    box-shadow: 0 0 0 0.25rem #0080ff40 !important;
}

/* ---- Portal Signature ---- */
.o_portal_signature .btn-primary {
    background-color: #0080ff !important;
    border-color: #0080ff !important;
    color: #ffffff !important;
}

/* ---- Portal Chatter ---- */
.o_portal_chatter .btn-primary {
    background-color: #0080ff !important;
    border-color: #0080ff !important;
    color: #ffffff !important;
}

.o_portal_chatter a {
    color: #0080ff !important;
}

.o_portal_chatter a:hover {
    color: #0073e5 !important;
}

/* ---- eCommerce (if Website module installed) ---- */
.oe_website_sale .btn-primary {
    background-color: #0080ff !important;
    border-color: #0080ff !important;
    color: #ffffff !important;
}

.oe_website_sale .btn-primary:hover {
    background-color: #0073e5 !important;
    border-color: #0073e5 !important;
}

/* ---- Mobile Responsive: Portal pages ---- */
@media (max-width: 991.98px) {
    header .navbar-collapse {
        background-color: #ffffff !important;
    }

    header .navbar-collapse .nav-link {
        color: #212529 !important;
        border-bottom: 1px solid #dee2e6;
    }

    header .navbar-collapse .nav-link:hover {
        background-color: #d8ebff !important;
        color: #0080ff !important;
    }

    /* Mobile dropdown in portal navbar */
    header .navbar-collapse .dropdown-menu {
        background-color: #f8f9fa !important;
    }

    header .navbar-collapse .dropdown-menu .dropdown-item {
        color: #212529 !important;
    }

    header .navbar-collapse .dropdown-menu .dropdown-item:hover {
        background-color: #d8ebff !important;
        color: #0080ff !important;
    }
}

/* ============================================================================
   BUG FIX 45: Backend Burger Menu Sidebar — Keep Odoo Native Dark Text
   When internal users access backend via the website URL, the frontend CSS
   overrides --custom-primary which bleeds into the burger menu sidebar.
   Force burger menu links back to dark text.
   ============================================================================ */

.o_burger_menu a:not(.btn),
.o_burger_menu_content a:not(.btn),
.o_burger_menu_app a:not(.btn) {
    color: #212529 !important;
}

.o_burger_menu a:not(.btn):hover,
.o_burger_menu_content a:not(.btn):hover,
.o_burger_menu_app a:not(.btn):hover {
    color: #000000 !important;
}

.o_burger_menu_content .o_burger_menu_section a {
    color: #212529 !important;
}

.o_burger_menu_content .o_burger_menu_section a:hover {
    color: #000000 !important;
}