/* ============================================================
   IntegrityScan — Global Mobile Responsive Stylesheet
   Breakpoints: 992px (tablet), 768px (mobile), 480px (small)
   ============================================================ */

/* ── Base ── */
*, *::before, *::after { box-sizing: border-box; }
body { overflow-x: hidden; }
img  { max-width: 100%; height: auto; }

/* ── Content area padding ── */
.content-area { padding: 20px 16px !important; }

/* ============================================================
   LAYOUT — App shell
   ============================================================ */
@media (max-width: 768px) {
    .content-area { padding: 16px 12px !important; }

    /* Sidebar nav links — bigger touch targets */
    .nav-link { padding: 14px 20px !important; font-size: 14px !important; }

    /* Footer */
    .footer { font-size: 12px !important; padding: 14px !important; }
}

/* ============================================================
   TYPOGRAPHY — fluid sizes
   ============================================================ */
@media (max-width: 768px) {
    h1 { font-size: clamp(18px, 5vw, 24px) !important; }
    h2 { font-size: clamp(16px, 4vw, 20px) !important; }
    h3 { font-size: clamp(14px, 3.5vw, 18px) !important; }
}

/* ============================================================
   COMMON COMPONENTS
   ============================================================ */

/* Tool / page headers */
@media (max-width: 768px) {
    .tool-header,
    .ai-header,
    .pg-header,
    .removal-header,
    .result-header,
    .doc-header,
    .analytics-header {
        padding: 18px 16px !important;
        border-radius: 10px !important;
        margin-bottom: 16px !important;
    }
    .tool-header h1,
    .ai-header h1,
    .pg-header h1,
    .removal-header h1,
    .doc-header h1,
    .analytics-header h1 {
        font-size: 17px !important;
    }
    /* Plagiarism header flex → column */
    .pg-header {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 8px !important;
    }
}

/* Cards */
@media (max-width: 768px) {
    .card,
    .form-card,
    .chart-card,
    .result-card,
    .sources-card {
        padding: 16px !important;
        border-radius: 10px !important;
        margin-bottom: 14px !important;
    }
}

/* Buttons */
@media (max-width: 768px) {
    .btn,
    .btn-save,
    .btn-convert,
    .submit-btn,
    .btn-check,
    .btn-remove,
    .btn-plan,
    .btn-upgrade {
        font-size: 13px !important;
        padding: 11px 16px !important;
    }
    /* Action rows — stack on mobile */
    .action-row,
    .action-buttons {
        flex-direction: column !important;
        gap: 8px !important;
    }
    .action-row .btn,
    .action-row a {
        width: 100% !important;
        text-align: center !important;
        justify-content: center !important;
    }
}

/* Forms */
@media (max-width: 768px) {
    .form-control,
    .form-select,
    .form-textarea,
    .ctrl-select,
    .search-input {
        font-size: 14px !important;
        padding: 10px 12px !important;
    }
    .form-label,
    .form-label { font-size: 13px !important; }
    .field-group { margin-bottom: 14px !important; }
}

/* Tables — horizontal scroll */
@media (max-width: 768px) {
    .table-wrapper,
    .table-scroll,
    .documents-table,
    div[style*="overflow-x"] {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }
    .rtable,
    .recent-table,
    .feature-table,
    .table {
        min-width: 480px !important;
        font-size: 12px !important;
    }
    .rtable th, .rtable td,
    .recent-table th, .recent-table td,
    .table th, .table td {
        padding: 9px 10px !important;
        white-space: nowrap !important;
    }
}

/* Alerts */
@media (max-width: 768px) {
    .alert { font-size: 13px !important; padding: 12px 14px !important; }
}

/* Badges */
@media (max-width: 768px) {
    .badge { font-size: 10px !important; padding: 3px 8px !important; }
}

/* ============================================================
   PLAGIARISM CHECK
   ============================================================ */
