/*
 * responsive.css — Erelong Admin Panel
 * Fixes layout for: phone (< 640px), tablet (640–1023px), desktop (≥ 1024px)
 * Loaded globally via admin.blade.php layout.
 */

/* ── Base ─────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html, body { overflow-x: hidden; max-width: 100vw; }

/* ── Prevent any fixed/absolute child from leaking wider than viewport ── */
.card-custom, .input-custom {
    max-width: 100%;
    word-break: break-word;
}

/* ── Tables: horizontal scroll on small screens ─────────────────────── */
.table-responsive-wrapper {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
table {
    min-width: 0;
}

/* ── Generic multi-column grids → stack on mobile ───────────────────── */
/* Any inline style grid used across pages */
@media (max-width: 639px) {

    /* 2-col and 3-col grids used in forms */
    [style*="grid-template-columns: 1fr 1fr"],
    [style*="grid-template-columns:1fr 1fr"],
    [style*="grid-template-columns: 1fr 1fr 180px"],
    [style*="grid-template-columns:1fr 1fr 180px"],
    [style*="grid-template-columns: 1fr 180px"],
    [style*="grid-template-columns:1fr 180px"],
    [style*="grid-template-columns: 1fr 160px"],
    [style*="grid-template-columns:1fr 160px"],
    [style*="grid-template-columns: repeat(2"],
    [style*="grid-template-columns:repeat(2"] {
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
    }

    /* Country / State / Pincode specific 3-col row */
    [style*="grid-template-columns: 1fr 1fr 180px"],
    [style*="grid-template-columns:1fr 1fr 180px"] {
        display: flex !important;
        flex-direction: column !important;
    }

    /* Header search bar — hide on tiny phones */
    header form.hidden { display: none !important; }

    /* Stat cards grid → 2-col on phone */
    .grid.grid-cols-4 { grid-template-columns: repeat(2, 1fr) !important; }
    .grid.grid-cols-3 { grid-template-columns: repeat(1, 1fr) !important; }

    /* Table cells — allow wrap */
    td, th { white-space: normal !important; font-size: 11px !important; }

    /* Modals — full width */
    [style*="max-width:480px"],
    [style*="max-width: 480px"],
    [style*="max-width:520px"],
    [style*="max-width: 520px"],
    [style*="max-width:540px"],
    [style*="max-width: 540px"],
    [style*="max-width:600px"],
    [style*="max-width: 600px"],
    [style*="max-width:640px"],
    [style*="max-width: 640px"] {
        max-width: calc(100vw - 24px) !important;
        width: calc(100vw - 24px) !important;
    }

    /* Modal padding reduction on phones */
    [style*="padding:24px"],
    [style*="padding: 24px"],
    [style*="padding:28px"],
    [style*="padding: 28px"],
    [style*="padding:32px"],
    [style*="padding: 32px"] {
        padding: 16px !important;
    }

    /* Page headings */
    h1[style*="font-size:22px"],
    h1[style*="font-size: 22px"] {
        font-size: 18px !important;
    }
    h1[style*="font-size:28px"],
    h1[style*="font-size: 28px"] {
        font-size: 20px !important;
    }

    /* Billing breakdown — ensure numbers don't overflow */
    #bill_breakdown_detail div {
        flex-wrap: wrap !important;
        gap: 4px !important;
    }

    /* Seats grid in billing */
    [style*="grid-template-columns: 1fr 1fr; gap: 10px"],
    [style*="grid-template-columns:1fr 1fr;gap:10px"] {
        grid-template-columns: 1fr !important;
    }

    /* Subscription plan cards */
    .plan-card-grid {
        grid-template-columns: 1fr !important;
    }

    /* Company list action buttons */
    .company-action-btns {
        flex-direction: column !important;
        align-items: stretch !important;
    }
}

/* ── Tablet (640px – 1023px) ─────────────────────────────────────────── */
@media (min-width: 640px) and (max-width: 1023px) {

    /* 3-col → 2-col on tablet */
    [style*="grid-template-columns: 1fr 1fr 180px"],
    [style*="grid-template-columns:1fr 1fr 180px"] {
        grid-template-columns: 1fr 1fr !important;
    }
    /* Pincode falls to second row naturally */

    /* 4-col stat cards → 2-col on tablet */
    .grid.grid-cols-4 { grid-template-columns: repeat(2, 1fr) !important; }

    /* Tables — horizontal scroll */
    .overflow-x-auto { overflow-x: auto; }

    /* Billing calculator on tablet */
    #bill_breakdown_detail { font-size: 11px !important; }
}

