/* ============================================================
   story_mobile.css — Mobile responsive styles for story templates
   Breakpoints: 991px (tablet/sidebar collapse), 768px (mobile), 480px (small phones)
   ============================================================ */

/* ============================================================
   991px — Tablet: collapse sidebars to single column
   ============================================================ */
@media (max-width: 991px) {

    /* story_base_modern.html — 3-col Bootstrap grid → single col */
    .col-md-3 {
        display: none;
    }
    .col-md-6 {
        flex: 0 0 100%;
        max-width: 100%;
    }

    /* story_list.html / my_stories.html — profile-container layout */
    .profile-container .col-12.col-lg-3 {
        display: none;
    }
    .profile-container .col-12.col-lg-6 {
        flex: 0 0 100%;
        max-width: 100%;
    }

    /* story_edit.html / story_delete.html — 3-col row */
    .story-edit-card,
    .story-delete-card {
        margin-bottom: 1rem;
    }

    /* create/* templates — full-width col-lg-10 */
    .col-lg-10 {
        flex: 0 0 100%;
        max-width: 100%;
    }

    /* story_list.html — filter tabs horizontal scroll */
    .filter-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 4px;
        gap: 8px;
    }
    .filter-tabs::-webkit-scrollbar {
        height: 3px;
    }
    .filter-tab {
        white-space: nowrap;
        flex-shrink: 0;
        padding: 7px 14px;
        font-size: 13px;
    }

    /* story_list.html — stories grid */
    .stories-grid {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
        gap: 12px;
    }

    /* story_base_modern.html — stats sidebar */
    .stat-item {
        padding: 0.6rem 0;
    }

    /* create/* — story type selector */
    .story-type-selector {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }
    .type-option {
        padding: 15px 10px;
    }
    .type-option i {
        font-size: 26px;
    }

    /* create/* — story preview box */
    .story-preview-box {
        height: 450px;
        max-width: 100%;
    }

    /* create/* — background picker */
    .background-picker {
        grid-template-columns: repeat(3, 1fr);
        gap: 8px;
    }

    /* create/* — settings toggles */
    .settings-toggles {
        grid-template-columns: repeat(2, 1fr);
    }

    /* create/* — music options */
    .music-options {
        grid-template-columns: repeat(2, 1fr);
    }

    /* create/* — location input */
    .location-input-wrapper {
        flex-direction: column;
        gap: 8px;
    }
    .location-input-wrapper .btn {
        width: 100%;
    }

    /* analytics / insights — stat cards row */
    .col-md-3.mb-3,
    .col-md-4.mb-3 {
        flex: 0 0 50%;
        max-width: 50%;
    }

    /* story_insights.html — type distribution bar */
    .d-flex.justify-content-between.align-items-center.mb-2 > div[style*="width:120px"] {
        width: 80px !important;
    }

    /* poll_story.html — poll background options */
    .poll-background-options {
        gap: 8px;
    }
    .poll-background-option {
        width: 50px;
        height: 50px;
    }
}

/* ============================================================
   768px — Mobile: full single-column, compact spacing
   ============================================================ */
