/* Wave 4 / Issue 26C
   True off-canvas sidebar fix for narrow browser widths.
   This file is loaded AFTER app.css and only overrides responsive layout behavior. */

html,
body {
  max-width: 100%;
  overflow-x: hidden;
}

.app-shell,
.main-content {
  min-width: 0;
}

@media (max-width: 1024px) {
  html,
  body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden !important;
  }

  body.sidebar-open {
    overflow: hidden !important;
    touch-action: none;
  }

  .app-shell {
    display: block !important;
    grid-template-columns: none !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 100vh;
    overflow-x: hidden !important;
  }

  .main-content {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 1rem !important;
    transform: none !important;
    overflow-x: hidden !important;
  }

  .drawer {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    left: auto !important;
    bottom: 0 !important;
    z-index: 1001 !important;
    width: min(84vw, 320px) !important;
    max-width: 320px !important;
    height: 100vh !important;
    height: 100dvh !important;
    max-height: 100vh !important;
    max-height: 100dvh !important;
    margin: 0 !important;
    padding: 1.25rem 1rem !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    box-shadow: -22px 0 60px rgba(15, 23, 42, 0.35) !important;
    transform: translateX(112%) !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transition: transform 220ms ease, visibility 220ms ease !important;
    will-change: transform;
  }

  html[dir="ltr"] .drawer {
    right: auto !important;
    left: 0 !important;
    transform: translateX(-112%) !important;
    box-shadow: 22px 0 60px rgba(15, 23, 42, 0.35) !important;
  }

  .drawer.open,
  body.sidebar-open .drawer {
    transform: translateX(0) !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }

  .app-shell__backdrop {
    display: block !important;
    position: fixed !important;
    inset: 0 !important;
    z-index: 1000 !important;
    background: rgba(15, 23, 42, 0.48) !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transition: opacity 180ms ease, visibility 180ms ease !important;
  }

  .app-shell__backdrop.show,
  body.sidebar-open .app-shell__backdrop {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }

  .menu-toggle {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .app-toolbar,
  .header-left,
  .header-actions,
  .quick-actions {
    max-width: 100% !important;
  }

  .quick-actions {
    overflow-x: auto;
    padding-bottom: 0.25rem;
  }
}

@media (max-width: 640px) {
  .main-content {
    padding: 0.75rem !important;
  }

  .drawer {
    width: min(88vw, 300px) !important;
  }
}

@media (min-width: 1025px) {
  body.sidebar-open {
    overflow: auto !important;
  }

  .drawer {
    visibility: visible !important;
    pointer-events: auto !important;
  }
}

/* Wave 4 / Issue 26D
   Desktop sidebar scroll fix.
   Keep the sidebar independent from long-page scrolling so it never gets clipped
   or half-hidden on pages with tall content. */
@media screen and (min-width: 1025px) {
  html,
  body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden !important;
  }

  .app-shell {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 100vh !important;
    overflow-x: hidden !important;
  }

  .drawer {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    left: auto !important;
    bottom: 0 !important;
    z-index: 900 !important;
    width: 280px !important;
    max-width: 280px !important;
    height: 100vh !important;
    height: 100dvh !important;
    max-height: 100vh !important;
    max-height: 100dvh !important;
    margin: 0 !important;
    transform: none !important;
    visibility: visible !important;
    pointer-events: auto !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
    box-shadow: none !important;
  }

  .main-content {
    width: calc(100% - 280px) !important;
    max-width: calc(100% - 280px) !important;
    margin-right: 280px !important;
    margin-left: 0 !important;
    min-width: 0 !important;
    overflow-x: hidden !important;
  }

  .app-shell__backdrop,
  .app-shell__backdrop.show,
  body.sidebar-open .app-shell__backdrop {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  .menu-toggle {
    display: none !important;
  }

  body.sidebar-open {
    overflow: auto !important;
    touch-action: auto !important;
  }

  html[dir="ltr"] .drawer {
    right: auto !important;
    left: 0 !important;
  }

  html[dir="ltr"] .main-content {
    margin-right: 0 !important;
    margin-left: 280px !important;
  }
}

