/* ============================================
   ULTIMATE AVIATION CSS TEMPLATE
   Based on https://ultimate-aviation.net/
   ============================================ */

/*----------------------
# CSS Variables (Design Tokens)
----------------------*/
:root {
  /* Colors */
  --ua-primary: #193b59;
  --ua-primary-dark: #283867;
  --ua-text: #515151;
  --ua-text-dark: #193b59;
  --ua-bg-light: #eeeeee;
  --ua-bg-white: #ffffff;
  --ua-border: #b8c4ce;
  --ua-border-light: #dbe2e6;
  
  /* Typography */
  --ua-font-family: "Ubuntu UA", sans-serif;
  --ua-font-weight-light: 300;
  --ua-font-weight-normal: 400;
  --ua-font-weight-medium: 500;
  --ua-font-weight-bold: 700;
  
  /* Spacing */
  --ua-spacing-xs: 5px;
  --ua-spacing-sm: 10px;
  --ua-spacing-md: 20px;
  --ua-spacing-lg: 30px;
  --ua-spacing-xl: 50px;
  
  /* Transitions */
  --ua-transition-fast: 0.25s ease;
  --ua-transition-normal: 0.45s ease;
  --ua-transition-slow: 0.8s cubic-bezier(0.165, 0.84, 0.44, 1);
  
  /* Shadows */
  --ua-shadow-sm: 0 0 20px rgba(0, 0, 0, 0.2);
  --ua-shadow-md: 0 0 35px rgba(0, 0, 0, 0.2);
  --ua-shadow-lg: 1px 1px 8px rgba(0, 0, 0, 0.2);
  
  /* Max Widths */
  --ua-max-width: 1260px;
  --ua-max-width-narrow: 700px;
}

/*----------------------
# Fonts
----------------------*/
/* Using system fonts with Ubuntu as fallback - fonts will load from Google Fonts if available */
@import url('https://fonts.googleapis.com/css2?family=Ubuntu:wght@300;400;500;700&display=swap');

/* Fallback font stack */
@font-face {
  font-family: "Ubuntu UA";
  font-style: normal;
  font-weight: 300;
  src: local("Ubuntu Light"), local("Ubuntu-Light"),
       url('https://fonts.gstatic.com/s/ubuntu/v20/4iCv6KVjbNBYlgoC1CzTtGaKH4Q.woff2') format('woff2'),
       url('https://fonts.gstatic.com/s/ubuntu/v20/4iCv6KVjbNBYlgoC1CzTtGaKH4Q.woff') format('woff');
  font-display: swap;
}
@font-face {
  font-family: "Ubuntu UA";
  font-style: normal;
  font-weight: 400;
  src: local("Ubuntu"), local("Ubuntu-Regular"),
       url('https://fonts.gstatic.com/s/ubuntu/v20/4iCs6KVjbNBYlgo6ewTxv0w.woff2') format('woff2'),
       url('https://fonts.gstatic.com/s/ubuntu/v20/4iCs6KVjbNBYlgo6ewTxv0w.woff') format('woff');
  font-display: swap;
}
@font-face {
  font-family: "Ubuntu UA";
  font-style: normal;
  font-weight: 500;
  src: local("Ubuntu Medium"), local("Ubuntu-Medium"),
       url('https://fonts.gstatic.com/s/ubuntu/v20/4iCv6KVjbNBYlgoCjC3TtGaKH4Q.woff2') format('woff2'),
       url('https://fonts.gstatic.com/s/ubuntu/v20/4iCv6KVjbNBYlgoCjC3TtGaKH4Q.woff') format('woff');
  font-display: swap;
}
@font-face {
  font-family: "Ubuntu UA";
  font-style: normal;
  font-weight: 700;
  src: local("Ubuntu Bold"), local("Ubuntu-Bold"),
       url('https://fonts.gstatic.com/s/ubuntu/v20/4iCv6KVjbNBYlgoCxCvTtGaKH4Q.woff2') format('woff2'),
       url('https://fonts.gstatic.com/s/ubuntu/v20/4iCv6KVjbNBYlgoCxCvTtGaKH4Q.woff') format('woff');
  font-display: swap;
}

/*----------------------
# Global Styles
----------------------*/
* {
  box-sizing: border-box;
}

html {
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--ua-font-family), "Ubuntu", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color: var(--ua-text);
  font-weight: var(--ua-font-weight-light);
  line-height: 1.4;
  overflow-x: hidden !important;
  margin: 0;
  padding: 0;
  /* Safe area insets for notched devices */
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}

