/* EBPlayer phone layout. Loaded last on every page; layout only, no behaviour.
   Everything is inside max-width media queries, so desktop is untouched. */

@media (max-width: 768px) {
    body { overflow-x: clip; }

    /* ---- iOS zooms into any field under 16px; keep the page still while typing ---- */
    input:not([type=checkbox]):not([type=radio]):not([type=hidden]), select, textarea { font-size: 16px !important; }

    /* ---- Tables become one card per row (labels come from the header, set by mobile.js) ---- */
    table.m-cards { min-width: 0 !important; width: 100% !important; border-spacing: 0; }
    table.m-cards > thead { display: none; }
    table.m-cards > tbody { display: block; width: 100%; }
    /* each row: a compact card, fields two per line, the name small above the value */
    table.m-cards > tbody > tr {
        display: grid; grid-template-columns: 1fr 1fr; column-gap: 14px;
        background: #fff; border: 1px solid #e8e8ef; border-radius: 12px;
        padding: 6px 14px; margin-bottom: 12px; box-shadow: 0 1px 3px rgba(0,0,0,0.04);
    }
    table.m-cards > tbody > tr[style*="display:none"], table.m-cards > tbody > tr[style*="display: none"] { display: none; }
    table.m-cards > tbody > tr:hover { background: #fff; }
    table.m-cards > tbody > tr > td {
        display: block; width: auto; min-width: 0;
        padding: 7px 0 !important;
        border: 0 !important; border-bottom: 1px solid #f2f2f5 !important;
        max-width: none !important; white-space: normal !important;
        text-align: left !important; overflow: visible !important;
        overflow-wrap: anywhere; font-size: 13px; line-height: 1.35;
    }
    table.m-cards > tbody > tr > td::before {
        content: attr(data-label); display: block; margin-bottom: 2px;
        font-size: 10px; font-weight: 600; letter-spacing: .4px; text-transform: uppercase;
        color: #9a9aa5; line-height: 1.3; overflow-wrap: normal;
    }
    /* long values (URLs, keys, lists) take the whole line */
    table.m-cards > tbody > tr > td.m-wide { grid-column: 1 / -1; }
    /* empty fields ("—") are left out of the card */
    table.m-cards > tbody > tr > td.m-empty { display: none; }
    /* no header text (actions, checkboxes) and full-width rows (details, playlists, "nothing found") */
    table.m-cards > tbody > tr > td.m-full { grid-column: 1 / -1; }
    table.m-cards > tbody > tr > td.m-full::before { display: none; }
    /* action buttons: a row of real touch targets at the bottom of the card */
    table.m-cards > tbody > tr > td.m-actions { order: 99; border-bottom: 0 !important; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding-top: 10px !important; padding-bottom: 8px !important; }
    table.m-cards > tbody > tr > td.m-actions > form { display: inline-flex !important; margin: 0 !important; }
    table.m-cards > tbody > tr > td.m-actions button, table.m-cards > tbody > tr > td.m-actions a { min-height: 38px; min-width: 42px; margin: 0 !important; justify-content: center; }
    /* a row that only holds details / a nested table: no card around it, the nested rows are the cards */
    table.m-cards > tbody > tr.m-sub { display: block; background: transparent; border: 0; box-shadow: none; padding: 0; margin-top: -8px; }
    table.m-cards > tbody > tr.m-sub > td { display: block; padding: 0 !important; border: 0 !important; }
    table.m-cards table.m-cards > tbody > tr { margin-bottom: 8px; }
    /* the device-info panel under a row: two facts per line like the card above it */
    .dash-content table.m-cards tr.m-sub [style*="grid-template-columns"] { grid-template-columns: 1fr 1fr !important; gap: 10px 14px !important; }
    table.m-cards tr.m-sub td > div[style*="padding"] { padding: 12px 14px !important; border-radius: 0 0 12px 12px; }
    /* tables keep their horizontal-scroll wrapper on desktop only */
    div[style*="overflow-x:auto"] > table.m-cards { margin: 0; }

    /* ---- Dialogs: fit the screen, scroll inside the overlay when tall ---- */
    div[style*="position:fixed"][style*="z-index:1000"],
    div[style*="position: fixed"][style*="z-index: 1000"] {
        align-items: flex-start !important; justify-content: center !important;
        padding: 12px !important; overflow-y: auto !important; -webkit-overflow-scrolling: touch;
    }
    div[style*="position:fixed"][style*="z-index:1000"] > div,
    div[style*="position: fixed"][style*="z-index: 1000"] > div {
        width: 100% !important; max-width: 100% !important; max-height: none !important;
        margin: auto 0 !important; padding: 18px !important;
    }
    div[style*="position:fixed"][style*="z-index:1000"] [style*="grid-template-columns"] { grid-template-columns: 1fr !important; }
    div[style*="position:fixed"][style*="z-index:1000"] [style*="justify-content:flex-end"] { flex-wrap: wrap; }

    /* ---- Dashboards (admin / reseller) ---- */
    .dash-topbar { flex-wrap: wrap; gap: 8px; }
    .dash-topbar h4 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
    .dash-topbar > div:first-child { min-width: 0; flex: 1; }
    /* an owner filter in the top bar: its own full row under the title, "Back to site" beside it */
    .dash-topbar > div:last-child:has(form) { flex: 1 1 100%; flex-wrap: nowrap !important; gap: 8px !important; }
    .dash-topbar > div:last-child > form { flex: 1; min-width: 0; }
    .dash-topbar > div:last-child > form select { width: 100% !important; min-width: 0 !important; }
    .dash-content .d-flex { flex-wrap: wrap; }
    .dash-content .d-flex.justify-content-between > h6 { flex: 1; min-width: 0; }
    .pagination { flex-wrap: wrap; }
    /* summary tiles laid out as a wrapping row: two per row */
    .dash-content .d-flex.flex-wrap > .dash-card[style*="min-width"] { min-width: calc(50% - 8px) !important; flex: 1 1 calc(50% - 8px) !important; padding: 12px !important; gap: 8px !important; }
    .dash-content .d-flex.flex-wrap.gap-3:has(> .dash-card[style*="min-width"]) { gap: 8px !important; }
    .dash-content .d-flex.gap-4 { gap: 6px 16px; }

    /* filter bars: two even columns, search and the button across the full width */
    .dash-content form[method="GET"].d-flex,
    .dash-content form[method="get"].d-flex {
        display: grid !important; grid-template-columns: 1fr 1fr; gap: 10px !important; align-items: end;
    }
    .dash-content form[method="GET"].d-flex > *,
    .dash-content form[method="get"].d-flex > * { min-width: 0 !important; width: auto !important; max-width: none !important; flex: none !important; }
    .dash-content form[method="GET"].d-flex > div:first-child,
    .dash-content form[method="get"].d-flex > div:first-child,
    .dash-content form[method="GET"].d-flex > button,
    .dash-content form[method="GET"].d-flex > a,
    .dash-content form[method="get"].d-flex > button,
    .dash-content form[method="get"].d-flex > a { grid-column: 1 / -1; justify-content: center; }
    .dash-content form[method="GET"].d-flex select,
    .dash-content form[method="GET"].d-flex input { width: 100% !important; min-width: 0 !important; }

    /* create / edit forms laid out as a wrapping row: two even columns, fields fill them */
    .dash-content form:not([method="GET"]):not([method="get"]) .d-flex.flex-wrap > div,
    .dash-content form.d-flex.flex-wrap:not([method="GET"]):not([method="get"]) > div { flex: 1 1 calc(50% - 8px) !important; min-width: 0 !important; max-width: 100% !important; }
    .dash-content form:not([method="GET"]):not([method="get"]) .d-flex.flex-wrap > div > .admin-form-control,
    .dash-content form:not([method="GET"]):not([method="get"]) .d-flex.flex-wrap > div > .dash-form-control,
    .dash-content form.d-flex.flex-wrap:not([method="GET"]):not([method="get"]) > div > .admin-form-control,
    .dash-content form.d-flex.flex-wrap:not([method="GET"]):not([method="get"]) > div > .dash-form-control { width: 100% !important; min-width: 0 !important; }

    /* settings-style checkbox rows: title next to the box, the explanation underneath */
    .dash-card > label[style*="display:flex"] { flex-wrap: wrap; align-items: flex-start !important; row-gap: 2px !important; }
    .dash-card > label[style*="display:flex"] > input[type=checkbox] { margin-top: 1px; flex: none; }
    .dash-card > label[style*="display:flex"] > strong { flex: 1; min-width: 0; }
    .dash-card > label[style*="display:flex"] > span { flex-basis: 100%; padding-left: 28px; line-height: 1.4; }

    .dash-content .btn-admin, .dash-content .btn-outline-admin { align-self: auto; }
    .dash-content form > .btn-admin[type=submit]:last-child { width: 100%; justify-content: center; }

    /* ---- Public forms (add / reset playlist, check username) ---- */
    .page-section { padding: 24px 0 48px; min-height: 0; }
    .page-card { padding: 24px 18px; border-radius: 16px; }
    .form-modern input:not([type=checkbox]):not([type=radio]), .form-modern select, .form-modern textarea { width: 100%; max-width: 100%; }
    .form-modern .form-row, .form-modern [style*="grid-template-columns"] { grid-template-columns: 1fr !important; }
    .contact-info-grid { grid-template-columns: 1fr !important; }

    /* ---- Device account pages ---- */
    .account-section { padding: 20px 0 48px; }
    .account-grid { gap: 16px; }
    /* menu: one swipeable row of chips above the content instead of a tall block */
    .account-sidebar {
        display: flex; gap: 8px; overflow-x: auto; padding: 8px !important;
        border-radius: 12px; scrollbar-width: none; -webkit-overflow-scrolling: touch;
    }
    .account-sidebar::-webkit-scrollbar { display: none; }
    .account-sidebar-label { display: none; }
    .account-nav-link {
        flex: none; white-space: nowrap; margin: 0 !important;
        padding: 8px 14px !important; border-radius: 20px !important; border-left: 0 !important;
        background: #f4f7f6; font-size: 13px;
    }
    .account-nav-link.active { background: rgba(42,140,122,0.12); }
    .account-card { padding: 18px !important; }
    .account-alert { flex-wrap: wrap; }
    .account-stats { grid-template-columns: repeat(3, 1fr) !important; gap: 8px !important; margin-bottom: 16px; }
    .account-stat-card { padding: 12px 6px !important; }
    .account-stat-icon { font-size: 22px !important; margin-bottom: 4px; }
    .account-stat-value { font-size: 22px !important; }
    .account-stat-label { font-size: 11px !important; }

    /* playlist / licence / device cards: info on top, the buttons in a row underneath */
    .license-card { flex-wrap: wrap; padding: 16px !important; gap: 12px !important; align-items: flex-start !important; }
    .license-card-icon { width: 40px; height: 40px; }
    .license-card-info { flex: 1 1 calc(100% - 56px); }
    .license-card-key { flex-wrap: wrap; overflow-wrap: anywhere; }
    .license-card-meta, .license-card-meta span { overflow-wrap: anywhere; word-break: break-word; }
    .license-card-status {
        flex: 1 1 100%; display: flex !important; flex-direction: row !important; flex-wrap: wrap;
        align-items: center !important; justify-content: flex-start !important; gap: 8px !important;
        text-align: left; padding-top: 12px; border-top: 1px solid #f0f0f5;
    }
    .license-card-status > form { margin: 0; }
    .license-card-status button, .license-card-status a { min-height: 40px; padding-left: 16px !important; padding-right: 16px !important; }
}

@media (max-width: 480px) {
    .dash-content { padding: 12px; }
    .dash-card { padding: 14px; border-radius: 12px; }
    .dash-topbar .btn-outline-sm { padding: 6px 10px; }
    /* stat tiles stay two per row; forms and detail grids go single-column (layout rule) */
    .dash-content [style*="grid-template-columns"]:has(> .stat-card),
    .dash-content [style*="grid-template-columns:repeat(4,1fr)"]:has(> .dash-card),
    .dash-content [style*="grid-template-columns:repeat(5,1fr)"]:has(> .dash-card),
    .dash-content [style*="grid-template-columns:repeat(6,1fr)"]:has(> .dash-card) { grid-template-columns: 1fr 1fr !important; gap: 8px !important; }
    .dash-content [style*="grid-template-columns:repeat("]:has(> .dash-card) > .dash-card { padding: 10px 12px !important; gap: 8px !important; min-width: 0; }
    .account-card-title { flex-wrap: wrap; }
}

/* "Filters" button that folds a long filter form on phones */
.m-filter-btn { display: none; }
@media (max-width: 768px) {
    .m-filter-btn {
        display: flex; align-items: center; gap: 8px; width: 100%;
        background: #fff; border: 1px solid #dfe6e3; border-radius: 10px;
        padding: 11px 14px; font: 600 14px 'Roboto', sans-serif; color: #1a1a2e; cursor: pointer;
    }
    .m-filter-btn .material-icons { font-size: 20px; color: #2a8c7a; }
    .m-filter-btn .m-filter-count {
        background: #2a8c7a; color: #fff; border-radius: 10px; min-width: 20px; height: 20px;
        padding: 0 6px; font-size: 12px; display: inline-flex; align-items: center; justify-content: center;
    }
    .m-filter-btn .m-filter-arrow { margin-left: auto; color: #999; transition: transform .2s; }
    .m-filter-btn.m-open .m-filter-arrow { transform: rotate(180deg); }
    .m-filter-btn.m-open { margin-bottom: 12px; }
    .dash-content form.m-filter:not(.m-open) { display: none !important; }
    .dash-card:has(> .m-filter-btn:only-of-type) { padding: 10px !important; }
}