/**
 * Vertex Training Platform - Responsive Laptop Frame CSS
 * Makes the laptop frame design responsive across all screen sizes
 * Uses transform: scale() to maintain visual integrity while adapting to different viewports
 */

/* ===== CSS Variables ===== */
:root {
  --laptop-base-width: 1054px;
  --laptop-base-height: 650px;
}

/* ===== Base Body Styles ===== */
body {
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  background: url("../vertex.jpg") no-repeat center center fixed !important;
  background-size: cover !important;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  overflow-x: hidden; /* Prevent horizontal scroll during scaling */
  margin: 0;
}

/* ===== Laptop Wrapper - Responsive Scaling ===== */
.laptop-wrapper {
  position: relative;
  width: var(--laptop-base-width);
  max-width: 100%;
  transform-origin: center center;
  transition: transform 0.3s ease;
}

.laptop-image {
  width: 100%;
  display: block;
}

/* ===== Screen Area - Content Container ===== */
.screen-area {
  position: absolute;
  top: 5.5%;
  left: 10%;
  width: 80%;
  height: 75%;
  overflow: hidden;

  /* Improve text rendering during scaling */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ===== Monitor Frame Styles ===== */
.monitor-frame {
  background: #d1d5db;
  border-radius: 6px;
  padding: 4px;
  box-shadow:
    0 0 25px rgba(0, 0, 0, 0.8),
    inset 0 1px 0 rgba(255, 255, 255, 0.4),
    inset 0 -1px 0 rgba(0, 0, 0, 0.4);
  position: relative;
  width: 100%;
  height: 100%;
}

.screen {
  background: #f3f4f6;
  border-radius: 4px;
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
  box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.3);
  display: flex;
  flex-direction: column;
}

/* ===== Side Panels ===== */
.side-panel {
  position: absolute;
  top: 9%;
  font-size: 0.8rem;
  z-index: 40;
  transition: all 0.3s ease;
}