/* Push main page content below the fixed navigation bar on app pages */
body[data-active-nav] {
  padding-top: 135px; /* moved down slightly more for extra clearance */
}

/*----------------------
# Typography
----------------------*/
h1 {
  color: var(--ua-text-dark);
  font-size: 87px;
  margin: 18px 0;
  line-height: 1;
  font-weight: var(--ua-font-weight-normal);
}

h2 {
  color: var(--ua-text-dark);
  font-size: 50px;
  margin: 20px 0;
  line-height: 1.1;
  font-weight: var(--ua-font-weight-normal);
}

h3 {
  color: var(--ua-text-dark);
  font-size: 33px;
  font-weight: var(--ua-font-weight-medium);
  line-height: 1.25;
  margin: 0;
}

h4 {
  color: var(--ua-text-dark);
  font-size: 21px;
  line-height: 1.2;
}

p {
  color: var(--ua-text);
  font-weight: var(--ua-font-weight-light);
  line-height: 1.4;
}

a,
a:active,
a:focus {
  outline: none;
}

a,
a:active,
a:focus,
a:hover,
a:visited {
  color: var(--ua-text-dark);
  text-decoration: none;
}

/*----------------------
# Buttons
----------------------*/
.button {
  text-decoration: none;
  text-transform: uppercase;
  background-color: transparent;
  letter-spacing: 1px;
  border: 2.5px solid;
  padding: 5px 22px;
  font-size: 0.9em;
  text-shadow: none;
  box-shadow: none;
  display: inline-block;
  font-weight: var(--ua-font-weight-normal);
  position: relative;
  z-index: 1;
  transition: color var(--ua-transition-slow), border var(--ua-transition-slow);
  cursor: pointer;
  min-height: 44px; /* Minimum touch target size */
  min-width: 44px; /* Minimum touch target size */
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.button::after {
  content: "";
  display: block;
  width: calc(100% + 0.25px);
  height: calc(100% + 0.1px);
  position: absolute;
  left: 0;
  top: 0;
  z-index: -1;
  transform: scaleX(0);
  transition: transform 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) 0s;
  transform-origin: right;
}

.button:hover::after {
  transform: scaleX(1);
  transform-origin: left;
}

/* Button Variants */
.button.blue {
  color: #fff;
  background-color: var(--ua-primary);
  border-color: var(--ua-primary);
}

.button.blue:hover {
  border-color: var(--ua-primary);
  color: var(--ua-primary);
}

.button.blue::after {
  background-color: #fff;
}

.button.white {
  color: var(--ua-primary);
  background-color: #fff;
  border-color: #fff;
}

.button.white:hover {
  color: #fff;
}

.button.white::after {
  background-color: var(--ua-primary);
  width: calc(100% + 6px);
  height: calc(100% + 6px);
  top: -3px;
  left: -3px;
}

.button.outline {
  color: var(--ua-primary);
  border-color: var(--ua-primary);
}

.button.outline:hover {
  border-color: var(--ua-primary);
  color: #fff;
}

.button.outline::after {
  background-color: var(--ua-primary);
}

.button.white-outline {
  color: #fff;
  border-color: #fff;
  background-color: transparent;
}

.button.white-outline:hover {
  border-color: #fff;
  color: var(--ua-primary);
}

.button.white-outline::after {
  background-color: #fff;
}

/*----------------------
# Layout Utilities
----------------------*/
.max-width {
  max-width: var(--ua-max-width);
  margin: 0 auto;
  padding: var(--ua-spacing-lg);
}

.clear {
  clear: both;
}

/*----------------------
# Form Elements
----------------------*/
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="search"],
input[type="password"],
input[type="date"],
input[type="time"],
input[type="datetime-local"],
input[type="number"],
textarea,
select {
  border: 1px solid var(--ua-border-light);
  color: var(--ua-primary);
  font-weight: var(--ua-font-weight-light);
  border-radius: 0;
  padding: 12px 15px;
  width: 100%;
  font-family: var(--ua-font-family);
  font-size: 16px; /* Prevent zoom on iOS */
  min-height: 44px; /* Minimum touch target size */
  box-sizing: border-box;
}

input::placeholder,
textarea::placeholder {
  color: var(--ua-primary);
  opacity: 1;
}

