/**
 * Theme CSS for themeSalzburgWedding
 * Contains color overrides for header and login page
 * Customize colors here to change the look of the Salzburg Wedding Company theme
 */

/* ========================================
   HEADER COLORS
   ======================================== */

/* Main header background */
.page-header.navbar {
    background-color: #ffffff !important; /* White background */
    border-bottom: 5px solid #95217e !important; /* Bold purple bottom border */
    height: 90px !important;
}

/* Logo container */
.page-header .page-logo {
    background-color: inherit !important;
}


/* Top navigation area */
.page-header .top-menu {
    background-color: inherit !important;
}

/* Navigation link colors */
.page-header .navbar-nav > li > a {
    color: #4a4a4a !important; /* Dark gray for better contrast on white */
}

.page-header .navbar-nav > li > a:hover {
    color: #95217e !important; /* Purple on hover */
}

/* Dropdown toggle colors */
.page-header .top-menu .navbar-nav > li.dropdown .dropdown-toggle {
    color: #4a4a4a !important; /* Dark gray for better contrast on white */
}

.page-header .top-menu .navbar-nav > li.dropdown .dropdown-toggle:hover {
    color: #95217e !important; /* Purple on hover */
}

/* Search box - hidden in this theme */
.page-header .search-form {
    display: none !important;
}

/* Notification icons - hidden in this theme */
.page-header .top-menu .navbar-nav > li.dropdown-extended {
    display: none !important;
}

.page-header .search-form .input-group {
    background-color: #ffffff !important; /* White background */
    border: 2px solid #e8e8ea !important; /* Light gray border */
    border-radius: 25px !important; /* Rounded corners to match the image */
    overflow: hidden !important; /* Hide any overflow */
}

.page-header .search-form .form-control {
    background-color: #ffffff !important; /* White background */
    border: none !important; /* Remove inner border */
    color: #4a4a4a !important;
}

.page-header .search-form .form-control:focus {
    background-color: #ffffff !important;
    border: none !important;
    box-shadow: none !important;
}

.page-header .search-form .input-group:focus-within {
    border-color: #95217e !important; /* Purple border on focus */
}

.page-header .search-form .input-group-btn {
    border: none !important;
    background-color: transparent !important;
}

.page-header .search-form .input-group-btn .btn {
    background-color: #95217e !important; /* Purple button */
    border: none !important;
}

.page-header .search-form .btn.submit {
    background-color: #95217e !important; /* Purple button */
    color: #ffffff !important;
    border: none !important;
    border-radius: 0 !important; /* No border radius - container handles rounding */
    margin: 0 !important;
    padding: 8px 15px !important;
    height: 100% !important;
}

.page-header .search-form .btn.submit i {
    color: #ffffff !important;
}

.page-header .search-form .btn.submit:hover {
    background-color: #7a1a66 !important; /* Darker purple on hover */
}

.page-header .search-form .btn.submit:focus,
.page-header .search-form .btn.submit:active {
    background-color: #7a1a66 !important;
    box-shadow: none !important;
}

/* ========================================
   LOGIN PAGE COLORS
   ======================================== */

/* Login page background */
body.login {
    background-color: #faf8fb !important; /* Very light purple tint */
}

/* Logo container on login page */
.login .logo {
    text-align: center;
    margin: 60px auto 0;
    padding: 15px;
}

/* Login page logo image with transparent frame */
.login .logo img {
    padding: 30px;
}

/* Login content box (white form area) */
.login .content {
    background-color: #fff !important;
    border-radius: 10px;
    border: 4px solid #95217e !important; /* Purple frame matching logo */
    box-shadow: 0 4px 20px rgba(149, 33, 126, 0.15) !important; /* Subtle purple shadow */
}

/* Form title "Anmelden" */
.login .content h3 {
    color: #95217e !important; /* Purple to match logo */
    font-weight: 600 !important;
}

/* Login button */
.login .content .btn-success,
.btn-success {
    background-color: #95217e !important; /* Purple to match logo */
    border-color: #95217e !important;
    font-weight: 600 !important;
    padding: 12px 30px !important;
    transition: all 0.3s ease !important;
}

.login .content .btn-success:hover,
.btn-success:hover {
    background-color: #7a1a66 !important; /* Darker purple on hover */
    border-color: #7a1a66 !important;
    box-shadow: 0 4px 12px rgba(149, 33, 126, 0.3) !important;
}

