/* V8.5.28: one positioning rule, a stationary header and an inner scroll area.
   The explicit expense selector supersedes the older ID-specific inset rules. */
@media screen {
  html body dialog.modal,html body #expenseFocusDialog.modal {
    position:fixed!important;
    inset:var(--spn-visible-top,0px) 0 auto!important;
    transform:none!important;
    translate:none!important;
    margin:16px auto!important;
    padding:0!important;
    width:min(760px,calc(100% - 32px))!important;
    max-width:calc(100% - 32px)!important;
    height:auto;
    max-height:calc(100vh - 32px)!important;
    max-height:calc(var(--spn-visible-height,100dvh) - 32px)!important;
    border-radius:16px!important;
    overflow:auto!important;
    background:var(--panel)!important;
  }
  html body dialog.modal.wide,html body #expenseFocusDialog.modal.wide { width:min(1180px,calc(100% - 32px))!important; }
  html body dialog.modal .modal-head,html body #expenseFocusDialog.modal .modal-head {
    position:sticky;top:0;z-index:3;margin:0!important;padding:14px 18px!important;
    border-bottom:1px solid var(--line);background:var(--panel)!important;
  }
  html body dialog.modal.spn-dialog-v27[open],html body #expenseFocusDialog.modal.spn-dialog-v27[open] { display:flex;flex-direction:column;overflow:hidden!important; }
  html body dialog.modal .spn-dialog-host-v27 {
    display:flex!important;flex-direction:column!important;flex:1 1 auto;
    min-height:0!important;min-width:0;width:100%;max-width:none;
    height:auto!important;max-height:none!important;
    gap:0!important;padding:0!important;margin:0;border-radius:0!important;overflow:hidden!important;
  }
  html body dialog.modal.spn-dialog-v27.spn-dialog-host-v27 { max-height:calc(var(--spn-visible-height,100dvh) - 32px)!important; }
  html body dialog.modal .spn-dialog-host-v27>.modal-head,
  html body dialog.modal.spn-dialog-host-v27>.modal-head {
    display:flex;align-items:center;flex-wrap:nowrap;gap:14px;position:relative!important;top:auto;
    flex:0 0 auto;min-width:0;
  }
  html body dialog.modal .modal-head>div { min-width:0;flex:1; }
  html body dialog.modal .modal-head h2 { margin:0;font-size:20px;line-height:1.25;overflow-wrap:anywhere; }
  html body dialog.modal .modal-head p { margin:5px 0 0;font-size:12px;line-height:1.35; }
  html body dialog.modal .spn-dialog-back-v27,
  html body #expenseFocusDialog.modal .spn-dialog-back-v27 {
    flex:0 0 auto!important;width:auto!important;min-width:88px!important;max-width:none;
    height:44px!important;min-height:44px!important;padding:8px 12px!important;
    font-size:14px!important;font-weight:700;line-height:1;white-space:nowrap;
    color:var(--blue);background:var(--soft);border:1px solid var(--line);border-radius:10px;
  }
  html body dialog.modal .spn-dialog-content-v27 {
    display:block;flex:1 1 auto;min-height:0;min-width:0;max-width:100%;
    overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;
    padding:18px;scroll-padding:12px;-webkit-overflow-scrolling:touch;
  }
  html body dialog.modal .spn-dialog-host-v27>.modal-actions,
  html body dialog.modal.spn-dialog-host-v27>.modal-actions {
    flex:0 0 auto;position:static!important;margin:0!important;padding:12px 18px!important;
    border-top:1px solid var(--line);background:var(--panel);display:flex;flex-wrap:wrap;gap:8px;
  }
  html body dialog.modal .spn-dialog-content-v27>.button-row { margin-block:12px; }
  html body dialog.modal .spn-dialog-content-v27>.table-scroll { margin-top:16px; }
  html body dialog.modal .expense-focus-actions { margin-block:16px; }
  html body dialog.modal .hidden,html body dialog.modal [hidden] { display:none!important; }
}
@media screen and (max-width:800px) {
  html body dialog.modal,html body #expenseFocusDialog.modal,
  html body dialog.modal.wide,html body #expenseFocusDialog.modal.wide,
  html[data-display="tv"] body dialog.modal {
    --spn-dialog-gap:8px;
    margin:var(--spn-dialog-gap) auto!important;
    inset:var(--spn-visible-top,0px) 0 auto!important;
    width:calc(100% - 16px)!important;max-width:calc(100% - 16px)!important;
    height:calc(100vh - 16px)!important;
    height:calc(var(--spn-visible-height,100dvh) - 16px)!important;
    max-height:calc(100vh - 16px)!important;
    max-height:calc(var(--spn-visible-height,100dvh) - 16px)!important;
    border-radius:12px!important;
  }
  html body dialog.modal.spn-dialog-v27.spn-dialog-host-v27 { max-height:calc(var(--spn-visible-height,100dvh) - 16px)!important; }
  html body dialog.modal .modal-head,html body #expenseFocusDialog.modal .modal-head { padding:10px 12px!important;gap:10px!important; }
  html body dialog.modal .modal-head h2,html body #expenseFocusDialog.modal .modal-head h2 { font-size:17px!important;line-height:1.3; }
  html body dialog.modal .modal-head p { font-size:11px;line-height:1.35; }
  html body dialog.modal .spn-dialog-content-v27 { padding:12px; }
  html body dialog.modal .spn-dialog-host-v27>.modal-actions { padding:10px 12px!important; }
  html body dialog.modal .modal-actions .btn { flex:1 1 120px;min-height:44px;font-size:13px; }
  html body #expenseFocusDialog .expense-focus-summary { grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important; }
  html body #expenseFocusDialog .expense-focus-summary article { padding:10px!important;grid-column:auto;min-width:0; }
  html body #expenseFocusDialog .expense-focus-summary :is(strong,span) { min-width:0;max-width:100%;white-space:normal!important;overflow-wrap:anywhere; }
  html body #expenseFocusDialog .expense-focus-summary article:first-child { grid-column:1/-1; }
  html body #expenseFocusDialog .expense-focus-summary article:last-child { grid-column:auto!important; }
  html body #expenseFocusDialog .expense-focus-summary strong { font-size:17px!important; }
  html body #expenseFocusDialog .expense-focus-summary article:first-child strong { font-size:24px!important; }
  html body #expenseFocusDialog .expense-focus-actions { display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px; }
  html body #expenseFocusDialog .expense-focus-actions .btn { min-height:44px;font-size:12px!important;padding:9px 8px; }
  html body :is(.table-panel,.expense-focus-table) tr,
  html body #expenseFocusDialog .expense-focus-table tr {
    display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 12px;
    padding:6px 12px!important;
  }
  html body :is(.table-panel,.expense-focus-table) td,
  html body #expenseFocusDialog .expense-focus-table td { font-size:13px!important;padding:8px 0!important;line-height:1.4; }
  html body :is(.table-panel,.expense-focus-table) td::before { font-size:10px!important;margin-bottom:4px; }
  html body :is(.table-panel,.expense-focus-table) td[data-label="Descrição"] { grid-column:1/-1;order:-2; }
  html body :is(.table-panel,.expense-focus-table) td:is([data-label="Data"],[data-label="Data / hora"],[data-label="Data e hora"],[data-label="Valor"]) { order:-1; }
  html body :is(.table-panel,.expense-focus-table) td:is([data-label="Ações"],[data-label="Comprovantes"],[data-label="Comprovantes e edição"],[colspan]) { grid-column:1/-1; }
  html body :is(.table-panel,.expense-focus-table) td .mini-btn { font-size:12px;min-height:44px; }
  html body .receipt-gallery-grid { grid-template-columns:minmax(0,1fr); }
}
@media screen and (max-width:350px) {
  html body :is(.table-panel,.expense-focus-table) tr,html body #expenseFocusDialog .expense-focus-table tr { grid-template-columns:minmax(0,1fr); }
  html body #expenseFocusDialog .expense-focus-actions { grid-template-columns:minmax(0,1fr)!important; }
  html body dialog.modal .modal-head p { font-size:10px; }
}
@media screen and (max-height:440px) {
  html body dialog.modal .modal-head,html body #expenseFocusDialog.modal .modal-head { padding-block:6px!important; }
  html body dialog.modal .modal-head p { display:none; }
  html body dialog.modal .spn-dialog-host-v27>.modal-actions { padding-block:6px!important; }
}