/* King Oil on phones and tablets (partials/app-head, app-mobile.js). The desktop (1024 px and wider) is left exactly as
   it is. Tablets get touch-sized controls and full-width windows; phones get an app: every window a full-screen page
   with an app header and a back arrow, lists as cards, bars that wrap, splits one above the other, safe areas kept. */

.km-filter-btn { display: none; }
:root { --km-nav: #12294d; --km-nav2: #1d3a63; --km-safe-top: env(safe-area-inset-top, 0px); --km-safe-bottom: env(safe-area-inset-bottom, 0px); }

/* ============================================================================================ Phones and tablets */
@media (max-width: 1023px) {
    /* Pages scroll: the old canvas fixed html and body to the window (desktop-layout.css), which cut long pages off. */
    html { height: auto !important; min-height: 100%; overflow-x: hidden !important; overflow-y: auto !important; }
    body { height: auto !important; min-height: 100%; overflow: visible !important; overflow-x: clip !important; }
    body > main, main#desktop, body.compact-screen > .desktop-viewport > #desktop { height: auto !important; max-height: none !important; overflow: visible !important; }
    /* An original window drawn to scale (a small dialog, or a wide one on a tablet) keeps its canvas; its box is as high as the scaled canvas (desktop-responsive.js). */
    body.form-page:not(.compact-screen) > .desktop-viewport { flex: none !important; overflow: visible !important; }
    body.form-page:not(.compact-screen) > .desktop-viewport > #desktop { transform-origin: top center; }
    /* A long list keeps its own scroll (it loads more as it reaches its end), at most a screen high. */
    .il-table-wrap, .grid-wrap:not(.km-scroll) { max-height: calc(100dvh - 70px); }
}

/* ======================================================================================================== Tablets */
@media (min-width: 768px) and (max-width: 1023px) {
    dialog.form-dialog { width: calc(100vw - 16px) !important; max-width: none; }
    .pm-btn, .il-input, .il-seg button { min-height: 36px; }
    .il-bar { flex-wrap: wrap; }
}

/* ========================================================================================================= Phones */
@media (max-width: 767px) {
    html { -webkit-text-size-adjust: 100%; }
    html { overscroll-behavior-y: none; }

    /* Every window opens as a full-screen page with an app header; the × is a back arrow. */
    dialog.form-dialog {
        position: fixed; inset: 0; width: 100vw !important; height: 100dvh !important; max-width: 100vw; max-height: 100dvh;
        margin: 0; border: 0 !important; border-radius: 0; box-shadow: none; animation: km-page-in .24s cubic-bezier(.2, .8, .2, 1);
    }
    dialog.form-dialog::backdrop { background: rgba(15, 23, 42, .3); }
    dialog.form-dialog > .window-title,
    body:not(.embedded-page) > .window-title {
        position: sticky; top: 0; z-index: 60; direction: rtl;
        display: flex; align-items: center; gap: 10px;
        height: calc(52px + var(--km-safe-top)); min-height: calc(52px + var(--km-safe-top)); padding: var(--km-safe-top) 10px 0 14px !important;
        background: linear-gradient(180deg, var(--km-nav2), var(--km-nav)) !important; color: #fff !important; border: 0 !important;
        box-shadow: 0 2px 10px rgba(8, 30, 66, .25);
    }
    dialog.form-dialog > .window-title > span,
    body:not(.embedded-page) > .window-title > span {
        flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 16px; font-weight: 700; color: #fff;
    }
    dialog.form-dialog > .window-title .dialog-close,
    body:not(.embedded-page) > .window-title #close-screen {
        order: -1; display: grid; place-items: center; width: 38px; height: 38px; padding: 0; border: 0; border-radius: 12px;
        background: rgba(255, 255, 255, .12) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 6 6 6-6 6'/%3E%3C/svg%3E") center / 22px no-repeat;
        color: transparent !important; font-size: 0 !important;
    }
    body:not(.embedded-page) > .window-title nav { order: -1; display: flex; }
    body:not(.embedded-page) > .window-title nav form button {
        width: 38px; height: 38px; border: 0; border-radius: 12px; background: rgba(255, 255, 255, .12); color: #fff; font-size: 20px;
    }
    dialog.form-dialog[open] { display: flex; flex-direction: column; padding: 0; overflow: hidden; }
    dialog.form-dialog > iframe { display: block; width: 100%; height: auto; flex: 1; min-height: 0; border: 0; }
    dialog.form-dialog.preview-dialog > iframe { background: #fff; }

    /* Touch-sized controls. */
    .pm-btn, .il-input, .il-seg button, .pm-search input, .il-date input, select.il-input { min-height: 40px; font-size: 14px; }
    input[type=date], input[type=search], input[type=text], input[type=number], input:not([type]), select, textarea { font-size: 16px; } /* no zoom on focus (iOS) */
    .pm-link { min-height: 32px; display: inline-flex; align-items: center; }

    /* Bars: wrap; the segmented tabs scroll sideways; search full width. */
    .il-bar { flex-wrap: wrap !important; gap: 6px !important; padding: 8px !important; }
    .il-bar > .pm-search, .il-bar > .il-search, .il-bar > label:has(input[type=search]) { flex: 1 1 100% !important; width: 100% !important; order: -1; }
    /* Folded filters (app-mobile.js): search and the «فلتەر» button on one row, the rest when opened; the main button floats. */
    .il-bar:has(> .km-filter-btn) > .pm-search, .il-bar:has(> .km-filter-btn) > .il-search, .il-bar > .mv-pick { flex: 1 1 0 !important; width: auto !important; min-width: 0; order: -2; }
    .il-bar > .km-filter-btn { order: -1; display: inline-flex; align-items: center; gap: 5px; flex: none; height: 42px; padding: 0 12px; border: 1px solid #e2e8f0; border-radius: 12px; background: #fff; color: #334155; font: 700 13px NRT, Tahoma, sans-serif; cursor: pointer; }
    .il-bar > .km-filter-btn svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; }
    .il-bar > .km-filter-btn small { max-width: 76px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #2563eb; font-size: 11px; }
    .il-bar > .km-filter-btn small:empty { display: none; }
    .il-bar.km-open > .km-filter-btn { border-color: #12294d; background: #12294d; color: #fff; }
    .il-bar.km-open > .km-filter-btn small { color: #bfdbfe; }
    .il-bar:not(.km-open) > [data-km=more] { display: none !important; }
    .il-bar > .il-tabs { flex: 1 1 100%; }
    .il-bar > [data-km=fab] {
        position: fixed; left: 14px; bottom: calc(16px + var(--km-safe-bottom)); z-index: 45; height: 52px !important; padding: 0 18px !important;
        border-radius: 16px !important; box-shadow: 0 8px 22px rgba(37, 99, 235, .35) !important; font-size: 15px !important;
    }
    body:has(.il-bar > [data-km=fab]) { padding-bottom: 76px !important; }
    .il-seg { max-width: 100%; overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
    .il-seg::-webkit-scrollbar { display: none; }
    .il-seg button { flex: 0 0 auto; white-space: nowrap; }
    .il-date { flex: 1 1 45%; }
    .il-date input { width: 100%; }
    kbd { display: none; }

    /* Side-by-side parts stack: the list, then what was chosen. */
    [class*="-split"], .pm-layout, .pm-grid-2 { display: flex !important; flex-direction: column !important; gap: 8px !important; height: auto !important; }
    [class*="-split"] > *, .pm-layout > * { width: auto !important; max-width: none !important; min-width: 0 !important; }

    /* Lists as cards (app-mobile.js marks the tables and labels each cell with its column). */
    table.km-cards { display: block; width: 100% !important; border: 0 !important; background: transparent !important; table-layout: auto !important; }
    table.km-cards > colgroup, table.km-cards > thead { display: none !important; }
    table.km-cards > tbody, table.km-cards > tfoot { display: flex; flex-direction: column; gap: 8px; width: 100%; }
    table.km-cards > tbody > tr, table.km-cards > tfoot > tr {
        display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px 10px; width: 100%; height: auto !important; padding: 10px 12px;
        border: 1px solid #e2e8f0; border-radius: 14px; background: #fff; box-shadow: 0 1px 3px rgba(15, 23, 42, .06);
    }
    table.km-cards > tfoot > tr { background: #f1f5f9; }
    table.km-cards > tbody > tr.selected, table.km-cards > tbody > tr.on, table.km-cards > tbody > tr[aria-selected=true] { border-color: #2563eb; box-shadow: 0 0 0 2px #bfdbfe; }
    table.km-cards > tbody > tr > td, table.km-cards > tfoot > tr > td {
        display: flex; flex-direction: column; align-items: flex-start; gap: 0; min-width: 0; width: auto !important; height: auto !important; padding: 2px 0 !important;
        border: 0 !important; background: none !important; text-align: start !important; white-space: normal !important; overflow: visible !important; overflow-wrap: anywhere; font-size: 13px; line-height: 1.35;
    }
    table.km-cards td::before { content: attr(data-label); font-size: 10.5px; font-weight: 600; color: #94a3b8; line-height: 1.4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
    table.km-cards td[data-label=""]::before, table.km-cards td.km-wide::before { display: none; }
    /* The row's name (first text column) spans the card as its title. */
    table.km-cards td.km-title { grid-column: 1 / -1; order: -1; font-size: 15px; font-weight: 700; color: #0f172a; }
    table.km-cards td.km-title::before { display: none; }
    table.km-cards > tbody > tr:has(> td.km-amount) > td.km-title { grid-column: 1 / 3; }
    table.km-cards td.km-amount { grid-column: 3; grid-row: 1; align-items: flex-end; justify-content: center; font-size: 15px; font-weight: 800; white-space: nowrap !important; }
    table.km-cards td.km-amount::before { display: none; }
    table.km-cards td.km-wide, table.km-cards td[colspan] { grid-column: 1 / -1; }
    /* Action cells: chips side by side at the foot of the card. */
    table.km-cards > tbody > tr { grid-auto-flow: row dense; }
    table.km-cards td.km-act { grid-column: auto / span 1; flex-direction: row; justify-content: center; align-items: center; order: 50; min-height: 34px; padding: 4px 6px !important; margin-top: 4px; border-radius: 10px; background: #f1f5f9 !important; }
    table.km-cards td.km-act::before { display: none; }
    table.km-cards td.km-act a, table.km-cards td.km-act button { min-height: 30px; font-size: 13px; }
    table.km-cards td.km-acts { grid-column: 1 / -1; justify-content: flex-start; flex-wrap: wrap; gap: 6px; padding: 6px 0 0 !important; background: none !important; border-top: 1px dashed #e2e8f0 !important; border-radius: 0; }
    table.km-cards td.km-acts > a, table.km-cards td.km-acts > button { display: inline-flex; align-items: center; padding: 3px 12px; border-radius: 99px; background: #f1f5f9; text-decoration: none; }
    table.km-cards td:empty { display: none; }
    table.km-cards .il-empty, table.km-cards td.il-empty { grid-column: 1 / -1; }
    .il-table-wrap:has(> table.km-cards), .grid-wrap:has(table.km-cards) { background: transparent !important; border: 0 !important; padding: 2px !important; }

    /* Forms: one field a row; action rows wrap. */
    .dg-grid, .pd-grid2, .pd-row, .st-grid { grid-template-columns: 1fr !important; }
    .st-actions, .dg-form-actions, .dg-actions, .dg-handover, .pd-actions { flex-wrap: wrap !important; }
    .st-actions > *, .dg-handover > * { flex: 1 1 45% !important; }
    .dg-inline { flex-wrap: wrap; padding-inline-start: 0 !important; }
    .dg-inline input { width: 100% !important; }

    /* The template designer: the list, the page, then the properties, one under the other. */
    .pd-page { height: auto !important; overflow: auto !important; }
    .pd { display: flex !important; flex-direction: column; height: auto !important; }
    .pd-side { max-height: 40vh; }
    .pd-wrap { min-height: 62vh; padding: 12px !important; }

    /* Grids with boxes to type in scroll sideways instead. */
    .km-scroll { overflow-x: auto !important; -webkit-overflow-scrolling: touch; }
    .km-scroll > table { min-width: 640px; }

    /* Cards and pages: full width, no desktop minimums. */
    .pm-card { border-radius: 14px; }
    main, .cb, .in, .ac, .dg, .rh, .st, .pm { min-width: 0 !important; }
    #notice { bottom: calc(14px + var(--km-safe-bottom)) !important; inset-inline: 12px !important; max-width: none !important; }
    .form-dialog > .window-title + iframe { border-top: 0; }
}

/* Pages coming in, as an app's do (from the reading side). */
@keyframes km-page-in { from { transform: translateX(-24%); opacity: .4; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { dialog.form-dialog { animation: none; } }