/**
 * Layout Styles
 * 
 * This file contains all global layout and structural styles.
 */
  /* Reset for full-height layout */
  html, body {
      height: 100%;
      margin: 0;
      padding: 0;
	  overflow-y: auto; /* Allow vertical scrolling */
      overflow: hidden; /* Prevent scrolling on the body */
  }
  
  /* Enable scrolling between 1025px and 1024px (disabled - no valid range) */
  /*
  @media (min-width: 1025px) and (max-width: 1024px) {
      html, body {
          overflow: auto; 
      }
  }
  */

  /* App Container - Viewport Fixed */
  .app-container {
      display: flex;
      flex-direction: column;
	  min-height: 100dvh; /* Use minimum viewport height */
      /*height: 100dvh; /* Use viewport height */
      overflow: hidden; /* No scrolling at this level */
  }
  
  /* Adjust container for 1025px+ range */
  @media (min-width: 1025px) {
      .app-container {
          overflow-y: auto; /* Enable vertical scrolling at the container level */
          height: auto; /* Allow height to adjust naturally */
          max-height: none; /* Remove any height restrictions */
      }
      
      /* Ensure the main content area can scroll */
      .app-main {
          overflow-y: visible; /* Allow content to be visible for container scrolling */
      }
  }

  /* Main Content */
  .app-main {
      flex: 1;
      /*min-height: 0; /* Critical for nested flex containers */
      display: flex;
      flex-direction: column;
      overflow: auto; /* Allow scrolling within content */
  }

  /* Content area wrapper */
  .main-layout {
      display: flex;
      flex: 1;
      min-height: 0; /* Critical for nested flex containers */
      overflow: hidden;
  }

  /* Content iframe container */
  .iframe-container {
      flex: 1;
      min-height: 0; /* Critical for nested flex containers */
      display: flex;
      flex-direction: column;
  }

  /* The iframe itself */
  .content-iframe {
      flex: 1;
      width: 100%;
      border: none;
  }

  /* Fixed footer */
  .app-footer {
      flex-shrink: 0; /* Prevent footer from shrinking */
  }

/* Login Page Styles */
.login-page {
    background-image: linear-gradient(to bottom, var(--color-background) 1%, var(--color-primary) 60%);
    min-height: 100dvh;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: var(--spacing-md);
}

.login-container {
    background-color: white;
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-lg);
    width: 100%;
    max-width: 500px;
    overflow: hidden;
}

