/* =============================================================================
   responsive.css - Global Responsive Utilities & Breakpoints for Story Manager
   Mobile-first responsive design system with comprehensive breakpoints
   ============================================================================= */

/* =============================================================================
   RESPONSIVE BREAKPOINTS
   ============================================================================= */

/* Extra Large Desktop (1400px and up) */
@media (min-width: 1400px) {
    .container-fluid {
        max-width: 1320px;
    }
    
    .text-xl {
        font-size: 1.25rem !important;
    }
    
    .h-xl {
        font-size: 2.5rem !important;
    }
    
    .spacing-xl {
        margin: 2rem 0;
        padding: 2rem 0;
    }
}

/* Large Desktop (1200px to 1399px) */
@media (max-width: 1399px) and (min-width: 1200px) {
    .container-fluid {
        max-width: 1140px;
    }
    
    .text-lg {
        font-size: 1.125rem !important;
    }
    
    .h-lg {
        font-size: 2.25rem !important;
    }
    
    .spacing-lg {
        margin: 1.75rem 0;
        padding: 1.75rem 0;
    }
}

/* Desktop (992px to 1199px) */
@media (max-width: 1199px) and (min-width: 992px) {
    .container-fluid {
        max-width: 960px;
    }
    
    .text-md {
        font-size: 1rem !important;
    }
    
    .h-md {
        font-size: 2rem !important;
    }
    
    .spacing-md {
        margin: 1.5rem 0;
        padding: 1.5rem 0;
    }
}

/* Large Tablet (768px to 991px) */
@media (max-width: 991px) and (min-width: 768px) {
    .container-fluid {
        max-width: 720px;
    }
    
    .text-sm {
        font-size: 0.875rem !important;
    }
    
    .h-sm {
        font-size: 1.75rem !important;
    }
    
    .spacing-sm {
        margin: 1.25rem 0;
        padding: 1.25rem 0;
    }
    
    /* Hide elements on tablet */
    .d-tablet-none {
        display: none !important;
    }
    
    /* Show elements on tablet */
    .d-tablet-block {
        display: block !important;
    }
    
    .d-tablet-flex {
        display: flex !important;
    }
}

/* Mobile Large (576px to 767px) */
@media (max-width: 767px) and (min-width: 576px) {
    .container-fluid {
        max-width: 540px;
    }
    
    .text-xs {
        font-size: 0.75rem !important;
    }
    
    .h-xs {
        font-size: 1.5rem !important;
    }
    
    .spacing-xs {
        margin: 1rem 0;
        padding: 1rem 0;
    }
    
    /* Hide elements on mobile large */
    .d-mobile-lg-none {
        display: none !important;
    }
    
    /* Show elements on mobile large */
    .d-mobile-lg-block {
        display: block !important;
    }
    
    .d-mobile-lg-flex {
        display: flex !important;
    }
    
    /* Stack columns on mobile large */
    .col-mobile-lg-12 {
        flex: 0 0 100%;
        max-width: 100%;
    }
    
    .col-mobile-lg-6 {
        flex: 0 0 50%;
        max-width: 50%;
    }
}

/* Mobile Small (320px to 575px) */
@media (max-width: 575px) {
    .container-fluid {
        max-width: 100%;
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }
    
    .text-xxs {
        font-size: 0.7rem !important;
    }
    
    .h-xxs {
        font-size: 1.25rem !important;
    }
    
    .spacing-xxs {
        margin: 0.75rem 0;
        padding: 0.75rem 0;
    }
    
    /* Hide elements on mobile small */
    .d-mobile-sm-none {
        display: none !important;
    }
    
    /* Show elements on mobile small */
    .d-mobile-sm-block {
        display: block !important;
    }
    
    .d-mobile-sm-flex {
        display: flex !important;
    }
    
    /* Stack all columns on mobile small */
    .col-mobile-sm-12 {
        flex: 0 0 100%;
        max-width: 100%;
    }
    
    /* Reduce padding on mobile small */
    .p-mobile-sm-0 {
        padding: 0 !important;
    }
    
    .p-mobile-sm-1 {
        padding: 0.25rem !important;
    }
    
    .p-mobile-sm-2 {
        padding: 0.5rem !important;
    }
    
    .p-mobile-sm-3 {
        padding: 0.75rem !important;
    }
    
    /* Reduce margins on mobile small */
    .m-mobile-sm-0 {
        margin: 0 !important;
    }
    
    .m-mobile-sm-1 {
        margin: 0.25rem !important;
    }
    
    .m-mobile-sm-2 {
        margin: 0.5rem !important;
    }
    
    .m-mobile-sm-3 {
        margin: 0.75rem !important;
    }
}

