/* MaestrOS mobile layout: visual changes only, no persistence or payment logic.
   Load after the school styles. No changes to school data or actions. */
/* The portal skin replaced the dark background, but inherited white text. */
@media screen {
  #app.ams-portal-user .dz-today {
    background: #176f67; color: #fff; border-color: #176f67;
  }
  #app.ams-portal-user .dz-today-main,
  #app.ams-portal-user .dz-today-date { color: #fff; }
}
@media screen and (max-width: 600px) {
  #app .bar-row { grid-template-columns: minmax(0, 1fr) auto; gap: 7px 12px; }
  #app .bar-row .bar-label { grid-column: 1 / -1; white-space: normal; overflow: visible; overflow-wrap: anywhere; }
  #app .todo-text { min-width: 0; }
  #app .todo-text span { white-space: normal; overflow: visible; overflow-wrap: anywhere; }
  .ams-mobile-scroll-hint { margin: 8px 0; font-size: 12px; line-height: 1.5; color: var(--muted, #456265); }
  .ams-mobile-scroll-hint[hidden] { display: none !important; }
  /* Keep the diagnostic link accessible without covering the bottom tabs. */
  html.ams-authenticated #demo-activity-notice {
    position: static !important; text-align: center;
    padding: 8px 12px calc(90px + env(safe-area-inset-bottom, 0px));
    background: var(--surface, #fff);
  }
  #app .mbr-root .mbr-table { overflow: visible; border: 0; background: transparent; }
  #app .mbr-root .mbr-table table { display: block; min-width: 0; width: 100%; background: transparent; }
  /* Keep column headings available to assistive technology. */
  #app .mbr-root .mbr-table thead {
    position: absolute; width: 1px; height: 1px; margin: -1px;
    padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
  }
  #app .mbr-root .mbr-table tbody { display: block; }
  #app .mbr-root .mbr-table tr[data-banking-transaction] {
    display: block; margin: 12px 0; padding: 14px;
    border: 1px solid #c8dadc; border-radius: 12px; background: #fff;
  }
  #app .mbr-root .mbr-table td {
    display: block; width: auto; max-width: none; min-width: 0;
    padding: 6px 0; border: 0; white-space: normal; overflow-wrap: anywhere;
    font-size: 14px; line-height: 1.5;
  }
  #app .mbr-root .mbr-table td::before {
    display: block; font-size: 11px; font-weight: 700; color: #456265;
    letter-spacing: .04em; margin-bottom: 2px;
  }
  #app .mbr-root .mbr-table td:nth-child(1)::before { content: 'Data'; }
  #app .mbr-root .mbr-table td:nth-child(2)::before { content: 'Causale'; }
  #app .mbr-root .mbr-table td:nth-child(3)::before { content: 'Importo'; }
  #app .mbr-root .mbr-table td:nth-child(4)::before { content: 'Stato'; }
  #app .mbr-root .mbr-table td:nth-child(5)::before { content: 'Ordine / rata'; }
  #app .mbr-root .mbr-table td:nth-child(3) { font-size: 21px; font-weight: 700; }
  #app .mbr-root .mbr-table td button { width: 100%; min-height: 44px; }
  #app .mbr-root .mbr-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #app .mbr-root .mbr-filters > * { min-width: 0; }
  #app .mbr-root .mbr-actions button { max-width: 100%; min-width: 0; }
  #app .mbr-root .mbr-match-status { white-space: normal; }
  html[data-theme="dark"] #app .mbr-root .mbr-table tr[data-banking-transaction] { background: #17252a; border-color: #385054; }
  html[data-theme="dark"] #app .mbr-root .mbr-table td::before { color: #bed6d3; }
}
@media screen and (min-width: 601px), print { .ams-mobile-scroll-hint { display: none !important; } }
@media screen and (max-width: 420px) {
  /* Native date fields must have enough room for the complete date and picker. */
  #app .mbr-root .mbr-filters { grid-template-columns: minmax(0, 1fr); }
}

