/* ===========================
   Mobile-Specific Improvements
   Loaded after style.css — covers all pages: expenses, income, loans,
   users, settings, reports.
   =========================== */

/* ============ Tablet (≤ 1024px) ============ */
@media (max-width: 1024px) {
    /* Generic two-col layouts → single col */
    .page-content > div[style*="grid-template-columns:1fr 1fr"],
    .page-content > div[style*="grid-template-columns: 1fr 1fr"] {
        grid-template-columns: 1fr !important;
    }
}

/* ============ Mobile (≤ 768px) ============ */
@media (max-width: 768px) {

    /* Prevent any rogue horizontal overflow from leaking out of the viewport */
    body.layout-main main { overflow-x: hidden; max-width: 100vw; }
    .page-content { overflow-x: hidden; max-width: 100%; box-sizing: border-box; }

    /* ---- Generic page header: stack title + actions ---- */
    .page-header {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }
    .page-header h1 { font-size: 1.2rem; }
    .page-subtitle  { font-size: .78rem; }

    .page-header-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
    }
    .page-header-actions > .btn,
    .page-header-actions > .btn-sm {
        flex: 1 1 100%;              /* 1 button per row — Hebrew labels are too long for half-rows */
        min-width: 0;
        justify-content: center;
        padding: 0 12px !important;
        height: 44px !important;
        font-size: .85rem !important;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* Month selector — full row, chevrons flush to the frame edges. Targets
       both old layout (pill inside .page-header-actions, e.g. dashboard / reports)
       and new layout (pill is a direct child of .page-header, e.g. expenses).
       In the new layout the pill is sibling-after-title, so it sits between
       title and actions naturally; on mobile we want it on its own row. */
    .page-header-actions .month-selector,
    .page-header > .month-selector {
        flex: 1 1 100% !important;
        order: -1;
        justify-content: space-between !important;
        gap: 0 !important;
        height: 44px !important;
        padding: 0 !important;
        overflow: hidden;
    }
    .page-header-actions .month-selector .month-selector-label,
    .page-header > .month-selector .month-selector-label {
        min-width: auto !important;
        flex: 1 1 auto;
        font-size: 1rem;
        text-align: center;
    }
    .page-header-actions .month-selector .btn-icon,
    .page-header > .month-selector .btn-icon {
        flex: 0 0 auto;
        height: 100%;
        width: 44px;
        border-radius: 0;
        background: transparent;
        margin: 0;
    }
    .page-header-actions .month-selector .btn-icon:first-child,
    .page-header > .month-selector .btn-icon:first-child {
        border-top-right-radius: var(--radius-lg);
        border-bottom-right-radius: var(--radius-lg);
    }
    .page-header-actions .month-selector .btn-icon:last-child,
    .page-header > .month-selector .btn-icon:last-child {
        border-top-left-radius: var(--radius-lg);
        border-bottom-left-radius: var(--radius-lg);
    }
    /* New layout: kill the desktop auto-margins so the pill stacks like a
       normal flex column item below the title (and above the action bar
       reorders via order:-1). */
    .page-header > .page-header-month {
        margin-inline: 0 !important;
    }

    /* ---- Cards ---- */
    .card-header {
        padding: 14px 16px 10px;
        flex-wrap: wrap;
        gap: 8px;
    }
    .card-body { padding: 14px 16px; }
    .card-title { font-size: .95rem; }

    /* ---- Forms ---- */
    .form-row,
    .form-row-3 {
        grid-template-columns: 1fr !important;
        gap: 12px;
    }

    /* ---- Stat grid on phone: 2 per row, last card alone stretches via flex-grow ---- */
    .stat-grid { gap: 12px; }
    .stat-grid > .stat-card { flex-basis: calc(50% - 6px) !important; }

    /* ---- Tables: compact + horizontally scrollable with styled scrollbar ---- */
    .table-wrap {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
        scrollbar-color: rgba(99,102,241,.45) transparent;
    }
    .table-wrap::-webkit-scrollbar { height: 6px; }
    .table-wrap::-webkit-scrollbar-track {
        background: rgba(99,102,241,.05);
        border-radius: 999px;
    }
    .table-wrap::-webkit-scrollbar-thumb {
        background: linear-gradient(90deg, rgba(99,102,241,.5), rgba(168,85,247,.5));
        border-radius: 999px;
    }
    .table-wrap::-webkit-scrollbar-thumb:hover {
        background: linear-gradient(90deg, rgba(99,102,241,.8), rgba(168,85,247,.8));
    }
    .table { font-size: .82rem; min-width: 100%; border-collapse: separate; border-spacing: 0; }
    .table th, .table td { padding: 9px 8px; white-space: nowrap; }

    /* ============ Expenses list — mobile cards (page-expenses only) ============
       Restructured into a 3-row card layout:
         Row 1 — description (right) + amount (left), prominent
         Row 2 — chips inline: category · payer · payments-progress
         Row 3 — date (right, secondary) + action buttons (left)
       The trick: grid auto-flow places the middle cells (#3..#last-2) on row 2
       in their natural columns, no markup changes.
       Scoped to body.page-expenses so other tables keep their default behavior. */
    .page-expenses .table-wrap {
        overflow-x: visible !important;
    }
    .page-expenses .table-wrap::-webkit-scrollbar { display: none; }
    .page-expenses .table,
    .page-expenses .table tbody { display: block; width: 100%; }
    .page-expenses .table thead { display: none; }

    .page-expenses .table tr {
        display: grid;
        grid-template-columns: auto auto auto 1fr;
        column-gap: 10px;
        row-gap: 10px;
        background: var(--card);
        border: 1px solid var(--card-border);
        border-radius: var(--radius-md);
        padding: 14px;
        margin-bottom: 10px;
        align-items: center;
    }
    .page-expenses .table td {
        padding: 0 !important;
        border: 0 !important;
        white-space: normal !important;
        min-width: 0;
    }

    /* === Row 1 — desc (cols 1-3) + amount (col 4) === */
    .page-expenses .table td:nth-child(2) {
        grid-row: 1;
        grid-column: 1 / 4;
    }
    .page-expenses .table td:nth-last-child(2) {
        grid-row: 1;
        grid-column: 4;
        text-align: end;
        align-self: start;
    }

    /* === Row 2 — meta chips: category, payer (multi-user only), payments
            Auto-flow into cols 1, 2, 3. The 1fr 4th column absorbs slack. === */
    .page-expenses .table td:nth-child(n+3):not(:last-child):not(:nth-last-child(2)) {
        grid-row: 2;
        align-self: center;
    }
    /* Hide single-payment "—" placeholder so the chip row stays clean */
    .page-expenses .payments-cell-single { display: none; }
    /* Reset the desktop margin:0 auto on the payments-cell — flush right in card */
    .page-expenses .payments-cell { margin: 0 !important; }

    /* === Row 3 — date (right) + actions (left), separated by a hairline === */
    .page-expenses .table td:first-child {
        grid-row: 3;
        grid-column: 1 / 4;
        font-size: .82rem;
        color: var(--text-2);
        border-top: 1px solid var(--card-border);
        padding-top: 10px !important;
        align-self: center;
    }
    .page-expenses .table td:first-child > div:first-child {
        display: inline;
        font-weight: 600;
    }
    .page-expenses .table td:first-child > div:nth-child(2) {
        display: inline;
        margin-inline-start: 8px;
        opacity: .75;
    }
    .page-expenses .table td:last-child {
        grid-row: 3;
        grid-column: 4;
        justify-self: end;
        align-self: center;
        border-top: 1px solid var(--card-border);
        padding-top: 10px !important;
    }

    /* Description: bump primary line size for prominence */
    .page-expenses .table td:nth-child(2) [style*="font-weight:700"][style*="font-size:.9rem"] {
        font-size: 1rem !important;
    }
    /* Amount: keep large + give a subtle vertical break to "סה"כ" line */
    .page-expenses .table td:nth-last-child(2) [style*="font-size:1rem"][style*="color:var(--danger)"] {
        font-size: 1.1rem !important;
    }

    /* Table footer (סה"כ N הוצאות + total amount) — opt out of the row grid so
       it spans full width as a single bar, count on the start side, total on the
       end side. Without this it inherits the 3-row card layout meant for data
       rows and ends up cramped/empty. */
    .page-expenses .table tfoot tr {
        display: flex !important;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        gap: 12px;
        padding: 14px 16px;
    }
    .page-expenses .table tfoot td {
        grid-row: auto !important;
        grid-column: auto !important;
        border-top: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        flex: 0 0 auto;
    }
    /* Hide the empty trailing cell that exists only to align with desktop's
       actions column — no purpose on mobile. */
    .page-expenses .table tfoot td:empty { display: none; }

    /* ---- Modals ---- */
    .modal {
        max-width: calc(100vw - 16px) !important;
        max-height: 92vh;
        margin: 8px;
    }
    .modal-header { padding: 14px 18px 12px; }
    .modal-header h3 { font-size: 1rem; }
    .modal-body { padding: 16px 18px; }
    .modal-footer {
        padding: 14px 18px 16px;
        flex-direction: column-reverse;
    }
    .modal-footer .btn { width: 100%; justify-content: center; }

    /* ---- Tabs ---- */
    .tabs {
        overflow-x: auto;
        flex-wrap: nowrap;
        scrollbar-width: none;
    }
    .tabs::-webkit-scrollbar { display: none; }
    .tab-btn {
        flex: 0 0 auto;
        white-space: nowrap;
        font-size: .82rem;
        padding: 8px 12px;
    }

    /* ---- Filters bar ---- */
    /* Switch from a 1-per-row stack to a tight 2-column grid:
       search spans full width, then selects pair up 2-per-row.
       Keeps the filter UI compact instead of 5 stacked rows. */
    .card form[method="GET"] {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        align-items: stretch !important;
        gap: 10px !important;
        flex-direction: initial !important;
    }
    .card form[method="GET"] > * {
        width: auto !important;
        min-width: 0 !important;
    }
    /* Search input + submit button: full row */
    .card form[method="GET"] > div[style*="flex:1"],
    .card form[method="GET"] > .input-icon-wrap,
    .card form[method="GET"] > input[type="hidden"] + div,
    .card form[method="GET"] > button[type="submit"],
    .card form[method="GET"] > a {
        grid-column: 1 / -1;
    }
    .card form[method="GET"] select { width: 100% !important; }

    /* ============================
       Page-specific tweaks
       ============================ */

    /* ---- Expenses: convert grid sidebar to single column ---- */
    .dashboard-grid { grid-template-columns: 1fr !important; }

    /* ---- Dashboard: hide the "Quick Add Expense" card on mobile ----
       The mobile FAB on every page replaces this entry point. */
    .quick-add-card { display: none !important; }

    /* ---- Loans: card grid to single col ---- */
    body.layout-main main .page-content > div[style*="auto-fill,minmax(320px,1fr)"],
    body.layout-main main .page-content > div[style*="auto-fill,minmax(340px,1fr)"] {
        grid-template-columns: 1fr !important;
    }

    /* ---- Users: card grid full width ---- */
    body.layout-main main .page-content > div[style*="auto-fill,minmax(320px,1fr)"] {
        grid-template-columns: 1fr !important;
    }

    /* ---- Settings: 2-col layout to 1-col ---- */
    .page-content > div[style*="grid-template-columns:1fr 1fr"] {
        grid-template-columns: 1fr !important;
        gap: 14px !important;
    }

    /* ---- Categories grid: smaller pills ---- */
    .categories-grid { gap: 6px; }
    .cat-pill { padding: 7px 11px 7px 8px; }
    .cat-pill .cat-name { font-size: .78rem; }

    /* ---- Day picker (recurring): smaller cells ---- */
    .day-picker { padding: 6px; gap: 3px; }
    .day-btn { height: 28px; font-size: .76rem; }

    /* ---- Currency converter: amount on top, [from][swap][to] in one row ---- */
    .converter-row {
        display: grid !important;
        grid-template-columns: 1fr 44px 1fr !important;
        grid-template-areas:
            "amount amount amount"
            "from   swap   to" !important;
        gap: 10px !important;
    }
    .converter-row .conv-amount { grid-area: amount; }
    .converter-row .conv-from   { grid-area: from; }
    .converter-row .conv-swap   { grid-area: swap; align-self: end; }
    .converter-row .conv-to     { grid-area: to; }
    .converter-row .form-label  {
        font-size: .82rem;
        margin-bottom: 4px;
    }

    /* ---- Recurring expense item / income item rows ---- */
    .expense-item {
        padding: 10px 0;
        gap: 10px;
    }
    .expense-cat-icon { width: 36px; height: 36px; font-size: 1rem; }
    .expense-desc    { font-size: .85rem; }
    .expense-amount  { font-size: .9rem; }
    .expense-meta    { font-size: .68rem; }
    .expense-actions { opacity: 1 !important; }

    /* ---- Charts ---- */
    .chart-container { height: 200px !important; }

    /* ---- Tip card ---- */
    .tip-card {
        padding: 12px 14px;
        gap: 10px;
        font-size: .85rem;
    }

    /* ---- Amount big text ---- */
    .amount-big { font-size: 1.7rem !important; }

    /* ---- Avatar upload wrap (users page) ---- */
    .avatar-upload-wrap { padding: 10px 12px; gap: 12px; }

    /* ---- Color picker grid: smaller swatches ---- */
    .color-picker-grid { gap: 6px; }
    .color-swatch, .color-swatch-custom { width: 26px; height: 26px; }
}

