/* fullwidth-mobile.css */
/* Some styles to alter pages that should display full-width (no side margins/padding) on mobile */
/* Examples include: news article page, flipnote view page */
/* Changes to the layout under "xs-only" breakpoint */

/*
.body-fullwidth-mobile {
  padding-left: 0px !important;
  padding-right: 0px !important;
  padding-top: 60px !important;
  padding-bottom: 0px !important;
}
*/

@media (max-width: 575.98px) {
    /* Flipnote View Page specifics here */
    .flipnote-player-card {
        border-top: 0 !important;
    }
    /* Added due to our Vapor theme */
    .flipnote-container {
        border: none;
        border-radius: 0px;
    }
    /* Sticky Flipnote Player, except when the software keyboard is open */
    /*
  @media (max-aspect-ratio: 3/4) {
    .flipnote-player-card {
      position: -webkit-sticky;
      position: sticky;
      top: 0;
      z-index: 1;
      top: 60px;
    }
  }
	*/
    /* Global rules for fullwidth-on-mobile pages */
    .card,
    .card-header:first-child,
    .card > *:last-child,
    .card > *:first-child {
        border-radius: 0px !important;
    }
    .row {
        margin-left: 0px !important;
        margin-right: 0px !important;
    }
    body > .row {
        max-width: unset;
    }
    div.panel-common {
        border-left: none !important;
        border-right: none !important;
    }
    body.body-fullwidth-mobile {
        padding: 60px 0 0 0 !important;
    }

    /* Discord Webhook Queue - Mobile Responsive */
    .webhook-queue-item {
        flex-direction: column;
        align-items: stretch !important;
        padding: 0.75rem !important;
        gap: 0.75rem;
    }

    .webhook-queue-item > div {
        display: flex;
        align-items: center;
        gap: 0.75rem;
    }

    .webhook-queue-thumbnail {
        width: 40px !important;
        height: 30px !important;
        margin-right: 0 !important;
        flex-shrink: 0;
    }

    .webhook-queue-details {
        min-width: 0;
        flex: 1;
    }

    .webhook-queue-title {
        font-size: 0.9rem !important;
        word-break: break-word;
    }

    .webhook-queue-meta {
        font-size: 0.8rem !important;
    }

    .webhook-queue-status {
        margin-right: 0 !important;
        margin-left: auto;
        font-size: 0.75rem !important;
        padding: 0.25rem 0.5rem !important;
        white-space: nowrap;
    }

    .webhook-queue-actions {
        justify-content: flex-end;
        margin-top: 0.5rem;
    }

    .webhook-queue-remove-btn {
        font-size: 0.75rem !important;
        padding: 0.25rem 0.5rem !important;
    }

    /* Webhook forms - Mobile */
    .add-webhook-form {
        padding: 1rem !important;
    }

    .webhook-card {
        padding: 0.75rem !important;
    }

    .webhook-header {
        flex-direction: column;
        align-items: flex-start !important;
        gap: 0.5rem;
    }

    .webhook-url {
        word-break: break-all;
        font-size: 0.8rem !important;
    }

    .webhook-template {
        font-size: 0.85rem !important;
    }

    /* Plus notice banner - Mobile */
    .plus-notice-banner {
        flex-direction: column;
        text-align: center;
        padding: 0.75rem !important;
    }

    .plus-notice-content h4 {
        font-size: 1rem !important;
    }

    .plus-notice-content p {
        font-size: 0.9rem !important;
    }

    .plus-notice-cta {
        margin-left: 0 !important;
        margin-top: 0.5rem;
    }
}