/* ============================================================
   responsive.css  —  Turkina Logbook Generator
   بيتستدعى في layout.php بعد main.css
   ============================================================ */

/* ══════════════════════════════════════════
   TABLET (768px وأقل)
══════════════════════════════════════════ */
@media (max-width: 768px) {

    /* ── Navbar ── */
    .nav-inner {
        height: auto !important;
        padding: 10px 16px !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
    }

    .nav-brand {
        font-size: 15px !important;
    }

    .nav-links {
        flex-wrap: wrap !important;
        gap: 4px 8px !important;
        font-size: 13px !important;
    }

    .nav-links a {
        font-size: 13px !important;
        padding: 5px 10px !important;
    }

    .nav-badge {
        font-size: 11px !important;
        padding: 3px 10px !important;
    }

    /* ── Main content ── */
    .main-content {
        padding: 1.25rem 1rem !important;
    }

    /* ── Page header ── */
    .page-header {
        margin-bottom: 1.25rem !important;
    }

    .page-header h1 {
        font-size: 20px !important;
    }

    .page-header p {
        font-size: 13.5px !important;
    }

    /* ── generate-grid: العمودين → عمود واحد ── */
    .generate-grid {
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
    }

    /* ── Cards ── */
    .card {
        padding: 1.25rem !important;
    }

    .card-title {
        flex-wrap: wrap !important;
        gap: 8px !important;
        margin-bottom: 1rem !important;
    }

    /* أزرار Word/PDF/Print تتلف */
    .card-title > div {
        flex-wrap: wrap !important;
        gap: 6px !important;
    }

    /* ── Form grid → عمود واحد ── */
    .form-grid {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }

    .form-group.full {
        grid-column: 1 !important;
    }

    /* ── Buttons ── */
    .btn {
        font-size: 13px !important;
        padding: 9px 14px !important;
    }

    .btn-full {
        width: 100% !important;
    }

    /* ── Alerts ── */
    .alert {
        font-size: 13px !important;
        padding: 10px 13px !important;
    }

    /* ── Logbook table output ── */
    #logbookTable {
        font-size: 12px !important;
        line-height: 1.55 !important;
    }

    /* Header row → عمود واحد */
    #logbookTable > div:first-child {
        display: block !important;
    }

    #logbookTable > div:first-child > div:first-child {
        border-right: none !important;
        border-bottom: 1px solid #222 !important;
    }

    /* ── Pricing grid → عمود واحد ── */
    .pricing-grid {
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
    }

    /* ── Features grid → عمود واحد ── */
    .features-grid {
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
        margin-top: 2rem !important;
    }

    /* ── Hero ── */
    .hero {
        padding: 3rem 1rem 2rem !important;
    }

    .hero h1 {
        font-size: 26px !important;
        letter-spacing: -0.5px !important;
    }

    .hero p {
        font-size: 15px !important;
    }

    /* ── Tables → scroll أفقي ── */
    .card > .table,
    .table-wrapper {
        display: block !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    /* ── Stat cards ── */
    .stat-value {
        font-size: 22px !important;
    }

    /* ── Utility ── */
    .hide-mobile { display: none !important; }
    .show-mobile { display: block !important; }
}

/* ══════════════════════════════════════════
   MOBILE صغير (480px وأقل)
══════════════════════════════════════════ */
@media (max-width: 480px) {

    /* ── Navbar ── */
    .nav-links {
        gap: 3px 6px !important;
    }

    .nav-links a {
        font-size: 12px !important;
        padding: 4px 8px !important;
    }

    .btn-logout,
    .btn-primary {
        padding: 4px 10px !important;
        font-size: 12px !important;
    }

    /* ── Main content ── */
    .main-content {
        padding: 1rem !important;
    }

    /* ── Page header ── */
    .page-header h1 {
        font-size: 18px !important;
    }

    /* ── Cards ── */
    .card {
        padding: 1rem !important;
        border-radius: 10px !important;
    }

    /* ── أزرار التحميل في output card تتساوى ── */
    .card-title > div .btn {
        flex: 1 !important;
        justify-content: center !important;
        font-size: 12px !important;
        padding: 5px 8px !important;
    }

    /* ── Generate button ── */
    #genBtn {
        padding: 12px !important;
        font-size: 14px !important;
    }

    /* ── Loading card ── */
    #loadingCard > div {
        padding: 2rem 1rem !important;
    }

    /* ── Logbook table ── */
    #logbookTable {
        font-size: 11px !important;
        line-height: 1.5 !important;
    }

    #logbookTable > div > div {
        padding: 8px 9px !important;
    }

    /* ── Auth pages ── */
    .auth-wrap {
        margin: 2rem auto !important;
        padding: 0 1rem !important;
    }

    /* ── Hero ── */
    .hero h1 {
        font-size: 22px !important;
    }

    .hero-btns {
        flex-direction: column !important;
        align-items: center !important;
    }

    .hero-btns .btn {
        width: 100% !important;
        max-width: 280px !important;
        justify-content: center !important;
    }

    /* ── Footer ── */
    .footer {
        padding: 1.25rem 1rem !important;
        font-size: 12px !important;
    }
}

/* ══════════════════════════════════════════
   PRINT
══════════════════════════════════════════ */
@media print {

    .navbar,
    .footer,
    .page-header,
    .card:not(:has(#logbookTable)),
    #casesLeftBadge,
    .btn {
        display: none !important;
    }

    .main-content {
        padding: 0 !important;
        max-width: 100% !important;
    }

    body {
        background: #fff !important;
        color: #000 !important;
        font-size: 11pt !important;
    }

    .card:has(#logbookTable) {
        border: none !important;
        box-shadow: none !important;
        padding: 0 !important;
    }

    #logbookTable {
        width: 100% !important;
        font-size: 10.5pt !important;
        border: 1.5px solid #000 !important;
    }
}