/**
 * UI Universal Styling
 * Generic UI/UX improvements that benefit ALL header concepts
 * Loaded after navigation-universal.css, before concept-specific CSS
 * Created: 2025-10-21
 */

/* ==========================================================================
   SEARCH FORM - Professional Styling
   ========================================================================== */

/* Search input - better sizing and spacing */
input[type="search"],
.form-control.search-input {
    min-height: 44px; /* Touch-friendly */
    padding: 0.625rem 1rem !important;
    border-radius: 0.375rem;
    transition: all 0.2s ease;
}

input[type="search"]:focus,
.form-control.search-input:focus {
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
}

/* Search button - professional styling (theme-neutral) */
.btn.search-button,
button[type="submit"]:has(+ input[type="search"]),
form:has(input[type="search"]) .btn,
input[type="search"] + .btn {
    min-height: 44px;
    padding: 0.625rem 1.5rem !important;
    font-weight: 600;
    border-radius: 0.375rem;
    transition: all 0.2s ease;
}

/* Dark mode search button */
[data-bs-theme="dark"] .btn.search-button,
[data-bs-theme="dark"] button[type="submit"],
[data-bs-theme="dark"] form .btn {
    background-color: #495057 !important;
    border-color: #495057 !important;
    color: #ffffff !important;
}

/* Dark mode search button - continuous outline with input */
[data-bs-theme="dark"] .input-group .btn {
    border-top: 1px solid #ffffff !important;
    border-right: 1px solid #ffffff !important;
    border-bottom: 1px solid #ffffff !important;
    border-left: none !important;
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
}