/* ── Dashboard calendar widget — prevent overlap on small viewports ──── */
@media (max-width: 1279px) {
    /* Mini calendar inside dashboard — push below stats */
    .dashboard-calendar-widget {
        position: static !important;
        width: 100% !important;
        max-width: 100% !important;
    }
}

/* ── Top header bar — compact on small screens ───────────────────────── */
@media (max-width: 767px) {
    header.h-16 {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }
    /* Shrink notification bell area */
    header .flex.items-center.gap-4 { gap: 8px !important; }
}

/* ── Sidebar — always full-height, scrollable ────────────────────────── */
#sidebar {
    height: 100dvh; /* dynamic viewport height — fixes mobile browser chrome */
    overflow-y: auto;
    overflow-x: hidden;
}

/* ── Table cells overflow fix ────────────────────────────────────────── */
.overflow-x-auto {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* ── Company create/edit form — Country+State+Pincode responsive ──────── */
.country-state-pincode-row {
    display: grid;
    grid-template-columns: 1fr 1fr 160px;
    gap: 16px;
}
@media (max-width: 639px) {
    .country-state-pincode-row {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }
}
@media (min-width: 640px) and (max-width: 767px) {
    .country-state-pincode-row {
        grid-template-columns: 1fr 1fr !important;
    }
}

/* ── Employees index — action buttons row ───────────────────────────── */
@media (max-width: 639px) {
    .emp-action-row {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 8px !important;
    }
    .emp-action-row button,
    .emp-action-row a {
        width: 100% !important;
        justify-content: center !important;
    }
}

/* ── Report export buttons ───────────────────────────────────────────── */
@media (max-width: 639px) {
    .report-export-row {
        flex-direction: column !important;
        gap: 8px !important;
    }
    .report-export-row a,
    .report-export-row button {
        width: 100% !important;
        justify-content: center !important;
    }
}

/* ── Attendance log table ────────────────────────────────────────────── */
@media (max-width: 767px) {
    .attendance-table-wrapper {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }
}

/* ── Modal scrollable on small screens ──────────────────────────────── */
.modal-body-scroll {
    max-height: 70vh;
    overflow-y: auto;
}
@media (max-width: 639px) {
    .modal-body-scroll {
        max-height: 60vh;
    }
}

/* ── Live map full height on mobile ─────────────────────────────────── */
@media (max-width: 767px) {
    #live-map-container {
        height: 60vw !important;
        min-height: 280px !important;
    }
}

/* ── Billing subscription cards ─────────────────────────────────────── */
@media (max-width: 639px) {
    .subscription-card-grid {
        grid-template-columns: 1fr !important;
    }
    .subscription-card-actions {
        flex-direction: column !important;
        gap: 6px !important;
    }
    .subscription-card-actions a,
    .subscription-card-actions button {
        width: 100% !important;
        text-align: center !important;
        justify-content: center !important;
    }
}

/* ── Employee 360 profile — stats grid ──────────────────────────────── */
@media (max-width: 639px) {
    .emp-stats-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* ── Fix: long text in table cells ──────────────────────────────────── */
td .truncate-cell {
    max-width: 160px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
@media (max-width: 639px) {
    td .truncate-cell { max-width: 100px; }
}

/* ── Super admin dashboard - KPI cards ──────────────────────────────── */
@media (max-width: 639px) {
    .sa-kpi-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
    }
    .sa-kpi-grid .kpi-value {
        font-size: 20px !important;
    }
}

/* ── Zones index map container ───────────────────────────────────────── */
@media (max-width: 767px) {
    #zonesMap, #zoneMapContainer {
        height: 240px !important;
    }
}

/* ── Page max-width containers ───────────────────────────────────────── */
@media (max-width: 639px) {
    [style*="max-width:860px"],
    [style*="max-width: 860px"],
    [style*="max-width:900px"],
    [style*="max-width: 900px"],
    [style*="max-width:1100px"],
    [style*="max-width: 1100px"] {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}

/* ── Toast notifications — full width on mobile ──────────────────────── */
@media (max-width: 639px) {
    #toast-container {
        left: 12px !important;
        right: 12px !important;
        min-width: auto !important;
        max-width: calc(100vw - 24px) !important;
    }
}