@media (max-width: 768px) {
    /* Two-panel editor → single column */
    .editor-wrap { grid-template-columns: 1fr !important; gap: 12px !important; }
    .panel { min-height: 280px !important; }
    .input-area { min-height: 200px !important; font-size: 13px !important; }
    .highlight-area { font-size: 13px !important; }

    /* Controls bar → column */
    .controls-bar {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 10px !important;
        padding: 14px !important;
    }
    .ctrl-select { min-width: unset !important; width: 100% !important; }
    .btn-check, .btn-remove { width: 100% !important; justify-content: center !important; }
    .word-pill { margin-left: 0 !important; text-align: center !important; }

    /* Score bar */
    .score-bar.show { flex-direction: column !important; gap: 12px !important; align-items: flex-start !important; }
    .stat-chips { gap: 8px !important; }
    .stat-chip { min-width: 70px !important; padding: 6px 10px !important; }
    .stat-chip .cv { font-size: 16px !important; }
}

/* ============================================================
   PLAGIARISM RESULT
   ============================================================ */
@media (max-width: 768px) {
    .result-banner {
        flex-direction: column !important;
        text-align: center !important;
        gap: 16px !important;
        padding: 20px 16px !important;
    }
    .score-ring { width: 90px !important; height: 90px !important; margin: 0 auto !important; }
    .score-ring .num { font-size: 26px !important; }
    .banner-info h2 { font-size: 17px !important; }

    .stat-bar { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; }
    .stat-box { padding: 12px 10px !important; }
    .stat-box .val { font-size: 22px !important; }

    .split { grid-template-columns: 1fr !important; gap: 12px !important; }
    .panel-body { max-height: 300px !important; font-size: 13px !important; }
}

/* ============================================================
   AI DETECTION
   ============================================================ */
@media (max-width: 768px) {
    .stat-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; }
    .stat-box .stat-value { font-size: 22px !important; }
    .marker-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 8px !important; }
    .marker-item { padding: 10px !important; }
    .marker-value { font-size: 18px !important; }
    .score-circle { width: 100px !important; height: 100px !important; }
    .score-value { font-size: 30px !important; }

    /* Result action buttons */
    #resultSection > div:last-child {
        display: flex !important;
        flex-direction: column !important;
        gap: 8px !important;
        align-items: stretch !important;
    }
    #resultSection > div:last-child button,
    #resultSection > div:last-child a {
        width: 100% !important;
        margin: 0 !important;
    }
}

/* ============================================================
   PLAGIARISM REMOVAL (AI HUMANIZER)
   ============================================================ */
@media (max-width: 768px) {
    .tab-container {
        gap: 0 !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }
    .tab-btn { padding: 10px 16px !important; font-size: 12px !important; white-space: nowrap !important; }
    .upload-area { padding: 24px 16px !important; }
}

/* Plagiarism removal result — diff grid */
@media (max-width: 768px) {
    .diff-grid { grid-template-columns: 1fr !important; gap: 12px !important; }
    .diff-body { max-height: 280px !important; font-size: 12px !important; }
    .score-grid { grid-template-columns: 1fr !important; gap: 10px !important; }
    .score-num { font-size: 28px !important; }
    .arrow-box { text-align: center !important; }
}

/* ============================================================
   IMAGE CONVERTER
   ============================================================ */
@media (max-width: 768px) {
    /* Two-column grid → single */
    div[style*="grid-template-columns: 1fr 1fr"] {
        grid-template-columns: 1fr !important;
    }
    .option-grid { grid-template-columns: 1fr !important; }
    .preview-box { min-height: 140px !important; }
    .upload-area { padding: 24px 16px !important; }
}

/* ============================================================
   ANALYTICS
   ============================================================ */
@media (max-width: 768px) {
    .stats-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 12px !important; }
    .stat-card { padding: 14px !important; }
    .stat-value { font-size: 26px !important; }
    .stat-label { font-size: 12px !important; }
    .grid-2 { grid-template-columns: 1fr !important; gap: 14px !important; }
    .chart-header { flex-direction: column !important; align-items: flex-start !important; gap: 10px !important; }
    .chart-filter { flex-wrap: wrap !important; }
    .filter-btn { font-size: 12px !important; padding: 5px 10px !important; }
    .activity-item { padding: 12px !important; gap: 10px !important; }
    .activity-icon { width: 32px !important; height: 32px !important; font-size: 14px !important; flex-shrink: 0 !important; }
}