/*----------------------
# Cards & Containers
----------------------*/
.card {
  background-color: #fff;
  box-shadow: var(--ua-shadow-md);
  padding: var(--ua-spacing-lg);
  margin: var(--ua-spacing-lg) 0;
}

.service-block {
  width: calc(50% - 35px);
  background-color: #fff;
  box-shadow: var(--ua-shadow-md);
  margin: var(--ua-spacing-lg) 0;
  position: relative;
  padding-bottom: 64px;
}

.service-block .featimg {
  width: 100%;
  height: 350px;
  background-size: cover;
  background-position: center;
  transition: transform 1s cubic-bezier(0.165, 0.84, 0.44, 1) 0s;
}

.service-block:hover .featimg {
  transform: scale(1.05);
}

.service-block h3 {
  padding: 5px 45px 0;
  margin-top: 33px;
  margin-bottom: var(--ua-spacing-md);
}

.service-block p {
  padding: 0 45px;
  margin-bottom: var(--ua-spacing-xl);
}

/*----------------------
# Navigation
----------------------*/
.nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 999;
  padding: var(--ua-spacing-md) var(--ua-spacing-lg);
  transition: var(--ua-transition-normal);
  background-color: var(--ua-primary);
  margin: 0;
}

.nav.scroll {
  background-color: #fff;
  box-shadow: var(--ua-shadow-lg);
}

.nav.nav-force-light,
.nav.nav-force-light.scroll {
  background-color: var(--ua-primary);
  box-shadow: var(--ua-shadow-sm);
}

.nav-link {
  position: relative;
  color: #fff;
  font-size: 15px;
  padding: 10px 12px;
  transition: var(--ua-transition-fast);
}

.nav-link:hover {
  background-color: var(--ua-primary-dark);
  color: #fff !important;
}

.nav.scroll .nav-link {
  color: var(--ua-primary) !important;
}

.nav.scroll .nav-link:hover {
  color: #fff !important;
}

.nav.nav-force-light .nav-link,
.nav.nav-force-light.scroll .nav-link {
  color: #fff !important;
}

.nav-link::after {
  content: "";
  display: block;
  position: absolute;
  bottom: 6px;
  left: 12px;
  height: 2px;
  width: calc(100% - 24px);
  opacity: 0;
  background-color: #fff;
  transform-origin: right top;
  transform: scale(0, 1);
  transition: transform 0.3s ease-out, opacity 0.1s ease;
}

.nav.scroll .nav-link::after {
  background-color: var(--ua-primary);
}

.nav.nav-force-light .nav-link::after,
.nav.nav-force-light.scroll .nav-link::after {
  background-color: #fff;
}

.nav-link:hover::after,
.nav-link.active::after {
  transform-origin: left top;
  transform: scale(1, 1);
  opacity: 1;
}

.nav.scroll .nav-link.active::after {
  background-color: var(--ua-primary);
}

/*----------------------
# Sections
----------------------*/
.section {
  padding: var(--ua-spacing-xl) 0;
}

.section-light {
  background-color: var(--ua-bg-light);
}

.section-dark {
  background-color: var(--ua-primary);
  color: #fff;
}

.section-dark h2,
.section-dark h3,
.section-dark h4 {
  color: #fff;
}

.section-dark p {
  color: #fff;
}

/*----------------------
# Two Column Layout
----------------------*/
.col2 {
  margin: var(--ua-spacing-xl) 0;
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.col2 .left {
  width: 45%;
  padding: var(--ua-spacing-xl) 0;
}

.col2 .right {
  width: calc(55% - 70px);
  min-height: 350px;
  background-size: cover;
  background-position: center;
  margin-left: 70px;
  align-self: stretch;
}

/*----------------------
# Responsive Design
----------------------*/
/* Mobile Navigation */
.mobile-menu-toggle {
  display: none; /* Hidden by default, shown when needed */
  background: none;
  border: none;
  color: white;
  font-size: 24px;
  cursor: pointer;
  padding: 10px;
  z-index: 1001;
  position: relative;
  min-width: 44px;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  transition: all var(--ua-transition-fast);
  -webkit-tap-highlight-color: transparent;
}

.mobile-menu-toggle:hover {
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 4px;
}

.mobile-menu-toggle:focus {
  outline: 2px solid rgba(255, 255, 255, 0.5);
  outline-offset: 2px;
  border-radius: 4px;
}

.nav.scroll .mobile-menu-toggle {
  color: var(--ua-primary);
}

.nav.scroll .mobile-menu-toggle:hover {
  background-color: rgba(25, 59, 89, 0.1);
}

.nav-links {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: nowrap;
}

/* On mobile screens, override to hide by default */
@media (max-width: 768px) {
  .nav-links:not(.active),
  #navLinks:not(.active) {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
  }
  
  /* Prevent any sidebar-like positioning */
  .nav-links,
  #navLinks {
    position: fixed !important;
    top: 80px !important;
    left: 0 !important;
    right: 0 !important;
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    transform: none !important;
  }
}

