/* ============================================
   Gravitee API Portal - Responsive Overrides
   ============================================ */

/* Tablet Styles (768px - 1024px) */
@media screen and (max-width: 1024px) {
  .layout__homepage {
    overflow-x: hidden;
  }

  .layout__header__homepage__background {
    padding: 2rem 1.5rem;
    min-height: auto;
  }

  .layout__header__homepage__title h1 {
    font-size: 2rem;
  }

  .layout__api {
    display: flex !important;
    flex-direction: column !important;
    gap: 1rem !important;
    width: 100% !important;
  }

  .layout__api__search {
    width: 100% !important;
  }

  .layout__api__actions {
    display: flex !important;
    gap: 0.75rem !important;
    width: 100% !important;
    justify-content: center;
  }

  .layout__header__container {
    padding: 0 1.5rem;
    flex-wrap: wrap;
  }

  .layout__nav {
    order: 3;
    width: 100%;
    margin-top: 1rem;
  }

  gv-nav nav {
    justify-content: center;
  }

  .layout__content__homepage {
    padding: 1.5rem;
  }

  gv-card-list {
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important;
    gap: 1.5rem !important;
  }

  /* Detail Page - Two Column Layout on Tablet */
  .page__content-with-aside {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    padding: 1.5rem;
  }

  .page__content-with-aside .main {
    width: 100%;
  }

  .page__content-with-aside .aside {
    width: 100%;
  }
}