@media (max-width: 768px) {

    /* story_list.html — header */
    .story-list-header {
        padding: 20px 15px;
        border-radius: 8px;
    }
    .story-list-header h1 {
        font-size: 20px !important;
    }
    .story-list-header p {
        font-size: 13px;
    }
    .story-list-header > div[style*="width: 80px"] {
        width: 60px !important;
        height: 60px !important;
        margin-bottom: 12px !important;
    }
    .story-list-header > div[style*="width: 80px"] i {
        font-size: 28px !important;
    }

    /* story_list.html — stories grid */
    .stories-grid {
        grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
        gap: 8px;
    }
    .story-card-overlay {
        padding: 10px;
    }
    .story-author-name {
        font-size: 11px;
    }
    .story-time,
    .story-stats {
        font-size: 10px;
    }
    .story-author-avatar {
        width: 24px;
        height: 24px;
    }

    /* story_filter_bar */
    .story-filter-bar {
        padding: 12px;
        border-radius: 8px;
    }

    /* story_base_modern.html — card spacing */
    .card {
        border-radius: 6px;
        margin-bottom: 0.75rem;
    }
    .card-header {
        padding: 0.75rem 1rem;
    }
    .card-body {
        padding: 1rem;
    }

    /* story_analytics.html — stat cards */
    .stat-card {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 12px;
    }
    .stat-card .stat-icon {
        font-size: 24px;
    }
    .stat-card .stat-info h3 {
        font-size: 1.4rem;
        margin-bottom: 0;
    }
    .stat-card .stat-info p {
        font-size: 12px;
        margin-bottom: 0;
    }

    /* analytics — col-md-3 stat cards: 2 per row */
    .col-md-3.mb-3 {
        flex: 0 0 50%;
        max-width: 50%;
    }

    /* insights — col-md-4 stat cards: 1 per row */
    .col-md-4.mb-3 {
        flex: 0 0 100%;
        max-width: 100%;
    }

    /* story_edit.html / story_delete.html — form layout */
    .story-edit-card .card-body,
    .story-delete-card .card-body {
        padding: 1rem;
    }
    .story-edit-card .d-flex.justify-content-between,
    .story-delete-card .d-flex.justify-content-between {
        flex-direction: column;
        gap: 10px;
    }
    .story-edit-card .d-flex.justify-content-between .btn,
    .story-delete-card .d-flex.justify-content-between .btn {
        width: 100%;
    }

    /* story_delete.html — story info list */
    .story-info .list-group-item {
        font-size: 13px;
        padding: 0.6rem 0.75rem;
    }

    /* story_delete.html — preview */
    .story-preview .text-story-preview,
    .story-preview .poll-story-preview {
        min-height: 150px !important;
        padding: 20px !important;
    }

    /* create/* — settings section */
    .settings-section {
        padding: 16px;
        border-radius: 8px;
    }
    .settings-section h5 {
        font-size: 15px;
        margin-bottom: 14px;
        padding-bottom: 10px;
    }

    /* create/* — story preview box */
    .story-preview-box {
        height: 380px;
        border-radius: 14px;
        padding: 24px;
    }
    .preview-text {
        font-size: 20px;
    }

    /* create/* — background picker */
    .background-picker {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }
    .bg-option {
        height: 65px;
    }
    .bg-option .bg-label {
        font-size: 12px;
        padding: 3px 8px;
    }

    /* create/* — story type selector */
    .story-type-selector {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }
    .type-option {
        padding: 12px 8px;
        border-radius: 8px;
    }
    .type-option i {
        font-size: 22px;
        margin-bottom: 6px;
    }
    .type-option div {
        font-size: 12px;
    }

    /* create/* — upload zone */
    .upload-zone {
        padding: 24px 16px;
    }
    .upload-zone i {
        font-size: 36px;
        margin-bottom: 10px;
    }
    .upload-zone h6 {
        font-size: 14px;
    }

    /* create/* — settings toggles */
    .settings-toggles {
        grid-template-columns: 1fr;
        gap: 10px;
    }
    .toggle-item {
        padding: 12px;
    }

    /* create/* — music options */
    .music-options {
        grid-template-columns: 1fr;
        gap: 8px;
    }
    .music-option-btn {
        flex-direction: row;
        justify-content: flex-start;
        padding: 14px 16px;
        gap: 12px;
    }
    .music-option-btn i {
        font-size: 22px;
    }

    /* create/* — keyword input */
    .keyword-input-wrapper {
        flex-direction: column;
        gap: 8px;
    }
    .keyword-input-wrapper .btn {
        width: 100%;
    }

    /* create/* — popular hashtags */
    .popular-hashtags {
        gap: 6px;
    }
    .hashtag-chip {
        font-size: 12px;
        padding: 5px 10px;
    }

    /* create/* — submit button row */
    .settings-section .d-flex.gap-2 {
        flex-direction: column;
    }
    .settings-section .d-flex.gap-2 .btn,
    .settings-section .d-flex.gap-2 .submit-btn {
        width: 100%;
    }

    /* poll_story.html — poll preview */
    .poll-preview {
        padding: 20px;
        border-radius: 10px;
    }
    .poll-question-preview {
        font-size: 18px;
        margin-bottom: 14px;
    }
    .poll-option-preview {
        padding: 10px 14px;
        font-size: 14px;
    }

    /* poll_story.html — gift options grid */
    .gift-options-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }
    .quick-gift-btn {
        padding: 14px;
    }
    .quick-gift-btn .gift-icon {
        font-size: 2rem;
    }

    /* story_insights.html — best performing alert */
    .alert-info {
        font-size: 13px;
        padding: 10px 14px;
    }

    /* story_analytics.html — story preview */
    .story-preview.mb-4 img,
    .story-preview.mb-4 video {
        max-height: 220px;
    }
    .text-story-preview {
        min-height: 120px !important;
        font-size: 14px !important;
    }

    /* my_stories.html — stats card */
    .my-stories-stats .col-md-3 {
        flex: 0 0 50%;
        max-width: 50%;
    }
}

/* ============================================================
   480px — Small phones: tightest layout
   ============================================================ */