/* Extra Small Mobile (320px and below) */
@media (max-width: 320px) {
    .container-fluid {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }
    
    .text-xxxs {
        font-size: 0.65rem !important;
    }
    
    .h-xxxs {
        font-size: 1.125rem !important;
    }
    
    .spacing-xxxs {
        margin: 0.5rem 0;
        padding: 0.5rem 0;
    }
    
    /* Hide elements on extra small mobile */
    .d-mobile-xs-none {
        display: none !important;
    }
    
    /* Show elements on extra small mobile */
    .d-mobile-xs-block {
        display: block !important;
    }
    
    .d-mobile-xs-flex {
        display: flex !important;
    }
    
    /* Minimal padding on extra small mobile */
    .p-mobile-xs-0 {
        padding: 0 !important;
    }
    
    .p-mobile-xs-1 {
        padding: 0.125rem !important;
    }
    
    .p-mobile-xs-2 {
        padding: 0.25rem !important;
    }
    
    /* Minimal margins on extra small mobile */
    .m-mobile-xs-0 {
        margin: 0 !important;
    }
    
    .m-mobile-xs-1 {
        margin: 0.125rem !important;
    }
    
    .m-mobile-xs-2 {
        margin: 0.25rem !important;
    }
}

/* =============================================================================
   RESPONSIVE UTILITY CLASSES
   ============================================================================= */

/* Responsive Text Alignment */
@media (max-width: 575px) {
    .text-center-mobile {
        text-align: center !important;
    }
    
    .text-left-mobile {
        text-align: left !important;
    }
    
    .text-right-mobile {
        text-align: right !important;
    }
}

/* Responsive Visibility */
@media (max-width: 767px) {
    .d-mobile-none {
        display: none !important;
    }
    
    .d-mobile-block {
        display: block !important;
    }
    
    .d-mobile-flex {
        display: flex !important;
    }
    
    .d-mobile-inline {
        display: inline !important;
    }
    
    .d-mobile-inline-block {
        display: inline-block !important;
    }
}

@media (max-width: 991px) {
    .d-tablet-none {
        display: none !important;
    }
    
    .d-tablet-block {
        display: block !important;
    }
    
    .d-tablet-flex {
        display: flex !important;
    }
}

/* Responsive Spacing */
@media (max-width: 575px) {
    .mt-mobile-0 { margin-top: 0 !important; }
    .mt-mobile-1 { margin-top: 0.25rem !important; }
    .mt-mobile-2 { margin-top: 0.5rem !important; }
    .mt-mobile-3 { margin-top: 0.75rem !important; }
    
    .mb-mobile-0 { margin-bottom: 0 !important; }
    .mb-mobile-1 { margin-bottom: 0.25rem !important; }
    .mb-mobile-2 { margin-bottom: 0.5rem !important; }
    .mb-mobile-3 { margin-bottom: 0.75rem !important; }
    
    .ml-mobile-0 { margin-left: 0 !important; }
    .ml-mobile-1 { margin-left: 0.25rem !important; }
    .ml-mobile-2 { margin-left: 0.5rem !important; }
    .ml-mobile-3 { margin-left: 0.75rem !important; }
    
    .mr-mobile-0 { margin-right: 0 !important; }
    .mr-mobile-1 { margin-right: 0.25rem !important; }
    .mr-mobile-2 { margin-right: 0.5rem !important; }
    .mr-mobile-3 { margin-right: 0.75rem !important; }
    
    .pt-mobile-0 { padding-top: 0 !important; }
    .pt-mobile-1 { padding-top: 0.25rem !important; }
    .pt-mobile-2 { padding-top: 0.5rem !important; }
    .pt-mobile-3 { padding-top: 0.75rem !important; }
    
    .pb-mobile-0 { padding-bottom: 0 !important; }
    .pb-mobile-1 { padding-bottom: 0.25rem !important; }
    .pb-mobile-2 { padding-bottom: 0.5rem !important; }
    .pb-mobile-3 { padding-bottom: 0.75rem !important; }
    
    .pl-mobile-0 { padding-left: 0 !important; }
    .pl-mobile-1 { padding-left: 0.25rem !important; }
    .pl-mobile-2 { padding-left: 0.5rem !important; }
    .pl-mobile-3 { padding-left: 0.75rem !important; }
    
    .pr-mobile-0 { padding-right: 0 !important; }
    .pr-mobile-1 { padding-right: 0.25rem !important; }
    .pr-mobile-2 { padding-right: 0.5rem !important; }
    .pr-mobile-3 { padding-right: 0.75rem !important; }
}