/* Landscape mode for login container */
/* Base landscape styles */
@media (orientation: landscape) {
    .login-page {
        padding: var(--spacing-xs);
    }
    
    .login-container {
        width: 50%; /* Half the screen width */
        max-width: 600px; /* Set a maximum width for very wide screens */
        display: flex;
        flex-direction: column;
        /*height: 66dvh; /* 2/3 of the viewport height */
        max-height: 66dvh;
    }
    
    .login-header {
        padding: 0;
        border-bottom: var(--border-width) solid var(--color-border);
        text-align: center;
        height: 40px; /* Fixed height */
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .login-header img {
        max-height: 30px;
        margin: 0;
    }
    
    .login-form-container {
        flex: 1;
        overflow-y: auto;
        padding: var(--spacing-sm);
        /* Height calculated to leave room for header and footer */
        max-height: calc(66dvh - 40px - 26px); /* Container height minus header (40px) and footer (26px) */
    }
    
    .login-footer {
        /*padding: var(--spacing-xs);*/
        border-top: var(--border-width) solid var(--color-border);
        display: flex;
        flex-direction:  column;
        justify-content: space-between;
        align-items: center;
    }
    
    .login-footer .copyright {
        font-size: 10px;
        margin-bottom: 0;
        white-space: nowrap;
        width: 40%;
    }
    
    .login-footer .footer-links {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        gap: 10px;
        width: 90%;
        justify-content: flex-end;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 2px;
        scrollbar-width: none;
    }
    
    .login-footer .footer-links::-webkit-scrollbar {
        display: none;
    }
    
    .login-footer .footer-links a {
        font-size: 10px;
        white-space: nowrap;
    }
    
    .login-form .form-group {
        margin-bottom: 8px; /* Reduce spacing between form groups */
    }
    
    .login-form label {
        margin-bottom: 2px; /* Smaller margin for labels */
        font-size: 13px;
    }
    
    .login-form .form-control {
        padding: 6px 8px; /* Smaller input fields */
    }
    
    .login-form .form-actions {
        margin-top: 8px; /* Less space before buttons */
    }
    
    .login-form .btn {
        padding: 6px 10px; /* Smaller buttons */
    }
    
    .login-form .form-links {
        margin-top: 6px;
        font-size: 12px;
    }
}

/* Wide landscape screens */
@media (orientation: landscape) and (min-width: 1400px) {
    .login-container {
        width: 40%; /* Narrower on very wide screens */
        min-width: 500px; /* Never too narrow */
    }
}

/* Ultra-wide landscape screens */
@media (orientation: landscape) and (min-width: 2000px) {
    .login-container {
        width: 30%; /* Even narrower on ultra-wide screens */
        min-width: 600px; /* Never too narrow */
    }
}

/* Even smaller screens in landscape */
@media (orientation: landscape) and (max-height: 450px) {
    .login-container {
        width: 60%; /* Slightly wider for very small heights */
        height: 90dvh; /* Almost full height for small screens */
        max-height: 90dvh;
    }
    
    .login-header {
        padding: 0;
        height: 30px; /* Even smaller for small screens */
    }
    
    .login-header img {
        max-height: 22px; /* Even smaller logo */
    }
    
    .login-form-container {
        padding: 6px 8px;
        max-height: calc(90dvh - 30px - 21px); /* Container height minus header (30px) and footer (21px) */
    }
    
    .login-footer {
        padding: 2px 4px;
    }
    
    .login-footer .copyright {
        font-size: 9px;
    }
    
    .login-footer .footer-links a {
        font-size: 9px;
    }
    
    .login-form .form-group {
        margin-bottom: 4px; /* Minimal spacing */
    }
    
    .login-form label {
        font-size: 12px;
        margin-bottom: 1px;
    }
    
    .login-form .form-control {
        padding: 3px 6px; /* Smaller input fields */
        font-size: 13px;
        height: 28px;
    }
    
    .login-form .btn {
        padding: 4px 8px; /* Smaller button */
        font-size: 13px;
    }
    
    .login-form .form-links {
        margin-top: 4px;
        font-size: 11px;
    }
}

/* Password Reset Styles */
.forgot-password-title,
.reset-password-title {
    margin-bottom: var(--spacing-sm);
    text-align: center;
    color: var(--color-primary);
}

.forgot-password-subtitle,
.reset-password-subtitle {
    margin-bottom: var(--spacing-md);
    text-align: center;
    color: var(--color-text);
    font-size: var(--font-size-sm);
}

.message-box {
    padding: var(--spacing-sm);
    margin-bottom: var(--spacing-md);
    border-radius: var(--border-radius-sm);
}

.message-box.success {
    background-color: #d4edda;
    color: #155724;
    border-left: 4px solid #28a745;
}

.message-box.error {
    background-color: #f8d7da;
    color: #721c24;
    border-left: 4px solid #dc3545;
}

.form-text {
    font-size: var(--font-size-xs);
    color: var(--color-text-light);
    margin-top: var(--spacing-xs);
}

.login-header {
    text-align: center;
    padding: var(--spacing-lg);
    background-color: var(--color-background);
    border-bottom: var(--border-width) solid var(--color-border);
}

.login-header img {
    max-height: 80px;
    width: auto;
}

.login-form-container {
    padding: var(--spacing-lg);
}

.login-errors {
    margin-bottom: var(--spacing-md);
    padding: var(--spacing-sm);
    background-color: #fff3f3;
    border-left: 4px solid var(--color-danger);
    border-radius: var(--border-radius-sm);
}

.error-message {
    color: var(--color-danger);
    font-size: var(--font-size-sm);
    margin-bottom: var(--spacing-xs);
}

.login-form .form-group {
    margin-bottom: var(--spacing-md);
}

.login-form label {
    display: block;
    margin-bottom: var(--spacing-xs);
    font-weight: var(--font-weight-bold);
}

.login-form .form-control {
    width: 100%;
    padding: var(--spacing-sm);
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--border-radius-sm);
    font-size: var(--font-size-base);
}