/* ══════════════════════════════════════════════════════════════════
   Dashboard two-column layout (left content + right calendar)
   ══════════════════════════════════════════════════════════════════ */

/* Desktop (≥ 1280px): side by side */
.sa-dashboard-layout {
    display: flex;
    gap: 20px;
    align-items: flex-start;
    width: 100%;
}
.sa-dashboard-main {
    flex: 1;
    min-width: 0;
    /* space-y-6 is applied via Tailwind class in the template */
}
.sa-dashboard-main > * + * {
    margin-top: 1.5rem; /* equivalent of space-y-6 */
}
.sa-dashboard-sidebar {
    width: 320px;
    flex-shrink: 0;
    position: sticky;
    top: 80px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-height: calc(100vh - 100px);
    overflow-y: auto;
}

/* Tablet (768px – 1279px): stack calendar below content */
@media (max-width: 1279px) {
    .sa-dashboard-layout {
        flex-direction: column !important;
        gap: 16px !important;
    }
    .sa-dashboard-sidebar {
        width: 100% !important;
        position: static !important;
        max-height: none !important;
        overflow-y: visible !important;
    }
    .sa-dashboard-main {
        width: 100% !important;
    }
}

/* Phone (< 640px): tighter spacing */
@media (max-width: 639px) {
    .sa-dashboard-layout {
        gap: 12px !important;
    }
}

/* ══════════════════════════════════════════════════════════════════
   Super-admin dashboard: Today's Activity + Revenue grid
   300px fixed first col → responsive
   Also used for accounting dashboard 1fr 1fr grids
   ══════════════════════════════════════════════════════════════════ */
.sa-activity-revenue-grid {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: 20px;
    align-items: start;
}
/* Accounting dashboard variant — equal columns */
.sa-activity-revenue-grid.equal-cols {
    grid-template-columns: 1fr 1fr;
}
@media (max-width: 1023px) {
    .sa-activity-revenue-grid,
    .sa-activity-revenue-grid.equal-cols {
        grid-template-columns: 1fr !important;
    }
}

/* ══════════════════════════════════════════════════════════════════
   country-state-pincode-row: already defined above but need gap too
   ══════════════════════════════════════════════════════════════════ */
.country-state-pincode-row {
    display: grid;
    grid-template-columns: 1fr 1fr 160px;
    gap: 16px;
}
@media (max-width: 639px) {
    .country-state-pincode-row {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }
}
@media (min-width: 640px) and (max-width: 767px) {
    .country-state-pincode-row {
        grid-template-columns: 1fr 1fr !important;
    }
}

/* ══════════════════════════════════════════════════════════════════
   Tables: always scrollable on smaller screens
   ══════════════════════════════════════════════════════════════════ */
@media (max-width: 1023px) {
    .overflow-x-auto,
    .table-responsive-wrapper {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        display: block;
        width: 100%;
    }
}

/* ══════════════════════════════════════════════════════════════════
   Page content wrapper — stop overflowing on mobile
   ══════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
    main.flex-1 {
        padding: 12px !important;
    }

    /* Header top bar — keep hamburger + logout, hide rest smartly */
    header.h-16 {
        height: auto !important;
        min-height: 56px !important;
        padding: 8px 12px !important;
        flex-wrap: wrap !important;
        gap: 6px !important;
    }
}

/* ══════════════════════════════════════════════════════════════════
   Sidebar width fix (now w-64 = 256px)
   ══════════════════════════════════════════════════════════════════ */
@media (min-width: 768px) {
    #sidebar { width: 256px !important; }
    .md\:ml-64 { margin-left: 256px !important; }
}

/* ══════════════════════════════════════════════════════════════════
   Prevent inline-grid/flex from overflowing viewport on mobile
   ══════════════════════════════════════════════════════════════════ */
