/* Phone/tablet overrides. Desktop, printable reports and voucher sheets stay intact. */
.app-page .mobile-nav-close, .app-page .mobile-disclosure-toggle, .app-page .mobile-bulk-label, .app-page .mobile-scroll-hint, .app-page .mobile-ticket-heading { display: none; }
/* Author button/label rules must never make mobile-only grid children visible. */
.app-page [data-mobile-only][hidden] { display: none !important; }
@media print { .app-page [data-mobile-only] { display: none !important; } }

@media screen and (max-width: 990px) {
  @supports (overflow: clip) { .app-page .main { overflow: clip; } }
  .app-page .main > .topbar { position: sticky; top: 0; }
  .app-page .topbar { min-height: 62px; padding: .5rem max(.75rem, env(safe-area-inset-right)) .5rem max(.75rem, env(safe-area-inset-left)); gap: .5rem; }
  .app-page .topbar .title { min-width: 0; font-size: .95rem; line-height: 1.3; margin-left: 0; }
  .app-page .topbar .spacer { min-width: 0; }
  .app-page .burger { width: 44px; height: 44px; flex: 0 0 44px; }
  .app-page .user-chip { min-width: 44px; min-height: 44px; padding: .3rem; }
  .app-page .user-meta { display: none; }
  .app-page .user-chip .avatar { width: 32px; height: 32px; }
  .app-page .sidebar { width: min(310px, calc(100vw - 44px)); padding-bottom: env(safe-area-inset-bottom); }
  .app-page .sidebar .brand { position: relative; padding-right: 70px; }
  .app-page .mobile-nav-close { display: block; position: absolute; right: .6rem; top: .7rem; min-height: 44px; padding: .5rem; font-family: inherit; font-size: .8rem; font-weight: 700; color: white; background: rgba(0,0,0,.15); border: 1px solid rgba(255,255,255,.35); border-radius: 8px; cursor: pointer; }
  .app-page .sidebar .nav a, .app-page .sidebar .nav button { min-height: 44px; }
  .app-page :is(.btn, .dropdown-item, .xio-tab, .printer-close, .vlan-modal-close) { min-height: 44px; touch-action: manipulation; }
  .app-page :is(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="range"]), select, textarea) { font-size: 16px !important; max-width: 100%; min-width: 0; }
  .app-page :is(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="range"]), select) { min-height: 44px; }
  .app-page input[type="file"] { width: 100%; overflow: hidden; }
  .app-page input[type="file"]::file-selector-button { min-height: 36px; max-width: 100%; }
  .app-page :is(input[type="checkbox"], input[type="radio"]):not(.xio-switch input) { width: 20px; height: 20px; flex-shrink: 0; accent-color: var(--primary-700, #5a8860); }
  .app-page :is(.filters-actions, .vlan-billing-preview-actions, .vlan-billing-settings-modal .modal-f, .xio-modal-actions, .credential-card, .xio-savebar) { flex-wrap: wrap; }
  .app-page .filters-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .app-page .filters-grid > div { min-width: 0; }
  .app-page .filters-actions { white-space: normal; }
  .app-page .filters-actions .btn { white-space: normal; }
  .app-page .mobile-table-scroll { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .app-page :is(.table-wrap, .table-responsive, .ticket-table-wrap) { max-width: 100%; -webkit-overflow-scrolling: touch; }
  .app-page .mobile-scroll-hint:not([hidden]) { display: block; margin: .4rem 0; padding: .3rem .6rem; color: var(--muted, #52635a); font-size: .78rem; }
  .app-page .mobile-can-scroll:focus-visible { outline: 2px solid var(--primary-700, #5a8860); outline-offset: -2px; }
  .app-page .modal { padding: .5rem; }
  .app-page .modal .modal-card { max-width: 100%; max-height: calc(100dvh - 1rem); }
  .app-page .modal .modal-b { min-height: 0; overscroll-behavior: contain; }
  .app-page dialog { max-width: calc(100vw - 1rem); max-height: calc(100dvh - 1rem); }
  .app-page :is(.xio-modal-body, .printer-modal-body, .vlan-modal-body) { overflow-wrap: anywhere; }
  .app-page :is(.card-h, .modal-h) > * { min-width: 0; }
}

@media screen and (max-width: 760px) {
  .app-page .page { padding: .8rem max(.65rem, env(safe-area-inset-right)) max(1rem, env(safe-area-inset-bottom)) max(.65rem, env(safe-area-inset-left)); }
  .app-page .mobile-disclosure-toggle { display: flex; align-items: center; justify-content: space-between; gap: .5rem; width: 100%; margin: .5rem 0; text-align: left; white-space: normal; color: #285d33; background: #edf6ee; border-color: #cfe1d2; }
  .app-page .mobile-disclosure-toggle::after { content: '+'; font-size: 1.2rem; flex-shrink: 0; }
  .app-page .mobile-disclosure-toggle[aria-expanded="true"]::after { content: '−'; }
  .app-page .mobile-disclosure-panel.mobile-panel-collapsed { display: none !important; }
  .app-page .card > .mobile-disclosure-toggle { width: calc(100% - 1.5rem); margin: .75rem; }
  .app-page .filters-grid > div:first-child { grid-column: 1 / -1; }
  .app-page .filters-grid .label[style] { margin-top: 0 !important; }
  .app-page .filters-grid > div:nth-child(2) { grid-column: 1 / -1; }
  .app-page .card-h { padding: .85rem; }
  .app-page .card-b { padding: .85rem; }
  .app-page .card-h > div { max-width: 100%; flex-wrap: wrap; }
  .app-page .modal-ticket-body { gap: .75rem; }
  .app-page .ticket-modal-sidebar { width: 100%; min-width: 0; }
  .app-page .mobile-ticket-heading { display: block; margin: 0; font-size: 1rem; overflow-wrap: anywhere; }
  .app-page .ticket-meta-list strong { overflow-wrap: anywhere; text-align: right; }
  .app-page .msg { padding: .75rem; }
  .app-page .msg .meta { flex-wrap: wrap; gap: .3rem; overflow-wrap: anywhere; }
  .app-page .msg .meta .fromto { gap: .3rem .7rem; }
  .app-page .msg .body { overflow-wrap: anywhere; }
  .app-page .msg .body img { max-width: 100%; height: auto; }
  .app-page .atts { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
  .app-page .atts a { max-width: 100%; min-height: 44px; display: inline-flex; align-items: center; overflow-wrap: anywhere; margin: 0; }
  .app-page .reply-composer { position: static; padding: .75rem; }
  .app-page .ticket-modal-main .thread { max-height: 48dvh; min-height: 140px; }
  .app-page .mention-picker { min-width: 0; max-width: calc(100vw - 2rem); }
  .app-page .printer-toolbar .field { min-width: 0; }
  .app-page .printer-toolbar select { max-width: 100% !important; }
  .app-page :is(.printer-kpis, .vlan-kpis, .kpi-grid, .meter-grid, .printer-detail-grid, .toner-grid) { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .65rem; }
  .app-page :is(.kpi-card, .printer-kpi, .vlan-kpi) { padding: .85rem; min-width: 0; }
  .app-page .printer-kpis > :last-child:nth-child(odd) { grid-column: 1 / -1; }
  .app-page :is(.grid-3, .grid-4, .grid-6) { grid-template-columns: minmax(0, 1fr) !important; }
  .app-page .grid > .card[style*="grid-column"] { grid-column: auto !important; }
  .app-page .crestron-page { padding: .65rem !important; }
  .app-page .xio-shell { display: block; margin: 0; min-height: 0; }
  .app-page .xio-workspace { padding: .5rem 0; min-width: 0; }
  .app-page .xio-environment { border: 1px solid #cfe1d2; border-radius: 12px; max-height: 55dvh; }
  .app-page .xio-tree { max-height: 34dvh; }
  .app-page .xio-workspace-head { padding: .85rem; }
  .app-page .xio-panel { min-height: 0; padding: .6rem; }
  .app-page :is(.xio-head-actions, .xio-admin-actions, .xio-savebar-actions) { flex-wrap: wrap; }
  .app-page .xio-head-actions .btn { flex: 1 1 auto; white-space: normal; }
  .app-page .xio-tabs { gap: .2rem; padding-left: .4rem; padding-right: .4rem; }
  .app-page .xio-tabs button { min-height: 44px; min-width: 0; flex: 1; padding: .7rem .4rem; font-size: .85rem; }
  .app-page .xio-setting-row { min-width: 0; }
  .app-page .xio-setting-input { min-width: 0; }
  .app-page .xio-accordion summary { min-height: 44px; }
  .app-page :is(.xio-modal-head, .printer-modal-head, .vlan-modal-head) { padding: .85rem; gap: .5rem; }
  .app-page :is(.xio-modal-head, .printer-modal-head, .vlan-modal-head) > :last-child { flex-shrink: 0; }
  .app-page dialog[open]:is(.xio-modal, .printer-modal, .vlan-modal) { display: flex; flex-direction: column; overflow: hidden; }
  .app-page dialog:is(.xio-modal, .printer-modal, .vlan-modal) > form { display: flex; flex-direction: column; flex: 1; min-height: 0; overflow: hidden; }
  .app-page :is(.xio-modal-body, .printer-modal-body, .vlan-modal-body) { padding: .85rem; min-height: 0; max-height: none; flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; }
  .app-page :is(.xio-modal-head, .printer-modal-head, .vlan-modal-head, .xio-modal-actions, .printer-modal-actions, .vlan-modal-actions) { flex-shrink: 0; }
  .app-page :is(.xio-modal-actions, .printer-modal-actions, .vlan-modal-actions) { padding: .75rem; flex-wrap: wrap; }
  .app-page .vlan-billing-location > summary { flex-wrap: wrap; gap: .5rem; }
  .app-page .vlan-billing-location > summary > strong { font-size: 1.05rem; }
  .app-page .vlan-billing-config-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .app-page .vlan-billing-config-button { padding: .8rem; }
  .app-page .vlan-billing-config-button strong { font-size: .9rem; }
  .app-page .vlan-billing-config-button span { font-size: .75rem; }
  .app-page .vlan-billing-price-section-title { flex-wrap: wrap; }
  .app-page .voucher-sheet-list { justify-content: start; }
}

@media screen and (max-width: 640px) {
  .app-page .btn { white-space: normal; max-width: 100%; }
  .app-page .filters-actions > * { flex: 1 1 calc(50% - .5rem); }
  .app-page .filters-actions .inline-form .btn { width: 100%; }
  .app-page .modal { padding: 0; }
  .app-page .modal .modal-card { width: 100%; max-width: 100%; max-height: 100dvh; border-radius: 0; }
  .app-page .modal :is(.modal-h, .modal-f) { padding: .7rem max(.75rem, env(safe-area-inset-right)) .7rem max(.75rem, env(safe-area-inset-left)); flex-shrink: 0; gap: .5rem; }
  .app-page .modal .modal-f { padding-bottom: max(.7rem, env(safe-area-inset-bottom)); }
  .app-page .modal .modal-b { padding: .75rem; }
  .app-page .modal-h h3 { font-size: 1.05rem; overflow-wrap: anywhere; }
  .app-page .modal-h > .btn { flex-shrink: 0; }
  .app-page .modal .grid-2 { grid-template-columns: minmax(0, 1fr) !important; }
  .app-page .mobile-records { display: block; width: 100%; min-width: 0 !important; border: 0; }
  .app-page .mobile-records > thead { position: absolute; width: 1px; height: 1px; clip-path: inset(50%); overflow: hidden; }
  .app-page .mobile-records > thead.mobile-has-bulk { position: static; display: block; width: auto; height: auto; clip-path: none; overflow: visible; }
  .app-page .mobile-has-bulk > tr { display: block; }
  .app-page .mobile-has-bulk th:not(.mobile-bulk-heading) { position: absolute; width: 1px; height: 1px; clip-path: inset(50%); overflow: hidden; padding: 0; }
  .app-page .mobile-has-bulk th.mobile-bulk-heading { position: static; display: flex; align-items: center; gap: .6rem; padding: .3rem 0 .75rem; border: 0; background: none; }
  .app-page .mobile-bulk-label { display: inline-flex; align-items: center; min-height: 44px; font-size: .8rem; text-transform: none; }
  .app-page .mobile-records > tbody { display: grid; gap: .75rem; }
  .app-page .mobile-records > tbody > tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .65rem .8rem; padding: .85rem; border: 1px solid #dce6de; border-radius: 12px; background: #fff; }
  .app-page .mobile-records > tbody > tr > td { display: block; width: auto !important; min-width: 0; padding: 0; border: 0; white-space: normal !important; overflow-wrap: anywhere; font-size: .87rem; line-height: 1.5; }
  .app-page .mobile-records > tbody > tr > td::before { content: attr(data-mobile-label); display: block; margin-bottom: .12rem; color: #64706b; font-size: .67rem; font-weight: 750; letter-spacing: .03em; text-transform: uppercase; }
  .app-page .mobile-records > tbody > tr > td.mobile-cell-wide { grid-column: 1 / -1; }
  .app-page .mobile-records > tbody > tr > td.mobile-cell-select { display: flex; align-items: center; gap: .5rem; min-height: 36px; grid-column: 1 / -1; }
  .app-page .mobile-records > tbody > tr > td.mobile-cell-select::before { content: 'Select ticket'; order: 1; font-size: .75rem; margin: 0; text-transform: none; }
  .app-page .mobile-records > tbody > tr > td[data-mobile-label="Subject"], .app-page .mobile-records > tbody > tr > td[data-mobile-label="Name"] { font-weight: 750; font-size: .95rem; }
  .app-page .vlan-customer-badge { max-width: 100%; white-space: normal; }
  .app-page .vlan-billing-customer-table, .app-page .vlan-billing-location-total-table { display: block; min-width: 0; table-layout: auto; }
  .app-page :is(.vlan-billing-customer-table, .vlan-billing-location-total-table) colgroup { display: none; }
  .app-page :is(.vlan-billing-customer-table, .vlan-billing-location-total-table) tbody { display: block; }
  .app-page .vlan-billing-customer-table tbody tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; padding: .8rem; gap: .4rem .6rem; border-bottom: 1px solid var(--gray-200); }
  .app-page .vlan-billing-customer-table tbody td { padding: 0; border: 0; overflow-wrap: anywhere; }
  .app-page .vlan-billing-customer-table tbody td:first-child { grid-column: 1 / -1; font-weight: 700; }
  .app-page .vlan-billing-customer-table tbody td:nth-child(2) { font-size: .8rem; }
  .app-page .vlan-billing-customer-table tfoot { display: block; }
  .app-page .vlan-billing-customer-table tfoot tr, .app-page .vlan-billing-location-total-table tr { display: flex; justify-content: space-between; gap: .5rem; padding: .8rem; }
  .app-page .vlan-billing-customer-table tfoot :is(th, td), .app-page .vlan-billing-location-total-table :is(th, td) { border: 0; padding: 0; text-align: left; }
  .app-page .vlan-billing-settings-modal .modal-f .btn { flex: 1 1 auto; }
}

@media (prefers-reduced-motion: reduce) {
  .sidebar { transition: none !important; }
}