.login-form .form-actions {
    margin-top: var(--spacing-lg);
}

.login-form .btn {
    width: 100%;
}

.login-form .form-links {
    display: flex;
    justify-content: space-between;
    margin-top: var(--spacing-md);
}

.login-form .small-link {
    font-size: var(--font-size-sm);
    color: var(--color-text-light);
}

.login-footer {
    padding: var(--spacing-md);
    background-color: #f9f9f9;
    text-align: center;
    border-top: var(--border-width) solid var(--color-border);
}

.login-footer .copyright {
    font-size: var(--font-size-sm);
    color: var(--color-text-light);
    margin-bottom: var(--spacing-sm);
}

.login-footer .footer-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--spacing-md);
}

.login-footer .footer-links a {
    font-size: var(--font-size-sm);
    color: var(--color-text-light);
}

/* EULA Page Styles */
.eula-page {
    background-image: linear-gradient(to bottom, var(--color-background) 1%, var(--color-primary) 60%);
    min-height: 100dvh;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: var(--spacing-md);
}

.eula-container {
    background-color: white;
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-lg);
    width: 100%;
    max-width: 800px;
    height: 80dvh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.eula-header {
    padding: var(--spacing-md);
    background-color: var(--color-background);
    text-align: center;
    border-bottom: var(--border-width) solid var(--color-border);
}

.eula-header h2 {
    margin-bottom: var(--spacing-xs);
}

.eula-header p {
    margin-bottom: var(--spacing-md);
}

.eula-form {
    display: flex;
    justify-content: center;
    gap: var(--spacing-md);
}

.eula-content {
    flex: 1;
    overflow: hidden;
}

.eula-iframe {
    width: 100%;
    height: 100%;
    border: none;
}

/* App Container */
.app-container {
    display: flex;
    flex-direction: column;
    /*min-height: 100dvh;
	max-height: 100dvh; /* Ensure it doesn't overflow */
    /*overflow-y: auto; /* Allow scrolling if needed */
	height: 100dvh; /* Fixed height to viewport */
    overflow-x: hidden;
}

/* Header */
.app-header {
    position: relative;
    background-image: linear-gradient(to right, var(--color-background) 1%, var(--color-primary) 60%);
    /*padding: var(--spacing-sm) var(--spacing-lg);*/
    box-shadow: var(--shadow-md);
    z-index: var(--z-index-header);
}

.header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo img {
    height: 50px;
    width: auto;
}

.user-controls {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    color: white;
    background-color: rgba(255, 255, 255, 0.1);
    padding: var(--spacing-xs) var(--spacing-md);
    border-radius: var(--border-radius-md);
}

.username {
    font-weight: var(--font-weight-bold);
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
}

.logout-btn {
    color: white;
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--border-radius-sm);
    background-color: rgba(255, 255, 255, 0.2);
    transition: background-color var(--transition-fast);
}

.logout-btn:hover {
    background-color: rgba(255, 255, 255, 0.3);
    color: white;
}

/* Main Content */
.app-main {
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* Welcome Screen (Default View) */
.welcome-container {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: var(--spacing-xl);
}

.welcome-card {
    background-color: white;
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-lg);
    padding: var(--spacing-xl);
    text-align: center;
    max-width: 600px;
    width: 100%;
}

.welcome-logo {
    margin-bottom: var(--spacing-lg);
}

.welcome-logo img {
    max-width: 200px;
    height: auto;
}

.welcome-message h2 {
    color: var(--color-primary);
    margin-bottom: var(--spacing-md);
}

/* Main Layout (Authenticated) */
.main-layout {
    display: flex;
    flex: 1;
	min-height: 0; /* Important for nested flex containers */
    overflow: hidden; /* Prevent overflow */
    /*height: calc(100dvh - 136px); /* Account for header and footer */
}

/* Side Navigation */
.side-navigation {
    background-color: white;
    border-radius: var(--border-radius-md);
    box-shadow: var(--shadow-md);
    margin: var(--spacing-md);
    width: 250px;
    min-width: 250px;
	min-height:
    transition: width var(--transition-medium), 
                min-width var(--transition-medium),
                height var(--transition-medium),
                margin var(--transition-medium);
    display: flex;
    flex-direction: column;
    z-index: var(--z-index-navigation);
}