/* Input fields */
.login .content .form-control {
    background-color: #f5f5f7 !important; /* Softer light gray */
    border: 2px solid #e8e8ea !important;
    color: #4a4a4a !important;
    padding: 12px 15px !important;
    transition: all 0.3s ease !important;
}

.login .content .form-control:focus {
    background-color: #ffffff !important;
    border-color: #95217e !important; /* Purple focus border */
    box-shadow: 0 0 0 3px rgba(149, 33, 126, 0.1) !important;
}

/* Passwort vergessen link */
.login .content .forget-password {
    color: #95217e !important; /* Purple to match theme */
}

.login .content .forget-password:hover {
    color: #7a1a66 !important; /* Darker purple on hover */
    text-decoration: underline !important;
}

/* Footer copyright text */
.login .copyright {
    color: #ffffff !important; /* White */
}

/* ========================================
   PORTLET & DROPDOWN COLORS
   ======================================== */

/* Portlet title background */
.portlet-title {
    background-color: #95217e !important; /* Purple to match logo */
    color: #ffffff !important;
}

.portlet > .portlet-title {
    background-color: #95217e !important;
}

/* Portlet box borders - override blue-chambray to purple */
.portlet.box.blue-chambray {
    border: 1px solid #95217e !important; /* Purple border */
    border-top: 0 !important;
}

.portlet.box.blue-chambray > .portlet-title {
    background-color: #95217e !important; /* Purple background */
    border-bottom: 1px solid #95217e !important;
}

.portlet.box.blue-chambray > .portlet-title > .caption {
    color: #ffffff !important;
}

.portlet.box.blue-chambray > .portlet-title > .caption .caption-subject,
.portlet.box.blue-chambray > .portlet-title > .caption .caption-subject.font-blue-madison,
.portlet.box.blue-chambray > .portlet-title .caption-subject {
    color: #ffffff !important;
}

/* Tab navigation in purple portlet header - white text */
.portlet.box.blue-chambray > .portlet-title .nav-tabs > li > a {
    color: #ffffff !important;
    background-color: transparent !important;
}

.portlet.box.blue-chambray > .portlet-title .nav-tabs > li > a:hover,
.portlet.box.blue-chambray > .portlet-title .nav-tabs > li > a:focus {
    color: #ffffff !important;
    background-color: rgba(255, 255, 255, 0.2) !important;
}

.portlet.box.blue-chambray > .portlet-title .nav-tabs > li.active > a,
.portlet.box.blue-chambray > .portlet-title .nav-tabs > li.active > a:hover,
.portlet.box.blue-chambray > .portlet-title .nav-tabs > li.active > a:focus {
    color: #95217e !important;
    background-color: #ffffff !important;
    border-bottom-color: #999999 !important;
}

/* Tab underline - grey instead of default cyan color */
.tabbable-line > .nav-tabs > li.active {
    border-bottom-color: #999999 !important;
}

.tabbable-line > .nav-tabs > li:hover,
.tabbable-line > .nav-tabs > li.open {
    border-bottom-color: #cccccc !important;
}

/* Bootstrap select dropdown (the "-Neu oder wählen-" button) */
.bootstrap-select .btn-default {
    background-color: #95217e !important;
    border-color: #95217e !important;
    color: #ffffff !important;
}

.bootstrap-select .btn-default:hover,
.bootstrap-select .btn-default:focus {
    background-color: #7a1a66 !important;
    border-color: #7a1a66 !important;
    color: #ffffff !important;
}

/* Blue buttons - override to use company purple */
.btn-blue {
    background-color: #95217e !important; /* Purple to match logo */
    border-color: #95217e !important;
    color: #ffffff !important;
}

.btn-blue:hover,
.btn-blue:focus,
.btn-blue:active,
.btn-blue.active {
    background-color: #7a1a66 !important; /* Darker purple on hover */
    border-color: #7a1a66 !important;
    color: #ffffff !important;
}

.btn-blue:disabled,
.btn-blue.disabled,
.btn-blue[disabled] {
    background-color: #c085b1 !important; /* Lighter purple when disabled */
    border-color: #c085b1 !important;
    opacity: 0.65 !important;
}

/* Blue-chambray buttons - override to use company purple */
.btn.blue-chambray {
    background-color: #95217e !important; /* Purple to match logo */
    border-color: #95217e !important;
    color: #ffffff !important;
}

.btn.blue-chambray:hover,
.btn.blue-chambray:focus,
.btn.blue-chambray.focus,
.btn.blue-chambray:active,
.btn.blue-chambray.active,
.open > .btn.blue-chambray.dropdown-toggle {
    background-color: #7a1a66 !important; /* Darker purple on hover */
    border-color: #7a1a66 !important;
    color: #ffffff !important;
}