/* ============ Phone (≤ 480px) ============ */
@media (max-width: 480px) {
    /* Single column for stat cards on tiny phones */
    .stat-grid > .stat-card { flex-basis: 100% !important; }

    /* Action buttons stack */
    .page-header-actions > .btn,
    .page-header-actions > .btn-sm {
        flex-basis: 100%;
    }

    /* Phone: keep the 3-cell row layout but slightly tighter */
    .converter-row {
        gap: 6px !important;
    }
    .converter-row .form-control { padding: 0 8px !important; font-size: .9rem !important; }
    .converter-row .flag-picker-btn { padding: 0 28px 0 8px !important; gap: 6px !important; }
    .converter-row .flag-picker-btn .flag-img { width: 18px; height: 13px; }

    /* Modal padding */
    .modal-body  { padding: 12px 14px; }
    .modal-header { padding: 12px 14px; }
    .modal-footer { padding: 12px 14px 14px; }

    /* Page content padding */
    .page-content { padding: 12px 10px 24px; }

    /* Tables become more compact */
    .table th, .table td { padding: 7px 8px; font-size: .76rem; }

    /* Form labels */
    .form-label { font-size: .82rem; }

    /* Buttons smaller */
    .btn { padding: 9px 16px; font-size: .85rem; }
    .btn-sm { padding: 6px 12px; font-size: .76rem; }

    /* Day picker very compact */
    .day-btn { height: 26px; font-size: .72rem; }
}