/* Mobile Styles (up to 767px) */
@media screen and (max-width: 767px) {
  .layout__homepage,
  .layout {
    overflow-x: hidden;
    width: 100%;
  }

  /* Header Section */
  .layout__header__homepage__background {
    padding: 1.5rem 1rem;
    min-height: auto;
  }

  .layout__header__homepage__title {
    width: 100%;
  }

  .layout__header__homepage__title h1 {
    font-size: 1.75rem;
    text-align: center;
  }

  .layout__api {
    display: flex !important;
    flex-direction: column !important;
    gap: 1rem !important;
    align-items: stretch !important;
    width: 100% !important;
  }

  /* Hide any dividers/borders in the API section on mobile */
  .layout__api::before,
  .layout__api::after {
    display: none !important;
  }

  .layout__api > * {
    border: none !important;
  }

  .layout__api__search {
    width: 100% !important;
    margin-bottom: 0 !important;
    padding: 0 !important;
  }

  .layout__api__search gv-autocomplete,
  .layout__api__search gv-input {
    width: 100% !important;
    display: block !important;
  }

  .layout__api__search app-gv-search-api {
    width: 100% !important;
    display: block !important;
  }

  .layout__api__actions {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.75rem !important;
    width: 100% !important;
    border-top: none !important;
    padding-top: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  .layout__api__actions gv-button {
    width: 100% !important;
    display: block !important;
    margin: 0 !important;
  }

  .layout__api__actions gv-button button {
    width: 100% !important;
  }

  /* Navigation Header - Hide desktop nav, show hamburger */
  .layout__header__container {
    padding: 0 1rem;
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
  }

  .layout__header__logo {
    max-width: 150px;
    flex-shrink: 0;
  }

  /* Hide desktop navigation on mobile */
  .layout__nav {
    display: none !important;
  }

  .layout__nav__container {
    display: none !important;
  }

  /* API Detail Header */
  gv-header .header {
    padding: 1.5rem 1rem !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center;
    min-height: auto !important;
  }

  gv-header gv-identity-picture {
    margin-bottom: 1rem;
  }

  gv-header .title {
    width: 100%;
    margin-bottom: 1rem;
  }

  gv-header .title h1 {
    font-size: 1.5rem !important;
    word-break: break-word;
  }

  gv-header .version {
    font-size: 0.9rem;
    margin-bottom: 0.5rem;
  }

  gv-header .actions {
    width: 100%;
    display: flex;
    justify-content: center;
  }

  gv-header .actions gv-button {
    width: 100%;
    max-width: 300px;
  }

  gv-header .actions gv-button button {
    width: 100%;
  }

  /* Mobile Navigation Menu (gv-menu component) - Stack nav and search vertically */
  gv-menu[w-lt-768],
  gv-menu[w-lt-580] {
    display: block !important;
    width: 100% !important;
    --gv-menu-direction: column !important;
  }

  /* Force gv-menu to use full width and set CSS variables for shadow DOM */
  gv-menu {
    width: 100% !important;
    --nav-container-direction: column !important;
    --nav-container-gap: 1rem !important;
  }

  /* Override any inline styles on gv-menu */
  gv-menu[w-lt-768]::part(container),
  gv-menu::part(nav-container) {
    flex-direction: column !important;
    display: flex !important;
  }

  /* Target navigation within gv-menu */
  gv-menu gv-nav {
    width: 100% !important;
    margin-bottom: 0.75rem !important;
  }

  /* Target elements inside gv-menu's slot */
  gv-menu app-gv-search-api {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }

  gv-menu app-gv-search-api gv-autocomplete {
    width: 100% !important;
    max-width: 100% !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }

  gv-menu app-gv-search-api gv-input,
  gv-menu gv-autocomplete gv-input {
    width: 100% !important;
    max-width: 100% !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }

  /* Override any inline width styles */
  gv-menu app-gv-search-api gv-input[style*="width"] {
    width: 100% !important;
  }

  /* Ensure gv-nav has no extra padding that could offset alignment */
  gv-menu gv-nav {
    padding: 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
  }

  /* Content Area */
  .layout__content,
  .layout__content__homepage {
    padding: 1rem;
  }

  /* Tables and Subscriptions - Stack table containers vertically */
  section {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
  }

  .table-container {
    width: 100% !important;
    flex: none !important;
    margin-bottom: 1.5rem !important;
  }

  .table-between {
    margin: 1rem 0 !important;
    height: auto !important;
  }

  gv-table {
    width: 100% !important;
    display: block !important;
  }

  /* Pagination on mobile */
  .page__content__pagination,
  #pagination {
    width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    padding: 0.5rem 0 !important;
  }

  gv-pagination {
    width: 100% !important;
    display: block !important;
  }

  .page__content {
    width: 100%;
  }

  .page__content .title {
    font-size: 1.5rem;
    text-align: center;
    margin-bottom: 1.5rem;
  }

  /* Detail Page - Single Column Layout */
  .page__content-with-aside {
    display: flex !important;
    flex-direction: column !important;
    gap: 1.5rem;
    padding: 1rem;
  }

  .page__content-with-aside .main {
    width: 100% !important;
    max-width: 100% !important;
    flex: none !important;
    order: 1;
  }

  .page__content-with-aside .aside {
    width: 100% !important;
    max-width: 100% !important;
    flex: none !important;
    order: 2;
  }

  /* Subscribe Page - Stack content and aside vertically */
  app-api-subscribe .page__content {
    display: flex !important;
    flex-direction: column !important;
    gap: 1.5rem !important;
    padding: 1rem !important;
  }

  app-api-subscribe .api-subscribe__content {
    width: 100% !important;
    max-width: 100% !important;
    flex: none !important;
    order: 1;
  }

  app-api-subscribe .aside {
    width: 100% !important;
    max-width: 100% !important;
    flex: none !important;
    order: 2;
  }

  /* Page Boxes */
  .page__box {
    margin-bottom: 1rem;
    padding: 1rem;
  }

  .page__box-title {
    margin-bottom: 1rem;
  }

  .page__box-title .title {
    font-size: 1.25rem;
  }

  .page__box-content {
    font-size: 0.95rem;
    line-height: 1.6;
  }

  /* Markdown content - remove extra padding on mobile */
  app-gv-page-markdown .gv-page-container {
    padding: 0 !important;
    margin: 0 !important;
  }

  app-gv-page-markdown .markdown-content {
    padding: 0 !important;
    margin: 0 !important;
  }

  .gv-page-container.markdown {
    padding: 0 !important;
    margin: 0 !important;
  }

  /* Swagger Documentation - Mobile Responsive */
  app-gv-documentation .gv-documentation {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    overflow-x: hidden !important;
  }

  /* Hide the sidebar menu on mobile */
  app-gv-documentation .gv-documentation__menu {
    display: none !important;
  }

  /* Make swagger content full width */
  app-gv-documentation .gv-documentation__content,
  app-gv-documentation .gv-documentation__content_swagger {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0.5rem !important;
    position: relative !important;
    left: 0 !important;
  }

  /* Swagger UI responsive adjustments */
  app-gv-page-swaggerui .gv-page-container {
    width: 100% !important;
    padding: 0 !important;
    overflow-x: hidden !important;
  }

  app-gv-page-swaggerui .swagger-ui {
    max-width: 100% !important;
  }

  app-gv-page-swaggerui .swagger-ui .wrapper {
    padding: 0 0.5rem !important;
    max-width: 100% !important;
  }

  app-gv-page-swaggerui .swagger-ui .info {
    margin: 1rem 0 !important;
  }

  app-gv-page-swaggerui .swagger-ui .info .title {
    font-size: 1.5rem !important;
    word-wrap: break-word !important;
  }

  app-gv-page-swaggerui .swagger-ui .scheme-container {
    padding: 0.5rem !important;
  }

  app-gv-page-swaggerui .swagger-ui select {
    max-width: 100% !important;
    width: 100% !important;
  }

  /* Operation blocks */
  app-gv-page-swaggerui .swagger-ui .opblock {
    margin: 0.5rem 0 !important;
  }

  app-gv-page-swaggerui .swagger-ui .opblock-tag {
    font-size: 1rem !important;
    padding: 0.75rem !important;
    word-wrap: break-word !important;
  }

  app-gv-page-swaggerui .swagger-ui .opblock-summary {
    flex-wrap: wrap !important;
    padding: 0.5rem !important;
  }

  app-gv-page-swaggerui .swagger-ui .opblock-summary-path {
    word-break: break-all !important;
    max-width: 100% !important;
  }

  app-gv-page-swaggerui .swagger-ui .opblock-summary-description {
    font-size: 0.9rem !important;
    word-wrap: break-word !important;
  }

  /* Code blocks - enable horizontal scroll */
  app-gv-page-swaggerui .swagger-ui pre,
  app-gv-page-swaggerui .swagger-ui code {
    white-space: pre !important;
    overflow-x: auto !important;
    max-width: 100% !important;
    word-wrap: normal !important;
    word-break: normal !important;
    font-size: 0.75rem !important;
  }

  app-gv-page-swaggerui .swagger-ui .highlight-code pre {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  app-gv-page-swaggerui .swagger-ui .model-example {
    overflow-x: auto !important;
  }

  /* Responses Table - Card Layout for Mobile */
  app-gv-page-swaggerui .swagger-ui .responses-table {
    display: block !important;
    width: 100% !important;
  }

  /* Hide table header on mobile */
  app-gv-page-swaggerui .swagger-ui .responses-table thead {
    display: none !important;
  }

  /* Make each row a card */
  app-gv-page-swaggerui .swagger-ui .responses-table tbody {
    display: block !important;
    width: 100% !important;
  }

  app-gv-page-swaggerui .swagger-ui .responses-table tr {
    display: block !important;
    width: 100% !important;
    margin-bottom: 1rem !important;
    border: 1px solid #e0e0e0 !important;
    border-radius: 6px !important;
    overflow: hidden !important;
  }

  app-gv-page-swaggerui .swagger-ui .responses-table td {
    display: block !important;
    width: 100% !important;
    border: none !important;
    padding: 0 !important;
  }

  /* Status code - prominent header */
  app-gv-page-swaggerui .swagger-ui .response-col_status {
    padding: 0.75rem !important;
    font-weight: 700 !important;
    font-size: 1.1rem !important;
    background: #f7f7f7 !important;
    border-bottom: 1px solid #e0e0e0 !important;
  }

  /* Description column */
  app-gv-page-swaggerui .swagger-ui .response-col_description {
    padding: 0.75rem !important;
  }

  /* Hide Links column if empty */
  app-gv-page-swaggerui .swagger-ui .response-col_links {
    display: none !important;
  }

  /* Parameters Table - keep scrollable */
  app-gv-page-swaggerui .swagger-ui .parameters {
    display: block !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    width: 100% !important;
  }

  app-gv-page-swaggerui .swagger-ui .parameters table {
    min-width: 500px !important;
  }

  app-gv-page-swaggerui .swagger-ui .parameters-col_name,
  app-gv-page-swaggerui .swagger-ui .parameters-col_description {
    min-width: 150px !important;
  }

  /* Model/Schema section */
  app-gv-page-swaggerui .swagger-ui .models {
    margin-top: 1rem !important;
  }

  app-gv-page-swaggerui .swagger-ui .model-container {
    margin: 0.5rem 0 !important;
  }

  /* Tab controls */
  app-gv-page-swaggerui .swagger-ui .tab {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 0.5rem !important;
    margin-bottom: 0.5rem !important;
  }

  app-gv-page-swaggerui .swagger-ui .tabitem button {
    font-size: 0.85rem !important;
    padding: 0.5rem 0.75rem !important;
  }

  /* Response sections */
  app-gv-page-swaggerui .swagger-ui .response-col_description {
    padding: 0.75rem !important;
  }

  app-gv-page-swaggerui .swagger-ui .response-col_description__inner {
    margin-bottom: 1rem !important;
  }

  /* Media type controls */
  app-gv-page-swaggerui .swagger-ui .response-control-media-type,
  app-gv-page-swaggerui .swagger-ui .response-controls {
    margin: 0.75rem 0 !important;
  }

  app-gv-page-swaggerui .swagger-ui .response-control-media-type__title {
    display: block !important;
    margin-bottom: 0.5rem !important;
    font-weight: 600 !important;
  }

  app-gv-page-swaggerui .swagger-ui .content-type-wrapper {
    margin: 0.5rem 0 !important;
  }

  app-gv-page-swaggerui .swagger-ui .content-type-wrapper select {
    padding: 0.5rem !important;
    width: 100% !important;
  }

  /* Model example spacing */
  app-gv-page-swaggerui .swagger-ui .model-example {
    margin-top: 0.75rem !important;
  }

  /* Code example blocks */
  app-gv-page-swaggerui .swagger-ui .example,
  app-gv-page-swaggerui .swagger-ui .body-param__example {
    padding: 0.75rem !important;
    border-radius: 4px !important;
    margin: 0.5rem 0 !important;
  }

  /* Response table cells */
  app-gv-page-swaggerui .swagger-ui .response-col_status {
    padding: 0.75rem 0.5rem !important;
    font-weight: 600 !important;
  }

  /* Parameters section */
  app-gv-page-swaggerui .swagger-ui .parameters-col_name,
  app-gv-page-swaggerui .swagger-ui .parameters-col_description {
    padding: 0.75rem !important;
  }

  app-gv-page-swaggerui .swagger-ui .parameter__name {
    margin-bottom: 0.25rem !important;
    font-weight: 600 !important;
  }

  app-gv-page-swaggerui .swagger-ui .parameter__type,
  app-gv-page-swaggerui .swagger-ui .parameter__in {
    font-size: 0.8rem !important;
    margin-top: 0.25rem !important;
  }

  /* Opblock sections */
  app-gv-page-swaggerui .swagger-ui .opblock-section {
    padding: 0.75rem !important;
  }

  app-gv-page-swaggerui .swagger-ui .opblock-section-header {
    margin-bottom: 0.75rem !important;
  }

  app-gv-page-swaggerui .swagger-ui .opblock-title {
    margin: 0 0 0.5rem 0 !important;
  }

  /* Info Section in Aside */
  .info {
    margin-bottom: 1.5rem;
  }

  .info .title {
    font-size: 1.1rem;
    margin-bottom: 0.75rem;
  }

  .info__miscellaneous {
    list-style: none;
    padding: 0;
  }

  .info__miscellaneous_item {
    padding: 0.5rem 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    font-size: 0.9rem;
    word-break: break-word;
  }

  .info__miscellaneous_item:last-child {
    border-bottom: none;
  }

  .info__miscellaneous_item span {
    font-weight: 600;
    display: inline-block;
    margin-right: 0.5rem;
  }

  .info__resources {
    margin-top: 0.75rem;
  }

  .info__resources gv-button {
    width: 100%;
  }

  .info__resources gv-button a {
    width: 100%;
    word-break: break-all;
    font-size: 0.85rem;
    padding: 0.75rem;
    display: block;
  }

  /* API Cards */
  gv-card-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 1rem !important;
    grid-template-columns: none !important;
  }

  gv-card-full {
    width: 100% !important;
    max-width: 100% !important;
  }

  gv-card-full .card {
    display: flex;
    flex-direction: column;
    padding: 1rem;
  }

  gv-card-full .image {
    margin-bottom: 1rem;
  }

  gv-card-full .content {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }

  gv-card-full .version {
    margin-top: 0.5rem;
  }

  gv-card-full .description {
    margin-top: 1rem;
    font-size: 0.9rem;
  }

  /* Footer */
  .layout__footer {
    padding: 1.5rem 1rem;
  }

  .layout__footer__bottom ul {
    flex-direction: column;
    gap: 1rem;
    text-align: center;
  }

  .layout__footer__bottom li {
    width: 100%;
  }
}