.side-navigation.collapsed {
    width: 60px;
    min-width: 60px;
}

/* Collapsed state in the header */
.header-container .side-navigation {
    margin: 0;
    align-self: center;
    position: absolute;
    right: calc(var(--spacing-lg) + 150px); /* Position it to the left of user controls */
    z-index: 101; /* Higher than header's z-index (100) */
}

.header-container .side-navigation.collapsed {
    width: 40px;
    min-width: 40px;
    height: 40px;
    border-radius: 6px; /* More square shape */
    box-shadow: none;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(255, 255, 255, 0.2); /* Semi-transparent background */
}

/* Hide content when in header */
.header-container .side-navigation .nav-content {
    display: none;
}

/* Hide nav header when in collapsed state in header */
.header-container .side-navigation .nav-header {
    display: none;
}

/* Adjust controls when in header */
.header-container .side-navigation .nav-controls {
    width: 100%;
    height: 100%;
    border: none;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
}

/* Adjust button appearance in header */
.header-container .side-navigation .toggle-nav-btn {
    background: none; /* Remove background from the button itself */
    border-radius: 0; /* Remove border radius */
    width: 36px;
    height: 36px;
    padding: 8px; /* Add padding to create space for the icon */
}

/* Change toggle icon color in header */
.header-container .side-navigation .toggle-icon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Cpath d='M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z'/%3E%3C/svg%3E");
    width: 100%; /* Ensure icon takes full width */
    height: 100%; /* Ensure icon takes full height */
    background-size: 100% 100%; /* Make icon fill the space */
}

.nav-controls {
    padding: var(--spacing-sm);
    /*border-bottom: var(--border-width) solid var(--color-border);*/
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.toggle-nav-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: var(--spacing-xs);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color var(--transition-fast);
}

.toggle-nav-btn:hover {
    background-color: var(--color-border);
}

.toggle-icon {
    display: block;
    width: 20px;
    height: 20px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23083a6f'%3E%3Cpath d='M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
}

.nav-content {
    flex: 1;
    overflow-y: auto;
    padding: var(--spacing-sm);
}

.side-navigation.collapsed .nav-content {
    overflow: hidden;
}

/* Content Area */
.content-area {
    flex: 1;
    margin: var(--spacing-md);
    margin-left: 0;
    display: flex;
    flex-direction: column;
    transition: margin-left var(--transition-medium);
}

.content-area.expanded {
    margin-left: var(--spacing-md);
}

.content-controls {
    background-color: transparent; /* Remove white background */
    position: absolute; /* Position over the iframe */
    top: 10px;
    right: 10px;
    padding: 0;
    display: flex;
    justify-content: flex-end;
    z-index: 201; /* Higher than the fullscreen iframe (200) */
    box-shadow: none; /* Remove shadow */
    border-radius: 0;
    pointer-events: auto; /* Ensure clickability */
}

.full-screen-btn {
    background-color: rgba(255, 255, 255, 0.7); /* Semi-transparent background */
    border: 1px solid rgba(200, 200, 200, 0.5); /* Subtle border */
    cursor: pointer;
    padding: 8px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-fast);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* Subtle shadow */
    width: 36px;
    height: 36px;
}

.full-screen-btn:hover {
    background-color: rgba(255, 255, 255, 0.9); /* More opaque on hover */
    transform: scale(1.05); /* Slight grow effect */
}

/* Style for the active (fullscreen) state */
.full-screen-btn.active {
    background-color: rgba(255, 255, 255, 0.9); /* More opaque when active */
    border-color: rgba(150, 150, 150, 0.7); /* Darker border when active */
}

.expand-icon {
    display: block;
    width: 20px;
    height: 20px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23083a6f'%3E%3Cpath d='M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
}

.full-screen-btn.active .expand-icon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23083a6f'%3E%3Cpath d='M5 16h3v3h2v-5H5v2zm3-8H5v2h5V5H8v3zm6 11h2v-3h3v-2h-5v5zm2-11V5h-2v5h5V8h-3z'/%3E%3C/svg%3E");
}

.iframe-container {
    flex: 1;
    min-height: 0; /* Important for nested flex containers */
    border-radius: var(--border-radius-md); /* Rounded corners on all sides */
    background-color: white;
    overflow: hidden;
    box-shadow: var(--shadow-md);
    position: relative;
    z-index: 1;
    transition: all var(--transition-medium);
}

