/**
 * Admin Panel Responsive Fixes
 * Ensures all admin pages are mobile-friendly
 */

/* ============================================
   MOBILE FIRST: Base Styles (All Devices)
   ============================================ */

/* Table-responsive scroll + sticky thead defined in admin-tables.css.
   Dropdown-menu overflow is handled there via .table-responsive:has(.dropdown-menu.show).
   Cards/card-body/table allow overflow so sibling dropdowns aren't clipped. */
.card,
.card-body,
.table {
    overflow: visible !important;
}

/* Action buttons - base styles now in common.css */

/* Cards should have less padding on mobile */
.card-body {
    padding: 1rem;
}

/* Form controls should be full width on mobile */
.form-control,
.form-select {
    font-size: 14px;
}

/* Buttons should be readable */
.btn {
    font-size: 14px;
    white-space: nowrap;
}

/* ============================================
   EXTRA SMALL DEVICES (<576px - Mobile)
   ============================================ */
@media (max-width: 575.98px) {

    /* Reduce heading sizes */
    h1, .h1 { font-size: 1.75rem !important; }
    h2, .h2 { font-size: 1.5rem !important; }
    h3, .h3 { font-size: 1.25rem !important; }
    h4, .h4 { font-size: 1.1rem !important; }
    h5, .h5 { font-size: 1rem !important; }
    h6, .h6 { font-size: 0.95rem !important; }

    /* Stat cards - reduce font sizes */
    .stat-value {
        font-size: 1.75rem !important;
    }

    .quick-stat-value {
        font-size: 1.5rem !important;
    }

    .stat-icon {
        width: 48px !important;
        height: 48px !important;
        font-size: 1.25rem !important;
    }

    /* Welcome card - reduce padding */
    .welcome-card {
        padding: 1rem !important;
    }

    .welcome-card h3 {
        font-size: 1.25rem !important;
    }

    /* Page header - stack elements */
    .d-flex.justify-content-between.flex-wrap {
        flex-direction: column !important;
        align-items: flex-start !important;
    }

    .btn-toolbar {
        width: 100%;
        margin-top: 0.5rem;
    }

    .btn-toolbar .btn-group {
        width: 100%;
        margin-bottom: 0.5rem;
    }

    .btn-toolbar .btn-group .btn {
        flex: 1;
        font-size: 12px !important;
    }

    /* Tables - hide less important columns on mobile */
    .table-responsive {
        font-size: 12px !important;
    }

    .table th,
    .table td {
        padding: 0.5rem !important;
        vertical-align: middle !important;
    }

    /* Hide certain table columns on mobile */
    .table th:nth-child(4),
    .table td:nth-child(4),
    .table th:nth-child(7),
    .table td:nth-child(7) {
        display: none !important;
    }

    /* Action buttons - make smaller and stack */
    .action-btn-group .btn {
        padding: 0.25rem 0.4rem !important;
        font-size: 11px !important;
    }

    /* Cards - reduce padding and margins */
    .card {
        margin-bottom: 1rem !important;
    }

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

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

    /* Form rows - stack on mobile */
    .row.g-3 > div {
        margin-bottom: 0.75rem !important;
    }

    /* Badges - make smaller */
    .badge {
        font-size: 0.75rem !important;
        padding: 0.25em 0.5em !important;
    }

    /* Pagination - make smaller */
    .pagination {
        font-size: 12px !important;
    }

    .pagination .page-link {
        padding: 0.375rem 0.5rem !important;
    }

    /* Alerts - reduce padding */
    .alert {
        padding: 0.75rem !important;
        font-size: 13px !important;
    }

    /* Filter cards - full width inputs */
    .filter-card .col-md-4,
    .filter-card .col-md-3,
    .filter-card .col-md-2 {
        width: 100% !important;
    }

    /* Input groups - ensure proper sizing */
    .input-group {
        flex-wrap: nowrap !important;
    }

    .input-group .form-control {
        min-width: 0 !important;
    }

    /* Chart containers - ensure proper sizing */
    canvas {
        max-width: 100% !important;
        height: auto !important;
    }

    /* Modal - full screen on mobile */
    .modal-dialog {
        margin: 0.5rem !important;
    }

    .modal-content {
        border-radius: 0.5rem !important;
    }

    /* Dropdown menus - full width */
    .dropdown-menu {
        min-width: 200px !important;
        font-size: 13px !important;
    }

}

