/* ============================================================
 *  PDF Dashboard — Custom Styles v3.0
 *  Mobile-First Responsive Design
 *  Bootstrap 5.3 + Font Awesome 6
 * ============================================================ */

/* ============================================================
   1. CSS O'ZGARUVCHILARI
   ============================================================ */
:root {
    --pdf-primary:        #0d6efd;
    --pdf-primary-light:  #dbeafe;
    --pdf-success:        #198754;
    --pdf-success-light:  #dcfce7;
    --pdf-warning:        #f59e0b;
    --pdf-warning-light:  #fef3c7;
    --pdf-info:           #0ea5e9;
    --pdf-info-light:     #e0f2fe;
    --pdf-indigo:         #6366f1;
    --pdf-indigo-light:   #e0e7ff;
    --pdf-danger:         #dc3545;
    --pdf-danger-light:   #fee2e2;
    --pdf-bg:             #f0f4f8;
    --pdf-card-bg:        #ffffff;
    --pdf-card-radius:    0.625rem;
    --pdf-shadow-sm:      0 2px 8px rgba(0, 0, 0, 0.07);
    --pdf-shadow-md:      0 6px 24px rgba(0, 0, 0, 0.10);
    --pdf-shadow-lg:      0 12px 40px rgba(0, 0, 0, 0.12);
    --pdf-transition:     all 0.22s cubic-bezier(0.4, 0, 0.2, 1);
    --pdf-font-main:      'Segoe UI', system-ui, -apple-system, sans-serif;
    /* Notchli telefonlar uchun xavfsiz zone */
    --safe-top:    env(safe-area-inset-top,    0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
    --safe-left:   env(safe-area-inset-left,   0px);
    --safe-right:  env(safe-area-inset-right,  0px);
}

/* ============================================================
   2. GLOBAL BAZAVIY USLUBLAR (Mobile-first)
   ============================================================ */
*,
*::before,
*::after {
    box-sizing: border-box;
    /* Sensorli ekranlar uchun to'g'ri tap xatti-harakati */
    -webkit-tap-highlight-color: transparent;
}

html {
    scroll-behavior: smooth;
    /* iOS da ortiqcha zoom ni oldini olish */
    -webkit-text-size-adjust: 100%;
    text-size-adjust:         100%;
}

body {
    background-color: var(--pdf-bg);
    font-family:      var(--pdf-font-main);
    color:            #1e293b;
    min-height:       100vh;
    min-height:       -webkit-fill-available; /* iOS 100vh muammosini hal qiladi */
    display:          flex;
    flex-direction:   column;
    overflow-x:       hidden; /* Gorizontal scroll bo'lmasin */
}

main {
    flex: 1 0 auto;
    /* Notchli telefonlar uchun yon chekkalar */
    padding-left:  max(0.5rem, var(--safe-left));
    padding-right: max(0.5rem, var(--safe-right));
}

code {
    background-color: #f1f5f9;
    padding:          2px 6px;
    border-radius:    4px;
    font-size:        0.875em;
    color:            #e83e8c;
    word-break:       break-all; /* Mobilda uzun kod wrap bo'lsin */
}

/* Barcha img va media responsive bo'lsin */
img, svg, video, canvas, audio, iframe, embed, object {
    max-width: 100%;
}

/* ============================================================
   3. NAVBAR — Mobil
   ============================================================ */
.navbar {
    padding-top:    0.6rem;
    padding-bottom: 0.6rem;
    background:     linear-gradient(135deg, #1a56db 0%, #0d6efd 100%) !important;
    /* Notchli telefonlarda top safe area */
    padding-top:    calc(0.6rem + var(--safe-top));
}

.navbar-brand {
    font-size:      1.05rem;
    letter-spacing: 0.3px;
}

/* Print tugmasi mobilda kichikroq */
.navbar .btn-light {
    font-size:  0.8rem;
    padding:    0.35rem 0.65rem;
    min-height: 36px; /* Touch target */
}

/* ============================================================
   4. SOZLAMALAR PANELI — Mobil
   ============================================================ */
.settings-panel {
    border-radius: var(--pdf-card-radius) !important;
}

.folder-info-box {
    background-color: #f8fafc;
    border:           1px solid #e2e8f0;
    border-radius:    0.5rem;
    min-width:        0;
    min-height:       44px; /* Touch target minimum */
}

/* Papka tanlash tugmasi — mobilda to'liq kenglik */
#btnPickFolder {
    min-height:  44px;  /* Touch target */
    white-space: nowrap;
}

/* Hisoblash tugmasi — mobilda to'liq kenglik */
#btnCalculate {
    min-height: 48px; /* Kattaroq touch target */
}

