/* *****************************************************

    ** Custom Stylesheet **

    Any custom styling you want to apply should be
    defined here.

***************************************************** */

/* Dudumizi.com Brand Colors - Primary: #de3a32 */

/* MODERN LAYOUT ENHANCEMENTS */

/* Modern Body and Typography */
body {
    font-family: 'Segoe UI', 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', Arial, sans-serif !important;
    font-size: 15px !important;
    line-height: 1.6 !important;
    color: #2c3e50 !important;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%) !important;
}

/* Modern Headings */
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    font-weight: 600 !important;
    color: #2c3e50 !important;
    margin-bottom: 1.2em !important;
    letter-spacing: -0.02em !important;
}

h1, .h1 { font-size: 2.5rem !important; }
h2, .h2 { font-size: 2rem !important; }
h3, .h3 { font-size: 1.75rem !important; }

/* Modern Cards and Panels */
.panel, .card {
    border: none !important;
    border-radius: 16px !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08) !important;
    margin-bottom: 2rem !important;
    overflow: hidden !important;
    transition: all 0.3s ease !important;
    background: #fff !important;
}

.panel:hover, .card:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12) !important;
}

.panel-heading, .card-header {
    background: linear-gradient(135deg, #de3a32 0%, #c63529 100%) !important;
    color: #fff !important;
    padding: 1.5rem 2rem !important;
    border: none !important;
    font-weight: 600 !important;
    font-size: 1.1rem !important;
}

.panel-body, .card-body {
    padding: 2rem !important;
    background: #fff !important;
}

/* Modern Buttons */
.btn {
    border-radius: 12px !important;
    padding: 12px 24px !important;
    font-weight: 500 !important;
    font-size: 14px !important;
    border: none !important;
    transition: all 0.3s ease !important;
    text-transform: none !important;
    letter-spacing: 0.025em !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
}

.btn:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15) !important;
}

.btn-sm {
    padding: 8px 16px !important;
    font-size: 13px !important;
    border-radius: 8px !important;
}

.btn-lg {
    padding: 16px 32px !important;
    font-size: 16px !important;
    border-radius: 16px !important;
}

/* Modern Form Elements */
.form-control {
    border: 2px solid #e9ecef !important;
    border-radius: 12px !important;
    padding: 14px 18px !important;
    font-size: 15px !important;
    transition: all 0.3s ease !important;
    background: #fff !important;
    box-shadow: none !important;
}

.form-control:focus {
    border-color: #de3a32 !important;
    box-shadow: 0 0 0 4px rgba(222, 58, 50, 0.1) !important;
    transform: none !important;
}

.form-group {
    margin-bottom: 1.5rem !important;
}

.form-group label {
    font-weight: 500 !important;
    color: #495057 !important;
    margin-bottom: 0.5rem !important;
    font-size: 14px !important;
}

/* Modern Tables */
.table {
    border: none !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06) !important;
    background: #fff !important;
}

.table thead th {
    background: linear-gradient(135deg, #de3a32 0%, #c63529 100%) !important;
    color: #fff !important;
    border: none !important;
    padding: 1rem 1.5rem !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    font-size: 12px !important;
    letter-spacing: 0.1em !important;
}

.table tbody tr {
    border: none !important;
    transition: all 0.2s ease !important;
}

.table tbody tr:hover {
    background: rgba(222, 58, 50, 0.04) !important;
    transform: scale(1.001) !important;
}

.table tbody td {
    border: none !important;
    padding: 1rem 1.5rem !important;
    border-bottom: 1px solid #f8f9fa !important;
    vertical-align: middle !important;
}

/* Modern Alerts */
.alert {
    border: none !important;
    border-radius: 12px !important;
    padding: 1.5rem 2rem !important;
    margin-bottom: 1.5rem !important;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08) !important;
}