@media (max-width: 480px) {
    .stats-grid { grid-template-columns: 1fr !important; }
}

/* ============================================================
   DOCUMENTS
   ============================================================ */
@media (max-width: 768px) {
    .stats-bar { grid-template-columns: repeat(3, 1fr) !important; gap: 10px !important; }
    .stat-card { padding: 12px 8px !important; }
    .stat-card .stat-value { font-size: 22px !important; }
    .action-bar {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 10px !important;
        padding: 14px !important;
    }
    .search-box { min-width: unset !important; }
    .btn-add { text-align: center !important; }
    .doc-preview { max-width: 180px !important; }
    /* Modal full-width on mobile */
    #viewModal > div { width: 95% !important; max-height: 85vh !important; }
    #viewModal > div > div:nth-child(3) { grid-template-columns: 1fr !important; }
}

@media (max-width: 480px) {
    .stats-bar { grid-template-columns: 1fr !important; }
}

/* ============================================================
   PROFILE SETTINGS
   ============================================================ */
@media (max-width: 768px) {
    .avatar { width: 56px !important; height: 56px !important; font-size: 22px !important; }
    .card-title { font-size: 14px !important; }
    /* QR section */
    #qrImage { width: 160px !important; height: 160px !important; }
}

/* ============================================================
   DASHBOARD
   ============================================================ */
@media (max-width: 768px) {
    /* Any dashboard stat grids */
    .dashboard-stats,
    .stats-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (max-width: 480px) {
    .dashboard-stats,
    .stats-grid {
        grid-template-columns: 1fr !important;
    }
}

/* ============================================================
   AUTH PAGES (login, register, 2fa)
   ============================================================ */
@media (max-width: 480px) {
    /* Auth cards */
    .card[style*="max-width: 420px"],
    .card[style*="max-width:420px"] {
        padding: 24px 16px !important;
        margin: 16px !important;
    }
}

/* ============================================================
   ADMIN LAYOUT
   ============================================================ */
@media (max-width: 768px) {
    /* Admin sidebar */
    .admin-sidebar {
        position: fixed !important;
        left: -260px !important;
        z-index: 999 !important;
        transition: left 0.3s !important;
    }
    .admin-sidebar.open { left: 0 !important; }
    .admin-content { margin-left: 0 !important; }

    /* Admin tables */
    .admin-table-wrap { overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; }

    /* Admin settings plan grid */
    div[style*="grid-template-columns: repeat(auto-fill, minmax(300px"] {
        grid-template-columns: 1fr !important;
    }
    div[style*="grid-template-columns: 1fr 1fr"] {
        grid-template-columns: 1fr !important;
    }
}

/* ============================================================
   PAYMENT / UPGRADE POPUPS
   ============================================================ */
@media (max-width: 480px) {
    #upgradePopup,
    #planPopup {
        bottom: 0 !important;
        right: 0 !important;
        left: 0 !important;
        border-radius: 16px 16px 0 0 !important;
        max-width: 100% !important;
    }
}

/* ============================================================
   MISC UTILITIES
   ============================================================ */
@media (max-width: 768px) {
    /* Hide long text on mobile */
    .hide-mobile { display: none !important; }

    /* Full-width inputs/buttons */
    .full-mobile { width: 100% !important; }

    /* Reduce padding on all padded containers */
    [style*="padding: 30px"],
    [style*="padding:30px"] {
        padding: 16px !important;
    }
    [style*="padding: 20px"],
    [style*="padding:20px"] {
        padding: 14px !important;
    }

    /* Max-width containers — allow full width */
    [style*="max-width: 900px"],
    [style*="max-width: 960px"],
    [style*="max-width: 1000px"],
    [style*="max-width: 1060px"],
    [style*="max-width: 1200px"],
    [style*="max-width: 1400px"] {
        max-width: 100% !important;
        padding-left: 12px !important;
        padding-right: 12px !important;
    }
}

@media (max-width: 480px) {
    .content-area { padding: 12px 10px !important; }

    /* Smaller font for meta text */
    small, .text-muted { font-size: 11px !important; }

    /* Tighter card padding */
    .card,
    .form-card,
    .chart-card {
        padding: 12px !important;
    }
}