/* Ensure input field has no right border and rounded corners are removed on right side */
[data-bs-theme="dark"] .input-group .form-control {
    border-right: none !important;
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

[data-bs-theme="dark"] .btn.search-button:hover,
[data-bs-theme="dark"] button[type="submit"]:hover,
[data-bs-theme="dark"] form .btn:hover {
    background-color: #5a6268 !important;
    border-color: #5a6268 !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
}

/* Light mode search button */
[data-bs-theme="light"] .btn.search-button,
[data-bs-theme="light"] button[type="submit"],
[data-bs-theme="light"] form .btn {
    background-color: #6c757d !important;
    border-color: #6c757d !important;
    color: #ffffff !important;
}

[data-bs-theme="light"] .btn.search-button:hover,
[data-bs-theme="light"] button[type="submit"]:hover,
[data-bs-theme="light"] form .btn:hover {
    background-color: #5a6268 !important;
    border-color: #5a6268 !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
}

/* ==========================================================================
   SIDEBAR - Better Typography and Spacing
   ========================================================================== */

/* Main Menu heading - professional styling */
.menu-title,
h5.menu-title,
.sidebar h5,
aside h5 {
    font-size: 1.25rem !important;
    font-weight: 700 !important;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 1rem !important;
    padding-bottom: 0.5rem;
}

[data-bs-theme="dark"] .menu-title,
[data-bs-theme="dark"] h5.menu-title,
[data-bs-theme="dark"] .sidebar h5,
[data-bs-theme="dark"] aside h5 {
    color: #e9ecef !important;
    border-bottom: 2px solid rgba(255, 255, 255, 0.1);
}

[data-bs-theme="light"] .menu-title,
[data-bs-theme="light"] h5.menu-title,
[data-bs-theme="light"] .sidebar h5,
[data-bs-theme="light"] aside h5 {
    color: #495057 !important;
    border-bottom: 2px solid rgba(0, 0, 0, 0.1);
}

/* Sidebar menu items - slightly more vertical padding */
.list-group-item {
    padding: 0.875rem 1.25rem !important;
    transition: all 0.2s ease;
}

/* ==========================================================================
   CARDS - Enhanced Styling
   ========================================================================== */

/* Card hover effects - all themes */
.card {
    transition: all 0.3s ease;
    border-radius: 0.5rem;
}

/* No shifty hover effect - keep cards stable */

/* Card titles - better spacing */
.card-header {
    padding: 1rem 1.25rem !important;
    border-radius: 0.5rem 0.5rem 0 0 !important;
}

.card-body {
    padding: 1.25rem !important;
}

/* ==========================================================================
   BUTTONS - Consistent Sizing and Spacing
   ========================================================================== */

/* All buttons - comfortable sizing */
.btn {
    min-height: 44px;
    padding: 0.625rem 1.5rem !important;
    border-radius: 0.375rem;
    font-weight: 600;
    transition: all 0.2s ease;
}

.btn:hover {
    transform: translateY(-2px);
}

.btn-lg {
    min-height: 52px;
    padding: 0.875rem 2rem !important;
    font-size: 1.125rem !important;
}

.btn-sm {
    min-height: 36px;
    padding: 0.5rem 1rem !important;
    font-size: 0.9375rem !important;
}

/* ==========================================================================
   FORMS - Professional Polish
   ========================================================================== */

/* Form controls - better sizing */
.form-control,
.form-select {
    min-height: 44px;
    padding: 0.625rem 1rem !important;
    border-radius: 0.375rem;
    transition: all 0.2s ease;
}

.form-control:focus,
.form-select:focus {
    transform: translateY(-1px);
}

/* Form labels - better readability */
.form-label {
    font-weight: 600;
    margin-bottom: 0.5rem;
    font-size: 1rem;
}

/* ==========================================================================
   TABLES - Better Spacing
   ========================================================================== */

/* Table cells - more breathing room */
.table td,
.table th {
    padding: 0.875rem 1rem !important;
}

.table thead th {
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.875rem;
    letter-spacing: 0.5px;
}

/* ==========================================================================
   BADGES - Professional Sizing
   ========================================================================== */

.badge {
    padding: 0.5rem 0.875rem !important;
    font-size: 0.875rem !important;
    font-weight: 600 !important;
    border-radius: 0.375rem;
}

/* ==========================================================================
   ALERTS - Better Visual Hierarchy
   ========================================================================== */

.alert {
    padding: 1rem 1.25rem !important;
    border-radius: 0.5rem;
    border-width: 2px;
}

.alert-heading {
    font-weight: 700;
    margin-bottom: 0.5rem;
}

/* ==========================================================================
   BREADCRUMBS - Enhanced Styling
   ========================================================================== */

/* Remove space between header and breadcrumbs */
.contentContainer {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* Breadcrumb container - clean and minimal with spacing below */
nav[aria-label="breadcrumb"] {
    background: transparent;
    margin-top: -6px;
    margin-left: -5px;
    margin-bottom: 1.5rem;
    padding-top: 0.5rem;
}

/* Breadcrumb styling - modern and clean */
.breadcrumb {
    background: transparent;
    padding: 0.5rem 0 !important;
    font-size: 0.9375rem;
    margin-bottom: 0;
}

/* Breadcrumb items */
.breadcrumb-item {
    font-weight: 500;
}

/* Breadcrumb links - improved hover states */
.breadcrumb-item a {
    color: var(--bs-link-color);
    text-decoration: none;
    transition: all 0.2s ease;
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
}

.breadcrumb-item a:hover {
    color: var(--bs-link-hover-color);
    background: rgba(0, 0, 0, 0.05);
}

[data-bs-theme="dark"] .breadcrumb-item a:hover {
    background: rgba(255, 255, 255, 0.08);
}

/* Home icon in breadcrumbs - slightly larger */
.breadcrumb-item i.fa-home {
    font-size: 1rem;
    margin-right: 0.25rem;
}

/* Active breadcrumb - subtle emphasis */
.breadcrumb-item.active {
    font-weight: 600;
    color: var(--bs-body-color);
}

/* Breadcrumb divider - better visual separator */
.breadcrumb-item + .breadcrumb-item::before {
    color: var(--bs-secondary-color);
    font-weight: 400;
}

/* ==========================================================================
   RESPONSIVE - Mobile Optimizations
   ========================================================================== */

@media (max-width: 767.98px) {
    /* Larger touch targets on mobile */
    .btn {
        min-height: 48px;
        padding: 0.75rem 1.5rem !important;
    }

    .form-control,
    .form-select {
        min-height: 48px;
        padding: 0.75rem 1rem !important;
        font-size: 1rem; /* Prevent zoom on iOS */
    }

    /* Search form on mobile */
    input[type="search"] {
        min-height: 48px;
        font-size: 1rem;
    }
}