/* Responsive Styles for ASK Interface */

/* Base responsive settings */
html {
    font-size: 16px; /* Base font size for rem units */
}

/* Large screens (desktops) */
@media (max-width: 1200px) {
    .container {
        width: 95%;
        padding: 20px;
    }
    
    .card-grid {
        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    }
    
    .designs-list {
        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    }
}

/* Medium screens (tablets) */
@media (max-width: 992px) {
    html {
        font-size: 15px;
    }
    
    .container {
        padding: 15px;
        height: auto;
    }
    
    .learning-types {
        flex-direction: column;
    }
    
    .learning-card {
        min-width: 100%;
        margin-bottom: 15px;
    }
    
    .popup-container {
        width: 90%;
        max-width: 90%;
    }
    
    .ask-anything-dialog {
        width: 90%;
        max-width: 90%;
    }
}

/* Small screens (mobile landscape) */
@media (max-width: 768px) {
    html {
        font-size: 14px;
    }
    
    body {
        padding: 10px;
    }
    
    .logo {
        font-size: 2.2rem;
    }

    .tagline {
        font-size: 1.1rem;
    }

    .post-login-options {
        width: 90%;
    }
    
    .container {
        width: 100%;
        padding: 15px;
        height: auto;
        box-shadow: none;
        border-radius: 0;
    }
    
    .language-selector {
        position: relative;
        top: 0;
        right: 0;
        margin-bottom: 15px;
        justify-content: center;
    }
    
    header {
        flex-direction: column;
    }
    
    .auth-buttons {
        margin-top: 10px;
        flex-wrap: wrap;
        justify-content: center;
    }
    
    .tab-btn {
        padding: 10px 15px;
        font-size: 0.9rem;
    }
    
    .tab-pane.active {
        height: auto;
        max-height: 70vh;
    }
    
    .designs-list {
        grid-template-columns: 1fr;
    }
    
    .integrated-tabs {
        margin-top: 20px;
    }
    
    .status-bar {
        flex-direction: column;
        padding: 10px;
    }
    
    .status-bar-left, 
    .status-bar-center, 
    .status-bar-right {
        width: 100%;
        justify-content: center;
        margin-bottom: 5px;
    }
    
    .input-with-suggestions {
        flex-direction: column;
    }
    
    .suggest-btn {
        margin-top: 5px;
        width: 100%;
    }
    
    .auth-container {
        width: 95%;
        padding: 20px;
    }
    
    .oauth-buttons {
        flex-direction: column;
    }
    
    .elaborate-popup {
        width: 95%;
        height: 95vh;
    }
    
    .elaborate-popup-tabs {
        overflow-x: auto;
        flex-wrap: nowrap;
    }
    
    .elaborate-popup-tab {
        white-space: nowrap;
    }
}

/* Extra small screens (mobile portrait) */
@media (max-width: 480px) {
    html {
        font-size: 13px;
    }
    
    .logo {
        font-size: 1.8rem;
    }
    
    .tagline {
        font-size: 1rem;
    }
    
    .btn, .auth-btn {
        padding: 10px 15px;
        font-size: 0.9rem;
    }
    
    .form-group input,
    .form-group select,
    .form-group textarea {
        padding: 8px;
        font-size: 14px;
    }
    
    .popup-container .title-bar h2,
    .ask-anything-dialog .title-bar h2 {
        font-size: 1.3rem;
    }
    
    .chat-interface {
        width: 100%;
        right: 0;
        bottom: 40px;
        border-radius: 0;
    }
    
    .learning-card {
        padding: 15px;
    }
    
    .card-header h3 {
        font-size: 16px;
    }
    
    .card-description {
        font-size: 14px;
    }
    
    .launch-btn, .download-btn, .try-xapi-btn {
        padding: 6px 10px;
        font-size: 12px;
    }
    
    .auth-links {
        font-size: 14px;
    }
    
    .sample-login {
        padding: 10px;
    }
    
    .sample-login h3 {
        font-size: 16px;
    }
    
    .demo-credentials {
        font-size: 12px;
    }
}