@media (max-width: 480px) {

    /* story_list.html — stories grid: 2 columns */
    .stories-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 6px;
    }
    .story-card-overlay {
        padding: 8px;
    }
    .story-author-info {
        gap: 5px;
    }
    .story-author-avatar {
        width: 20px;
        height: 20px;
    }
    .story-author-name {
        font-size: 10px;
    }
    .story-time,
    .story-stats {
        font-size: 9px;
    }

    /* story_list.html — header */
    .story-list-header {
        padding: 16px 12px;
    }
    .story-list-header h1 {
        font-size: 18px !important;
    }

    /* story_base_modern.html — card */
    .card-header {
        padding: 0.6rem 0.75rem;
        font-size: 14px;
    }
    .card-body {
        padding: 0.75rem;
    }

    /* analytics — stat cards: 1 per row */
    .col-md-3.mb-3 {
        flex: 0 0 100%;
        max-width: 100%;
    }

    /* create/* — story preview box */
    .story-preview-box {
        height: 300px;
        padding: 16px;
        border-radius: 10px;
    }
    .preview-text {
        font-size: 16px;
    }

    /* create/* — background picker */
    .background-picker {
        grid-template-columns: repeat(2, 1fr);
        gap: 6px;
    }
    .bg-option {
        height: 55px;
    }

    /* create/* — story type selector */
    .story-type-selector {
        grid-template-columns: repeat(2, 1fr);
        gap: 6px;
    }
    .type-option {
        padding: 10px 6px;
    }
    .type-option i {
        font-size: 20px;
        margin-bottom: 4px;
    }
    .type-option div {
        font-size: 11px;
    }

    /* create/* — settings section */
    .settings-section {
        padding: 12px;
    }
    .settings-section h5 {
        font-size: 14px;
        gap: 8px;
    }

    /* create/* — upload zone */
    .upload-zone {
        padding: 18px 12px;
    }
    .upload-zone i {
        font-size: 30px;
    }

    /* create/* — keyword chips */
    .keyword-chip {
        font-size: 11px;
        padding: 4px 8px;
    }

    /* create/* — toggle items */
    .toggle-item {
        padding: 10px;
    }
    .toggle-text {
        font-size: 13px;
    }

    /* story_edit.html — form selects/inputs */
    .story-edit-card .form-select,
    .story-edit-card .form-control {
        font-size: 13px;
    }

    /* story_delete.html — alert */
    .alert-danger {
        font-size: 13px;
        padding: 10px 12px;
    }
    .alert-danger h5 {
        font-size: 14px;
    }

    /* story_delete.html — story info list */
    .story-info .list-group-item {
        font-size: 12px;
        padding: 0.5rem 0.6rem;
    }

    /* poll_story.html — poll background options */
    .poll-background-option {
        width: 44px;
        height: 44px;
    }

    /* poll_story.html — gift options */
    .gift-options-grid {
        grid-template-columns: 1fr;
    }

    /* story_insights.html — stat boxes */
    .col-md-4.mb-3 > div {
        padding: 12px !important;
    }
    .col-md-4.mb-3 > div > div:first-child {
        font-size: 1.5rem !important;
    }

    /* story_analytics.html — details list */
    .analytics-details ul li {
        font-size: 13px;
        margin-bottom: 4px;
    }

    /* Pagination */
    .pagination .page-link {
        padding: 0.3rem 0.55rem;
        font-size: 13px;
    }
}


/* ============================================================
   MOBILE STORY/REEL FULL SCREEN (Facebook Style)
   ============================================================ */

@media (max-width: 768px) {
    /* Full screen story container */
    .story-container,
    .reel-container {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100vw !important;
        height: 100vh !important;
        height: 100dvh !important; /* Dynamic viewport height for mobile */
        margin: 0 !important;
        padding: 0 !important;
        background: #000 !important;
        z-index: 9999 !important;
        overflow: hidden !important;
    }

    /* Story/Reel content full screen */
    .story-content,
    .reel-content {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
    }

    /* Story video full screen */
    .story-video,
    .reel-video {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
    }

    /* Story image full screen */
    .story-image,
    .reel-image {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
    }

    /* Hide navbar when viewing story */
    body.viewing-story .navbar,
    body.viewing-reel .navbar {
        display: none !important;
    }

    /* Story progress bar at top */
    .story-progress-bar {
        position: absolute !important;
        top: 8px !important;
        left: 8px !important;
        right: 8px !important;
        z-index: 100 !important;
    }

    /* Close button */
    .story-close-btn,
    .reel-close-btn {
        position: absolute !important;
        top: 12px !important;
        right: 12px !important;
        z-index: 101 !important;
        background: rgba(0, 0, 0, 0.5) !important;
        backdrop-filter: blur(10px) !important;
        border: none !important;
        color: white !important;
        width: 36px !important;
        height: 36px !important;
        border-radius: 50% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 20px !important;
        cursor: pointer !important;
    }
}