@media screen and (min-width: 1025px) and (max-width: 1180px) {
  .drawer {
    width: 250px !important;
    max-width: 250px !important;
  }

  .main-content {
    width: calc(100% - 250px) !important;
    max-width: calc(100% - 250px) !important;
    margin-right: 250px !important;
  }

  html[dir="ltr"] .main-content {
    margin-right: 0 !important;
    margin-left: 250px !important;
  }
}

/* Wave 4 / Issue 33
   Global overflow guard and readable inner scroll areas.
   Loaded after the main stylesheet through sidebar_offcanvas_fix.css. */

* {
  box-sizing: border-box;
}

.app-shell,
.main-content,
.content-area,
.page-shell,
.page,
.card,
.dashboard-card,
.metric-card,
.report-card,
.form-card,
.table-wrap,
.responsive-table-desktop,
.responsive-table-mobile,
.section-head,
.hero-actions,
.row-actions,
.filter-form,
.grid,
.metric-grid {
  min-width: 0;
  max-width: 100%;
}

.main-content,
.content-area,
.page-shell,
.page {
  overflow-x: hidden;
}

.card,
.dashboard-card,
.metric-card,
.report-card,
.form-card {
  overflow-wrap: anywhere;
}

.metric-value,
.stat-value,
.mono,
.badge,
.btn,
.table td,
.table th {
  overflow-wrap: anywhere;
  word-break: normal;
}

.table-wrap,
.responsive-table-desktop {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: visible;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}

.table-wrap > table,
.responsive-table-desktop > table,
table.table {
  max-width: none;
}

.row-actions,
.hero-actions,
.form-actions,
.quick-actions,
.filter-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  min-width: 0;
}

.row-actions > *,
.hero-actions > *,
.form-actions > *,
.quick-actions > *,
.filter-actions > * {
  min-width: 0;
}

@media screen and (max-width: 1024px) {
  .main-content,
  .content-area,
  .page-shell,
  .page {
    overflow-x: hidden !important;
  }

  .card,
  .dashboard-card,
  .metric-card,
  .report-card,
  .form-card {
    width: 100%;
    max-width: 100%;
  }

  .metric-grid,
  .dashboard-grid,
  .grid.grid-4,
  .grid.grid-3,
  .grid.grid-2 {
    grid-template-columns: 1fr !important;
  }

  .section-head,
  .dashboard-hero-inner,
  .hero-actions,
  .row-actions,
  .form-actions,
  .quick-actions,
  .filter-actions {
    align-items: stretch;
  }

  .hero-actions .btn,
  .row-actions .btn,
  .form-actions .btn,
  .quick-actions .btn,
  .filter-actions .btn {
    max-width: 100%;
  }
}

@media screen and (min-width: 1025px) {
  .main-content {
    min-height: 100vh;
  }

  .content-area,
  .page-shell,
  .page {
    width: 100%;
    max-width: 100%;
  }
}

/* Wave 4 / Issue 33B
   Fix table text becoming vertical after the global overflow guard.
   Tables should keep cells horizontal and use their own horizontal scroll
   instead of breaking Persian labels and numbers letter-by-letter. */

.card,
.dashboard-card,
.metric-card,
.report-card,
.form-card {
  overflow-wrap: break-word !important;
  word-break: normal !important;
}

.table-wrap,
.responsive-table-desktop {
  overflow-x: auto !important;
  overflow-y: visible !important;
}

.table-wrap > table,
.responsive-table-desktop > table,
table.table {
  width: max-content !important;
  min-width: 100% !important;
  table-layout: auto !important;
}

table.table th,
table.table td,
.table th,
.table td {
  white-space: nowrap !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
  vertical-align: middle !important;
}

.table th *,
.table td *,
.table .badge,
.table .btn,
.table .mono,
.table .text-xs,
.table .text-sm {
  white-space: nowrap !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
}