/* Small cell phone screens */
@media (max-width: 380px) {
    /* Hide everything except .integrated-tabs */
    .container > header,
    .container > section:not(#results),
    .container > div:not(.integrated-tabs),
    .container > div:not(#results) {
        display: none !important;
    }
    
    /* Make sure the results section is visible */
    #results {
        display: block !important;
    }
    
    /* Only show the integrated-tabs within the results section */
    #results > *:not(.integrated-tabs) {
        display: none !important;
    }
    
    /* Make sure the hidden class doesn't hide the results section on small screens */
    .hidden#results {
        display: block !important;
    }
    
    /* Show the integrated-tabs */
    .integrated-tabs {
        display: block;
        margin: 0;
        padding: 0;
        width: 100%;
        box-shadow: none;
    }
    
    /* Replace tab buttons with icons on small screens - single row */
    .tabs {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: hidden;
        width: 100%;
    }
    
    .tab-btn {
        padding: 2px; /* 2px padding all around */
        font-size: 1.2rem;
        flex: 1 0 16.66%; /* Make 6 buttons in one row */
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        position: relative;
        margin: 0;
        border: none;
    }
    
    /* Hide the text and show icons instead */
    .tab-btn .translatable {
        font-size: 0;
        display: block;
    }
    
    /* Hide help icons on small screens */
    .help-icon, 
    [class*="help-icon"],
    [id*="help-icon"],
    .fa-circle-info,
    .fa-info-circle,
    i.fa-info,
    i.fa-question,
    i.fa-question-circle,
    button[aria-label*="help"],
    button[title*="help"],
    button[aria-label*="info"],
    button[title*="info"] {
        display: none !important;
    }
    
    /* Add Font Awesome icons for each tab */
    .tab-btn[data-tab="task-analysis-tab"] .translatable::before {
        font-family: "Font Awesome 6 Free";
        content: "\f0ae"; /* tasks icon */
        font-weight: 900;
        font-size: 1.2rem;
    }
    
    .tab-btn[data-tab="content-analysis-tab"] .translatable::before {
        font-family: "Font Awesome 6 Free";
        content: "\f15c"; /* file-lines icon */
        font-weight: 900;
        font-size: 1.2rem;
    }
    
    .tab-btn[data-tab="learning-types-tab"] .translatable::before {
        font-family: "Font Awesome 6 Free";
        content: "\f02d"; /* book icon */
        font-weight: 900;
        font-size: 1.2rem;
    }
    
    .tab-btn[data-tab="flipped-learning-tab"] .translatable::before {
        font-family: "Font Awesome 6 Free";
        content: "\f074"; /* random icon */
        font-weight: 900;
        font-size: 1.2rem;
    }
    
    .tab-btn[data-tab="srl-tab"] .translatable::before {
        font-family: "Font Awesome 6 Free";
        content: "\f080"; /* chart-bar icon */
        font-weight: 900;
        font-size: 1.2rem;
    }
    
    .tab-btn[data-tab="assessment-tab"] .translatable::before {
        font-family: "Font Awesome 6 Free";
        content: "\f201"; /* chart-line icon */
        font-weight: 900;
        font-size: 1.2rem;
    }
    
    /* Remove padding from learning cards */
    .learning-card {
        padding: 0;
        margin-bottom: 10px;
        box-shadow: none;
        border: none;
        border-bottom: 1px solid #eee;
    }
    
    /* Adjust content inside learning cards - minimize padding */
    .learning-card h3 {
        font-size: 1rem;
        margin: 3px 0;
        padding: 0;
    }
    
    .learning-card .subtitle {
        font-size: 0.8rem;
        padding: 0;
        margin: 0;
    }
    
    .learning-card .definition,
    .learning-card .metrics {
        padding: 0;
        margin: 3px 0;
    }
    
    .learning-card ul {
        padding-left: 15px;
        margin: 3px 0;
    }
    
    .learning-card li {
        margin-bottom: 3px;
        font-size: 0.9rem;
    }
    
    /* Fix for buttons on small screens */
    .btn, .auth-btn, button {
        padding: 8px 12px;
        font-size: 0.85rem;
        width: 100%;
        margin-bottom: 5px;
        text-align: center;
    }
    
    .auth-buttons {
        flex-direction: column;
        width: 100%;
    }
    
    .auth-btn {
        margin-right: 0;
    }
    
    /* Hide status bar on very small screens */
    .status-bar {
        display: none;
    }
    
    /* Adjust tab content for better readability */
    .tab-content {
        padding: 0;
        margin: 0;
        width: 100%;
    }
    
    .tab-pane.active {
        height: auto;
        max-height: none;
    }
    
    /* Ensure the container takes full height */
    .container {
        height: 100vh;
        padding: 0;
    }
    
    /* Remove body padding */
    body {
        padding: 0;
    }
}

/* Text-to-speech button styles for cards */
.card-tts-button {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: #3498db;
    color: white;
    border: none;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 0.9rem;
    z-index: 10;
    cursor: pointer;
    transition: background-color 0.3s, transform 0.2s;
}

.card-tts-button:hover, .card-tts-button:focus {
    background-color: #2980b9;
    transform: scale(1.05);
}

.card-tts-button:active {
    transform: scale(0.95);
}

/* Make sure learning cards have position relative for absolute positioning of buttons */
.learning-card {
    position: relative;
}

/* Adjust button position for mobile view */
body.mobile-view .card-tts-button {
    width: 24px;
    height: 24px;
    top: 5px;
    right: 5px;
    font-size: 0.8rem;
}

