/* Responsive Design System
   Mobile-first approach with consistent breakpoints and utilities */

:root {
  /* Breakpoints */
  --breakpoint-xs: 0;
  --breakpoint-sm: 576px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 992px;
  --breakpoint-xl: 1200px;
  --breakpoint-xxl: 1400px;
  
  /* Spacing scale for responsive design */
  --spacing-xs: 0.25rem;  /* 4px */
  --spacing-sm: 0.5rem;   /* 8px */
  --spacing-md: 1rem;     /* 16px */
  --spacing-lg: 1.5rem;   /* 24px */
  --spacing-xl: 2rem;     /* 32px */
  --spacing-2xl: 3rem;    /* 48px */
  --spacing-3xl: 4rem;    /* 64px */
  
  /* Font sizes - responsive scale */
  --font-size-xs: 0.75rem;    /* 12px */
  --font-size-sm: 0.875rem;   /* 14px */
  --font-size-base: 1rem;     /* 16px */
  --font-size-lg: 1.125rem;  /* 18px */
  --font-size-xl: 1.25rem;   /* 20px */
  --font-size-2xl: 1.5rem;   /* 24px */
  --font-size-3xl: 1.875rem; /* 30px */
  --font-size-4xl: 2.25rem;  /* 36px */
}

/* Base responsive typography */
html {
  font-size: 16px; /* Base font size */
}

body {
  font-size: var(--font-size-base);
  line-height: 1.5;
}

/* Mobile-first: Base styles for mobile */
@media (max-width: 575.98px) {
  html {
    font-size: 14px;
  }
  
  body {
    font-size: var(--font-size-sm);
    padding: var(--spacing-sm);
  }
  
  /* Smaller headings on mobile */
  h1 { font-size: var(--font-size-2xl); }
  h2 { font-size: var(--font-size-xl); }
  h3 { font-size: var(--font-size-lg); }
  h4 { font-size: var(--font-size-base); }
  h5, h6 { font-size: var(--font-size-sm); }
  
  /* Compact containers */
  .container,
  .container-fluid {
    padding-left: var(--spacing-sm);
    padding-right: var(--spacing-sm);
  }
  
  /* Stack elements vertically on mobile */
  .row > * {
    margin-bottom: var(--spacing-md);
  }
  
  /* Full-width buttons on mobile */
  .btn {
    width: 100%;
    margin-bottom: var(--spacing-sm);
  }
  
  /* Compact tables */
  table {
    font-size: var(--font-size-xs);
  }
  
  /* Hide less important elements */
  .d-mobile-none {
    display: none !important;
  }
}

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
  html {
    font-size: 15px;
  }
  
  .btn {
    width: auto;
  }
  
  .d-sm-block {
    display: block !important;
  }
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
  
  body {
    font-size: var(--font-size-base);
  }
  
  /* Show sidebar on tablets and up */
  .sidebar {
    display: block;
  }
  
  /* Two-column layouts */
  .row-md-2 > * {
    flex: 0 0 50%;
    max-width: 50%;
  }
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
  html {
    font-size: 16px;
  }
  
  /* Three-column layouts */
  .row-lg-3 > * {
    flex: 0 0 33.333333%;
    max-width: 33.333333%;
  }
  
  /* Wider containers */
  .container {
    max-width: 1140px;
  }
}

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
  .container {
    max-width: 1320px;
  }
}

/* Extra extra large devices (1400px and up) */
@media (min-width: 1400px) {
  .container {
    max-width: 1400px;
  }
}

/* Responsive utilities */
.responsive-text {
  font-size: clamp(var(--font-size-sm), 2.5vw, var(--font-size-base));
}

.responsive-heading {
  font-size: clamp(var(--font-size-xl), 4vw, var(--font-size-3xl));
}

.responsive-padding {
  padding: clamp(var(--spacing-sm), 2vw, var(--spacing-lg));
}

.responsive-margin {
  margin: clamp(var(--spacing-sm), 2vw, var(--spacing-lg));
}

/* Responsive images */
img {
  max-width: 100%;
  height: auto;
}

/* Responsive tables */
@media (max-width: 767.98px) {
  table {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  
  table thead {
    display: none;
  }
  
  table tbody tr {
    display: block;
    margin-bottom: var(--spacing-md);
    border: 1px solid var(--color-border);
    border-radius: 4px;
    padding: var(--spacing-sm);
  }
  
  table tbody td {
    display: block;
    text-align: right;
    padding: var(--spacing-xs) var(--spacing-sm);
    border: none;
    border-bottom: 1px solid var(--color-border);
  }
  
  table tbody td::before {
    content: attr(data-label) ": ";
    float: left;
    font-weight: bold;
    color: var(--color-text-muted);
  }
  
  table tbody td:last-child {
    border-bottom: none;
  }
}

/* Responsive forms */
@media (max-width: 575.98px) {
  .form-row {
    flex-direction: column;
  }
  
  .form-row > * {
    width: 100%;
    margin-bottom: var(--spacing-sm);
  }
  
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="number"],
  select,
  textarea {
    width: 100%;
    font-size: 16px; /* Prevent zoom on iOS */
  }
}

/* Responsive navigation */
@media (max-width: 991.98px) {
  .navbar-collapse {
    position: fixed;
    top: 0;
    left: -100%;
    width: 80%;
    max-width: 300px;
    height: 100vh;
    background: var(--color-bg-elevated);
    transition: left var(--transition-base) var(--ease-in-out);
    z-index: 1050;
    padding: var(--spacing-lg);
    box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);
  }
  
  .navbar-collapse.show {
    left: 0;
  }
  
  .navbar-toggler {
    display: block;
  }
}

/* Touch-friendly targets on mobile */
@media (max-width: 767.98px) {
  button,
  .btn,
  a.btn,
  input[type="button"],
  input[type="submit"],
  input[type="reset"] {
    min-height: 44px; /* Apple's recommended touch target size */
    min-width: 44px;
    padding: var(--spacing-sm) var(--spacing-md);
  }
  
  a:not(.btn) {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
}

/* Landscape orientation adjustments */
@media (max-width: 767.98px) and (orientation: landscape) {
  body {
    font-size: var(--font-size-sm);
  }
  
  .container {
    padding: var(--spacing-xs);
  }
}

/* Print styles */
@media print {
  * {
    background: transparent !important;
    color: #000 !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }
  
  a,
  a:visited {
    text-decoration: underline;
  }
  
  .no-print {
    display: none !important;
  }
}