/* Only explicitly long text areas may wrap inside tables. */
.table td.cell-wrap,
.table td.description,
.table td.notes,
.table td.summary,
.table td .cell-wrap,
.table td .description,
.table td .notes,
.table td .summary,
.table td .muted,
.table td p {
  white-space: normal !important;
  overflow-wrap: break-word !important;
  word-break: normal !important;
  min-width: 14rem;
  max-width: 28rem;
}

.metric-value,
.stat-value,
.mono,
.amount,
.money,
.number,
.badge {
  white-space: nowrap !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
}

.metric-note,
.stat-note,
.muted,
.help-text,
.hero-subtitle,
.hero-note {
  overflow-wrap: break-word !important;
  word-break: normal !important;
}

/* On very small screens the card/mobile templates handle readability.
   If a real table is still visible, keep horizontal scrolling instead of
   destroying cell text. */
@media screen and (max-width: 1024px) {
  .responsive-table-desktop,
  .table-wrap {
    max-width: 100% !important;
    overflow-x: auto !important;
  }

  table.table th,
  table.table td,
  .table th,
  .table td {
    white-space: nowrap !important;
  }
}

/* Wave 4 / Issue 34
   Long table usability polish: keep headers visible, make horizontal scroll
   clearer, and avoid accidental full-page overflow while preserving horizontal
   cell text. This is screen-only and does not affect print export. */
@media screen {
  .table-wrap,
  .responsive-table-desktop {
    position: relative !important;
    scrollbar-gutter: stable both-edges;
    -webkit-overflow-scrolling: touch;
    border-radius: var(--radius-lg, 18px);
  }

  .table-wrap::-webkit-scrollbar,
  .responsive-table-desktop::-webkit-scrollbar {
    height: 10px;
  }

  .table-wrap::-webkit-scrollbar-track,
  .responsive-table-desktop::-webkit-scrollbar-track {
    background: rgba(15, 23, 42, 0.06);
    border-radius: 999px;
  }

  .table-wrap::-webkit-scrollbar-thumb,
  .responsive-table-desktop::-webkit-scrollbar-thumb {
    background: rgba(37, 99, 235, 0.42);
    border-radius: 999px;
    border: 2px solid rgba(255, 255, 255, 0.72);
  }

  .table-wrap::-webkit-scrollbar-thumb:hover,
  .responsive-table-desktop::-webkit-scrollbar-thumb:hover {
    background: rgba(37, 99, 235, 0.66);
  }

  .table-wrap table.table thead th,
  .responsive-table-desktop table.table thead th,
  table.table thead th {
    position: sticky;
    top: 0;
    z-index: 6;
    background: var(--surface, #ffffff);
    box-shadow: 0 1px 0 rgba(15, 23, 42, 0.08), 0 10px 18px rgba(15, 23, 42, 0.04);
  }

  .table-wrap table.table tbody tr:hover td,
  .responsive-table-desktop table.table tbody tr:hover td {
    background: rgba(37, 99, 235, 0.035);
  }

  .table-wrap table.table td.actions-cell,
  .responsive-table-desktop table.table td.actions-cell {
    min-width: 14rem;
  }

  .table-wrap .row-actions,
  .responsive-table-desktop .row-actions,
  .table .row-actions {
    flex-wrap: nowrap !important;
    white-space: nowrap !important;
  }

  .table-wrap .row-actions .btn,
  .responsive-table-desktop .row-actions .btn,
  .table .row-actions .btn {
    flex: 0 0 auto;
  }

  /* A subtle fade tells the operator that the table can be scrolled horizontally.
     It is pointer-events:none so it never blocks table buttons. */
  .table-wrap::after,
  .responsive-table-desktop::after {
    content: "";
    position: sticky;
    left: 0;
    bottom: 0;
    display: block;
    width: 42px;
    height: 0;
    margin-top: -1px;
    pointer-events: none;
    box-shadow: -18px 0 22px rgba(15, 23, 42, 0.08);
  }
}

@media screen and (max-width: 768px) {
  .table-wrap,
  .responsive-table-desktop {
    border: 1px solid rgba(148, 163, 184, 0.22);
  }

  .table-wrap::before,
  .responsive-table-desktop::before {
    content: "برای دیدن ستون‌های بیشتر، جدول را افقی بکشید";
    display: block;
    position: sticky;
    right: 0;
    top: 0;
    z-index: 7;
    padding: 0.45rem 0.75rem;
    font-size: 0.75rem;
    color: var(--muted, #64748b);
    background: linear-gradient(90deg, rgba(248, 250, 252, 0.86), rgba(248, 250, 252, 1));
    border-bottom: 1px solid rgba(148, 163, 184, 0.18);
  }
}

/* ==========================================================
   Wave 4 Issue 35 — Action buttons and command bars polish
   Keeps page-level actions readable on desktop/mobile without
   breaking table horizontal scrolling behavior.
   ========================================================== */

/* Page/section action groups should be predictable and readable. */
.page-actions,
.hero-actions,
.section-actions,
.card-actions,
.toolbar-actions,
.dashboard-actions,
.quick-actions,
.quick-action-grid,
.actions-bar {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: .55rem;
  flex-wrap: wrap;
  min-width: 0;
}

/* Section headings with action buttons should not squeeze text into a narrow column. */
.section-head,
.card-header,
.report-header,
.list-header,
.form-header {
  gap: .75rem;
}

.section-head > div,
.card-header > div,
.report-header > div,
.list-header > div,
.form-header > div {
  min-width: 0;
}

/* Keep important button labels on a single readable line. */
.btn,
a.btn,
button.btn {
  white-space: nowrap;
  max-width: 100%;
}

/* Icons and labels inside buttons should stay aligned. */
.btn,
.action-link,
.nav-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .35rem;
  line-height: 1.45;
}

/* Prevent very long labels from breaking the whole layout. */
.btn .label,
.btn-label,
.action-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

/* Non-table row actions may wrap nicely. Table row actions are handled separately below. */
:not(td) > .row-actions,
.section-head .row-actions,
.card .row-actions:not(td .row-actions),
.hero-actions.row-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
  min-width: 0;
}