.alert-success {
    background: linear-gradient(135deg, #d4edda 0%, #c3e6cb 100%) !important;
    color: #155724 !important;
    border-left: 4px solid #28a745 !important;
}

.alert-info {
    background: linear-gradient(135deg, #d1ecf1 0%, #bee5eb 100%) !important;
    color: #0c5460 !important;
    border-left: 4px solid #de3a32 !important;
}

.alert-warning {
    background: linear-gradient(135deg, #fff3cd 0%, #ffeaa7 100%) !important;
    color: #856404 !important;
    border-left: 4px solid #ffc107 !important;
}

.alert-danger {
    background: linear-gradient(135deg, #de3a32 0%, #c63529 100%) !important;
    color: #fff !important;
    border-left: 4px solid #dc3545 !important;
}

/* CRITICAL CONTRAST FIXES - Ensure Text Visibility */

/* Red buttons MUST have white text */
.btn-danger, .btn-primary, .btn-success {
    background: linear-gradient(135deg, #de3a32 0%, #c63529 100%) !important;
    border-color: #de3a32 !important;
    color: #fff !important;
}

.btn-danger:hover, .btn-primary:hover, .btn-success:hover,
.btn-danger:focus, .btn-primary:focus, .btn-success:focus {
    background: linear-gradient(135deg, #b82c25 0%, #a02420 100%) !important;
    border-color: #b82c25 !important;
    color: #fff !important;
}

/* Red backgrounds need white text */
.bg-danger, .alert-danger, .panel-danger > .panel-heading,
.label-danger, .badge-danger {
    background: linear-gradient(135deg, #de3a32 0%, #c63529 100%) !important;
    color: #fff !important;
}

/* Links on red backgrounds */
.btn-danger a, .alert-danger a, .panel-danger a {
    color: #fff !important;
}

.btn-danger a:hover, .alert-danger a:hover, .panel-danger a:hover {
    color: #f0f0f0 !important;
}

/* Status indicators */
.text-danger, .has-error .control-label, .has-error .help-block {
    color: #de3a32 !important;
}

/* Ensure contrast for notification badges */
.badge {
    background: linear-gradient(135deg, #de3a32 0%, #c63529 100%) !important;
    color: #fff !important;
    border-radius: 20px !important;
    padding: 4px 12px !important;
    font-weight: 500 !important;
    font-size: 12px !important;
}

/* Header - Keep Upper Part Original (White Background) */
section#header {
    background: #fff !important;
    color: #333 !important;
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.08) !important;
    border-radius: 16px 16px 0 0 !important;
    padding: 2rem 0 1.5rem 0 !important;
}

section#header .logo-text {
    color: #333 !important;
    font-weight: 700 !important;
}

section#header a {
    color: #de3a32 !important;
    font-weight: 500 !important;
}

section#header a:hover, section#header a:focus {
    color: #b82c25 !important;
}

/* Navigation Menu Bar ONLY - Lower Part (Red Background) */
.navbar-main, .navbar-inverse, section#main-menu {
    background: linear-gradient(135deg, #de3a32 0%, #c63529 100%) !important;
    border: none !important;
    box-shadow: 0 4px 20px rgba(222, 58, 50, 0.2) !important;
}

/* Navigation Text - White on Red */
.navbar-main .navbar-nav > li > a {
    color: #fff !important;
    font-weight: 500 !important;
    padding: 15px 20px !important;
    transition: all 0.3s ease !important;
}

.navbar-main .navbar-nav > li > a:hover,
.navbar-main .navbar-nav > li > a:focus {
    color: #fff !important;
    background: linear-gradient(135deg, #b82c25 0%, #a02420 100%) !important;
    transform: translateY(-1px) !important;
}

/* Navigation Brand/Logo on Menu Bar */
.navbar-brand, .navbar-brand:hover, .navbar-brand:focus {
    color: #fff !important;
    font-weight: 600 !important;
}

.navbar-inverse .navbar-brand, 
.navbar-inverse .navbar-brand:hover, 
.navbar-inverse .navbar-brand:focus {
    color: #fff !important;
}

/* Account Menu on Navigation */
.navbar-main li.account {
    background: linear-gradient(135deg, #b82c25 0%, #a02420 100%) !important;
    border-radius: 8px !important;
    margin: 5px !important;
}

/* Header search button - Keep brand color */
section#header .search .btn {
    background: linear-gradient(135deg, #de3a32 0%, #c63529 100%) !important;
    border-color: #de3a32 !important;
    color: #fff !important;
}

section#header .search .btn:hover {
    background: linear-gradient(135deg, #b82c25 0%, #a02420 100%) !important;
    border-color: #b82c25 !important;
}

/* Links - Ensure proper contrast */
.link-primary, a {
    color: #de3a32 !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
}

a:hover, a:focus {
    color: #b82c25 !important;
    text-decoration: none !important;
}

/* Footer - White text on red */
section#footer {
    background: linear-gradient(135deg, #de3a32 0%, #c63529 100%) !important;
    border-top: none !important;
    color: #fff !important;
    border-radius: 0 0 16px 16px !important;
    padding: 2rem 1rem !important;
    box-shadow: 0 -2px 20px rgba(0, 0, 0, 0.08) !important;
}

section#footer a {
    color: #fff !important;
    font-weight: 500 !important;
}

section#footer a:hover {
    color: #f0f0f0 !important;
}

/* Modern Main Content Area */
section#main-body {
    background: transparent !important;
    padding: 3rem 0 !important;
}

.main-content {
    background: transparent !important;
    min-height: 400px !important;
}

/* Progress bars and highlights */
.progress {
    border-radius: 20px !important;
    height: 8px !important;
    background: #e9ecef !important;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1) !important;
}

.progress-bar, .progress-bar-success, .progress-bar-info {
    background: linear-gradient(90deg, #de3a32 0%, #c63529 100%) !important;
    border-radius: 20px !important;
    transition: all 0.3s ease !important;
}

/* Active states and highlights */
.nav-pills > .active > a,
.nav-pills > .active > a:hover,
.nav-pills > .active > a:focus {
    background: linear-gradient(135deg, #de3a32 0%, #c63529 100%) !important;
    color: #fff !important;
    border-radius: 12px !important;
}

/* Pagination active */
.pagination > .active > a,
.pagination > .active > span {
    background: linear-gradient(135deg, #de3a32 0%, #c63529 100%) !important;
    border-color: #de3a32 !important;
    color: #fff !important;
    border-radius: 8px !important;
}

.pagination > li > a,
.pagination > li > span {
    border-radius: 8px !important;
    margin: 0 2px !important;
    border: 2px solid #e9ecef !important;
    transition: all 0.3s ease !important;
}

.pagination > li > a:hover {
    background: #de3a32 !important;
    color: #fff !important;
    border-color: #de3a32 !important;
}

/* Tables with red elements */
.table > tbody > tr.danger > td,
.table > tbody > tr.danger > th,
.table > tbody > tr > td.danger,
.table > tbody > tr > th.danger {
    background: linear-gradient(135deg, #de3a32 0%, #c63529 100%) !important;
    color: #fff !important;
}

/* Dropdown menus */
.dropdown-menu {
    border: none !important;
    border-radius: 12px !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15) !important;
    padding: 0.5rem 0 !important;
}

.dropdown-menu > li > a {
    padding: 12px 20px !important;
    transition: all 0.2s ease !important;
}

.dropdown-menu > .active > a,
.dropdown-menu > .active > a:hover,
.dropdown-menu > .active > a:focus {
    background: linear-gradient(135deg, #de3a32 0%, #c63529 100%) !important;
    color: #fff !important;
}

/* Modern List Groups */
.list-group {
    border-radius: 12px !important;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08) !important;
}

.list-group-item {
    border: none !important;
    border-bottom: 1px solid #f8f9fa !important;
    padding: 1rem 1.5rem !important;
    transition: all 0.2s ease !important;
}

.list-group-item:hover {
    background: rgba(222, 58, 50, 0.04) !important;
}

.list-group-item:first-child {
    border-radius: 12px 12px 0 0 !important;
}

.list-group-item:last-child {
    border-radius: 0 0 12px 12px !important;
    border-bottom: none !important;
}

/* Modern Input Groups */
.input-group .form-control {
    border-radius: 12px 0 0 12px !important;
}

.input-group-addon {
    border: 2px solid #e9ecef !important;
    border-radius: 0 12px 12px 0 !important;
    background: #f8f9fa !important;
    padding: 14px 18px !important;
}