.iframe-container.fullscreen {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 200; /* Higher than header's z-index (100) */
    border-radius: 0;
}

.content-iframe {
    width: 100%;
    height: 100%;
    border: none;
    display: block;
	max-height: 100dvh;
}

/* Footer */
.app-footer {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.42), rgba(8, 58, 111, 1));
    /*padding: var(--spacing-md);*/
    color: white;
    margin-top: auto;
}

.footer-content {
    display: flex;
    flex-direction: row;
    align-items: center;
	justify-content: space-between;
	 flex-wrap: wrap;
	 padding: 8px 16px; /* Add some padding */
    gap: var(--spacing-sm);
}

.footer-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--spacing-lg);
}

.footer-links a {
    color: white;
    transition: opacity var(--transition-fast);
}

.footer-links a:hover {
    opacity: 0.8;
    color: white;
}

/* Responsive Styles */
@media (max-width: 1024px) {
    .main-layout {
        flex-direction: column;
        height: auto;
        overflow-y: visible; /* Make content visible for container scrolling */
    }
    
    .side-navigation {
        width: auto;
        min-width: auto;
        margin-bottom: 0;
		max-height:40dvh;
        /* No height restrictions, but keep it scrollable if needed */
        /*overflow-y: auto;*/
    }
    
    .side-navigation .nav-content {
        overflow-y: auto; /* Ensure content is scrollable */
    }
    
    .side-navigation.collapsed {
        width: auto;
        min-width: auto;
        max-height: none; /* Remove height limitation when collapsed */
    }
    
    .content-area {
        margin-left: var(--spacing-md);
        overflow-y: visible; /* Make content visible for container scrolling */
    }
    
    .iframe-container {
        height: auto; /* Remove fixed height */
        min-height: 600px; /* Set minimum height instead */
        overflow: hidden; /* Prevent iframe from being scrollable */
    }
}

/* Specific fixes for the 1025px+ range */
@media (min-width: 1025px) {
    .app-container {
        overflow-y: auto; /* Enable scrolling at container level */
    }
    
    .main-layout {
        overflow-y: visible; /* Allow content to be visible for scrolling */
        min-height: 0; /* Allow container to shrink if needed */
        max-height: none; /* Remove any height restrictions */
    }
    
    /* Removed height restrictions for side navigation in this range */
    
    .content-area {
        flex: 1;
        overflow-y: visible; /* Allow content to be visible for scrolling */
    }
    
    /* Keep the iframe container non-scrollable */
    .iframe-container {
        overflow: hidden;
    }
}

 /* Landscape-specific mobile styles */
  @media (max-width: 1024px) and (orientation: landscape) {
      /* Side Navigation - landscape mobile adjustments */
      .main-layout {
          flex-direction: column;
          width: 100%;
          box-sizing: border-box;
          padding: 0;
          align-items: center;
      }

      .side-navigation {
          width: calc(100% - var(--spacing-md)*2); /* Account for margins */
          min-width: auto;
          max-width: 100%;
          max-height: 40dvh; /* Less height in landscape */
          margin: var(--spacing-sm);
          margin-bottom: 0;
          box-sizing: border-box;
		  
      }

      .side-navigation.collapsed {
          max-height: 40px; /* Just the header */
          overflow: hidden;
          width: calc(100% - var(--spacing-md)*2); /* Match expanded state */
          min-width: auto;
          max-width: 100%;
          box-sizing: border-box;
		  min-height: 0dvh;
      }

      /* Adjust content area for landscape */
      .content-area {
          margin: var(--spacing-sm);
          width: calc(100% - var(--spacing-md)*2); /* Match navigation width */
          max-width: 100%;
          flex: 1;
          min-height: 0; /* Critical for nested flex containers */
          box-sizing: border-box;
      }

      /* Ensure iframe container has proper height */
      .iframe-container {
          min-height: 250px; /* Minimum height in landscape */
      }

      /* Show more content in landscape orientation */
      .nav-content {
          max-height: calc(70dvh - 40px); /* Header height subtracted */
          overflow-y: auto;
      }
  }