/* ============================================================
   Mobile fixes for recent additions (charts / search / picker /
   profile / family / dup-detection / topbar etc.)
   ============================================================ */
@media (max-width: 768px) {
    /* "Today" button next to month-selector — full width, sits below the frame */
    .page-header-actions .month-today-btn {
        flex: 1 1 100% !important;
        order: -1;
        height: 40px !important;
        font-size: .82rem !important;
    }

    /* Expenses live-search — readable size on phones */
    #expensesSearch { font-size: 1rem; }

    /* Expense charts: hide KPIs (peak/avg) text, single-column layout */
    .expense-charts-body {
        grid-template-columns: 1fr !important;
        padding: 12px !important;
        gap: 12px;
    }
    .expense-chart-time { min-height: 220px; }
    .expense-chart-cat canvas { max-height: 200px; }
    .expense-cat-legend { max-height: 180px; }
    .expense-charts-kpis { display: none; }
    .expense-charts-head-right { gap: 6px; }
    .exp-charts-toggle { width: 38px !important; height: 38px !important; }

    /* Sortable headers — smaller indicator */
    .table th.th-sortable { padding: 11px 10px; }
    .table th.th-sortable .sort-ind { margin-inline-start: 4px; font-size: .68rem; }

    /* Import duplicate-warning row — stack action buttons vertically */
    .dup-warn { padding: 10px 12px; }
    .dup-warn-head { flex-wrap: wrap; font-size: .82rem; }
    .dup-warn-actions {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 6px !important;
    }
    .dup-action-label { display: none; }
    .dup-action-btn { width: 100%; justify-content: center; padding: 9px 10px; font-size: .82rem; }
    .dup-existing { font-size: .76rem; }

    /* Import preview table tighter */
    .import-table .cell-substack { gap: 4px; }
    .import-table { font-size: .76rem; }
    .import-table th, .import-table td { padding: 6px 6px; }

    /* Charts in cards never overflow */
    .chart-container canvas { max-width: 100%; height: auto !important; }

    /* ---- Chart touch UX ----
       Allow vertical page scroll to keep working even when the user
       starts the drag on a chart canvas. Without this, Chart.js can
       trap touch and leave the user "stuck" on the chart. */
    .chart-container,
    .chart-container canvas,
    .expense-chart-time canvas,
    .expense-chart-cat canvas { touch-action: pan-y; }

    /* Bigger, finger-friendly category legend rows in the expenses
       chart card. Original 4px rows are awkward to tap. */
    .cat-legend-item {
        padding: 9px 8px !important;
        font-size: .88rem !important;
        grid-template-columns: 14px 22px 1fr auto !important;
        gap: 10px !important;
    }
    .cat-legend-swatch { width: 14px !important; height: 14px !important; }
    .cat-legend-icon  { font-size: 1.1rem !important; }
    .cat-legend-amount { font-size: .85rem !important; }
    .expense-cat-legend { max-height: 240px !important; }

    /* My Profile + Family Details modals — fit viewport */
    #myProfileModal, #familyDetailsModal { max-width: calc(100vw - 12px) !important; }
    #myProfileModal .form-row { grid-template-columns: 1fr !important; }
    #fdLogoPreview, #mpPhotoPreview { width: 64px !important; height: 64px !important; }
    #mpColorSwatches button { width: 28px !important; height: 28px !important; }

    /* Topbar — keep avatar tap area healthy, hide date strip */
    .topbar-avatar { padding: 0; flex-shrink: 0; }
    .topbar-avatar > * { width: 32px; height: 32px; }
    .topbar-date { display: none !important; }

    /* Tooltip icons in labels — smaller */
    .tooltip-icon { font-size: .7rem !important; }

    /* Portaled cat-picker — fit screen */
    .cat-picker-list {
        width: calc(100vw - 16px) !important;
        max-width: calc(100vw - 16px) !important;
        left: 8px !important;
        right: 8px !important;
        max-height: 60vh !important;
    }
    .cat-picker-items { max-height: calc(60vh - 70px) !important; }

    /* Long page-subtitle wraps cleanly */
    .page-subtitle { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }

    /* Replace-confirm / delete dialogs */
    .dup-replace-warn { padding: 10px 12px; gap: 10px; }
    .dup-replace-warn .fa-triangle-exclamation { font-size: 1.1rem; }
    .dup-replace-warn p { font-size: .82rem !important; }

    /* Draft cards (import) — name wraps cleanly */
    .draft-card-name { word-break: break-all; }
    .draft-card-actions { gap: 6px; }

    /* Day picker on phone */
    .day-picker { gap: 2px; padding: 4px; }
    .day-btn { height: 26px; font-size: .72rem; }
}

