/* ---------- Page scaffolding (MUI pages) ---------- */
.page { padding: 24px; }
.page.with-bar { padding-bottom: 128px; }
.ph { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 24px; flex-wrap: wrap; }
.ph-left { display: flex; gap: 16px; align-items: flex-start; min-width: 0; }
.ph-ic { width: 48px; height: 48px; border-radius: 50%; background: var(--pl); color: #fff; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.ph-title { font-size: 22px; font-weight: 600; color: var(--pl); line-height: 1.235; }
.crumbs { font-size: 12px; color: var(--muted); padding-top: 6px; margin-bottom: 8px; display: flex; gap: 8px; flex-wrap: wrap; line-height: 1.66; }
.crumbs a { color: inherit; text-decoration: none; cursor: pointer; }
.crumbs a:hover { text-decoration: underline; }
.crumbs .cur { color: var(--primary); }
.ph-sub { font-size: 16px; color: var(--muted); line-height: 1.5; }
.ph-actions { display: flex; gap: 16px; flex-wrap: wrap; }
.ph-actions.wide { gap: 24px; }

.cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-bottom: 24px; }
.cards.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cards.five { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.scard { position: relative; border: 1px solid var(--divider); border-radius: 16px; padding: 16px; display: flex; gap: 16px; align-items: center; background: #fff; min-width: 0; }
.scard-ic { width: 48px; height: 48px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.scard-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.scard-txt small { font-size: 14px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.scard-txt .v { font-size: 24px; font-weight: 700; line-height: 1.334; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.scard-txt .cap { font-size: 12px; color: var(--muted); }
.scard.payable { background: rgba(211,47,47,.08); border-color: rgba(211,47,47,.24); }
.scard.favor { background: rgba(71,133,129,.08); border-color: rgba(71,133,129,.24); }
.scard .corner { position: absolute; top: 12px; right: 12px; color: var(--muted); display: flex; }

.mtabs { display: flex; border-bottom: 1px solid var(--divider); margin-bottom: 24px; }
.mtab {
  background: none; border: 0; font: inherit; font-size: 14px; font-weight: 500; text-transform: uppercase; letter-spacing: .02857em;
  padding: 12px 16px; min-height: 48px; color: var(--muted); cursor: pointer; position: relative;
}
.mtab.active { color: var(--pl); }
.mtab.active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--pl); }

.fpaper { border: 1px solid var(--divider); border-radius: 12px; padding: 16px; margin-bottom: 24px; display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-end; background: #fff; }
.mfield { position: relative; flex: 1 1 180px; min-width: 0; }
.mfield.search { flex: 2 1 260px; }
.mfield.date { flex: 1 1 200px; }
.minput {
  height: 40px; width: 100%; border: 1px solid rgba(0,0,0,.23); border-radius: 10px; padding: 0 14px; font: inherit; font-size: 14px;
  color: var(--primary); background: #fff; outline: none;
}
.minput:hover { border-color: var(--primary); }
.minput:focus { border-color: var(--primary); box-shadow: inset 0 0 0 1px var(--primary); }
.mfield > label { position: absolute; left: 10px; top: -8px; font-size: 12px; color: var(--muted); background: #fff; padding: 0 4px; line-height: 1.2; pointer-events: none; }
.mfield .lead { position: absolute; left: 12px; top: 10px; color: var(--muted); display: flex; pointer-events: none; }
.mfield .lead + .minput { padding-left: 40px; }
select.minput {
  appearance: none; -webkit-appearance: none; padding-right: 36px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M7 10l5 5 5-5z' fill='%23757575'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 8px center;
}
select.minput.empty { color: var(--muted); }
.fbtns { display: flex; gap: 8px; }

.tpaper { border: 1px solid var(--divider); border-radius: 12px; overflow: hidden; overflow-x: auto; background: #fff; }
.mtable { width: 100%; border-collapse: collapse; }
.mtable th { font-size: 14px; font-weight: 700; text-align: left; padding: 16px; border-bottom: 1px solid #E4E7E7; white-space: nowrap; color: var(--primary); background: #fff; }
.mtable td { font-size: 14px; padding: 16px; border-bottom: 1px solid #E4E7E7; white-space: nowrap; color: var(--primary); }
.mtable tbody tr:last-child td { border-bottom: 0; }
.mtable tbody tr:hover td { background: rgba(0,0,0,.04); }
.mtable tr.clickable { cursor: pointer; }
.mtable tr.selected td { background: rgba(31,59,57,.08); }
.mtable tr.selected:hover td { background: rgba(31,59,57,.12); }
.mtable tr.highlight td { animation: rowflash 3.5s ease-out; }
.mtable .teal { color: var(--brand); font-weight: 600; }
.mtable .cb { width: 58px; padding: 0 0 0 12px; }
.mtable th.sort { cursor: pointer; user-select: none; }
.mtable th.sort .sort-ic { opacity: .45; margin-left: 4px; transition: transform .2s, opacity .2s; }
.mtable th.sort.on .sort-ic { opacity: 1; }
.mtable th.sort.asc .sort-ic { transform: rotate(180deg); }
.mtable .empty { text-align: center; color: var(--muted); padding: 40px 16px; }
.cbox { width: 42px; height: 42px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: var(--muted); }
.cbox.on { color: var(--primary); }
.cbox:hover { background: rgba(0,0,0,.04); }
.eye-btn { width: 30px; height: 30px; border-radius: 50%; border: 0; background: none; color: rgba(0,0,0,.54); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; }
.eye-btn:hover { background: rgba(0,0,0,.04); }
.link-btn { background: none; border: 0; padding: 0; font: inherit; color: var(--brand); font-weight: 600; cursor: pointer; }
.link-btn:hover { text-decoration: underline; }

.schip { display: inline-flex; align-items: center; height: 24px; border-radius: 16px; font-size: 13px; font-weight: 600; white-space: nowrap; color: var(--muted); background: rgba(131,137,137,.12); }
.schip::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; margin-left: 8px; flex-shrink: 0; }
.schip span { padding: 0 8px 0 6px; }
.schip.success { color: #478581; background: rgba(71,133,129,.12); }
.schip.warning { color: #DFB400; background: rgba(223,180,0,.12); }
.schip.error { color: #D32F2F; background: rgba(211,47,47,.12); }
.schip.info { color: #0288D1; background: rgba(2,136,209,.12); }

.mpager { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-top: 16px; flex-wrap: wrap; }
.mpager .sum { font-size: 14px; color: var(--muted); }
.pgs { display: flex; gap: 6px; align-items: center; }
.pg {
  min-width: 32px; height: 32px; border-radius: 12px; border: 0; background: transparent; font: inherit; font-size: 14px; color: var(--primary);
  cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0 6px;
}
.pg:hover:not(:disabled):not(.sel) { background: rgba(0,0,0,.04); }
.pg.sel { background: var(--primary); color: #EDE9DC; }
.pg:disabled { opacity: .38; cursor: default; }