/* static/css/mobile-visual-enhancements.css */
@import url('./colors.css');

/* Mobile Visual Design Enhancements */
@media (max-width: 576px) {

    /* Enhanced body styling with softer gradients */
    body.gradient-bg {
        background: linear-gradient(135deg,
                var(--bs-primary-25) 0%,
                var(--bs-secondary-50) 50%,
                var(--bs-primary-50) 100%);
        min-height: 100vh;
    }

    /* Enhanced header with better mobile spacing */
    .custom-header-border {
        border-bottom: 3px solid var(--bs-primary-400);
        background: rgba(255, 255, 255, 0.95);
        backdrop-filter: blur(10px);
        box-shadow: 0 2px 16px rgba(0, 0, 0, 0.08);
        /* Ensure header creates a higher stacking context above sticky mobile nav */
        position: relative;
        z-index: 1500;
    }

    .navbar-brand {
        margin-left: 8px !important;
    }

    /* Mobile-specific logo override */
    .navbar-brand img {
        content: url('/static/images/mobile/white_bg/android-chrome-192x192.png');
        height: 64px !important;
    }

    .byteflavor-blackopsone {
        font-size: 1.5rem;
        background: linear-gradient(135deg, var(--bs-primary-600), var(--bs-secondary-600));
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

    /* Clean feedback button styling */
    .btn-outline-primary {
        border: 1px solid var(--bs-primary-400);
        color: var(--bs-primary-600);
        background: rgba(255, 255, 255, 0.9);
        backdrop-filter: blur(8px);
        border-radius: 20px;
        padding: 8px 16px;
        font-size: 14px;
        font-weight: 500;
        transition: all 0.3s ease;
        display: flex;
        align-items: center;
        gap: 6px;
    }

    .btn-outline-primary:hover {
        background: var(--bs-primary-500);
        color: white;
        border-color: var(--bs-primary-500);
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(254, 98, 17, 0.3);
    }

    .btn-outline-primary i {
        font-size: 12px;
    }

    /* Ensure the mobile feedback icon button is a perfect circle */
    .feedback-icon-btn {
        width: 36px;
        height: 36px;
        padding: 0 !important;
        border-radius: 50% !important;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        -webkit-tap-highlight-color: transparent;
    }

    /* Enlarge the bug icon inside the circular feedback button */
    .feedback-icon-btn i {
        font-size: 18px !important;
        line-height: 1;
    }

    /* Prevent persistent thick outline after modal closes */
    .feedback-icon-btn:focus,
    .feedback-icon-btn:focus-visible,
    .feedback-icon-btn:active {
        outline: none !important;
        box-shadow: none !important;
    }

    /* Enhanced settings dropdown */
    .custom-settings-icon {
        color: var(--bs-gray-600);
        transition: all 0.3s ease;
        filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
    }

    .dropdown-toggle:hover .custom-settings-icon {
        color: var(--bs-primary-600);
        transform: rotate(90deg);
    }

    /* Mobile-only: outline the settings icon (white fill, orange stroke) */
    #dropdownUser1 .custom-settings-icon {
        color: var(--bs-white);
        /* icon fill */
        -webkit-text-stroke: 2px var(--bs-primary-500);
        /* orange outline */
        filter: none;
        /* keep outline crisp */
    }

    /* On hover: make the icon solid (no outline) */
    #dropdownUser1:hover .custom-settings-icon,
    #dropdownUser1:focus .custom-settings-icon {
        color: var(--bs-primary-600);
        -webkit-text-stroke: 0;
    }

    .dropdown-menu {
        border-radius: 12px;
        border: 1px solid var(--bs-gray-200);
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
        background: rgba(255, 255, 255, 0.98);
        backdrop-filter: blur(12px);
        padding: 8px 0;
    }

    /* Ensure settings dropdown appears above mobile navigation tabs */
    /* ROOT CAUSE FIX: Override overflow hidden that clips dropdown */
    .tab-container,
    .main-container {
        overflow: visible;
    }

    /* Fix dropdown positioning */
    .dropdown {
        position: relative;
        z-index: 1000;
    }

    .dropdown-menu {
        /* Keep the dropdown above any sticky/positioned elements below */
        z-index: 2000;
        position: fixed;
        right: 16px;
        left: auto;
        /* Open slightly below the cog */
        top: 112px;
        /* Below header */
        margin: 0;
        width: 200px;
        max-width: 90vw;
        display: none;
    }

    .dropdown.show .dropdown-menu {
        display: block;
    }

    /* Also allow hover to open when testing at mobile width on desktop */
    header .dropdown:hover>.dropdown-menu,
    .dropdown:hover>.dropdown-menu {
        display: block;
    }

    .dropdown-item {
        padding: 12px 20px;
        font-size: 14px;
        color: var(--bs-gray-700);
        transition: all 0.2s ease;
        border-radius: 0;
    }

    .dropdown-item:hover {
        background: var(--bs-primary-50);
        color: var(--bs-primary-700);
        transform: translateX(4px);
    }

    /* Ingredients checklist - right-size for mobile */
    .checklist>strong {
        font-size: 14px;
    }

    .recipe-checkbox.form-check {
        margin-top: 16px;
        padding-left: 32px;
    }

    .recipe-checkbox.form-check .form-check-input {
        width: 20px;
        height: 20px;
    }

    .recipe-checkbox.form-check .form-check-label {
        font-size: 14px;
        line-height: 1.4;
    }

    /* Enhanced main container spacing */
    .main-container {
        padding: 0 0 100px;
        gap: 20px;
    }

    /* Better whitespace and padding throughout */
    .tab-content-container {
        padding: 20px 16px;
        background: rgba(255, 255, 255, 0.8);
        backdrop-filter: blur(10px);
        border-radius: 16px;
        margin: 0 8px;
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
    }

    /* Enhanced loading states */
    .loading-indicator,
    .floating-loading-indicator {
        background: transparent;
        border-radius: 12px;
    }

    /* Improved status messages */
    .alert {
        border-radius: 12px;
        border: none;
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
        backdrop-filter: blur(8px);
        margin: 0 16px 16px;
    }

    .alert-info {
        background: rgba(6, 155, 241, 0.1);
        color: var(--bs-secondary-700);
        border-left: 4px solid var(--bs-secondary-500);
    }

    .alert-success {
        background: rgba(25, 135, 84, 0.1);
        color: #0f5132;
        border-left: 4px solid #198754;
    }

    .alert-warning {
        background: rgba(254, 98, 17, 0.1);
        color: var(--bs-primary-700);
        border-left: 4px solid var(--bs-primary-500);
    }

    .alert-danger {
        background: rgba(220, 53, 69, 0.1);
        color: #721c24;
        border-left: 4px solid #dc3545;
    }

    /* Enhanced form elements */
    .form-control,
    .form-select {
        border-radius: 12px;
        border: 1px solid var(--bs-gray-300);
        background: rgba(255, 255, 255, 0.9);
        backdrop-filter: blur(8px);
        transition: all 0.3s ease;
        font-size: 14px;
        padding: 12px 16px;
    }

    .form-control:focus,
    .form-select:focus {
        border-color: var(--bs-primary-400);
        box-shadow: 0 0 0 3px rgba(254, 98, 17, 0.1);
        background: white;
    }

    /* Enhanced buttons */
    .btn {
        border-radius: 12px;
        font-weight: 500;
        transition: all 0.3s ease;
        display: inline-flex;
        align-items: center;
        gap: 8px;
    }

    .btn-primary {
        background: linear-gradient(135deg, var(--bs-primary-500), var(--bs-primary-600));
        border: none;
        box-shadow: 0 4px 12px rgba(254, 98, 17, 0.3);
    }

    .btn-primary:hover {
        background: linear-gradient(135deg, var(--bs-primary-600), var(--bs-primary-700));
        transform: translateY(-2px);
        box-shadow: 0 6px 16px rgba(254, 98, 17, 0.4);
    }

    .btn-secondary {
        background: linear-gradient(135deg, var(--bs-secondary-500), var(--bs-secondary-600));
        border: none;
        box-shadow: 0 4px 12px rgba(6, 155, 241, 0.3);
    }

    .btn-secondary:hover {
        background: linear-gradient(135deg, var(--bs-secondary-600), var(--bs-secondary-700));
        transform: translateY(-2px);
        box-shadow: 0 6px 16px rgba(6, 155, 241, 0.4);
    }

    /* Enhanced links */
    a {
        color: var(--bs-primary-600);
        text-decoration: none;
        transition: all 0.2s ease;
    }

    a:hover {
        color: var(--bs-primary-700);
        text-decoration: underline;
        text-decoration-color: var(--bs-primary-400);
        text-underline-offset: 3px;
    }

    /* Modern card styling throughout */
    .card {
        border: none;
        border-radius: 16px;
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
        background: rgba(255, 255, 255, 0.95);
        backdrop-filter: blur(10px);
        transition: all 0.3s ease;
    }

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

    .card-header {
        background: rgba(255, 255, 255, 0.8);
        border-bottom: 1px solid var(--bs-gray-200);
        border-radius: 16px 16px 0 0 !important;
        padding: 16px 20px;
        font-weight: 600;
    }

    .card-body {
        padding: 20px;
    }

    /* ===================================================================
       FEEDBACK MODAL STYLING - CLEAN ARCHITECTURE
       =================================================================== */

    /* Fix broken Tastebite select styling for ALL devices */
    #feedbackModal select.form-select {
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e") !important;
        background-position: right 12px center !important;
        background-repeat: no-repeat !important;
        background-size: 16px 16px !important;
        padding-right: 40px !important;
        height: auto !important;
        min-height: auto !important;
    }

    /* Clean modal styling for ALL devices */
    #feedbackModal .modal-header {
        border-bottom: none !important;
        padding-left: 0 !important;
        padding-right: 1rem !important;
    }

    /* Ensure feedback modal appears above the header on mobile */
    #feedbackModal {
        z-index: 5000;
    }

    .modal-backdrop.show {
        z-index: 4990;
    }

    #feedbackModal .modal-title {
        margin-left: 0 !important;
        padding-left: 0 !important;
    }

    /* Fix close button - simple black X */
    #feedbackModal .btn-close,
    #feedbackModal .modal-header .btn-close,
    #feedbackModal button.btn-close {
        background: none !important;
        background-color: transparent !important;
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23666666'%3e%3cpath d='m.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e") !important;
        background-repeat: no-repeat !important;
        background-position: center !important;
        background-size: 16px 16px !important;
        opacity: 1 !important;
        width: 32px !important;
        height: 32px !important;
        padding: 0 !important;
        margin: 0 !important;
        border: none !important;
        box-shadow: none !important;
    }

    #feedbackModal .btn-close:hover,
    #feedbackModal .btn-close:focus,
    #feedbackModal .btn-close:active,
    #feedbackModal .modal-header .btn-close:hover,
    #feedbackModal .modal-header .btn-close:focus,
    #feedbackModal .modal-header .btn-close:active,
    #feedbackModal button.btn-close:hover,
    #feedbackModal button.btn-close:focus,
    #feedbackModal button.btn-close:active {
        background: none !important;
        background-color: transparent !important;
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23666666'%3e%3cpath d='m.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e") !important;
        background-repeat: no-repeat !important;
        background-position: center !important;
        background-size: 16px 16px !important;
        opacity: 0.7 !important;
        box-shadow: none !important;
        border: none !important;
    }

    #feedbackModal .modal-footer {
        border-top: none !important;
    }

    /* Force close button styling with maximum specificity */
    #feedbackModal .modal-footer .btn.btn-secondary,
    #feedbackModal .modal-footer button.btn-secondary,
    #feedbackModal button[data-bs-dismiss="modal"] {
        background-color: #e9ecef !important;
        background-image: none !important;
        color: #000000 !important;
        border-color: #e9ecef !important;
        border: 1px solid #e9ecef !important;
    }

    #feedbackModal .modal-footer .btn.btn-secondary:hover,
    #feedbackModal .modal-footer .btn.btn-secondary:focus,
    #feedbackModal .modal-footer .btn.btn-secondary:active,
    #feedbackModal .modal-footer button.btn-secondary:hover,
    #feedbackModal .modal-footer button.btn-secondary:focus,
    #feedbackModal .modal-footer button.btn-secondary:active,
    #feedbackModal button[data-bs-dismiss="modal"]:hover,
    #feedbackModal button[data-bs-dismiss="modal"]:focus,
    #feedbackModal button[data-bs-dismiss="modal"]:active {
        background-color: #dee2e6 !important;
        background-image: none !important;
        color: #000000 !important;
        border-color: #dee2e6 !important;
        border: 1px solid #dee2e6 !important;
    }

    /* ===================================================================
       MOBILE-ONLY ENHANCEMENTS (576px and below - matching existing breakpoint)
       =================================================================== */

    /* Note: Mobile modal enhancements would go in the main @media (max-width: 576px) block above */
    /* Currently using standard Bootstrap styling for consistency across all devices */



    /* Enhanced pagination */
    .pagination {
        gap: 4px;
    }

    .page-link {
        border-radius: 8px;
        border: 1px solid var(--bs-gray-300);
        color: var(--bs-gray-700);
        background: rgba(255, 255, 255, 0.9);
        backdrop-filter: blur(8px);
        transition: all 0.2s ease;
    }

    .page-link:hover {
        background: var(--bs-primary-50);
        border-color: var(--bs-primary-300);
        color: var(--bs-primary-700);
    }

    .page-item.active .page-link {
        background: var(--bs-primary-500);
        border-color: var(--bs-primary-500);
        box-shadow: 0 2px 8px rgba(254, 98, 17, 0.3);
    }

    /* Enhanced badges and tags */
    .badge {
        border-radius: 8px;
        font-weight: 500;
        padding: 6px 12px;
        font-size: 12px;
    }

    .badge-primary {
        background: linear-gradient(135deg, var(--bs-primary-500), var(--bs-primary-600));
        color: white;
    }

    .badge-secondary {
        background: linear-gradient(135deg, var(--bs-secondary-500), var(--bs-secondary-600));
        color: white;
    }

    /* Smooth transitions for all interactive elements */
    button,
    .btn,
    a,
    .form-control,
    .form-select,
    .card,
    .recipe-card,
    .mobile-nav-pill {
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    /* Enhanced focus states for accessibility */
    button:focus,
    .btn:focus,
    a:focus,
    .form-control:focus,
    .form-select:focus {
        outline: 2px solid var(--bs-primary-400);
        outline-offset: 2px;
    }

    /* Improved text contrast and readability */
    body {
        color: var(--bs-gray-800);
        line-height: 1.6;
    }

    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        color: var(--bs-gray-900);
        font-weight: 600;
        line-height: 1.3;
    }

    /* Enhanced scrollbar styling */
    ::-webkit-scrollbar {
        width: 6px;
        height: 6px;
    }

    ::-webkit-scrollbar-track {
        background: var(--bs-gray-100);
        border-radius: 3px;
    }

    ::-webkit-scrollbar-thumb {
        background: var(--bs-gray-400);
        border-radius: 3px;
        transition: background 0.2s ease;
    }

    ::-webkit-scrollbar-thumb:hover {
        background: var(--bs-gray-500);
    }
}

/* Dark theme support (future enhancement) */
@media (max-width: 576px) and (prefers-color-scheme: dark) {
    body.gradient-bg {
        background: linear-gradient(135deg,
                #1a1a1a 0%,
                #2d2d2d 50%,
                #1a1a1a 100%);
    }

    .card,
    .recipe-card,
    .tab-content-container {
        background: rgba(45, 45, 45, 0.95);
        color: #e5e5e5;
    }

    .custom-header-border {
        background: rgba(30, 30, 30, 0.95);
        border-bottom-color: var(--bs-primary-500);
    }
}

/* Reduce motion for users who prefer it */
@media (max-width: 576px) and (prefers-reduced-motion: reduce) {
    * {
        transition: none !important;
        animation: none !important;
    }

    .recipe-card:hover {
        transform: none !important;
    }

    .btn:hover {
        transform: none !important;
    }
}