/* Mobile view class (for URL parameter ?mobile=1) */
body.mobile-view {
    /* Hide everything except .integrated-tabs */
    padding: 0;
}

body.mobile-view .container > header,
body.mobile-view .container > section:not(#results),
body.mobile-view .container > div:not(.integrated-tabs),
body.mobile-view .container > div:not(#results) {
    display: none !important;
}

/* Make sure the results section is visible */
body.mobile-view #results {
    display: block !important;
}

/* Only show the integrated-tabs within the results section */
body.mobile-view #results > *:not(.integrated-tabs) {
    display: none !important;
}

/* Make sure the hidden class doesn't hide the results section on small screens */
body.mobile-view .hidden#results {
    display: block !important;
}

/* Show the integrated-tabs */
body.mobile-view .integrated-tabs {
    display: block;
    margin: 0;
    padding: 0;
    width: 100%;
    box-shadow: none;
}

/* Replace tab buttons with icons on small screens - single row */
body.mobile-view .tabs {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: hidden;
    width: 100%;
}

body.mobile-view .tab-btn {
    padding: 2px; /* 2px padding all around */
    font-size: 1.2rem;
    flex: 1 0 16.66%; /* Make 6 buttons in one row */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    position: relative;
    margin: 0;
    border: none;
}

/* Hide the text and show icons instead */
body.mobile-view .tab-btn .translatable {
    font-size: 0;
    display: block;
}

/* Hide help icons on small screens */
body.mobile-view .help-icon, 
body.mobile-view [class*="help-icon"],
body.mobile-view [id*="help-icon"],
body.mobile-view .fa-circle-info,
body.mobile-view .fa-info-circle,
body.mobile-view i.fa-info,
body.mobile-view i.fa-question,
body.mobile-view i.fa-question-circle,
body.mobile-view button[aria-label*="help"],
body.mobile-view button[title*="help"],
body.mobile-view button[aria-label*="info"],
body.mobile-view button[title*="info"] {
    display: none !important;
}

/* Add Font Awesome icons for each tab */
body.mobile-view .tab-btn[data-tab="task-analysis-tab"] .translatable::before {
    font-family: "Font Awesome 6 Free";
    content: "\f0ae"; /* tasks icon */
    font-weight: 900;
    font-size: 1.2rem;
}

body.mobile-view .tab-btn[data-tab="content-analysis-tab"] .translatable::before {
    font-family: "Font Awesome 6 Free";
    content: "\f15c"; /* file-lines icon */
    font-weight: 900;
    font-size: 1.2rem;
}

body.mobile-view .tab-btn[data-tab="learning-types-tab"] .translatable::before {
    font-family: "Font Awesome 6 Free";
    content: "\f02d"; /* book icon */
    font-weight: 900;
    font-size: 1.2rem;
}

body.mobile-view .tab-btn[data-tab="flipped-learning-tab"] .translatable::before {
    font-family: "Font Awesome 6 Free";
    content: "\f074"; /* random icon */
    font-weight: 900;
    font-size: 1.2rem;
}

body.mobile-view .tab-btn[data-tab="srl-tab"] .translatable::before {
    font-family: "Font Awesome 6 Free";
    content: "\f080"; /* chart-bar icon */
    font-weight: 900;
    font-size: 1.2rem;
}

body.mobile-view .tab-btn[data-tab="assessment-tab"] .translatable::before {
    font-family: "Font Awesome 6 Free";
    content: "\f201"; /* chart-line icon */
    font-weight: 900;
    font-size: 1.2rem;
}

/* Remove padding from learning cards */
body.mobile-view .learning-card {
    padding: 0;
    margin-bottom: 10px;
    box-shadow: none;
    border: none;
    border-bottom: 1px solid #eee;
}

/* Adjust content inside learning cards - minimize padding */
body.mobile-view .learning-card h3 {
    font-size: 1rem;
    margin: 3px 0;
    padding: 0;
}

body.mobile-view .learning-card .subtitle {
    font-size: 0.8rem;
    padding: 0;
    margin: 0;
}

body.mobile-view .learning-card .definition,
body.mobile-view .learning-card .metrics {
    padding: 0;
    margin: 3px 0;
}

body.mobile-view .learning-card ul {
    padding-left: 15px;
    margin: 3px 0;
}

body.mobile-view .learning-card li {
    margin-bottom: 3px;
    font-size: 0.9rem;
}

/* Hide status bar on very small screens */
body.mobile-view .status-bar {
    display: none;
}

/* Adjust tab content for better readability */
body.mobile-view .tab-content {
    padding: 0;
    margin: 0;
    width: 100%;
}

body.mobile-view .tab-pane.active {
    height: auto;
    max-height: none;
}

/* Ensure the container takes full height */
body.mobile-view .container {
    height: 100vh;
    padding: 0;
}