/* Responsive Flexbox */
@media (max-width: 575px) {
    .flex-mobile-column {
        flex-direction: column !important;
    }
    
    .flex-mobile-row {
        flex-direction: row !important;
    }
    
    .flex-mobile-wrap {
        flex-wrap: wrap !important;
    }
    
    .flex-mobile-nowrap {
        flex-wrap: nowrap !important;
    }
    
    .justify-mobile-center {
        justify-content: center !important;
    }
    
    .justify-mobile-start {
        justify-content: flex-start !important;
    }
    
    .justify-mobile-end {
        justify-content: flex-end !important;
    }
    
    .justify-mobile-between {
        justify-content: space-between !important;
    }
    
    .align-mobile-center {
        align-items: center !important;
    }
    
    .align-mobile-start {
        align-items: flex-start !important;
    }
    
    .align-mobile-end {
        align-items: flex-end !important;
    }
}

/* Responsive Grid */
@media (max-width: 575px) {
    .grid-mobile-1 {
        display: grid;
        grid-template-columns: 1fr;
        gap: 0.5rem;
    }
    
    .grid-mobile-2 {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0.5rem;
    }
    
    .grid-mobile-3 {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        gap: 0.5rem;
    }
}

/* Responsive Images */
@media (max-width: 575px) {
    .img-mobile-fluid {
        max-width: 100%;
        height: auto;
    }
    
    .img-mobile-cover {
        object-fit: cover;
        width: 100%;
        height: 200px;
    }
    
    .img-mobile-contain {
        object-fit: contain;
        width: 100%;
        height: auto;
    }
}