/* Show mobile menu toggle when nav doesn't fit */
.nav.menu-overflow .mobile-menu-toggle {
  display: flex !important;
}

/* Hide nav-links by default when in menu-overflow mode */
.nav.menu-overflow .nav-links {
  display: none !important;
  position: fixed !important;
  top: 80px !important; /* Position below nav bar */
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  background-color: var(--ua-primary) !important;
  flex-direction: column !important;
  padding: 20px !important;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1) !important;
  z-index: 1000 !important;
  max-height: calc(100vh - 100px) !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  gap: 0 !important;
  margin: 0 !important;
  transform: none !important;
}

/* Show nav-links only when active class is present */
.nav.menu-overflow .nav-links.active {
  display: flex !important;
}

.nav.menu-overflow .nav-links .nav-link {
  width: 100%;
  padding: 15px;
  text-align: left;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  color: #fff;
  min-height: 44px;
  display: flex;
  align-items: center;
}

.nav.menu-overflow.scroll .nav-links {
  background-color: var(--ua-primary);
}

.nav.menu-overflow.scroll .nav-links .nav-link {
  color: #fff !important;
}

@media (max-width: 1024px) {
  h1 {
    font-size: 70px;
  }
  
  h2 {
    font-size: 42px;
  }
  
  .col2 .left,
  .col2 .right {
    width: 100%;
    margin-left: 0;
  }
  
  .service-block {
    width: calc(50% - 10px);
  }
}