/* ============================================
   SMALL DEVICES (576px - 767.98px - Tablets)
   ============================================ */
@media (min-width: 576px) and (max-width: 767.98px) {

    /* Slightly larger fonts than mobile but still compact */
    h1, .h1 { font-size: 2rem !important; }
    h2, .h2 { font-size: 1.75rem !important; }

    .stat-value {
        font-size: 2rem !important;
    }

    .quick-stat-value {
        font-size: 1.65rem !important;
    }

    /* Tables - show more columns */
    .table th:nth-child(4),
    .table td:nth-child(4) {
        display: table-cell !important;
    }

    /* Cards - moderate padding */
    .card-body {
        padding: 1.25rem !important;
    }

    /* Action buttons - normal size */
    .action-btn-group .btn {
        padding: 0.375rem 0.75rem !important;
        font-size: 13px !important;
    }
}

/* ============================================
   MEDIUM DEVICES (768px - 991.98px - Tablets Landscape)
   ============================================ */
@media (min-width: 768px) and (max-width: 991.98px) {

    /* Normal headings */
    .stat-value {
        font-size: 2.25rem !important;
    }

    /* Stat cards - prevent overflow on tight md columns */
    .stat-card .card-body,
    .card .d-flex.align-items-center {
        overflow: hidden;
    }

    .stat-icon {
        width: 40px !important;
        height: 40px !important;
        font-size: 1.1rem !important;
        flex-shrink: 0;
    }

    .stat-card h3,
    .stat-card .mb-0 {
        font-size: 1.1rem !important;
    }

    /* Tables - show all columns */
    .table th,
    .table td {
        display: table-cell !important;
    }

    /* Filter forms - better layout */
    .filter-card .col-md-4 {
        width: 50% !important;
    }

    .filter-card .col-md-3 {
        width: 33.333% !important;
    }

    .filter-card .col-md-2 {
        width: 100% !important;
    }
}

/* ============================================
   UTILITY CLASSES FOR RESPONSIVE BEHAVIOR
   ============================================ */

/* Hide on mobile */
.hide-mobile {
    display: none !important;
}

@media (min-width: 768px) {
    .hide-mobile {
        display: block !important;
    }
}

/* Show only on mobile */
.show-mobile {
    display: block !important;
}

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

/* Responsive text alignment */
.text-mobile-center {
    text-align: center !important;
}

@media (min-width: 768px) {
    .text-mobile-center {
        text-align: inherit !important;
    }
}

/* Responsive margins */
@media (max-width: 575.98px) {
    .mb-mobile-3 {
        margin-bottom: 1rem !important;
    }

    .mt-mobile-3 {
        margin-top: 1rem !important;
    }

    .px-mobile-2 {
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
    }
}

/* ============================================
   SPECIFIC COMPONENT FIXES
   ============================================ */

/* Sidebar fixes for mobile */
@media (max-width: 991.98px) {
    .offcanvas {
        max-width: 280px !important;
    }

    .offcanvas-body {
        padding: 1rem !important;
    }

    .sidebar .nav-link {
        padding: 0.75rem 1rem !important;
        font-size: 14px !important;
    }
}

/* Navbar fixes */
@media (max-width: 767.98px) {
    .navbar-brand {
        font-size: 1rem !important;
    }

    .navbar-nav .nav-link {
        font-size: 13px !important;
        padding: 0.5rem !important;
    }
}

/* Form control sizing */
@media (max-width: 575.98px) {
    .form-control-lg {
        font-size: 14px !important;
        padding: 0.5rem 0.75rem !important;
    }

    .form-control-sm {
        font-size: 12px !important;
        padding: 0.25rem 0.5rem !important;
    }
}

/* Button sizing on mobile */
@media (max-width: 575.98px) {
    .btn-lg {
        font-size: 14px !important;
        padding: 0.5rem 1rem !important;
    }

    .btn-sm {
        font-size: 11px !important;
        padding: 0.25rem 0.5rem !important;
    }
}

/* Statistics grid - ensure proper stacking */
@media (max-width: 575.98px) {
    .row > [class*="col-"] {
        margin-bottom: 1rem;
    }

    .row > [class*="col-"]:last-child {
        margin-bottom: 0;
    }
}