@media (max-width: 768px) {
	 /* Side Navigation - vertical collapsing for mobile */
      .main-layout {
          flex-direction: column;
          width: 100%;
          align-items: center; /* Center items horizontally */
          box-sizing: border-box;
          padding: 0; /* Remove any padding */
      }
      
      /* Ensure nav header is visible but not too large on mobile */
      .nav-header {
          font-size: 100%;
          max-width: calc(100% - 50px);
      }
      
      /* Adjust header navigation for mobile */
      .header-container .side-navigation {
          right: calc(var(--spacing-sm) + 110px); /* Closer to user controls on mobile */
      }
      
      .header-container .side-navigation.collapsed {
          width: 40px;
          min-width: 40px;
          height: 40px;
          border-radius: 4px; /* Slightly smaller radius for mobile */
		  box-shadow: none;
		  overflow: hidden;
		  display: flex;
		  align-items: center;
		  justify-content: center;
		  background-color: rgba(255, 255, 255, 0.2);
      }
      
      /* Smaller toggle button for mobile */
      .header-container .side-navigation .toggle-nav-btn {
		  background: none;
          width: 32px;
          height: 32px;
          padding: 6px; /* Smaller padding on mobile */
      }
      
      /* Smaller header for mobile portrait */
      .app-header {
          padding: 5px 10px; /* Minimal padding */
      }
      
      /* Smaller logo */
      .logo img {
          height: 30px; /* Smaller logo size */
      }
      
      /* Compact user controls */
      .user-controls {
          padding: 3px 6px; /* Minimal padding */
          gap: 5px; /* Smaller gap */
          font-size: 12px; /* Smaller text */
      }
      
      /* Smaller logout button */
      .logout-btn {
          padding: 2px 5px;
          font-size: 11px;
      }
	   
      /* Smaller footer overall */
      .app-footer {
           padding: var(--spacing-xs) var(--spacing-xs) calc(var(--spacing-xs)/2) var(--spacing-xs); /* Reduce padding, even less at bottom */
          font-size: var(--font-size-sm); /* Slightly smaller text */
      }

      /* More compact footer content */
      .footer-content {
          flex-direction: column-reverse; /* Reverse the order so links appear first */
          gap: var(--spacing-xs); /* Minimal gap between elements */
          align-items: center;
      }

      /* Adjust copyright text */
      .copyright {
          font-size: 10px; /* Smaller font size */
          text-align: center;
          margin-right: 0; /* Remove margin since it's now below */
          order: 2; /* Ensure it appears second */
		  line-height: 1.2; /* Tighter line height */
      }

      /* Adjust links for better fit */
      .footer-links {
          order: 1; /* Ensure links appear first */
          gap: var(--spacing-sm); /* Smaller gap between links */
           display: flex;
          flex-direction: row; /* Ensure horizontal layout */
          flex-wrap: nowrap; /* Prevent wrapping to new line */
          justify-content: center; /* Center the links */
          width: 100%; /* Take full width */
          overflow-x: auto; /* Allow horizontal scrolling if needed */
          -webkit-overflow-scrolling: touch; /* Smooth scrolling for iOS */
          padding-bottom: 3px; /* Small padding to accommodate scrollbar */
          margin-bottom: 0;
      }

      .footer-links a {
           font-size: 11px; /* Smaller font size */
          white-space: nowrap; /* Prevent text wrapping */
          padding: 2px 4px; /* Small padding for tap targets */
      }

      .side-navigation {
          width: calc(100% - var(--spacing-md)*2); /* Account for margins */
          min-width: auto; /* Allow it to size naturally */
          max-width: 100%; /* Ensure it doesn't exceed viewport */
          margin: var(--spacing-sm);
          height: auto;
          transition: height var(--transition-medium), min-height var(--transition-medium);
		  max-height: 50dvh; /* Limit height to half the viewport height */
          overflow: hidden; /* Hide overflow for the container itself */
          box-sizing: border-box; /* Include padding in width calculation */
      }

      .side-navigation.collapsed {
          height: 40px; /* Just enough to show the toggle button */
          min-height: 40px;
          width: calc(100% - var(--spacing-md)*2); /* Match parent width */
          min-width: auto;
          max-width: 100%;
          overflow: hidden;
          box-sizing: border-box;
      }
	   /* When collapsed */
      .side-navigation.collapsed .nav-content {
          max-height: 0; /* Hide content when collapsed */
      }

      .nav-controls {
          flex-shrink: 0; /* Prevent the controls from shrinking */
          position: sticky; /* Keep controls visible when scrolling */
          top: 0;
          background-color: transparent; /* Match container background */
          z-index: 2; /* Ensure it stays on top */
      }

      .nav-content {
          padding-top: 0;
		  max-height: calc(50dvh - 40px); /* Subtract header height */
          overflow-y: auto; /* Enable vertical scrolling */
          -webkit-overflow-scrolling: touch; /* Smooth scrolling for iOS */
          padding-bottom: var(--spacing-md); /* Add padding at bottom for better scrolling */
      }

      /* Content area adjustments for mobile */
      .content-area {
          margin: 0 var(--spacing-sm);
          width: calc(100% - var(--spacing-md)*2); /* Match navigation width */
          max-width: 100%;
          box-sizing: border-box;
      }

      .content-area.expanded {
          margin-left: 0;
          margin-top: var(--spacing-md);
      }
    .header-container {
        /* Change from column to row for better mobile layout */
        flex-direction: row;
        gap: var(--spacing-xs);
        justify-content: space-between;
        align-items: center;
    }
    
    .iframe-container {
		 height: auto; /* Remove fixed height */
          min-height: 400px; /* Set minimum height instead */
        /*height: 400px;*/
    }
    
    /* Remove contradicting footer-links styles that were causing issues */
    /* .footer-links {
        flex-direction: column;
        gap: var(--spacing-sm);
        align-items: center;
    } */
}

 @media (max-width: 480px) {
      .app-footer {
          padding: 3px 3px 2px 3px; /* Minimal padding */
      }

      .copyright {
          font-size: 9px; /* Even smaller */
          margin-top: 1px; /* Tiny space above copyright */
      }

      .footer-links {
          /*font-size: 11px; /* Even smaller */
          gap: 8px; /* Reduce gap further */
      }
	   .footer-links a {
          font-size: 10px; /* Even smaller */
      }
  }

 @media (max-width: 375px) {
      .app-footer {
          padding: 4px; /* Minimal padding */
      }

      .footer-content {
          flex-wrap: wrap; /* Allow wrapping if absolutely necessary */
          justify-content: center; /* Center content if it wraps */
      }

      .copyright {
          font-size: 11px; /* Even smaller */
      }

      .footer-links {
          font-size: 11px; /* Even smaller */
      }
      
      /* Very small screens need the button even closer to the edge */
      .header-container .side-navigation {
          right: calc(var(--spacing-sm) + 80px);
      }
  }