@media (max-width: 639px) {
    /* Two-column stat-card grids with fixed widths */
    [style*="grid-template-columns: 300px 1fr"],
    [style*="grid-template-columns:300px 1fr"],
    [style*="grid-template-columns: 280px 1fr"],
    [style*="grid-template-columns:280px 1fr"] {
        grid-template-columns: 1fr !important;
    }

    /* Inline-style flex rows that can overflow */
    [style*="display:flex"][style*="gap:20px"],
    [style*="display: flex"][style*="gap: 20px"] {
        flex-wrap: wrap !important;
    }

    /* Approval bar on dashboard — stack vertically */
    [style*="justify-content: space-between"][style*="flex-wrap: wrap"] {
        flex-direction: column !important;
        align-items: flex-start !important;
    }
}

/* ══════════════════════════════════════════════════════════════════
   Accounting + any generic 1fr 1fr grid → stack on mobile/tablet
   (handled by .sa-activity-revenue-grid.equal-cols above)
   ══════════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════════
   Prevent page-level max-width containers from overflowing
   ══════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
    [style*="max-width: 1600px"],
    [style*="max-width:1600px"],
    [style*="max-width: 1400px"],
    [style*="max-width:1400px"] {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}

/* ══════════════════════════════════════════════════════════════════
   Super-admin company show page — info grid (2-col detail cards)
   ══════════════════════════════════════════════════════════════════ */
@media (max-width: 639px) {
    .grid.grid-cols-2.gap-4,
    .grid.grid-cols-2.gap-6 {
        grid-template-columns: 1fr !important;
    }
    .lg\:grid-cols-3 {
        grid-template-columns: 1fr !important;
    }
    .sm\:grid-cols-2 {
        grid-template-columns: 1fr !important;
    }
}

/* ══════════════════════════════════════════════════════════════════
   Sidebar mobile close button — ensure it's visible
   ══════════════════════════════════════════════════════════════════ */
#sidebar .md\:hidden {
    display: flex;
}
@media (min-width: 768px) {
    #sidebar .md\:hidden { display: none !important; }
    #sidebar-overlay { display: none !important; }
}

/* ══════════════════════════════════════════════════════════════════
   Card-custom — prevent overflow on narrow screens
   ══════════════════════════════════════════════════════════════════ */
.card-custom {
    overflow: hidden;
    min-width: 0;
}

/* ══════════════════════════════════════════════════════════════════
   Input fields — full width on mobile always
   ══════════════════════════════════════════════════════════════════ */
@media (max-width: 639px) {
    .input-custom {
        width: 100% !important;
        min-width: 0 !important;
    }
    /* Stat number text — shrink on phone */
    .text-2xl.font-bold { font-size: 1.15rem !important; }
    .text-3xl.font-bold { font-size: 1.35rem !important; }
}

/* ══════════════════════════════════════════════════════════════════
   Super admin — company action button columns in table rows
   ══════════════════════════════════════════════════════════════════ */
@media (max-width: 639px) {
    td .flex.items-center.gap-1,
    td .flex.items-center.gap-2,
    td [style*="display:flex"][style*="gap:"] {
        flex-wrap: wrap !important;
        gap: 4px !important;
    }
}

/* ══════════════════════════════════════════════════════════════════
   Toast container — mobile full width
   ══════════════════════════════════════════════════════════════════ */
@media (max-width: 639px) {
    #toast-container {
        left: 8px !important;
        right: 8px !important;
        top: 64px !important;
        min-width: unset !important;
        max-width: calc(100vw - 16px) !important;
    }
}

/* ══════════════════════════════════════════════════════════════════
   Tables — prevent header text from wrapping vertically
   Apply to all data tables across all panels
   ══════════════════════════════════════════════════════════════════ */
.table-responsive-wrapper table th {
    white-space: nowrap !important;
}

/* Table cells — allow wrap in body but not collapse too narrow */
.table-responsive-wrapper table td {
    min-width: 60px;
    vertical-align: top;
}

/* Company name cell — allow wrap but don't go tiny */
.table-responsive-wrapper table td:first-child {
    min-width: 120px;
}

/* Action buttons cell — never wrap */
.table-responsive-wrapper table td:last-child,
.table-responsive-wrapper table th:last-child {
    white-space: nowrap !important;
}

/* Status/badge cells — keep on one line */
.table-responsive-wrapper table td [style*="border-radius:999px"],
.table-responsive-wrapper table td [style*="border-radius: 999px"] {
    white-space: nowrap !important;
    display: inline-block;
}

/* Email in cells — allow break at @ */
.table-responsive-wrapper table td .email-cell {
    word-break: break-all;
    min-width: 120px;
    max-width: 180px;
}