/* Left Panel - Scoreboard */
.side-panel-left {
  left: -165px;
  width: 190px;
  padding: 10px 14px;
  border-radius: 10px;
  background: linear-gradient(135deg, #0f172a 0%, #1f2937 100%);
  border: 1px solid #1f2937;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.8);
  color: #e5e7eb;
}

/* Right Panel - Checklist */
.side-panel-right {
  right: -220px;
  width: 260px;
  padding: 12px 14px;
  border-radius: 10px;
  background: linear-gradient(135deg, #7c2d12 0%, #ea580c 100%);
  border: 1px solid #f97316;
  box-shadow: 0 14px 35px rgba(0, 0, 0, 0.85);
  color: #fde68a;
}

/* ===== Responsive Breakpoints ===== */

/* Large Desktop (1280px+) - No scaling needed */
@media (min-width: 1281px) {
  .laptop-wrapper {
    transform: scale(1);
  }
}

/* Medium Desktop (980-1280px) - Slight scale */
@media (min-width: 980px) and (max-width: 1280px) {
  .laptop-wrapper {
    transform: scale(0.9);
  }
}

/* Tablet Landscape (768-980px) - More scaling, smaller side panels */
@media (min-width: 768px) and (max-width: 979px) {
  .laptop-wrapper {
    transform: scale(0.75);
  }

  .side-panel {
    font-size: 0.7rem;
  }

  .side-panel-left {
    left: -145px;
    width: 160px;
    padding: 8px 12px;
  }

  .side-panel-right {
    right: -190px;
    width: 220px;
    padding: 10px 12px;
  }
}

/* Tablet Portrait (480-768px) - Hide side panels, more scaling */
@media (min-width: 480px) and (max-width: 767px) {
  body {
    padding: 10px;
  }

  .laptop-wrapper {
    transform: scale(0.65);
  }

  .side-panel {
    display: none;
  }
}

/* Mobile (< 480px) - Maximum scaling, minimal UI */
@media (max-width: 479px) {
  body {
    padding: 5px;
  }

  .laptop-wrapper {
    transform: scale(0.5);
  }

  .side-panel {
    display: none;
  }
}

/* ===== Landscape Orientation Optimization ===== */
@media (orientation: landscape) and (max-height: 600px) {
  body {
    padding: 5px;
    align-items: flex-start;
  }

  .laptop-wrapper {
    transform: scale(0.7);
    margin-top: 10px;
  }
}

/* ===== Fluid Typography ===== */
/* These can be used within game content for better scaling */

.email-sender,
.message-sender,
.chat-name {
  font-size: clamp(0.7rem, 1.5vw, 0.78rem);
}

.email-subject,
.message-text,
.chat-last-msg {
  font-size: clamp(0.68rem, 1.4vw, 0.76rem);
}

.email-body,
.rule-description {
  font-size: clamp(0.7rem, 1.5vw, 0.78rem);
  line-height: 1.5;
}

/* ===== Accessibility Improvements ===== */

/* Ensure touch targets are adequate on mobile */
@media (max-width: 768px) {
  button,
  .email-item,
  .chat-item,
  .rule-item {
    min-height: 44px;
    min-width: 44px;
  }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  .side-panel-left,
  .side-panel-right {
    border-width: 2px;
  }

  .screen {
    border: 2px solid #000;
  }
}

/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
  .laptop-wrapper,
  .side-panel,
  * {
    transition: none !important;
    animation: none !important;
  }
}

/* ===== Print Styles ===== */
@media print {
  body {
    background: white !important;
  }

  .laptop-wrapper {
    transform: none;
    width: 100%;
  }

  .side-panel {
    display: none;
  }

  .screen-area {
    position: static;
    width: 100%;
    height: auto;
  }
}

/* ===== Modal/Feedback Responsive Adjustments ===== */

@media (max-width: 768px) {
  .feedback-content,
  .completion-content {
    max-width: 90%;
    padding: 18px;
    margin: 10px;
  }

  .feedback-title,
  .completion-title {
    font-size: 1rem;
  }

  .feedback-explanation,
  .completion-message {
    font-size: 0.85rem;
  }
}

@media (max-width: 480px) {
  .feedback-content,
  .completion-content {
    max-width: 95%;
    padding: 14px;
  }

  .feedback-title,
  .completion-title {
    font-size: 0.9rem;
  }

  .feedback-icon,
  .completion-icon {
    font-size: 2rem;
  }
}

/* ===== Container Queries (for modern browsers) ===== */

/* Email list responsive adjustments */
@supports (container-type: inline-size) {
  .game-container {
    container-type: inline-size;
  }

  @container (max-width: 500px) {
    .email-list {
      width: 40%;
    }

    .email-item {
      padding: 6px 8px;
    }
  }
}

/* ===== Utility Classes ===== */

/* Hide elements on specific screen sizes */
.hide-mobile {
  display: block;
}

@media (max-width: 768px) {
  .hide-mobile {
    display: none !important;
  }
}

.hide-desktop {
  display: none;
}

@media (max-width: 768px) {
  .hide-desktop {
    display: block !important;
  }
}

/* Responsive text sizing */
.text-responsive-sm {
  font-size: clamp(0.7rem, 2vw, 0.85rem);
}

.text-responsive-md {
  font-size: clamp(0.85rem, 2vw, 1rem);
}

.text-responsive-lg {
  font-size: clamp(1rem, 2.5vw, 1.25rem);
}

/* ===== Browser Compatibility Notes ===== */

/*
  - transform: scale() is supported in all modern browsers (IE9+)
  - clamp() is supported in Chrome 79+, Firefox 75+, Safari 13.1+
  - Container queries (@container) require Chrome 105+, Safari 16+
  - Fallbacks are provided for older browsers
*/

/* IE11 and older - no scaling */
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  .laptop-wrapper {
    transform: none;
    width: 90%;
  }

  .side-panel {
    display: none;
  }
}