/**
 * WiSeMantiQ Responsive Styles
 * Mobile-first responsive design
 */

/* CSS Variables for Design System */
:root {
  /* Colors */
  --primary: #1a73e8;
  --primary-hover: #1557b0;
  --primary-light: #e8f0fe;
  --success: #34a853;
  --danger: #ea4335;
  --warning: #fbbc04;
  --text-primary: #202124;
  --text-secondary: #5f6368;
  --text-light: #70757a;
  --border: #dfe1e5;
  --border-light: #f1f3f4;
  --background: #fff;
  --background-gray: #f8f9fa;
  
  /* Spacing */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  
  /* Typography */
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  
  /* Layout */
  --max-width: 1170px;
  --radius: 8px;
  --shadow: 0 1px 6px rgba(32, 33, 36, 0.28);
}

/* Fix Container Responsiveness */
.container {
  width: 100% !important;
  max-width: var(--max-width) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 16px !important;
  padding-right: 16px !important;
}

/* Remove Fixed Width Constraints */
body,
.navbar-fixed-top,
.navbar-fixed-bottom {
  min-width: 0 !important;
}

/* Responsive Breakpoints */

/* Small devices (phones, up to 576px) */
@media (max-width: 575px) {
  .container {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
  
  .navbar-brand {
    padding: 12px 0 !important;
  }
  
  .navbar-brand img {
    max-width: 140px;
  }
  
  /* Stack navigation vertically */
  .navbar-nav {
    margin-top: 8px;
  }
  
  .navbar-nav > li {
    display: block;
    float: none;
  }
  
  .navbar-nav > li > a {
    padding: 10px 15px;
  }
  
  /* Full-width buttons */
  .btn-block-mobile {
    display: block;
    width: 100%;
  }
}

/* Medium devices (tablets, 576px to 768px) */
@media (min-width: 576px) and (max-width: 767px) {
  .container {
    max-width: 540px !important;
  }
}

/* Large devices (desktops, 768px to 992px) */
@media (min-width: 768px) and (max-width: 991px) {
  .container {
    max-width: 720px !important;
  }
}

/* Extra large devices (large desktops, 992px to 1200px) */
@media (min-width: 992px) and (max-width: 1199px) {
  .container {
    max-width: 960px !important;
  }
}

/* XXL devices (1200px and up) */
@media (min-width: 1200px) {
  .container {
    max-width: var(--max-width) !important;
  }
}

/* Responsive Tables */
@media (max-width: 767px) {
  .table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

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

/* Responsive Embeds */
.embed-responsive {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  overflow: hidden;
}

.embed-responsive-16by9::before {
  padding-top: 56.25%;
}

.embed-responsive-4by3::before {
  padding-top: 75%;
}

/* Hide/Show Elements Based on Screen Size */
@media (max-width: 767px) {
  .hidden-xs {
    display: none !important;
  }
}

@media (min-width: 768px) {
  .visible-xs {
    display: none !important;
  }
}

/* Responsive Spacing */
@media (max-width: 767px) {
  .page-header {
    margin-bottom: 20px;
  }
  
  .lead {
    font-size: 14px;
  }
}

/* Responsive Navigation */
@media (max-width: 767px) {
  .navbar-collapse {
    max-height: none;
  }
  
  .navbar-toggle {
    display: block;
  }
  
  .navbar-collapse.collapse {
    display: none !important;
  }
  
  .navbar-collapse.collapse.in {
    display: block !important;
  }
}