/* Course Selection Menu Styles */
.course-selection {
    padding: var(--spacing-md);
}

.course-selection h3 {
    color: var(--color-primary);
    margin-bottom: var(--spacing-md);
}

.course-list {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

.course-list li {
    margin-bottom: var(--spacing-sm);
}

.course-button {
    display: block;
    width: 100%;
    padding: var(--spacing-xs);
    background-color: white;
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-md);
    text-align: left;
    cursor: pointer;
    transition: background-color var(--transition-fast);
}

.course-button:hover {
    background-color: var(--color-background-hover);
}

.course-name {
    display: block;
    font-weight: var(--font-weight-bold);
    margin-bottom: var(--spacing-xs);
    color: var(--color-primary);
}

.cohort-name {
    display: block;
    font-size: var(--font-size-sm);
    color: var(--color-text-light);
}

.no-courses {
    padding: var(--spacing-md);
    text-align: center;
    color: var(--color-text-light);
    font-style: italic;
}

.loading-indicator {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: var(--spacing-lg);
    color: var(--color-text-light);
}

/* Program-Course Hierarchy Styles */
.bbuttonu {
    display: block;
    width: 100%;
    padding: var(--spacing-md);
    margin-bottom: var(--spacing-sm);
    background-color: var(--color-primary-light);
    color: white;
    border: none;
    border-radius: var(--border-radius-md);
    text-align: center;
    font-weight: var(--font-weight-bold);
    cursor: pointer;
    transition: background-color var(--transition-fast);
}