.btn.blue-chambray:disabled,
.btn.blue-chambray.disabled,
.btn.blue-chambray[disabled] {
    background-color: #c085b1 !important; /* Lighter purple when disabled */
    border-color: #c085b1 !important;
    opacity: 0.65 !important;
}

/* All other blue button variations - override to use company purple */
.btn.blue,
button.blue,
input[type="submit"].blue,
.btn-primary,
.btn.btn-primary {
    background-color: #95217e !important; /* Purple to match logo */
    border-color: #95217e !important;
    color: #ffffff !important;
}

.btn.blue:hover,
.btn.blue:focus,
.btn.blue.focus,
.btn.blue:active,
.btn.blue.active,
button.blue:hover,
button.blue:focus,
button.blue:active,
input[type="submit"].blue:hover,
input[type="submit"].blue:focus,
input[type="submit"].blue:active,
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn.btn-primary:hover,
.btn.btn-primary:focus,
.btn.btn-primary:active,
.open > .btn.blue.dropdown-toggle {
    background-color: #7a1a66 !important; /* Darker purple on hover */
    border-color: #7a1a66 !important;
    color: #ffffff !important;
}

.btn.blue:disabled,
.btn.blue.disabled,
.btn.blue[disabled],
button.blue:disabled,
button.blue[disabled],
input[type="submit"].blue:disabled,
input[type="submit"].blue[disabled],
.btn-primary:disabled,
.btn-primary.disabled,
.btn-primary[disabled],
.btn.btn-primary:disabled,
.btn.btn-primary.disabled,
.btn.btn-primary[disabled] {
    background-color: #c085b1 !important; /* Lighter purple when disabled */
    border-color: #c085b1 !important;
    opacity: 0.65 !important;
}

/* Blue outlined buttons - keep outline style with purple color */
.btn.blue.btn-outline,
.btn.blue-outline,
.btn-primary.btn-outline {
    background-color: transparent !important;
    border-color: #95217e !important;
    color: #95217e !important;
}

.btn.blue.btn-outline:hover,
.btn.blue.btn-outline:focus,
.btn.blue.btn-outline:active,
.btn.blue-outline:hover,
.btn.blue-outline:focus,
.btn.blue-outline:active,
.btn-primary.btn-outline:hover,
.btn-primary.btn-outline:focus,
.btn-primary.btn-outline:active {
    background-color: #95217e !important;
    border-color: #95217e !important;
    color: #ffffff !important;
}

/* Submit buttons specifically */
input[type="submit"],
button[type="submit"] {
    background-color: #95217e !important; /* Purple to match logo */
    border-color: #95217e !important;
    color: #ffffff !important;
}

input[type="submit"]:hover,
input[type="submit"]:focus,
input[type="submit"]:active,
button[type="submit"]:hover,
button[type="submit"]:focus,
button[type="submit"]:active {
    background-color: #7a1a66 !important; /* Darker purple on hover */
    border-color: #7a1a66 !important;
    color: #ffffff !important;
}

/* ========================================
   PORTLET HEADER BUTTON OVERRIDES (must come after button color rules)
   ======================================== */

/* Action buttons in purple portlet header - white background with grey text */
.portlet.box.blue-chambray > .portlet-title > .actions .btn-default,
.portlet.box.blue-chambray > .portlet-title > .actions .btn-default.btn-outline,
.portlet.box.blue-chambray > .portlet-title > .actions .btn.btn-default,
.portlet.box.blue-chambray > .portlet-title > .actions .btn.btn-default.btn-outline,
.portlet.box.blue-chambray > .portlet-title > .actions .btn-default.dropdown-toggle,
.portlet.box.blue-chambray > .portlet-title > .actions button.btn-default,
.portlet.box.blue-chambray > .portlet-title > .actions a.btn-default,
.portlet.box.blue-chambray > .portlet-title > .actions .btn.btn-default.btn-circle {
    background-color: #ffffff !important;
    border-color: #ffffff !important;
    color: #666666 !important;
}

