/* EduOS / Payslashes V1.10.26 — global card + table balance hygiene
   Scope: geometry, spacing, overflow, alignment and responsiveness only.
   Intentionally does NOT change colors, backgrounds, typography colors or brand treatments. */

:root {
  --eduos-balance-card-gap: clamp(12px, 1.4vw, 20px);
  --eduos-balance-cell-y: clamp(10px, 1vw, 14px);
  --eduos-balance-cell-x: clamp(10px, 1.2vw, 16px);
}

*, *::before, *::after { box-sizing: border-box; }

/* Prevent grid/flex children from forcing page-width overflow. */
main, section, article, aside, .container, .container-fluid, .row,
.grid, [class*="grid"], [class*="layout"], [class*="columns"],
.card, [class$="-card"], [class*=" card"], .panel, [class$="-panel"] {
  min-width: 0;
}

/* Keep common card collections visually level without changing their skin. */
.grid > .card,
[class*="grid"] > .card,
.row > [class*="col-"] > .card,
.row > [class*="col-"] > [class$="-card"],
.cards > .card,
.card-grid > .card {
  height: 100%;
}

.card,
[class$="-card"],
.panel,
[class$="-panel"] {
  max-width: 100%;
}

.card-body,
.card-content,
[class$="-card__body"],
[class$="-card-body"],
.panel-body {
  min-width: 0;
}

/* Long IDs, emails, URLs and labels should wrap instead of breaking cards. */
.card p, .card li, .card dd, .card dt,
[class$="-card"] p, [class$="-card"] li,
td, th {
  overflow-wrap: anywhere;
  word-break: normal;
}

/* Universal table geometry: balanced cells, reliable width and stable alignment. */
table {
  width: 100%;
  max-width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}

thead th {
  vertical-align: middle;
}

th, td {
  padding-top: var(--eduos-balance-cell-y);
  padding-bottom: var(--eduos-balance-cell-y);
  padding-left: var(--eduos-balance-cell-x);
  padding-right: var(--eduos-balance-cell-x);
  vertical-align: middle;
  line-height: 1.35;
}

tbody tr { height: auto; }

td > :first-child, th > :first-child { margin-top: 0; }
td > :last-child, th > :last-child { margin-bottom: 0; }

/* Existing responsive table wrappers become dependable on all modules. */
.table-responsive,
.table-wrap,
.table-wrapper,
[class*="table-responsive"],
[class*="table-wrap"] {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: visible;
  -webkit-overflow-scrolling: touch;
}

/* Controls inside table cells should not create accidental tall rows. */
td input:not([type="checkbox"]):not([type="radio"]),
td select,
td textarea,
td button,
td .btn,
td a.btn {
  max-width: 100%;
}

td textarea { min-height: 72px; resize: vertical; }

/* Balanced action groups; preserve every existing button color/style. */
.actions,
.card-actions,
.table-actions,
[class$="-actions"] {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

/* Prevent images/media from blowing out cards and tables. */
.card img, [class$="-card"] img, td img,
.card video, [class$="-card"] video {
  max-width: 100%;
}

/* Remove accidental trailing whitespace created by empty last blocks. */
main > :last-child,
section > :last-child,
article > :last-child,
.card-body > :last-child,
.card-content > :last-child,
.panel-body > :last-child {
  margin-bottom: 0;
}

/* Mobile: keep cards inside viewport and make bare legacy tables scroll safely. */
@media (max-width: 767.98px) {
  .row,
  .grid,
  [class*="grid"] {
    min-width: 0;
  }

  .card,
  [class$="-card"],
  .panel,
  [class$="-panel"] {
    width: 100%;
  }

  table:not(.no-mobile-scroll) {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  th, td {
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 11px;
    padding-right: 11px;
  }

  .actions,
  .card-actions,
  .table-actions,
  [class$="-actions"] {
    gap: 7px;
  }
}

/* Print must remain true table layout. */
@media print {
  table { display: table !important; overflow: visible !important; }
  thead { display: table-header-group; }
  tr { break-inside: avoid; }
  .card, [class$="-card"], .panel, [class$="-panel"] { break-inside: avoid; }
}