.bbuttonu:hover {
    background-color: var(--color-primary);
}

.bbutton {
    display: block;
    width: 100%;
    padding: var(--spacing-sm);
    margin-bottom: var(--spacing-xs);
    margin-left: var(--spacing-md);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-sm);
    text-align: left;
    cursor: pointer;
    transition: opacity var(--transition-fast);
}

.bbutton:hover {
    opacity: 0.9;
}

.no-programs-message {
    margin: var(--spacing-md) 0;
    padding: var(--spacing-sm);
    background-color: var(--color-background-hover);
    border-left: 3px solid var(--color-primary);
    color: var(--color-text);
    font-style: italic;
}

/* Case Completion Status Indicators */
#checkmark {
    display: inline-block;
    width: 16px;
    height: 16px;
    background: #fff;
    border-radius: 50%;
    -ms-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    position: relative;
    vertical-align: middle;
    margin-right: 5px;
}
#checkmark:before {
    content: "";
    position: absolute;
    width: 3px;
    height: 8px;
    background-color: darkgreen;
    left: 8px;
    top: 4px;
}
#checkmark:after {
    content: "";
    position: absolute;
    width: 3px;
    height: 3px;
    background-color: darkgreen;
    left: 5px;
    top: 9px;
}

#checkmark2 {
    display: inline-block;
    width: 16px;
    height: 16px;
    background: #fff;
    border-radius: 50%;
    -ms-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    position: relative;
    vertical-align: middle;
    margin-right: 5px;
}
#checkmark2:before {
    content: "";
    position: absolute;
    width: 2px;
    height: 10px;
    background-color: red;
    left: 7px;
    top: 3px;
}
#checkmark2:after {
    content: "";
    position: absolute;
    width: 2px;
    height: 10px;
    background-color: red;
    left: 7px;
    top: 3px;
    -ms-transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
}

#checkmark3 {
    display: inline-block;
    width: 16px;
    height: 16px;
    background: #fff;
    border-radius: 50%;
    -ms-transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
    position: relative;
    vertical-align: middle;
    margin-right: 5px;
}
#checkmark3:before {
    content: "";
    position: absolute;
    width: 2px;
    height: 10px;
    background-color: darkblue;
    left: 7px;
    top: 3px;
}
#checkmark3:after {
    content: "";
    position: absolute;
    width: 2px;
    height: 10px;
    background-color: darkblue;
    left: 7px;
    top: 3px;
}

#dot {
    display: inline-block;
    width: 12px;
    height: 12px;
    background: #a44fe0;
    border-radius: 50%;
    vertical-align: middle;
    margin-right: 5px;
}

/* Left Navigation Menu Styles */
.lesson-table {
    width: 100%;
    table-layout: fixed;
    text-align: left;
}

.course-title {
    font-size: 110%;
    font-weight: bold;
    line-height: 200%;
    display: block;
    margin-bottom: var(--spacing-sm);
}

.nav-header {
    font-size: 115%;
    font-weight: 700;
    color: var(--color-primary);
    margin-right: auto;
    text-align: left;
    padding-left: 5px;
    letter-spacing: 0.02em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: calc(100% - 40px);
}

.class-section {
    font-size: 110%;
    font-weight: bold;
    line-height: 150%;
    display: block;
    margin-top: var(--spacing-sm);
    color: var(--color-primary);
}

.class-list, .case-list {
    font-size: var(--font-size-sm);
    display: flex;
    align-items: center;
    line-height: 1.5;
    margin-left: var(--spacing-sm);
    flex-wrap: nowrap;
}

.red-flag {
    color: var(--color-danger);
}

.return-button {
    margin-bottom: var(--spacing-md);
    padding: var(--spacing-sm);
}

.return-button .course-name {
    margin-bottom: 0;
}

/* Legacy button style preserved for compatibility */
.bbutton2 {
    border-radius: var(--border-radius-md);
    border: 1px solid var(--color-border);
    width: 150px;
    height: 24px;
    text-align: center;
    font-size: var(--font-size-sm);
    background-color: var(--color-background);
    cursor: pointer;
    margin-bottom: var(--spacing-sm);
    color: var(--color-primary);
    transition: background-color var(--transition-fast);
}

.bbutton2:hover {
    background-color: var(--color-border);
}