/* Narx input uchun raqam spinner */
#priceInput::-webkit-inner-spin-button,
#priceInput::-webkit-outer-spin-button {
    opacity: 1;
}

/* Mobilda form-control uchun yirikroq touch target */
.form-control,
.input-group-text {
    min-height: 44px;
}

/* ============================================================
   5. STATISTIKA KARTALAR — Mobil-first
   ============================================================ */
.stat-card {
    transition:    var(--pdf-transition);
    border-radius: var(--pdf-card-radius) !important;
    overflow:      hidden;
    position:      relative;
}

/* Chap chegara rangi */
.stat-card::before {
    content:       '';
    position:      absolute;
    left:          0;
    top:           0;
    bottom:        0;
    width:         4px;
    border-radius: var(--pdf-card-radius) 0 0 var(--pdf-card-radius);
}

.stat-card--primary::before { background-color: var(--pdf-primary); }
.stat-card--success::before { background-color: var(--pdf-success); }
.stat-card--warning::before { background-color: var(--pdf-warning); }
.stat-card--indigo::before  { background-color: var(--pdf-indigo);  }
.stat-card--danger::before  { background-color: var(--pdf-danger);  }

/* Hover faqat mouse qurilmalarda ishlaydi */
@media (hover: hover) and (pointer: fine) {
    .stat-card:hover {
        transform:  translateY(-4px);
        box-shadow: var(--pdf-shadow-lg) !important;
    }
}

/* Ikonka konteyner — mobilda kichikroq */
.stat-icon {
    width:           44px;
    height:          44px;
    display:         flex;
    align-items:     center;
    justify-content: center;
    flex-shrink:     0;
    border-radius:   0.5rem;
    font-size:       1.1rem;
}

.stat-icon--primary { background-color: var(--pdf-primary-light); color: var(--pdf-primary); }
.stat-icon--success { background-color: var(--pdf-success-light); color: var(--pdf-success); }
.stat-icon--warning { background-color: var(--pdf-warning-light); color: var(--pdf-warning); }
.stat-icon--indigo  { background-color: var(--pdf-indigo-light);  color: var(--pdf-indigo);  }
.stat-icon--danger  { background-color: var(--pdf-danger-light);  color: var(--pdf-danger);  }

/* Matn qismlari — mobilda kichikroq */
.stat-label {
    font-size:      0.68rem;
    font-weight:    600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color:          #64748b;
    line-height:    1.2;
}

.stat-value {
    font-size:   1.1rem;
    font-weight: 700;
    color:       #0f172a;
    line-height: 1.2;
    /* Uzun raqam wrap bo'lmasin deb */
    white-space: nowrap;
    overflow:    hidden;
    text-overflow: ellipsis;
}

.stat-sub {
    font-size: 0.67rem;
    color:     #94a3b8;
}

/* ============================================================
   6. JADVAL KARTASI
   ============================================================ */
.card {
    border-radius: var(--pdf-card-radius) !important;
}

.card-header {
    border-radius: var(--pdf-card-radius) var(--pdf-card-radius) 0 0 !important;
}

/* Jadval sarlavhasidagi tugmalar mobilda matnni berkitadi */
.card-header .btn-sm {
    min-height: 36px;
    font-size:  0.8rem;
    padding:    0.3rem 0.6rem;
}

/* ============================================================
   7. ASOSIY JADVAL — Mobil
   ============================================================ */
#pdfTable {
    font-size: 0.82rem;
}

#pdfTable thead th {
    font-weight:    600;
    font-size:      0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    white-space:    nowrap;
    vertical-align: middle;
    padding:        0.5rem 0.5rem;
}

#pdfTable tbody td {
    vertical-align: middle;
    padding:        0.5rem 0.5rem;
    font-size:      0.82rem;
}

/* Hover faqat mouse qurilmalarda */
@media (hover: hover) {
    #pdfTable tbody tr:hover {
        background-color: rgba(13, 110, 253, 0.04) !important;
    }
}

/* Narx ustuni */
#pdfTable tbody td.price-cell {
    font-weight: 600;
}

/* Jadval oyog'i */
.table-footer-total {
    background-color: #f8fafc !important;
    border-top:       2px solid #cbd5e1 !important;
}

