/**
 * Vertex Training Platform - Responsive Scaling
 * Uses CSS zoom for proportional scaling (better than transform)
 * Compact styles to fit laptop screens
 */

/* ===== Base Reset ===== */
html, body {
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    height: 100%;
}

/* ===== Page Containers - Full Height ===== */
.page-container,
.simulator-container,
.video-page-container,
.login-container {
    height: 100vh;
    max-height: 100vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* ===== Zoom-Based Scaling ===== */
/* Disabled - zoom conflicts with 100vh causing height issues */
/* Flexbox constraints now handle proper sizing */

/* ===== Main Content Areas - Fill Available Space ===== */
.simulator-main,
.login-main,
.vertex-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}

/* Video main needs to scroll to show continue button */
.video-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow-y: auto;
}

/* ===== Email/Chat Client - Fill Parent ===== */
.email-client,
.chat-client {
    flex: 1;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* ===== Email/Chat Container - Height Constraint Chain ===== */
.email-container,
.chat-container {
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

.email-sidebar,
.chat-sidebar {
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.email-list,
.chat-list {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
}

.email-content,
.chat-content {
    flex: 1;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.content-area {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
}

/* ===== Password Labyrinth - Fill Space ===== */
.labyrinth-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 0 !important;
}

/* ===== Hide Training Aid Panel ===== */
.training-aid-panel {
    display: none !important;
}

/* ===== Simulator Main - No Side Panel Space ===== */
.simulator-main {
    padding-right: 32px !important;
}

/* ===== Video Pages - Make More Compact ===== */
.video-info-section {
    padding: 20px 24px !important;
}

.video-title-row {
    margin-bottom: 12px !important;
}

.video-title-main {
    font-size: 1.4rem !important;
}

.video-module-badge {
    padding: 6px 12px !important;
    font-size: 0.7rem !important;
}

.video-meta {
    font-size: 0.8rem !important;
    margin-bottom: 14px !important;
    gap: 12px !important;
}

.video-description {
    font-size: 0.88rem !important;
    margin-bottom: 16px !important;
    line-height: 1.5 !important;
}

/* Module sections - much more compact */
.modules-section {
    margin-top: 16px !important;
    padding-top: 16px !important;
}

.modules-title {
    font-size: 0.95rem !important;
    margin-bottom: 10px !important;
}

.module-grid {
    gap: 8px !important;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)) !important;
}

.module-card {
    padding: 12px !important;
}

.module-header {
    margin-bottom: 6px !important;
    gap: 8px !important;
}

.module-icon {
    font-size: 1.2rem !important;
}

.module-number {
    font-size: 0.65rem !important;
}

.module-name {
    font-size: 0.85rem !important;
    margin-bottom: 2px !important;
}

.module-duration {
    font-size: 0.72rem !important;
    line-height: 1.3 !important;
}

/* Continue overlay compact */
.continue-overlay {
    padding: 12px 16px !important;
    bottom: 12px !important;
    left: 12px !important;
    right: 12px !important;
}

.continue-icon {
    font-size: 1.1rem !important;
}

.continue-text {
    font-size: 0.82rem !important;
}

.continue-message > div > div:last-child {
    font-size: 0.72rem !important;
}

.btn-continue {
    padding: 10px 20px !important;
    font-size: 0.82rem !important;
}

/* ===== Taskbar Compact ===== */
.vertex-taskbar {
    padding: 8px 20px !important;
}

.taskbar-logo {
    height: 22px !important;
}

.taskbar-title {
    font-size: 0.85rem !important;
}

.taskbar-right {
    font-size: 0.8rem !important;
    gap: 14px !important;
}

/* ===== Footer Compact ===== */
.vertex-footer {
    padding: 8px 20px !important;
    font-size: 0.75rem !important;
}

/* ===== Main Content Compact ===== */
.vertex-main,
.simulator-main,
.video-main {
    padding: 16px !important;
}

/* ===== Email/Chat Simulator Compact ===== */
.window-header {
    padding: 10px 16px !important;
}

.header-title h1 {
    font-size: 1rem !important;
}

.score-panel {
    gap: 12px !important;
}

.score-label {
    font-size: 0.6rem !important;
}

.score-value {
    font-size: 0.95rem !important;
}

.email-sidebar,
.chat-sidebar {
    width: 260px !important;
}

.sidebar-header {
    padding: 10px 12px !important;
}

.email-item,
.chat-item {
    padding: 8px 12px !important;
}

.email-sender,
.chat-item-name {
    font-size: 0.78rem !important;
}

.email-subject {
    font-size: 0.72rem !important;
}

.email-preview {
    font-size: 0.68rem !important;
    -webkit-line-clamp: 1 !important;
}

.email-badge {
    font-size: 0.55rem !important;
    padding: 2px 5px !important;
}

.content-area {
    padding: 16px !important;
}

.email-header,
.chat-header {
    padding: 12px !important;
    margin-bottom: 12px !important;
}

.email-meta {
    font-size: 0.68rem !important;
}

.email-title {
    font-size: 1.1rem !important;
}

.email-body {
    padding: 14px !important;
    font-size: 0.82rem !important;
    line-height: 1.6 !important;
}

.action-toolbar {
    padding: 10px 16px !important;
}

.action-btn {
    padding: 8px 20px !important;
    font-size: 0.8rem !important;
}

/* Chat specific */
.chat-header-avatar {
    width: 32px !important;
    height: 32px !important;
}

.chat-avatar {
    width: 28px !important;
    height: 28px !important;
}

.message {
    margin-bottom: 10px !important;
}

.message-sender {
    font-size: 0.72rem !important;
}

.message-time {
    font-size: 0.6rem !important;
}

.message-text {
    padding: 10px 14px !important;
    font-size: 0.82rem !important;
}

.score-panel-sidebar {
    padding: 10px !important;
}

.score-panel-sidebar .score-value {
    font-size: 1.3rem !important;
}

.score-panel-sidebar .score-label {
    font-size: 0.55rem !important;
}

/* ===== Login Page Compact ===== */
.login-main {
    padding: 20px !important;
}

.login-window {
    max-width: 450px !important;
}

.login-header {
    padding: 28px !important;
}

.login-logo {
    width: 120px !important;
    margin-bottom: 16px !important;
}

.login-title {
    font-size: 1.5rem !important;
}

.login-subtitle {
    font-size: 0.85rem !important;
}

.login-body {
    padding: 28px !important;
}

.status-badge {
    padding: 8px 14px !important;
    font-size: 0.78rem !important;
    margin-bottom: 20px !important;
}

.form-group {
    margin-bottom: 16px !important;
}

.form-label {
    font-size: 0.78rem !important;
    margin-bottom: 5px !important;
}

.form-input {
    padding: 12px 14px !important;
    font-size: 0.9rem !important;
}

.submit-btn {
    padding: 14px !important;
    font-size: 0.95rem !important;
}

.info-box {
    margin-top: 18px !important;
    padding: 14px !important;
    font-size: 0.78rem !important;
}

/* ===== Password Labyrinth Compact ===== */
.labyrinth-container {
    padding: 20px 16px !important;
    min-height: auto !important;
}

.game-header {
    margin-bottom: 20px !important;
}

.game-title {
    font-size: 1.6rem !important;
}

.game-subtitle {
    font-size: 0.9rem !important;
}

.game-stats {
    gap: 14px !important;
    margin-top: 14px !important;
}

.stat-box {
    padding: 10px 18px !important;
}

.stat-label {
    font-size: 0.65rem !important;
}

.stat-value {
    font-size: 1.4rem !important;
}

.password-card {
    padding: 28px !important;
    max-width: 580px !important;
}

.instruction-text {
    font-size: 1rem !important;
    margin-bottom: 20px !important;
}

.password-input {
    padding: 14px 16px !important;
    font-size: 1rem !important;
}

.password-strength {
    padding: 14px !important;
    margin-bottom: 16px !important;
}

.rules-list {
    margin-bottom: 20px !important;
}

.rules-title {
    font-size: 0.75rem !important;
    margin-bottom: 10px !important;
}

.rule-item {
    padding: 8px 12px !important;
    margin-bottom: 5px !important;
    font-size: 0.82rem !important;
}

/* ===== Modals Compact ===== */
.analysis-content,
.feedback-content,
.modal-content,
.success-content {
    padding: 28px !important;
    max-height: 90vh !important;
    overflow-y: auto !important;
}

.analysis-title,
.feedback-title,
.success-title {
    font-size: 1.4rem !important;
    margin-bottom: 12px !important;
}

.checklist-item {
    padding: 10px !important;
    margin-bottom: 5px !important;
}

.check-text {
    font-size: 0.8rem !important;
}

.check-icon {
    font-size: 1rem !important;
}

.analysis-summary {
    padding: 12px !important;
    margin-bottom: 14px !important;
}

.summary-title {
    font-size: 0.85rem !important;
}

.summary-text {
    font-size: 0.8rem !important;
}

.success-icon {
    font-size: 3.5rem !important;
    margin-bottom: 14px !important;
}

.success-stats {
    padding: 16px !important;
    margin-bottom: 18px !important;
}

.success-stat-label {
    font-size: 0.65rem !important;
}

.success-stat-value {
    font-size: 1.5rem !important;
}

.success-message {
    font-size: 0.9rem !important;
    margin-bottom: 20px !important;
}

/* ===== Completion Screen Compact ===== */
.completion-icon {
    font-size: 3rem !important;
    margin-bottom: 12px !important;
}

.completion-title {
    font-size: 1.6rem !important;
    margin-bottom: 8px !important;
}

.completion-score {
    font-size: 1.8rem !important;
    margin-bottom: 12px !important;
}

.completion-text {
    font-size: 0.85rem !important;
    margin-bottom: 16px !important;
}

/* ===== Admin Dashboard Compact ===== */
.admin-container {
    padding: 16px !important;
    max-width: 1200px !important;
}

.admin-header {
    padding: 16px !important;
    margin-bottom: 16px !important;
}

.admin-title {
    font-size: 1.5rem !important;
}

.stats-grid {
    gap: 12px !important;
    margin-bottom: 20px !important;
}

.stat-card {
    padding: 14px !important;
}

.stat-card .stat-value {
    font-size: 2rem !important;
}

.stat-card .stat-label {
    font-size: 0.75rem !important;
}

.section {
    padding: 16px !important;
    margin-bottom: 16px !important;
}

.section-title {
    font-size: 1.15rem !important;
    margin-bottom: 14px !important;
}

.users-table th,
.users-table td {
    padding: 10px !important;
    font-size: 0.8rem !important;
}

/* ===== Width Breakpoints ===== */
@media (max-width: 1200px) {
    .email-sidebar,
    .chat-sidebar {
        width: 240px !important;
    }
}

@media (max-width: 1024px) {
    .email-sidebar,
    .chat-sidebar {
        width: 220px !important;
    }

    .video-title-row {
        flex-direction: column !important;
        gap: 10px !important;
    }
}

@media (max-width: 900px) {
    .email-sidebar,
    .chat-sidebar {
        width: 200px !important;
    }

    .module-grid {
        grid-template-columns: 1fr 1fr !important;
    }
}

@media (max-width: 768px) {
    .module-grid {
        grid-template-columns: 1fr !important;
    }
}