/* Farm Bangla - Custom CSS */
/* Most styles use Tailwind CDN, this file for overrides */

* {
    box-sizing: border-box;
}

/* Smooth scrolling */
html {
    scroll-behavior: smooth;
}

/* Custom focus styles */
:focus-visible {
    outline: 2px solid #000;
    outline-offset: 2px;
}

/* Table styles */
table {
    border-collapse: collapse;
    width: 100%;
}

/* Print styles */
@media print {
    .sidebar,
    header,
    footer,
    .no-print {
        display: none !important;
    }
    main {
        margin: 0 !important;
        padding: 0 !important;
    }
}

/* Scrollbar styles */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
::-webkit-scrollbar-track {
    background: #f1f5f9;
}
::-webkit-scrollbar-thumb {
    background: #94a3b8;
    border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
    background: #64748b;
}

/* Loading spinner */
.spinner {
    border: 2px solid #f3f4f6;
    border-top: 2px solid #000;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* ── Touch-friendly buttons — remove 300ms tap delay, show pointer cursor ─── */
button,
[role="button"] {
    touch-action: manipulation;
}

button {
    cursor: pointer;
}

/* ── Minimum 44×44px touch targets for mobile menu toggle buttons ─────────── */
.mobile-menu-toggle {
    min-width: 44px;
    min-height: 44px;
    touch-action: manipulation;
}

/* ── Sidebar — mobile slide-in via .open class ───────────────────────────── */
@media (max-width: 1023px) {
    #sidebar {
        transform: translateX(-100%);
        transition: transform 0.3s ease;
    }
    #sidebar.open {
        transform: translateX(0);
    }
}

/* ── Base responsive rules ───────────────────────────────────────────────── */

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

/* Prevent horizontal overflow on all screens */
body {
    overflow-x: hidden;
}

/* Table wrapper — always scrollable on mobile */
.table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Sticky table header for long tables */
.table-sticky-head thead th {
    position: sticky;
    top: 0;
    background: #f9fafb;
    z-index: 1;
}

/* ── Shared mobile input rule — prevents iOS auto-zoom on focus ──────────── */
@media (max-width: 639px) {
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="number"],
    input[type="date"],
    input[type="tel"],
    select,
    textarea {
        width: 100%;
        font-size: 16px;
    }

    /* Action rows stack vertically */
    .action-row {
        flex-direction: column;
        gap: 0.5rem;
    }

    /* Card grid: 1 col by default on phones */
    .card-grid {
        grid-template-columns: 1fr !important;
    }

    /* Auth card */
    .auth-card {
        padding: 1.5rem !important;
        border-radius: 1rem !important;
    }

    /* Chart height base cap */
    canvas {
        max-height: 220px;
    }

    /* Page padding */
    main {
        padding: 1rem !important;
    }

    /* KPI card text scaling */
    .kpi-value {
        font-size: 1.5rem !important;
    }
}

/* ── Device-specific overrides (come after the generic rule to win cascade) ─ */

/* Extra small phones: < 360px (original iPhone SE 2016, Galaxy S5) */
@media (max-width: 359px) {
    html {
        font-size: 14px;
    }

    main {
        padding: 0.75rem !important;
    }

    h1 { font-size: 1.5rem !important; }
    h2 { font-size: 1.25rem !important; }

    .btn-group {
        flex-direction: column !important;
        gap: 0.5rem;
    }

    .kpi-value {
        font-size: 1.25rem !important;
    }

    canvas {
        max-height: 180px;
    }

    .auth-card {
        padding: 1rem !important;
        border-radius: 0.75rem !important;
    }

    .pricing-card {
        padding: 1.25rem !important;
    }
}

/* Small phones: 360px – 413px (Galaxy S8/S9/S10, iPhone SE 2nd gen/mini) */
@media (min-width: 360px) and (max-width: 413px) {
    main {
        padding: 0.875rem !important;
    }

    canvas {
        max-height: 200px;
    }

    .auth-card {
        padding: 1.25rem !important;
        border-radius: 0.875rem !important;
    }
}

/* Standard phones: 414px – 479px (iPhone Plus/XR/11/12 Pro Max) */
@media (min-width: 414px) and (max-width: 479px) {
    main {
        padding: 1rem !important;
    }
}

/* Large phones / phablets: 480px – 539px */
@media (min-width: 480px) and (max-width: 539px) {
    main {
        padding: 1.125rem !important;
    }

    canvas {
        max-height: 240px;
    }
}

/* Small tablets / foldables: 540px – 639px (Surface Duo, Galaxy Fold) */
@media (min-width: 540px) and (max-width: 639px) {
    main {
        padding: 1.25rem !important;
    }

    .card-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    canvas {
        max-height: 260px;
    }
}

/* ── Tablet: 640px – 1023px ─────────────────────────────────────────────── */
@media (min-width: 640px) and (max-width: 1023px) {
    main {
        padding: 1.25rem !important;
    }
}