/* Extra Small Mobile (up to 380px) */
@media screen and (max-width: 380px) {
  .layout__header__homepage__title h1 {
    font-size: 1.5rem;
  }

  .layout__header__logo {
    max-width: 120px;
  }

  .page__content .title {
    font-size: 1.25rem;
  }

  gv-card-full .card {
    padding: 0.75rem;
  }

  .layout__content,
  .layout__content__homepage {
    padding: 0.75rem;
  }

  .layout__footer {
    padding: 1rem 0.75rem;
  }

  .page__content-with-aside {
    padding: 0.75rem;
  }

  .page__box {
    padding: 0.75rem;
  }

  gv-header .title h1 {
    font-size: 1.25rem !important;
  }
}

/* Utility Classes for Shadow DOM Elements */
@media screen and (max-width: 767px) {
  /* Ensure buttons within shadow DOM are full width on mobile */
  gv-button::part(button) {
    width: 100%;
  }

  /* Ensure input fields are responsive */
  gv-input::part(input) {
    width: 100%;
  }
}

/* Landscape Orientation Adjustments */
@media screen and (max-width: 767px) and (orientation: landscape) {
  .layout__header__homepage__background {
    padding: 1rem;
  }

  .layout__api__actions {
    flex-direction: row;
  }

  .layout__api__actions gv-button {
    width: auto;
    flex: 1;
  }

  gv-header .header {
    flex-direction: row !important;
    align-items: center !important;
  }

  gv-header .title {
    text-align: left;
  }

  .page__content-with-aside {
    flex-direction: row;
  }

  .page__content-with-aside .main {
    flex: 2;
  }

  .page__content-with-aside .aside {
    flex: 1;
  }
}

/* Prevent horizontal scroll */
* {
  box-sizing: border-box;
}

.layout__homepage,
.layout,
.layout__content,
.layout__content__homepage {
  max-width: 100%;
  overflow-x: hidden;
}

/* Ensure images and SVGs are responsive */
img,
svg {
  max-width: 100%;
  height: auto;
}

/* Ensure long URLs and text don't break layout */
a,
span {
  word-wrap: break-word;
  overflow-wrap: break-word;
}