/* ============ Very small phones (≤ 380px) ============ */
@media (max-width: 380px) {
    .page-content { padding: 10px 8px 22px; }
    .card-body { padding: 12px 12px; }
    .card-header { padding: 12px 14px 8px; }
    .modal { max-height: 88vh !important; }

    /* Tabs without icons to save space */
    .tab-btn { font-size: .76rem; padding: 7px 10px; }
    .tab-btn i { display: none; }

    /* Stat cards tighter */
    .stat-card { padding: 14px 12px; }
    .stat-card-value { font-size: 1.3rem; }

    /* Charts smaller */
    .expense-chart-time { min-height: 180px; }
    .chart-container { height: 170px !important; }

    /* Buttons */
    .btn-primary, .btn-ghost, .btn-danger { font-size: .82rem; padding: 9px 12px; }
    .page-header-actions .btn span { overflow: hidden; text-overflow: ellipsis; }
}

/* ============================================================
   Global "Add Expense" FAB — personalizable
   ----------------------------------------------------------
   The button lives in includes/footer.php and reads four user
   preferences via data attributes + a CSS variable:
     data-fab-show     = "mobile" | "all"
     data-fab-size     = "small" | "medium" | "large"
     data-fab-position = "bottom-start" | "bottom-center" | "bottom-end"
     style="--fab-color: #...;  --fab-color-dark: #..."

   The base block defines the visual; visibility is then controlled
   per `data-fab-show` × viewport so "mobile-only" still hides on
   desktop. Placed last so nothing in style.css can override it.
   ============================================================ */