/* Overflow handling for content */
.card-body pre,
.card-body code {
    overflow-x: auto;
    max-width: 100%;
}

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

/* Table cells: nowrap + horizontal scroll handles long content */
.table td {
    white-space: nowrap;
}

/* Canvas/Chart responsive */
canvas {
    max-width: 100% !important;
    height: auto !important;
}

/* ============================================
   QUILL EDITOR RESPONSIVE STYLES
   ============================================ */

/* Ensure Quill editor is responsive */
#quill-editor-content {
    max-width: 100%;
    overflow-x: auto;
}

/* Quill toolbar responsive */
.ql-toolbar {
    background-color: var(--bg-secondary);
    border-radius: 0.375rem 0.375rem 0 0;
}

.ql-container {
    border-radius: 0 0 0.375rem 0.375rem;
    font-size: 14px;
}

/* Mobile optimizations for Quill */
@media (max-width: 575.98px) {
    /* Reduce Quill editor height on mobile */
    #quill-editor-content {
        height: 300px !important;
    }

    /* Compact toolbar on mobile */
    .ql-toolbar {
        padding: 0.5rem !important;
    }

    .ql-toolbar button {
        width: 24px !important;
        height: 24px !important;
        padding: 2px !important;
    }

    .ql-toolbar .ql-picker {
        font-size: 12px !important;
    }

    .ql-toolbar .ql-picker-label {
        padding: 2px 4px !important;
    }

    /* Ensure editor content is readable */
    .ql-editor {
        padding: 0.75rem !important;
        font-size: 14px !important;
        line-height: 1.6 !important;
    }

    /* Make toolbar buttons more touch-friendly */
    .ql-toolbar button:hover,
    .ql-toolbar button:focus {
        background-color: var(--bg-tertiary);
    }
}

/* Tablet optimizations */
@media (min-width: 576px) and (max-width: 767.98px) {
    #quill-editor-content {
        height: 350px !important;
    }

    .ql-toolbar {
        padding: 0.625rem !important;
    }

    .ql-editor {
        padding: 1rem !important;
    }
}

/* Ensure Quill content doesn't overflow */
.ql-editor {
    overflow-y: auto;
    word-wrap: break-word;
}

.ql-editor img {
    max-width: 100%;
    height: auto;
}

.ql-editor video {
    max-width: 100%;
    height: auto;
}

/* ============================================
   PRINT STYLES
   ============================================ */
@media print {
    .sidebar,
    .navbar,
    .btn,
    .action-btn-group,
    .pagination,
    .alert {
        display: none !important;
    }

    .card {
        border: 1px solid #ddd !important;
        page-break-inside: avoid;
    }

    .table {
        font-size: 10px !important;
    }

    /* Hide Quill toolbar when printing */
    .ql-toolbar {
        display: none !important;
    }

    /* Show only content when printing */
    .ql-container {
        border: none !important;
    }

    .ql-editor {
        padding: 0 !important;
    }
}

/* ============================================
   ADMIN PANEL MOBILE RESPONSIVENESS FIXES
   ============================================ */

/* Badge readability on mobile */
@media (max-width: 575.98px) {
    .badge {
        font-size: 0.72rem !important;
        padding: 0.3em 0.55em !important;
    }
}

/* Admin stat card icons responsive */
@media (max-width: 575.98px) {
    .stat-icon,
    .stats-icon {
        width: 44px !important;
        height: 44px !important;
        font-size: 1.2rem !important;
    }
}

/* Pagination mobile layout */
@media (max-width: 575.98px) {
    .card-footer .d-flex.justify-content-between {
        flex-direction: column;
        gap: 0.5rem;
        align-items: center;
    }
    .pagination {
        flex-wrap: wrap;
        justify-content: center;
    }
    .page-link {
        min-width: 38px;
        min-height: 38px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
}

/* Action button groups wrap on mobile */
@media (max-width: 575.98px) {
    .btn-toolbar {
        flex-wrap: wrap;
        gap: 0.5rem;
    }
    .btn-toolbar .btn,
    .btn-toolbar .btn-group {
        flex-shrink: 0;
    }
}

/* Quick action cards stacking */
@media (max-width: 399.98px) {
    .quick-action-card {
        padding: 0.75rem !important;
    }
}