/* Table operation buttons: keep horizontal and scroll if needed, do not stack vertically. */
td .row-actions,
.table td .row-actions,
.responsive-table-desktop td .row-actions,
.table-wrap td .row-actions {
  display: inline-flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: .35rem;
  max-width: min(100%, 34rem);
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  padding-block: .1rem;
}

td .row-actions .btn,
.table td .row-actions .btn,
.responsive-table-desktop td .row-actions .btn,
.table-wrap td .row-actions .btn {
  flex: 0 0 auto;
}

/* Make destructive actions visually readable but not oversized. */
.btn-danger,
.btn-warning,
.btn-info,
.btn-success,
.btn-primary,
.btn-secondary {
  min-height: 2.35rem;
}

.btn-sm {
  min-height: 2rem;
  padding-inline: .65rem;
}

/* Sticky form actions should not cover content at the bottom on small screens. */
.form-actions,
.submit-row,
.sticky-form-actions {
  z-index: 30;
}

/* Mobile: page-level actions become comfortable touch rows, table buttons remain horizontal. */
@media (max-width: 768px) {
  .page-actions,
  .hero-actions,
  .section-actions,
  .card-actions,
  .toolbar-actions,
  .dashboard-actions,
  .actions-bar,
  .section-head > .row-actions,
  .card > .row-actions,
  .hero-actions.row-actions {
    width: 100%;
    justify-content: stretch;
  }

  .page-actions .btn,
  .hero-actions .btn,
  .section-actions .btn,
  .card-actions .btn,
  .toolbar-actions .btn,
  .dashboard-actions .btn,
  .actions-bar .btn,
  .section-head > .row-actions .btn,
  .card > .row-actions .btn,
  .hero-actions.row-actions .btn {
    flex: 1 1 10rem;
  }

  .section-head,
  .card-header,
  .report-header,
  .list-header,
  .form-header {
    align-items: stretch;
  }

  td .row-actions,
  .table td .row-actions,
  .responsive-table-desktop td .row-actions,
  .table-wrap td .row-actions {
    max-width: 100%;
  }
}