.global-add-fab {
    /* Visibility — default is hidden; show below per-show-mode rules */
    display: none;

    position: fixed;
    bottom: calc(20px + env(safe-area-inset-bottom, 0px));
    inset-inline-start: 20px;
    right: auto;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    /* Gradient driven by user color (with darker stop for depth) */
    background: linear-gradient(135deg,
        var(--fab-color, #10b981),
        var(--fab-color-dark, #059669));
    color: #fff;
    border: none;
    font-size: 1.55rem;
    line-height: 1;
    z-index: 950;
    /* Glow tinted by the chosen color via color-mix (modern browsers) */
    box-shadow:
        0 10px 28px color-mix(in srgb, var(--fab-color, #10b981) 50%, transparent),
        0 4px 10px rgba(0,0,0,.25);
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform .15s ease, box-shadow .15s ease;
}
.global-add-fab:hover,
.global-add-fab:focus-visible {
    transform: scale(1.06);
    box-shadow:
        0 14px 32px color-mix(in srgb, var(--fab-color, #10b981) 65%, transparent),
        0 6px 14px rgba(0,0,0,.3);
    outline: none;
}
.global-add-fab[data-fab-position="bottom-center"]:hover,
.global-add-fab[data-fab-position="bottom-center"]:focus-visible {
    transform: translateX(-50%) scale(1.06);
}
.global-add-fab:active { transform: scale(.92); }
.global-add-fab[data-fab-position="bottom-center"]:active {
    transform: translateX(-50%) scale(.92);
}
.global-add-fab > i { pointer-events: none; }

/* ---- Size variants ---- */
.global-add-fab[data-fab-size="small"]  { width: 48px; height: 48px; font-size: 1.25rem; }
.global-add-fab[data-fab-size="medium"] { width: 60px; height: 60px; font-size: 1.55rem; }
.global-add-fab[data-fab-size="large"]  { width: 72px; height: 72px; font-size: 1.85rem; }

/* ---- Position variants (bottom-start is the base; override others) ---- */
.global-add-fab[data-fab-position="bottom-end"] {
    inset-inline-start: auto;
    inset-inline-end: 20px;
}
.global-add-fab[data-fab-position="bottom-center"] {
    inset-inline-start: 50%;
    inset-inline-end: auto;
    transform: translateX(-50%);
}

/* ---- Visibility rules ----
   `mobile`: only ≤ 768px. `all`: every viewport. */
@media (max-width: 768px) {
    .global-add-fab[data-fab-show="mobile"],
    .global-add-fab[data-fab-show="all"] { display: inline-flex; }

    /* Reserve bottom space so the FAB never covers the last row of content. */
    body.layout-main .page-content { padding-bottom: 100px; }
}
@media (min-width: 769px) {
    .global-add-fab[data-fab-show="all"] { display: inline-flex; }
}

/* Read-only viewers can't add — hide the FAB for them. */
body.viewer-mode .global-add-fab { display: none !important; }