.portlet.box.blue-chambray > .portlet-title > .actions .btn-default:hover,
.portlet.box.blue-chambray > .portlet-title > .actions .btn-default:focus,
.portlet.box.blue-chambray > .portlet-title > .actions .btn-default.btn-outline:hover,
.portlet.box.blue-chambray > .portlet-title > .actions .btn-default.btn-outline:focus,
.portlet.box.blue-chambray > .portlet-title > .actions .btn.btn-default:hover,
.portlet.box.blue-chambray > .portlet-title > .actions .btn.btn-default:focus,
.portlet.box.blue-chambray > .portlet-title > .actions .btn.btn-default.btn-outline:hover,
.portlet.box.blue-chambray > .portlet-title > .actions .btn.btn-default.btn-outline:focus,
.portlet.box.blue-chambray > .portlet-title > .actions .btn-default.dropdown-toggle:hover,
.portlet.box.blue-chambray > .portlet-title > .actions .btn-default.dropdown-toggle:focus,
.portlet.box.blue-chambray > .portlet-title > .actions button.btn-default:hover,
.portlet.box.blue-chambray > .portlet-title > .actions button.btn-default:focus,
.portlet.box.blue-chambray > .portlet-title > .actions a.btn-default:hover,
.portlet.box.blue-chambray > .portlet-title > .actions a.btn-default:focus,
.portlet.box.blue-chambray > .portlet-title > .actions .btn.btn-default.btn-circle:hover,
.portlet.box.blue-chambray > .portlet-title > .actions .btn.btn-default.btn-circle:focus {
    background-color: #f5f5f5 !important;
    border-color: #f5f5f5 !important;
    color: #4a4a4a !important;
}

/* ========================================
   MOBILE VIEW STYLES
   ======================================== */

/* Mobile view - ensure notification bar has white background */
@media (max-width: 991px) {
    /* Force white background on the entire header */
    .page-header,
    .page-header.navbar,
    .page-header.navbar-fixed-top {
        background-color: #ffffff !important;
        overflow: visible !important; /* Ensure border is visible */
        border-top: none !important; /* Remove top border */
    }

    /* Force white background on header inner container - NO border here */
    .page-header .page-header-inner {
        background-color: #ffffff !important;
        border-bottom: none !important; /* Remove duplicate border */
        border-top: none !important; /* Remove top border */
    }

    /* Force white background on the page-header-top (row with logo and notifications) */
    .page-header .page-header-top {
        background-color: #ffffff !important;
        border-bottom: none !important; /* Remove any conflicting borders */
        border-top: none !important; /* Remove top border */
    }

    /* Ensure logo area doesn't have borders */
    .page-header .page-logo {
        background-color: transparent !important;
        border-bottom: none !important;
        border-top: none !important;
    }

    /* Force white background on page-top container */
    .page-header .page-top {
        background-color: #ffffff !important;
        border-bottom: none !important; /* Remove any conflicting borders */
        border-top: none !important; /* Remove top border */
    }

    /* Second row with notifications - force white background */
    .page-header .top-menu {
        background-color: #ffffff !important;
    }

    /* Navigation bar containing the notification icons */
    .page-header .top-menu .navbar-nav {
        background-color: #ffffff !important;
    }

    /* Individual notification items */
    .page-header .top-menu .navbar-nav > li {
        background-color: #ffffff !important;
    }

    /* Individual notification item anchors */
    .page-header .top-menu .navbar-nav > li > a {
        background-color: transparent !important;
    }

    /* Ensure any dropdown areas also have white background */
    .page-header .top-menu .dropdown-menu {
        background-color: #ffffff !important;
    }

    /* Target any dark containers in the notification area */
    .page-header .page-header-top-shadow {
        background-color: #ffffff !important;
    }

    /* Navbar container */
    .page-header .navbar-collapse {
        background-color: #ffffff !important;
    }

    /* Any nav sections */
    .page-header nav {
        background-color: #ffffff !important;
    }

    /* Mobile menu toggle area */
    .page-header .menu-toggler {
        background-color: transparent !important;
    }
}

/* ========================================
   EXAMPLE CUSTOMIZATIONS
   ======================================== */

/*
 * To customize for a wedding theme, you might want to use colors like:
 *
 * Elegant Gold & White:
 * - Header: #D4AF37 (Gold)
 * - Login background: #F5F5F5 (Light gray)
 * - Buttons: #D4AF37 (Gold)
 *
 * Romantic Rose:
 * - Header: #C85A75 (Rose pink)
 * - Login background: #FFF5F7 (Light pink)
 * - Buttons: #C85A75 (Rose pink)
 *
 * Classic Ivory & Sage:
 * - Header: #8B9D83 (Sage green)
 * - Login background: #FFFFF0 (Ivory)
 * - Buttons: #8B9D83 (Sage green)
 */