.table-footer-total td {
    padding:   0.55rem 0.5rem;
    font-size: 0.82rem;
    border-top: 2px solid #cbd5e1 !important;
}

/* Jadval wrapping — mobilda gorizontal scroll */
.table-responsive {
    -webkit-overflow-scrolling: touch; /* iOS da silliq scroll */
    border-radius:              0 0 var(--pdf-card-radius) var(--pdf-card-radius);
}

/* DataTables Responsive kengaytirilgan qator */
table.dataTable > tbody > tr.child {
    padding: 0.5rem 1rem !important;
}

table.dataTable > tbody > tr.child ul.dtr-details {
    width:     100%;
    font-size: 0.85rem;
}

table.dataTable > tbody > tr.child ul.dtr-details > li {
    border-bottom: 1px solid #e2e8f0;
    padding:       0.4rem 0;
}

/* ============================================================
   8. DATATABLES OVERRIDE — Mobil
   ============================================================ */

/* Qidiruv + length wrapper — mobilda ustun ustiga */
div.dataTables_wrapper div.dataTables_filter {
    text-align: left;
}

div.dataTables_wrapper div.dataTables_filter input {
    border:        1px solid #cbd5e1;
    border-radius: 0.5rem;
    padding:       0.375rem 0.75rem;
    font-size:     0.875rem;
    margin-left:   0.5rem;
    transition:    border-color 0.15s ease, box-shadow 0.15s ease;
    min-height:    40px; /* Touch target */
    width:         calc(100% - 60px);
    max-width:     220px;
}

div.dataTables_wrapper div.dataTables_filter input:focus {
    outline:      none;
    border-color: var(--pdf-primary);
    box-shadow:   0 0 0 0.2rem rgba(13, 110, 253, 0.15);
}

/* Length select */
div.dataTables_wrapper div.dataTables_length select {
    border:        1px solid #cbd5e1;
    border-radius: 0.5rem;
    padding:       0.3rem 1.5rem 0.3rem 0.6rem;
    font-size:     0.875rem;
    margin:        0 0.35rem;
    min-height:    40px;
}

/* Ma'lumot matni */
div.dataTables_wrapper div.dataTables_info {
    font-size:   0.78rem;
    color:       #64748b;
    padding-top: 0.5rem;
}

/* Pagination */
div.dataTables_wrapper div.dataTables_paginate ul.pagination {
    margin-bottom: 0;
    flex-wrap:     wrap; /* Kichik ekranlarda wrap bo'lsin */
    gap:           2px;
}

div.dataTables_wrapper div.dataTables_paginate .page-link {
    border-radius: 0.375rem !important;
    margin:        0 1px;
    font-size:     0.8rem;
    min-width:     36px;   /* Touch target */
    min-height:    36px;
    display:       flex;
    align-items:   center;
    justify-content: center;
}

/* ============================================================
   9. ALERT (bo'sh holat)
   ============================================================ */
.alert {
    border:        none;
    border-radius: var(--pdf-card-radius);
    font-size:     0.9rem;
}

.alert-warning {
    background-color: #fffbeb;
    color:            #78350f;
}

/* ============================================================
   10. FOOTER — Mobil
   ============================================================ */
.footer-bar {
    background-color: #ffffff;
    border-top:       1px solid #e2e8f0;
    flex-shrink:      0;
    /* Notchli telefonlarda pastki safe area */
    padding-bottom:   calc(0.5rem + var(--safe-bottom));
    font-size:        0.8rem;
}

/* ============================================================
   11. YORDAMCHI SINFLAR
   ============================================================ */
.print-only {
    display: none !important;
}

/* Matn qisqartirish */
.text-truncate-name {
    overflow:      hidden;
    text-overflow: ellipsis;
    white-space:   nowrap;
    max-width:     180px;
}

/* ============================================================
   12. RESPONSIVE BREAKPOINTS
   ============================================================ */

/* --- SM: 576px+ (Kichik telefon landscape / katta portret) --- */
@media (min-width: 576px) {
    .stat-icon {
        width:     52px;
        height:    52px;
        font-size: 1.25rem;
    }

    .stat-value {
        font-size: 1.25rem;
    }

    .stat-label {
        font-size: 0.72rem;
    }

    .text-truncate-name {
        max-width: 250px;
    }

    #pdfTable thead th,
    #pdfTable tbody td {
        padding: 0.55rem 0.65rem;
    }
}

