/* ============================================================================
   PHONE RESPONSIVE REFINEMENTS (max-width 480px)
   Additional tweaks for phone-sized screens.
   ============================================================================ */

/* --- Phone (≤ 480px) --- */
@media screen and (max-width: 480px) {

    #SystemVMHeader {
        grid-template-columns: 1fr auto !important;
        padding: 0 var(--space-xs) !important;
    }

    #SystemVMHeaderAccountIcon {
        display: none !important;
    }

    #SystemVMHeaderAccountPath {
        font-size: 12px !important;
        overflow-x: auto !important;
        white-space: nowrap !important;
        margin-left: 4px !important;
    }

    #SystemVMHeaderAccountControls {
        font-size: 10px !important;
    }

    #SystemVMHeaderAccountControls #logoutLink {
        font-size: 9px !important;
    }

    /* Ensure touch targets meet minimum size on phone */
    .ui-contextmenu .ui-menu-item a,
    .ui-contextmenu .ui-menu-item .ui-menu-item-wrapper {
        min-height: var(--touch-target-min) !important;
        padding: 0 16px !important;
        font-size: 15px !important;
    }

    /* Order form: further compact on phone */
    #OrderCreateForm #scrollContainer > .grid:first-child,
    #OrderEditForm #scrollContainer > .grid:first-child {
        grid-template-columns: repeat(2, 1fr) !important;
        font-size: 11px !important;
    }

    /* Products/Services & Shipping: even tighter */
    #OrderCreateForm .grid[style*="grid-template-columns:33px 1fr 120px 80px 30px 90px"],
    #OrderEditForm .grid[style*="grid-template-columns:33px 1fr 120px 80px 30px 90px"] {
        grid-template-columns: 25px 1fr 60px 50px 20px 55px !important;
        font-size: 10px !important;
    }
    #OrderCreateForm .grid[style*="grid-template-columns:33px 1fr 1fr 100px 100px 100px"],
    #OrderEditForm .grid[style*="grid-template-columns:33px 1fr 1fr 100px 100px 100px"] {
        grid-template-columns: 25px 1fr 1fr 55px 55px 55px !important;
        font-size: 10px !important;
    }

    /* Payment table: already handled by 2-line layout in ≤1024px; just tighten font at 480 */
    #OrderCreateForm .grid[style*="grid-gap"] > .grid.fullWidth[style*="grid-template-columns:125px 100px 1fr 100px 33px"],
    #OrderEditForm .grid[style*="grid-gap"] > .grid.fullWidth[style*="grid-template-columns:125px 100px 1fr 100px 33px"] {
        font-size: 10px !important;
    }
    #OrderCreateForm .grid.fullWidth[style*="grid-template-columns:1fr 33px 33px auto auto"],
    #OrderEditForm .grid.fullWidth[style*="grid-template-columns:1fr 33px 33px auto auto"] {
        font-size: 10px !important;
        height: 26px !important;
    }

    /* ── Phase 2: Phone order cards ── */

    /* On very narrow phones, card body stays 3 columns but with smaller font */
    .olc-card-body {
        font-size: 10px !important;
    }

    /* Detail panel: full width, back button as top bar */
    .orderDetailPanel {
        grid-template-columns: 1fr !important;
        grid-template-rows: auto 1fr !important;
    }
    .orderDetailPanel > .grid:first-child {
        justify-content: flex-start !important;
        padding: var(--space-xs) var(--space-sm) !important;
    }

    /* Stack the preview header columns — keep 2-col but smaller font */
    .orderDetailPanel .absoluteScroll2 > .grid:first-child {
        font-size: 12px !important;
    }

    /* ──────────────────────────────────────────────────────────────────
       Dashboard: filter popup + stats on phone
       ────────────────────────────────────────────────────────────────── */

    /* ── Reseller + Filter in toolbar row 2 on phone ── */
    #dashToolbarRow2 {
        flex-direction: row !important;
        flex-wrap: nowrap !important;
    }
    #dashToolbarRow2 #dashResellerRow {
        flex: 1 !important;
        min-width: 0 !important;
        max-width: none !important;
        padding: 0 !important;
    }
    #dashToolbarRow2 #dashResellerRow .dash-filter-dropdown {
        width: 100% !important;
        box-sizing: border-box !important;
        font-size: 14px !important;
        height: 28px !important;
    }
    #dashToolbarRow2 #dashMobileFilterBar {
        flex: 1 !important;
        min-width: 0 !important;
        max-width: none !important;
    }

    /* ── Mobile filter bar (shown on phone when popup is closed) ── */
    #dashMobileFilterBar {
        display: flex !important;
        align-items: center;
        gap: 8px;
        padding: 6px 8px;
    }
    .dash-filter-open-btn {
        padding: 6px 12px;
        height: auto;
    }
    .dash-filter-clear-btn {
        padding: 6px 10px;
        height: auto;
    }

    /* ── Hide filter section by default on phone (lives inside popup) ── */
    #dashFilterPopup {
        display: none !important;
    }
    #dashFilterOverlay {
        display: none;
    }

    /* ── When filter popup is open ── */
    .dash-filters-open #dashFilterOverlay {
        display: block !important;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: 999;
    }
    .dash-filters-open #dashFilterPopup {
        display: flex !important;
        flex-direction: column;
        position: fixed !important;
        top: 5%;
        left: 3%;
        right: 3%;
        bottom: 5%;
        z-index: 1000;
        background: white;
        border-radius: 10px;
        box-shadow: 0 4px 24px rgba(0, 0, 0, 0.35);
        overflow: hidden;
    }
    .dash-filters-open #dashFilterPopupHeader {
        display: flex !important;
        align-items: center;
        justify-content: space-between;
        padding: 12px 16px;
        border-bottom: 1px solid #ddd;
        background: #f8f8f8;
        border-radius: 10px 10px 0 0;
        flex-shrink: 0;
    }
    .dash-filters-open #dashFilterPopupHeader > span {
        font-weight: bold;
        font-size: 16px;
    }
    .dash-filters-open #dashFilterPopupHeader button {
        background: transparent;
        border: 1px solid #ccc;
        border-radius: 4px;
        padding: 4px 10px;
        font-size: 13px;
        cursor: pointer;
        margin-left: 6px;
    }
    .dash-filters-open #divFilterSection {
        display: grid !important;
        grid-template-columns: 1fr !important;
        flex: 1;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
        padding: 10px !important;
        gap: 6px !important;
        max-height: none !important;
    }

    /* ── Stat cards on phone — 2-row wrap ── */
    .dashStatsRow {
        flex-wrap: wrap !important;
        gap: 6px !important;
        padding: 4px !important;
        overflow-x: visible !important;
    }
    .dashStatCard {
        flex: 1 1 calc(33% - 6px) !important;
        min-width: 0 !important;
        max-width: none !important;
        padding: 6px 6px !important;
        border-top-width: 2px !important;
    }
    .dashStatLabel { font-size: 11px !important; }
    .dashStatValue { font-size: 12px !important; }
    .dashStatMeta  { font-size: 9px  !important; }

    /* Time range links on phone */
    .dashTimeRange {
        padding: 2px 4px !important;
    }
    .dashTimeLink {
        padding: 3px 6px !important;
        font-size: 12px !important;
    }
    .dashTimeLinkAction { font-size: 11px !important; }

    /* Toolbar on phone */
    .dashToolbarRow {
        padding: 2px 4px !important;
        flex-wrap: wrap !important;
    }
    #dashToolbarRow1 {
        flex-wrap: nowrap !important;
        font-size: 12px !important;
    }
    /* Row 1: dashboard type takes same width as reseller (half row) */
    #dashToolbarRow1 #DashboardManagerMenu {
        flex: 1 !important;
        min-width: 0 !important;
        width: auto !important;
        max-width: 50% !important;
    }
    #dashToolbarRow1 #DashboardManagerMenu > div {
        width: 100% !important;
    }
    #dashToolbarRow1 #DashboardManagerMenu > div > div {
        display: flex !important;
        width: 100% !important;
    }
    #dashToolbarRow1 #DashboardManagerMenu select {
        flex: 1;
        width: 100% !important;
        max-width: none !important;
        font-weight: bold;
        font-size: 14px !important;
        height: 28px !important;
    }
    /* Hide separator between menu and export toolbar */
    #dashToolbarRow1 > .dashToolbarSep {
        display: none !important;
    }
    /* Export toolbar — push to right, no shrink */
    #dashToolbarRow1 #DashboardExportToolbar {
        flex-shrink: 0;
        margin-left: auto;
        width: auto !important;
    }
    #dashToolbarRow1 #DashboardExportToolbar select {
        font-size: 14px !important;
    }
    /* Hide "Save" text on toolbar buttons — keep icon only.
       The button still needs a non-zero column so iOS registers taps.
       We overlay icon + button via grid stacking instead. */
    #dashToolbarRow1 #DashboardExportToolbar .menuButton {
        font-size: 0 !important;
        min-width: 0 !important;
        padding: 0 !important;
    }
    #dashToolbarRow1 #DashboardExportToolbar .hoverable {
        grid-template-columns: 1fr !important;
        margin-right: 0 !important;
        min-width: 32px !important;
    }
    /* Stack icon and button in the same cell so the button covers the icon */
    #dashToolbarRow1 #DashboardExportToolbar .hoverable > span,
    #dashToolbarRow1 #DashboardExportToolbar .hoverable > button {
        grid-column: 1 !important;
        grid-row: 1 !important;
    }
    #dashToolbarRow1 #DashboardExportToolbar .hoverable > button {
        width: 100% !important;
        height: 100% !important;
        opacity: 0 !important;
        cursor: pointer !important;
    }
    /* Reduce gap between Preset dropdown and Save icon */
    #dashToolbarRow1 #DashboardExportToolbar .ToolbarDropDownVMTemplate,
    #dashToolbarRow1 #DashboardExportToolbar > div > div[style*="inline-grid"] {
        margin-right: 2px !important;
    }
    /* Dividers — hide on phone to save space */
    #dashToolbarRow1 #DashboardExportToolbar .ToolbarDividerVMTemplate,
    #dashToolbarRow1 #DashboardExportToolbarContainer > div[style*="width:1px"] {
        display: none !important;
    }

    /* ──────────────────────────────────────────────────────────────────
       Account Creation: single-column stacked labels on phone
       ────────────────────────────────────────────────────────────────── */

    #AccountEditVMHeader,
    #AccountEditVMDomain,
    #AccountEditVMOther,
    #AccountEditVMBillingAddress,
    #AddressEditVMHeader,
    #AccountCreationDialogVMHeader,
    #DomainEditVM > div[style*="grid-template-columns:150px"] {
        grid-template-columns: 1fr !important;
        grid-auto-rows: auto !important;
    }

    /* Reset column placement so label + input stack in a single column */
    #AccountEditVMHeader > .gridLeft,
    #AccountEditVMHeader > .gridRight,
    #AccountEditVMDomain > .gridLeft,
    #AccountEditVMDomain > .gridRight,
    #AccountEditVMOther > .gridLeft,
    #AccountEditVMOther > .gridRight,
    #AccountEditVMBillingAddress > .gridHeader,
    #AddressEditVMHeader > .gridLeft,
    #AddressEditVMHeader > .gridRight,
    #AccountCreationDialogVMHeader > .gridLeft,
    #AccountCreationDialogVMHeader > .gridRight,
    #DomainEditVM .gridLeft,
    #DomainEditVM .gridRight {
        grid-column: 1 !important;
    }

    /* Labels — compact, above the input */
    #AccountEditVMHeader > .gridLeft,
    #AccountEditVMDomain > .gridLeft,
    #AccountEditVMOther > .gridLeft,
    #AddressEditVMHeader > .gridLeft,
    #AccountCreationDialogVMHeader > .gridLeft,
    #DomainEditVM .gridLeft {
        font-weight: 600 !important;
        font-size: 12px !important;
        color: #666 !important;
        padding: 16px 0 2px 0 !important;
        min-height: auto !important;
    }

    /* Validation / warning messages — full width under input on phone */
    .grid-fullrow-msg {
        grid-column: 1 !important;
    }

    /* Inputs — remove top margin since label is above */
    #AccountEditVMHeader > .gridRight,
    #AccountEditVMDomain > .gridRight,
    #AccountEditVMOther > .gridRight,
    #AddressEditVMHeader > .gridRight,
    #AccountCreationDialogVMHeader > .gridRight,
    #DomainEditVM .gridRight {
        padding: 0 0 4px 0 !important;
    }
    #AccountEditVMHeader > .gridRight input,
    #AccountEditVMDomain > .gridRight input,
    #AccountEditVMOther > .gridRight input,
    #AddressEditVMHeader > .gridRight input,
    #AccountCreationDialogVMHeader > .gridRight input,
    #DomainEditVM .gridRight input {
        margin-top: 2px !important;
    }
    #AccountEditVMHeader > .gridRight select,
    #AccountEditVMDomain > .gridRight select,
    #AccountEditVMOther > .gridRight select,
    #AddressEditVMHeader > .gridRight select,
    #AccountCreationDialogVMHeader > .gridRight select,
    #DomainEditVM .gridRight select {
        margin-top: 2px !important;
        width: 100% !important;
    }

    /* Renewal date month + day selects — keep compact side-by-side */
    #AccountEditVMOther > .gridRight.grid select {
        width: 120px !important;
    }

    /* Section headers — full width, a bit more breathing room */
    #AccountEditVMHeader .gridHeader,
    #AccountEditVMDomain .gridHeader,
    #AccountEditVMBillingAddress .gridHeader,
    #AccountEditVMOther .gridHeader {
        grid-column: 1 / -1 !important;
        padding: 12px 0 4px 0 !important;
        font-size: 14px !important;
    }

    /* Checkboxes row — already handled by mobile.css gridSpan, just ensure single column */
    #AccountEditVMHeader > .gridSpan,
    #AccountEditVMDomain .gridSpan,
    #DomainEditVM .gridSpan {
        grid-column: 1 / -1 !important;
        padding-left: 0 !important;
        padding-top: 15px !important;
    }

    /* ===== Account tree — phone refinements ===== */
    /* Even less nesting indent on narrow screens */
    #AccountTree + div[data-bind] {
        margin-left: 8px !important;
    }
    /* Slightly smaller icon column to reclaim horizontal space */
    #AccountTree.grid {
        grid-template-columns: 36px 22px minmax(0, 1fr) auto !important;
    }
    #AccountTree .hasmenu {
        font-size: 13px !important;
    }

    /* ===== SHOW Mode Panel — Phone Overrides ===== */

    /* Top bar: tighter on phones, respect safe area */
    .show-topbar {
        padding: 6px 8px !important;
        padding-top: calc(6px + env(safe-area-inset-top, 0px)) !important;
        font-size: 12px !important;
    }

    /* Main content: less padding */
    .show-main {
        padding: 16px 8px !important;
    }

    .show-hero {
        gap: 16px !important;
    }

    /* Logo: smaller on phones, no clipping */
    .show-logo-wrap {
        overflow: visible !important;
    }
    .show-logo {
        max-width: 140px !important;
    }

    /* Welcome heading — remove negative margin that overlaps the logo on small screens */
    .show-tagline {
        font-size: 18px !important;
        margin-top: 0 !important;
    }

    /* Show selector: full-width stacked */
    .show-selector {
        width: 100% !important;
    }
    .show-selector-row {
        flex-direction: column !important;
        width: 100% !important;
    }
    .show-dropdown {
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
    }
    .show-new-form {
        min-width: 0 !important;
        max-width: none !important;
        width: 100% !important;
    }

    /* CTA button: full width on phones */
    .show-cta {
        width: 100% !important;
        max-width: 280px !important;
        padding: 12px 24px !important;
        font-size: 16px !important;
    }

    .show-cta-stack {
        width: 100% !important;
        gap: 10px !important;
    }

    /* Bottom bar: single column stacked */
    .show-bottombar {
        grid-template-columns: 1fr !important;
        text-align: center !important;
        gap: 4px !important;
        padding: 6px 8px !important;
    }

    /* Hide shortcut hint on phones (no keyboard) */
    .show-shortcut-hint {
        display: none !important;
    }

    /* Activity panel: full-width, smaller text */
    .show-activity-panel {
        padding: 8px 10px !important;
        max-height: 50vh !important;
    }

    .show-summary-grid {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    /* Summary cards: stack vertically */
    .show-summary-cards {
        flex-direction: column !important;
    }

    .show-summary-card {
        min-width: auto !important;
    }
}