/* ══════════════════════════════════════════════════════════════════
   Ensure overflow wrapper itself scrolls, not the page
   ══════════════════════════════════════════════════════════════════ */
.table-responsive-wrapper {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    display: block;
    width: 100%;
    /* subtle scroll indicator shadow on right edge */
    background:
        linear-gradient(to right, white 30%, rgba(255,255,255,0)) left top,
        linear-gradient(to left, white 30%, rgba(255,255,255,0)) right top,
        radial-gradient(farthest-side at 0 50%, rgba(0,0,0,0.08), transparent) left center,
        radial-gradient(farthest-side at 100% 50%, rgba(0,0,0,0.08), transparent) right center;
    background-repeat: no-repeat;
    background-size: 40px 100%, 40px 100%, 14px 100%, 14px 100%;
    background-attachment: local, local, scroll, scroll;
}

/* ══════════════════════════════════════════════════════════════════
   Super-admin billing expanded detail row — 3-col grid
   ══════════════════════════════════════════════════════════════════ */
.billing-detail-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 20px;
    align-items: start;
}
@media (max-width: 1023px) {
    .billing-detail-grid {
        grid-template-columns: 1fr 1fr !important;
    }
}
@media (max-width: 639px) {
    .billing-detail-grid {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
        padding: 12px !important;
    }
    /* Invoices section in the third column — full width on mobile */
    .billing-detail-grid > div:last-child {
        border-top: 1px solid #E2E8F0;
        padding-top: 12px;
    }
}

/* ══════════════════════════════════════════════════════════════════
   Billing table — ensure it scrolls on mobile with min-width
   ══════════════════════════════════════════════════════════════════ */
.billing-detail-grid .flex {
    flex-wrap: wrap !important;
}

/* ══════════════════════════════════════════════════════════════════
   Bill breakdown rows inside expanded detail — prevent overflow
   ══════════════════════════════════════════════════════════════════ */
@media (max-width: 639px) {
    .billing-detail-grid [style*="display:flex;justify-content:space-between"] {
        flex-wrap: wrap !important;
        gap: 2px !important;
    }
    .billing-detail-grid [style*="display:flex;justify-content:space-between"] span,
    .billing-detail-grid [style*="display:flex;justify-content:space-between"] strong {
        font-size: 10px !important;
    }
}

/* ══════════════════════════════════════════════════════════════════
   Super-admin Billing Index — table & expanded detail row
   ══════════════════════════════════════════════════════════════════ */

/* Billing main table wrapper */
.billing-main-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Desktop: show expand column */
.billing-expand-col {
    display: table-cell;
}

/* Billing detail grid — desktop 3 col */
.billing-detail-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 20px;
    align-items: start;
    padding: 16px 20px;
}

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

@media (max-width: 767px) {
    /* On mobile: hide the empty expand toggle column completely */
    .billing-expand-col {
        display: none !important;
    }

    /* Make the main row clickable on the company cell instead */
    .billing-main-table-wrap table tbody tr td:nth-child(2) {
        cursor: pointer;
    }

    /* Detail grid: single column */
    .billing-detail-grid {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
        padding: 12px 14px !important;
    }

    /* Billing table: remove min-width on mobile so it fits */
    .billing-main-table-wrap table {
        min-width: 0 !important;
        width: 100% !important;
    }

    /* Hide lower-priority columns on mobile */
    .billing-main-table-wrap table th:nth-child(4),  /* Seats Used */
    .billing-main-table-wrap table td:nth-child(4),
    .billing-main-table-wrap table th:nth-child(6),  /* Renewal */
    .billing-main-table-wrap table td:nth-child(6),
    .billing-main-table-wrap table th:nth-child(7),  /* Status */
    .billing-main-table-wrap table td:nth-child(7) {
        display: none !important;
    }

    /* Tighter column padding on mobile */
    .billing-main-table-wrap table th,
    .billing-main-table-wrap table td {
        padding: 8px 8px !important;
        font-size: 11px !important;
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    /* Tablet: keep all columns but reduce padding */
    .billing-main-table-wrap table th,
    .billing-main-table-wrap table td {
        padding: 8px 10px !important;
        font-size: 11px !important;
    }

    .billing-detail-grid {
        grid-template-columns: 1fr 1fr !important;
        padding: 14px 16px !important;
    }
}