/* Responsive Tables */
@media (max-width: 767px) {
    .table-mobile-responsive {
        display: block;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    .table-mobile-stack {
        display: block;
    }
    
    .table-mobile-stack thead {
        display: none;
    }
    
    .table-mobile-stack tbody,
    .table-mobile-stack tr,
    .table-mobile-stack td {
        display: block;
        width: 100%;
    }
    
    .table-mobile-stack td {
        border: none;
        border-bottom: 1px solid #dee2e6;
        padding: 0.5rem;
        text-align: left;
    }
    
    .table-mobile-stack td:before {
        content: attr(data-label) ": ";
        font-weight: bold;
        display: inline-block;
        width: 40%;
    }
}

/* Responsive Forms */
@media (max-width: 575px) {
    .form-mobile-full {
        width: 100%;
    }
    
    .form-mobile-stack {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
    }
    
    .form-mobile-stack .form-group {
        margin-bottom: 0.5rem;
    }
    
    .form-mobile-stack .form-control {
        width: 100%;
        margin-bottom: 0.5rem;
    }
    
    .form-mobile-stack .btn {
        width: 100%;
        margin-bottom: 0.5rem;
    }
}

/* Responsive Cards */
@media (max-width: 575px) {
    .card-mobile-full {
        width: 100%;
        margin: 0.5rem 0;
    }
    
    .card-mobile-no-margin {
        margin: 0;
    }
    
    .card-mobile-compact {
        padding: 0.75rem;
    }
    
    .card-mobile-compact .card-body {
        padding: 0.5rem;
    }
}

/* Responsive Modals */
@media (max-width: 575px) {
    .modal-mobile-full {
        width: 100%;
        height: 100%;
        margin: 0;
        border-radius: 0;
    }
    
    .modal-mobile-full .modal-dialog {
        width: 100%;
        height: 100%;
        margin: 0;
        max-width: none;
    }
    
    .modal-mobile-full .modal-content {
        height: 100%;
        border-radius: 0;
    }
}

/* Responsive Navigation */
@media (max-width: 767px) {
    .nav-mobile-vertical {
        flex-direction: column;
    }
    
    .nav-mobile-vertical .nav-item {
        width: 100%;
        margin-bottom: 0.25rem;
    }
    
    .nav-mobile-vertical .nav-link {
        width: 100%;
        text-align: left;
        padding: 0.75rem 1rem;
    }
}

/* Responsive Buttons */
@media (max-width: 575px) {
    .btn-mobile-full {
        width: 100%;
        margin-bottom: 0.5rem;
    }
    
    .btn-mobile-stack {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
    }
    
    .btn-mobile-stack .btn {
        width: 100%;
    }
}

/* Responsive Lists */
@media (max-width: 575px) {
    .list-mobile-compact {
        padding-left: 1rem;
    }
    
    .list-mobile-compact li {
        margin-bottom: 0.25rem;
    }
    
    .list-mobile-horizontal {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
    }
    
    .list-mobile-horizontal li {
        margin-bottom: 0;
    }
}

/* =============================================================================
   RESPONSIVE PRINT STYLES
   ============================================================================= */

@media print {
    .d-print-none {
        display: none !important;
    }
    
    .d-print-block {
        display: block !important;
    }
    
    .d-print-inline {
        display: inline !important;
    }
    
    .d-print-inline-block {
        display: inline-block !important;
    }
    
    /* Hide navigation and footer in print */
    .navbar,
    .footer,
    .storymanager-footer {
        display: none !important;
    }
    
    /* Ensure content is readable in print */
    body {
        font-size: 12pt;
        line-height: 1.4;
        color: #000;
        background: #fff;
    }
    
    /* Remove shadows and backgrounds for print */
    .card,
    .modal-content,
    .dropdown-menu {
        box-shadow: none !important;
        border: 1px solid #000 !important;
    }
}

/* =============================================================================
   RESPONSIVE ACCESSIBILITY
   ============================================================================= */

/* High contrast mode support */
@media (prefers-contrast: high) {
    .btn,
    .form-control,
    .card {
        border: 2px solid currentColor;
    }
    
    .btn:hover,
    .form-control:focus {
        border-width: 3px;
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* =============================================================================
   RESPONSIVE PERFORMANCE OPTIMIZATIONS
   ============================================================================= */

/* Optimize for mobile performance */
@media (max-width: 767px) {
    /* Reduce box shadows on mobile for better performance */
    .card,
    .btn,
    .form-control {
        box-shadow: none;
    }
    
    /* Use simpler gradients on mobile */
    .bg-gradient {
        background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%) !important;
    }
    
    /* Reduce animations on mobile */
    .animate-mobile-reduce {
        transition: none !important;
        animation: none !important;
    }
}

/* =============================================================================
   RESPONSIVE DEBUGGING UTILITIES
   ============================================================================= */

/* Show current breakpoint for debugging */
.debug-breakpoint::after {
    content: "Desktop";
    position: fixed;
    top: 0;
    right: 0;
    background: #000;
    color: #fff;
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
    z-index: 9999;
}

@media (max-width: 1399px) and (min-width: 1200px) {
    .debug-breakpoint::after {
        content: "Large Desktop";
    }
}

@media (max-width: 1199px) and (min-width: 992px) {
    .debug-breakpoint::after {
        content: "Desktop";
    }
}

@media (max-width: 991px) and (min-width: 768px) {
    .debug-breakpoint::after {
        content: "Tablet";
    }
}

@media (max-width: 767px) and (min-width: 576px) {
    .debug-breakpoint::after {
        content: "Mobile Large";
    }
}

@media (max-width: 575px) {
    .debug-breakpoint::after {
        content: "Mobile Small";
    }
}

@media (max-width: 320px) {
    .debug-breakpoint::after {
        content: "Mobile XS";
    }
}