@media (max-width: 768px) {
  h1 {
    font-size: 55px;
  }
  
  h2 {
    font-size: 37px;
  }
  
  .service-block {
    width: 100%;
  }
  
  .col2 .left {
    padding: 0;
  }

  /* Mobile Navigation - Always show toggle on small screens */
  .mobile-menu-toggle {
    display: flex !important;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    padding: 10px;
    pointer-events: auto;
    cursor: pointer;
  }
  
  /* On mobile, always hide nav-links by default, show only when active */
  #navLinks,
  .nav-links {
    display: none !important;
    position: fixed !important;
    top: auto !important;
    bottom: auto !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    background-color: var(--ua-primary) !important;
    flex-direction: column !important;
    padding: 20px !important;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1) !important;
    z-index: 1000 !important;
    max-height: calc(100vh - 100px) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    gap: 0 !important;
    margin: 0 !important;
    transform: none !important;
  }
  
  /* Calculate top position based on nav height */
  #navLinks,
  .nav-links {
    top: 80px !important; /* Adjust based on your nav height */
  }
  
  /* Show nav-links only when active class is present */
  #navLinks.active,
  .nav-links.active {
    display: flex !important;
  }
  
  /* Ensure menu-overflow state also hides nav-links */
  .nav.menu-overflow #navLinks:not(.active),
  .nav.menu-overflow .nav-links:not(.active) {
    display: none !important;
  }
  
  .nav.menu-overflow #navLinks.active,
  .nav.menu-overflow .nav-links.active {
    display: flex !important;
  }

  .nav-links .nav-link {
    width: 100%;
    padding: 15px;
    text-align: left;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    color: #fff;
    min-height: 44px;
    display: flex;
    align-items: center;
  }

  .nav.scroll .nav-links .nav-link {
    color: #fff !important;
  }

  .nav.scroll .nav-links .nav-link::after {
    background-color: #fff;
  }

  /* Mobile Header Adjustments */
  .management-header h1,
  .dashboard-header h1,
  .reports-header h1 {
    font-size: 24px;
  }

  .management-header .max-width,
  .dashboard-header .max-width,
  .reports-header .max-width {
    flex-direction: column;
    align-items: flex-start;
    gap: 15px;
  }

  .user-info {
    width: 100%;
    justify-content: space-between;
  }

  /* Mobile Forms */
  .entry-form,
  .form-grid,
  .report-form {
    grid-template-columns: 1fr;
  }

  .form-group.full-width {
    grid-column: 1;
  }

  /* Mobile Tables */
  .results-table,
  .entries-table,
  .data-table,
  .users-table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    width: 100%;
  }

  .results-table thead,
  .entries-table thead,
  .data-table thead,
  .users-table thead {
    display: none;
  }

  .results-table tbody,
  .entries-table tbody,
  .data-table tbody,
  .users-table tbody {
    display: block;
  }

  .results-table tr,
  .entries-table tr,
  .data-table tr,
  .users-table tr {
    display: block;
    margin-bottom: 15px;
    border: 1px solid var(--ua-border-light);
    padding: 15px;
    background-color: white;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    border-radius: 4px;
  }

  .results-table td,
  .entries-table td,
  .data-table td,
  .users-table td {
    display: block;
    text-align: right;
    padding: 10px 0;
    border-bottom: 1px solid var(--ua-bg-light);
    position: relative;
    padding-left: 50%;
  }

  .results-table td:last-child,
  .entries-table td:last-child,
  .data-table td:last-child,
  .users-table td:last-child {
    border-bottom: none;
  }

  .results-table td:before,
  .entries-table td:before,
  .data-table td:before,
  .users-table td:before {
    content: attr(data-label);
    position: absolute;
    left: 0;
    width: 45%;
    text-align: left;
    font-weight: var(--ua-font-weight-medium);
    color: var(--ua-primary);
    font-size: 14px;
  }

  /* Mobile Stats Grid */
  .stats-grid,
  .dashboard-stats {
    grid-template-columns: 1fr;
  }

  .stat-card .stat-value {
    font-size: 32px;
  }

  /* Mobile Content Cards */
  .content-card {
    padding: 20px;
  }

  .dashboard-content {
    grid-template-columns: 1fr;
  }

  /* Mobile Buttons */
  .form-actions,
  .report-actions {
    flex-direction: column;
    gap: 10px;
  }

  .form-actions .button,
  .report-actions .button {
    width: 100%;
    min-height: 44px;
    padding: 12px 20px;
  }

  /* Ensure all interactive elements meet touch target requirements */
  a, button, input[type="checkbox"], input[type="radio"], select {
    min-height: 44px;
    min-width: 44px;
  }

  /* Links in navigation and buttons */
  .nav-link {
    min-height: 44px;
    display: flex;
    align-items: center;
  }

  /* Mobile Padding Adjustments */
  .max-width {
    padding: 0 15px;
  }

  /* Slightly smaller offset for the more compact mobile nav */
  body[data-active-nav] {
    padding-top: 92px; /* moved down slightly more for extra clearance on mobile */
  }

  .nav {
    padding: 10px 0;
    padding-left: max(15px, env(safe-area-inset-left));
    padding-right: max(15px, env(safe-area-inset-right));
  }

  .logo {
    width: 150px !important;
    height: 40px !important;
  }

  /* Improve mobile scrolling */
  body {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
  }

  /* Better spacing for mobile */
  .max-width {
    padding-left: max(15px, env(safe-area-inset-left));
    padding-right: max(15px, env(safe-area-inset-right));
  }
}

@media (max-width: 480px) {
  h1 {
    font-size: 32px;
  }
  
  h2 {
    font-size: 24px;
  }

  .management-header h1,
  .dashboard-header h1,
  .reports-header h1 {
    font-size: 20px;
  }

  .management-header,
  .dashboard-header,
  .reports-header {
    padding: 60px 0 20px 0;
  }

  .content-card {
    padding: 15px;
  }

  .stat-card {
    padding: 20px;
  }
}

/*----------------------
# Utility Classes
----------------------*/
.text-center {
  text-align: center;
}

.text-right {
  text-align: right;
}

.text-left {
  text-align: left;
}

.mt-0 { margin-top: 0; }
.mt-1 { margin-top: var(--ua-spacing-xs); }
.mt-2 { margin-top: var(--ua-spacing-sm); }
.mt-3 { margin-top: var(--ua-spacing-md); }
.mt-4 { margin-top: var(--ua-spacing-lg); }
.mt-5 { margin-top: var(--ua-spacing-xl); }

.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: var(--ua-spacing-xs); }
.mb-2 { margin-bottom: var(--ua-spacing-sm); }
.mb-3 { margin-bottom: var(--ua-spacing-md); }
.mb-4 { margin-bottom: var(--ua-spacing-lg); }
.mb-5 { margin-bottom: var(--ua-spacing-xl); }