/* --- MD: 768px+ (Planshet portret) --- */
@media (min-width: 768px) {
    .stat-icon {
        width:     58px;
        height:    58px;
        font-size: 1.4rem;
    }

    .stat-value {
        font-size: 1.4rem;
    }

    .stat-label {
        font-size: 0.75rem;
    }

    .navbar-brand {
        font-size: 1.2rem;
    }

    .navbar .btn-light {
        font-size: 0.875rem;
        padding:   0.4rem 0.85rem;
    }

    #pdfTable {
        font-size: 0.88rem;
    }

    #pdfTable thead th {
        font-size: 0.77rem;
        padding:   0.6rem 0.75rem;
    }

    #pdfTable tbody td {
        font-size: 0.88rem;
        padding:   0.6rem 0.75rem;
    }

    .table-footer-total td {
        font-size: 0.88rem;
        padding:   0.65rem 0.75rem;
    }

    .text-truncate-name {
        max-width: 320px;
    }

    div.dataTables_wrapper div.dataTables_filter input {
        max-width: 280px;
    }
}

/* --- LG: 992px+ (Planshet landscape / Desktop) --- */
@media (min-width: 992px) {
    :root {
        --pdf-card-radius: 0.75rem;
    }

    .stat-icon {
        width:     64px;
        height:    64px;
        font-size: 1.5rem;
    }

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

    .navbar {
        padding-top:    0.75rem;
        padding-bottom: 0.75rem;
    }

    #pdfTable {
        font-size: 0.9rem;
    }

    #pdfTable thead th {
        font-size: 0.78rem;
        padding:   0.6rem 0.75rem;
    }

    #pdfTable tbody td {
        font-size: 0.9rem;
        padding:   0.65rem 0.75rem;
    }

    .text-truncate-name {
        max-width: none;
    }

    div.dataTables_wrapper div.dataTables_filter input {
        max-width: 240px;
    }
}

/* --- XL: 1200px+ --- */
@media (min-width: 1200px) {
    .stat-value {
        font-size: 1.5rem;
    }

    #cardTotalSum,
    #cardPricePerPage {
        font-size: 1.3rem;
    }
}

/* --- XXL: 1400px+ --- */
@media (min-width: 1400px) {
    .stat-value {
        font-size: 1.6rem;
    }
}

/* ============================================================
   13. FAQAT MOBIL (<576px) — Qo'shimcha
   ============================================================ */
@media (max-width: 575.98px) {

    /* Narx kartasi: uzun matn uchun font kichikroq */
    #cardTotalSum,
    #cardPricePerPage {
        font-size:   0.95rem;
        white-space: normal;
        line-height: 1.3;
    }

    /* Sozlamalar panelida tugmalar to'liq kenglik */
    #btnPickFolder {
        width: 100%;
    }

    /* Card header — matnni qisqartir */
    .card-header h5 {
        font-size: 0.9rem;
    }

    /* Alert matni kichikroq */
    .alert h6 {
        font-size: 0.9rem;
    }

    /* DataTables length va filter ustma-ust */
    div.dataTables_wrapper div.row:first-child > div {
        width: 100% !important;
        text-align: left !important;
        margin-bottom: 0.5rem;
    }

    div.dataTables_wrapper div.dataTables_filter input {
        width: calc(100% - 65px);
        max-width: none;
    }

    /* Pagination kichikroq */
    div.dataTables_wrapper div.dataTables_paginate .page-link {
        min-width:  32px;
        min-height: 32px;
        font-size:  0.75rem;
        padding:    0.25rem 0.4rem;
    }

    /* Footer yashirilgan bo'limlar */
    #footerSummary {
        display: none;
    }
}

/* ============================================================
   14. LANDSCAPE ORIENTATION — Telefon gorizontal
   ============================================================ */
@media (max-width: 768px) and (orientation: landscape) {

    /* Navbar balandligi kamaytirish */
    .navbar {
        padding-top:    0.4rem;
        padding-bottom: 0.4rem;
    }

    /* Kartalar hajmini kamaytirish */
    .stat-icon {
        width:     40px;
        height:    40px;
        font-size: 1rem;
    }

    .stat-value {
        font-size: 1rem;
    }

    /* Sahifa yuklanishini tezlashtirish uchun margin kamaytirish */
    main {
        margin-top: 0.75rem !important;
    }
}