@media (max-width: 520px) {
  .page-actions .btn,
  .hero-actions .btn,
  .section-actions .btn,
  .card-actions .btn,
  .toolbar-actions .btn,
  .dashboard-actions .btn,
  .actions-bar .btn,
  .section-head > .row-actions .btn,
  .card > .row-actions .btn,
  .hero-actions.row-actions .btn {
    flex-basis: 100%;
    width: 100%;
  }

  .btn,
  a.btn,
  button.btn {
    min-height: 2.55rem;
  }
}

/* =========================================================
   Wave 4 / Issue 36 — Accessibility, focus and readability polish
   Keeps UI usable with keyboard, touch and small screens.
   ========================================================= */

:root {
  --focus-ring-color: rgba(37, 99, 235, 0.38);
  --focus-ring-border: rgba(37, 99, 235, 0.92);
}

/* Clear keyboard focus without changing normal mouse appearance too much. */
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--focus-ring-color) !important;
  outline-offset: 3px !important;
  box-shadow: 0 0 0 1px var(--focus-ring-border) !important;
}

/* Inputs should remain readable and easy to tap in dense admin forms. */
input,
select,
textarea,
.form-control,
.form-select {
  max-width: 100%;
}

input[type="text"],
input[type="number"],
input[type="email"],
input[type="tel"],
input[type="password"],
input[type="search"],
input[type="date"],
input[type="time"],
select,
textarea {
  min-height: 2.65rem;
  line-height: 1.6;
}

textarea {
  resize: vertical;
  min-height: 6.5rem;
}

/* Disabled controls should look disabled but still readable. */
button:disabled,
.btn:disabled,
input:disabled,
select:disabled,
textarea:disabled,
[aria-disabled="true"] {
  cursor: not-allowed !important;
  opacity: 0.62;
}

/* Make clickable utility elements more touch-friendly. */
.badge,
.status-badge,
.chip,
.pill,
.tag {
  line-height: 1.7;
  max-width: 100%;
}

/* Long identifiers stay horizontal but do not destroy cards. */
.mono,
.code,
.transaction-code,
.reference-code,
.small-code {
  direction: ltr;
  unicode-bidi: plaintext;
  overflow-wrap: normal;
  word-break: normal;
  white-space: nowrap;
}

.card .mono,
.metric-card .mono,
.info-list .mono {
  overflow-x: auto;
  display: inline-block;
  max-width: 100%;
  vertical-align: middle;
}

/* Improve hover/active feedback for clickable rows and cards without changing data. */
.table tbody tr,
.card,
.metric-card,
.report-card,
.list-card,
.mobile-card {
  transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease, background-color 160ms ease;
}

@media (hover: hover) {
  .table tbody tr:hover {
    background-color: rgba(15, 23, 42, 0.035);
  }

  .clickable-card:hover,
  .report-card:hover,
  .list-card:hover {
    transform: translateY(-1px);
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.09);
  }
}

/* Keep active nav item readable in sidebar/drawer. */
.sidebar a[aria-current="page"],
.sidebar .active,
.sidebar .nav-active,
.side-nav a[aria-current="page"],
.side-nav .active,
.side-nav .nav-active {
  font-weight: 800;
}

/* Mobile form controls and command buttons become easier to tap. */
@media (max-width: 768px) {
  input[type="text"],
  input[type="number"],
  input[type="email"],
  input[type="tel"],
  input[type="password"],
  input[type="search"],
  input[type="date"],
  input[type="time"],
  select,
  textarea,
  .btn,
  button.btn,
  a.btn {
    min-height: 2.8rem;
  }

  label,
  .form-label {
    line-height: 1.8;
  }

  .helptext,
  .form-help,
  .field-help,
  .muted {
    line-height: 1.9;
  }
}