/* MaestrOS operational refinement — visual only, 2026-10-13. */
html.ams-authenticated #app,
html.ams-authenticated #modal-root {
  --mp-accent:#176e69; --mp-accent-hover:#105853;
}
html.ams-authenticated[data-theme="dark"] #app,
html.ams-authenticated[data-theme="dark"] #modal-root {
  --mp-accent:#267e77; --mp-accent-hover:#328c84;
}
#app #view .section-head .tools { gap:10px; flex-wrap:wrap; }
#app #view .filter-chips { display:flex; flex-wrap:wrap; gap:8px; margin:16px 0; }
#app #view .fchip { min-height:40px; padding:8px 15px; box-shadow:none; border:1px solid #cbded9; }
#app #view .fchip.active { background:#176e69!important; color:#fff!important; border-color:#176e69!important; }
#app #view .card.stat { border-radius:16px; box-shadow:0 3px 12px #173c4006; }
#app #view .stat-ico { color:#176e69; }
#app #view .table-wrap { border-radius:14px; }
#app #view .table-wrap th { letter-spacing:.025em; }
#app #view button:focus-visible,#modal-root button:focus-visible { outline:3px solid #51a89e!important; outline-offset:3px; }
#app #view .mc-calendar-controls { padding:16px; border:1px solid #d5e4e0; border-radius:16px; background:var(--surface,#fff); gap:16px; }
#app #view .mc-view-tabs { gap:8px; flex-wrap:wrap; }
#app #view .mc-view-tabs .btn { min-height:44px; box-shadow:none!important; }
#app #view .mc-view-tabs [aria-pressed="true"] { background:#176e69!important; color:#fff!important; border-color:#176e69!important; }
#app #view .mc-dates { gap:12px; flex-wrap:wrap; }
#app #view .mc-dates input { min-height:44px; border-radius:9px; }
#app #view .mc-period-summary { line-height:1.6; }
#app #view .mc-week-title button { min-width:44px; min-height:44px; border-radius:10px; }
#app #view [data-order-recovery] { background:transparent!important; color:var(--mp-text,#345b58)!important; border:1px solid #cbded9!important; box-shadow:none!important; margin-bottom:16px; }
@media screen and (max-width:600px) {
  #app #view .section-head .tools { width:100%; display:flex; }
  #app #view .section-head .tools input[type="search"] { width:100%!important; flex:1 1 100%; min-width:0!important; min-height:44px; }
  #app #view .section-head .tools .btn { min-height:44px; }
  #app #view .card.stat { padding:16px!important; min-height:110px!important; }
  #app #view .stat-value { font-size:clamp(23px,6vw,30px)!important; overflow-wrap:anywhere; }
  #app #view .mc-calendar-controls { padding:12px; }
  #app #view .mc-view-tabs { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); width:100%; }
  #app #view .mc-view-tabs .btn { width:100%; white-space:normal; font-size:13px; }
  #app #view .mc-dates { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); width:100%; }
  #app #view .mc-dates label,#app #view .mc-dates input { min-width:0; width:100%; }
  #app #view .mc-dates > button { grid-column:1/-1; }
  /* Order cards retain all information and the original sorting buttons. */
  #app #view:has([data-order-recovery]) .table-wrap { overflow:visible; border:0; background:transparent; }
  #app #view:has([data-order-recovery]) .table-wrap table { display:block; min-width:0!important; width:100%; }
  #app #view:has([data-order-recovery]) .table-wrap thead { display:block; overflow-x:auto; margin-bottom:12px; }
  #app #view:has([data-order-recovery]) .table-wrap thead tr { display:flex; }
  #app #view:has([data-order-recovery]) .table-wrap th { flex:none; padding:8px; border:0; }
  #app #view:has([data-order-recovery]) .table-wrap th button { min-height:44px; }
  #app #view:has([data-order-recovery]) .table-wrap tbody { display:block; }
  #app #view:has([data-order-recovery]) .table-wrap tbody tr { display:grid; grid-template-columns:1fr 1fr; padding:14px; margin-bottom:14px; border:1px solid #d5e4e0; border-radius:14px; background:var(--surface,#fff); }
  #app #view:has([data-order-recovery]) .table-wrap td { display:block; min-width:0; padding:7px!important; border:0; white-space:normal!important; overflow-wrap:anywhere; }
  #app #view:has([data-order-recovery]) .table-wrap td::before { display:block; font-size:11px; font-weight:600; opacity:.75; margin-bottom:4px; }
  #app #view:has([data-order-recovery]) .table-wrap td:nth-child(1)::before { content:'Ordine'; }
  #app #view:has([data-order-recovery]) .table-wrap td:nth-child(2)::before { content:'Data'; }
  #app #view:has([data-order-recovery]) .table-wrap td:nth-child(3)::before { content:'Allievo'; }
  #app #view:has([data-order-recovery]) .table-wrap td:nth-child(4)::before { content:'Corso'; }
  #app #view:has([data-order-recovery]) .table-wrap td:nth-child(5)::before { content:'Totale'; }
  #app #view:has([data-order-recovery]) .table-wrap td:nth-child(6)::before { content:'Saldo'; }
  #app #view:has([data-order-recovery]) .table-wrap td:nth-child(7)::before { content:'Stato'; }
  #app #view:has([data-order-recovery]) .table-wrap td:nth-child(8)::before { content:'Invio'; }
  #app #view:has([data-order-recovery]) .table-wrap td:nth-child(3),#app #view:has([data-order-recovery]) .table-wrap td:nth-child(4),#app #view:has([data-order-recovery]) .table-wrap td:last-child { grid-column:1/-1; }
  #app #view:has([data-order-recovery]) .table-wrap td:last-child { display:flex; flex-wrap:wrap; gap:10px; }
  #app #view:has([data-order-recovery]) .table-wrap td:last-child button { min-width:44px; min-height:44px; }
  #app #view:has([data-order-recovery]) > .ams-mobile-scroll-hint { display:none; }
}