/* ============================================================
   15. PRINT USLUBLARI
   ============================================================ */
@media print {

    /* --- A4 sahifa sozlamalari --- */
    @page {
        size:   A4 portrait;
        margin: 20mm;
    }

    /* --- Ekran elementlarini berkitamiz --- */
    .no-print,
    .navbar,
    .settings-panel,
    .footer-bar,
    nav,
    footer,
    button,
    .btn,
    #emptyAlert,
    #pdfTable_wrapper,
    div.dataTables_wrapper,
    .stat-card {
        display: none !important;
    }

    /* --- Print-only elementlarni ko'rsatamiz --- */
    .print-only {
        display: block !important;
    }

    /* --- Body reset --- */
    body {
        background-color: #ffffff !important;
        font-family:      'Times New Roman', Times, serif !important;
        font-size:        14pt !important;
        color:            #000000 !important;
    }

    /* --- Karta va konteyner uslublarini o'chiramiz --- */
    .card,
    .card-header,
    .card-body {
        border:     none !important;
        box-shadow: none !important;
        padding:    0    !important;
        background: transparent !important;
    }

    .container-fluid {
        padding: 0 !important;
        margin:  0 !important;
    }

    .table-responsive {
        overflow: visible !important;
    }

    /* --- Print sarlavhasi --- */
    .print-header {
        text-align:     center;
        margin-bottom:  18pt;
        padding-bottom: 12pt;
    }

    .print-header h2 {
        font-family:    'Times New Roman', Times, serif;
        font-size:      20pt;
        font-weight:    bold;
        text-transform: uppercase;
        letter-spacing: 2px;
        margin-bottom:  14pt;
        color:          #000000;
    }

    .print-meta-grid {
        display:               grid;
        grid-template-columns: auto 1fr;
        gap:                   4pt 16pt;
        width:                 fit-content;
        margin:                0 auto 10pt;
        font-size:             11pt;
        text-align:            left;
    }

    .print-meta-grid > div:nth-child(odd) {
        font-weight: bold;
        white-space: nowrap;
    }

    .print-divider {
        border:     none;
        border-top: 2pt solid #000000;
        margin:     10pt 0 16pt;
    }

    /* --- Print jadval --- */
    .print-table {
        width:           100% !important;
        border-collapse: collapse !important;
        font-family:     'Times New Roman', Times, serif !important;
        font-size:       12pt !important;
        color:           #000000 !important;
    }

    .print-table th,
    .print-table td {
        border:   1pt solid #000000 !important;
        padding:  6pt 8pt !important;
        color:    #000000 !important;
    }

    .print-table thead tr {
        background-color:           #e0e0e0 !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust:         exact;
    }

    .print-table thead th {
        font-weight: bold;
        font-size:   12pt;
        text-align:  center;
    }

    .print-table tbody tr:nth-child(even) {
        background-color:           #f5f5f5 !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust:         exact;
    }

    .print-table tfoot td {
        font-weight: bold;
        border-top:  2pt solid #000000 !important;
    }

    .text-right { text-align: right; }

    /* --- Print xulosa bloki --- */
    .print-summary-box {
        margin-top:        18pt;
        padding:           10pt;
        border:            1pt solid #000000;
        page-break-inside: avoid;
    }

    .print-summary-table {
        width:           100%;
        border-collapse: collapse;
        font-family:     'Times New Roman', Times, serif;
        font-size:       12pt;
    }

    .print-summary-table td {
        padding: 4pt 8pt;
        border:  none !important;
    }

    .print-summary-table td:nth-child(odd):not(:nth-child(3)) {
        font-weight: bold;
        white-space: nowrap;
        width:       1%;
    }

    .print-summary-table td:nth-child(3) {
        width: 30pt;
    }

    /* --- Imzo qismi --- */
    .print-signature-row {
        display:           flex;
        justify-content:   space-between;
        margin-top:        50pt;
        page-break-inside: avoid;
    }

    .print-signature-block {
        flex: 1;
    }

    .print-signature-block:last-child {
        text-align: right;
    }

    .print-signature-block p {
        font-family: 'Times New Roman', Times, serif;
        font-size:   13pt;
        margin:      0;
        line-height: 2;
    }

    .print-line {
        border-bottom: 1pt solid #000;
        display:       inline-block;
        min-width:     150pt;
    }

    table { page-break-inside: auto; }
    tr    { page-break-inside: avoid; page-break-after: auto; }
}