/* Honor reduced-motion preferences. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}

/* =========================================================
   Wave 4 / Issue 36B — Table alignment and cell separation fix
   Restores strict table layout semantics after the overflow/touch polish.
   Goal: each cell stays under its own header, borders remain clear, and
   the horizontal scroll belongs to the table wrapper only.
   ========================================================= */
@media screen {
  .table-wrap,
  .responsive-table-desktop {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
  }

  .table-wrap table.table,
  .responsive-table-desktop table.table,
  table.table {
    display: table !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    table-layout: auto !important;
    width: max-content !important;
    min-width: 100% !important;
  }

  .table thead {
    display: table-header-group !important;
  }

  .table tbody {
    display: table-row-group !important;
  }

  .table tr {
    display: table-row !important;
  }

  .table th,
  .table td {
    display: table-cell !important;
    position: relative;
    text-align: right !important;
    vertical-align: middle !important;
    white-space: nowrap !important;
    overflow: visible !important;
    padding: .72rem .85rem !important;
    border-bottom: 1px solid rgba(148, 163, 184, 0.22) !important;
    border-inline-start: 1px solid rgba(148, 163, 184, 0.12) !important;
  }

  .table th:first-child,
  .table td:first-child {
    border-inline-start: 0 !important;
  }

  .table th {
    font-weight: 800 !important;
    color: var(--muted, #64748b) !important;
    background: var(--surface, #ffffff) !important;
  }

  .table td {
    color: var(--text, #0f172a) !important;
    background-clip: padding-box;
  }

  .table tbody tr:nth-child(even) td {
    background-color: rgba(15, 23, 42, 0.018);
  }

  /* Prevent utility flex/grid rules from turning table content into layout columns. */
  .table td > .grid,
  .table td > .metric-grid,
  .table td > .row-actions,
  .table td > .hero-actions,
  .table td > .quick-actions,
  .table td > .filter-actions {
    max-width: none;
  }

  /* Action cells may scroll internally, but must not pull text from neighboring columns. */
  .table td .row-actions,
  .table-wrap td .row-actions,
  .responsive-table-desktop td .row-actions {
    display: inline-flex !important;
    width: auto !important;
    min-width: max-content !important;
    max-width: 34rem !important;
    overflow-x: auto !important;
    vertical-align: middle;
  }

  /* Long notes are the only cells allowed to wrap; other table cells keep column alignment. */
  .table td.cell-wrap,
  .table td.description,
  .table td.notes,
  .table td.summary,
  .table td .cell-wrap,
  .table td .description,
  .table td .notes,
  .table td .summary,
  .table td .muted,
  .table td p {
    white-space: normal !important;
    line-height: 1.8 !important;
  }

  /* If a mobile-card template exists, keep it separate from desktop tables. */
  .responsive-table-mobile,
  .mobile-table-cards {
    clear: both;
  }
}

@media screen and (max-width: 768px) {
  .table th,
  .table td {
    padding: .65rem .75rem !important;
  }
}

/* =========================================================
   Wave 4 / Issue 37 — Empty states, status chips, and readable hints
   Adds visual polish for pages that have no records, warning/info panels,
   subtle helper text, and financial status badges without changing logic.
   ========================================================= */
@media screen {
  .empty-state,
  .empty,
  .no-results,
  .zero-state {
    display: grid;
    gap: .65rem;
    place-items: center;
    text-align: center;
    padding: clamp(1.5rem, 4vw, 3rem);
    border: 1px dashed rgba(148, 163, 184, .42);
    border-radius: 1.25rem;
    background:
      radial-gradient(circle at top right, rgba(59, 130, 246, .08), transparent 32%),
      rgba(248, 250, 252, .72);
    color: var(--muted, #64748b);
  }

  .empty-state h1,
  .empty-state h2,
  .empty-state h3,
  .empty h1,
  .empty h2,
  .empty h3,
  .no-results h1,
  .no-results h2,
  .no-results h3,
  .zero-state h1,
  .zero-state h2,
  .zero-state h3 {
    margin: 0;
    color: var(--text, #0f172a);
    font-weight: 900;
    line-height: 1.5;
  }

  .empty-state p,
  .empty p,
  .no-results p,
  .zero-state p {
    margin: 0;
    max-width: 46rem;
    line-height: 1.9;
  }

  .info-list,
  .definition-list,
  .hint-list {
    display: grid;
    gap: .7rem;
    margin: .85rem 0 0;
  }

  .info-list > *,
  .definition-list > *,
  .hint-list > * {
    padding: .78rem .95rem;
    border-radius: 1rem;
    background: rgba(248, 250, 252, .72);
    border: 1px solid rgba(226, 232, 240, .92);
    line-height: 1.9;
  }

  .help-text,
  .field-help,
  .hint,
  .form-hint,
  .small-note {
    display: block;
    margin-top: .35rem;
    color: var(--muted, #64748b);
    font-size: .88rem;
    line-height: 1.85;
  }

  .status-chip,
  .chip,
  .tag,
  .pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .35rem;
    max-width: 100%;
    min-height: 1.8rem;
    padding: .25rem .62rem;
    border-radius: 999px;
    border: 1px solid rgba(148, 163, 184, .28);
    background: rgba(248, 250, 252, .84);
    color: var(--text, #0f172a);
    font-weight: 800;
    font-size: .82rem;
    line-height: 1.4;
    white-space: nowrap;
  }

  .chip-success,
  .status-success,
  .pill-success,
  .tone-success .status-chip {
    border-color: rgba(22, 163, 74, .22);
    background: rgba(22, 163, 74, .09);
    color: #166534;
  }

  .chip-warning,
  .status-warning,
  .pill-warning,
  .tone-warning .status-chip {
    border-color: rgba(245, 158, 11, .25);
    background: rgba(245, 158, 11, .10);
    color: #92400e;
  }

  .chip-danger,
  .status-danger,
  .pill-danger,
  .tone-danger .status-chip {
    border-color: rgba(220, 38, 38, .22);
    background: rgba(220, 38, 38, .09);
    color: #991b1b;
  }

  .chip-info,
  .status-info,
  .pill-info,
  .tone-info .status-chip {
    border-color: rgba(37, 99, 235, .22);
    background: rgba(37, 99, 235, .09);
    color: #1d4ed8;
  }

  .section-divider {
    height: 1px;
    border: 0;
    background: linear-gradient(90deg, transparent, rgba(148, 163, 184, .35), transparent);
    margin: 1.4rem 0;
  }

  .card .section-head + .muted,
  .card .section-title + .muted,
  .card .section-subtitle {
    line-height: 1.85;
  }

  .metric-card .metric-note,
  .metric-card .muted,
  .dashboard-card .muted {
    overflow-wrap: normal;
    word-break: normal;
  }

  /* Keep the table fixes from Issue 36B stronger than generic status styles. */
  .table .chip,
  .table .tag,
  .table .pill,
  .table .badge,
  .table .status-chip {
    vertical-align: middle;
    max-width: none;
  }
}

@media screen and (max-width: 768px) {
  .empty-state,
  .empty,
  .no-results,
  .zero-state {
    padding: 1.25rem;
    border-radius: 1rem;
  }

  .status-chip,
  .chip,
  .tag,
  .pill {
    min-height: 2rem;
    padding-inline: .7rem;
  }
}


/* Wave 5 / Issue 43
   Session console meta cards: long Persian class/teacher names must stay inside cards.
   Keep this scoped so global metric cards and financial numbers are not affected. */
.session-console-meta-grid {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
  gap: 1rem !important;
}

.session-console-meta-grid .metric-card {
  min-width: 0 !important;
  overflow: hidden !important;
}

.session-console-meta-grid .metric-label {
  display: block !important;
  margin-bottom: 0.35rem !important;
  line-height: 1.6 !important;
}

.session-console-meta-grid .metric-value {
  display: block !important;
  max-width: 100% !important;
  font-size: clamp(1rem, 1.35vw, 1.25rem) !important;
  line-height: 1.55 !important;
  white-space: normal !important;
  overflow-wrap: break-word !important;
  word-break: normal !important;
  hyphens: auto;
}

@media (max-width: 640px) {
  .session-console-meta-grid {
    grid-template-columns: 1fr !important;
  }

  .session-console-meta-grid .metric-value {
    font-size: 1rem !important;
  }
}

/* UX2A fast attendance: touch-friendly, semantic roster controls. */
.fast-attendance-form {
  display: grid;
  gap: 1rem;
}

.fast-attendance-roster {
  display: grid;
  gap: 1rem;
}

.fast-attendance-row {
  min-width: 0;
  margin: 0;
  padding: 1rem;
  border: 1px solid var(--border-color, #d7dde5);
  border-radius: 1rem;
  background: var(--surface-color, #fff);
}

.fast-attendance-row.is-missing {
  border-color: var(--warning-color, #d99b19);
}

.fast-attendance-row.is-read-only {
  background: var(--surface-muted, #f5f7fa);
}

.fast-attendance-student {
  max-width: 100%;
  padding-inline: .35rem;
  font-size: 1.05rem;
  font-weight: 700;
  overflow-wrap: break-word;
}

.fast-attendance-row-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  margin-bottom: 1rem;
}

.fast-attendance-progress {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .5rem;
  min-width: min(100%, 18rem);
  margin: 0;
}

.fast-attendance-progress div {
  min-width: 0;
  padding: .45rem .6rem;
  border-radius: .65rem;
  background: var(--surface-muted, #f5f7fa);
  text-align: center;
}

.fast-attendance-progress dt {
  color: var(--text-muted, #667085);
  font-size: .78rem;
}

.fast-attendance-progress dd {
  margin: .1rem 0 0;
  font-weight: 700;
}

.fast-attendance-choices {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .65rem;
}

.fast-attendance-choice {
  position: relative;
  min-width: 0;
  cursor: pointer;
}

.fast-attendance-choice input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.fast-attendance-choice span {
  display: flex;
  min-height: 2.8rem;
  align-items: center;
  justify-content: center;
  padding: .55rem .7rem;
  border: 1px solid var(--border-color, #cfd6df);
  border-radius: .75rem;
  background: var(--surface-color, #fff);
  color: var(--text-color, #1f2937);
  font-weight: 650;
  text-align: center;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.fast-attendance-choice input:focus-visible + span {
  outline: 3px solid var(--focus-ring, rgba(37, 99, 235, .35));
  outline-offset: 2px;
}

.fast-attendance-choice-present input:checked + span {
  border-color: var(--success-color, #16865d);
  background: #e8f7f0;
  color: #0e6545;
}

.fast-attendance-choice-unexcused input:checked + span {
  border-color: var(--danger-color, #c43b48);
  background: #fff0f1;
  color: #9b2632;
}

.fast-attendance-choice-excused input:checked + span {
  border-color: var(--warning-color, #b87907);
  background: #fff7df;
  color: #815604;
}

.fast-attendance-choice input:disabled + span {
  cursor: not-allowed;
  opacity: .68;
}

.fast-attendance-held-note {
  display: grid;
  gap: .25rem;
  padding: .85rem 1rem;
  border: 1px solid var(--info-color, #6d8fc7);
  border-radius: .85rem;
  background: var(--info-surface, #eef5ff);
}

.fast-attendance-actions {
  flex-wrap: wrap;
}

.fast-attendance-read-only-note {
  flex: 1 1 100%;
}

@media (max-width: 640px) {
  .fast-attendance-row-summary {
    align-items: stretch;
  }

  .fast-attendance-progress {
    width: 100%;
  }

  .fast-attendance-choices {
    grid-template-columns: 1fr;
  }

  .fast-attendance-actions .btn {
    flex: 1 1 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .fast-attendance-choice span {
    transition: none;
  }
}