/* Mahyar UI-8 final visual hardening layer.
   Loaded after every role stylesheet so shared fixes stay consistent. */
:root {
  --ui8-tap-size: 44px;
  --ui8-page-gutter: clamp(.75rem, 2.2vw, 1.5rem);
  --ui8-safe-inline-start: env(safe-area-inset-left, 0px);
  --ui8-safe-inline-end: env(safe-area-inset-right, 0px);
  --ui8-safe-bottom: env(safe-area-inset-bottom, 0px);
}

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

[data-ui-shell], [data-ui-shell] *,
[data-ui6-operator], [data-ui6-operator] * { box-sizing: border-box; }

[data-ui-shell] :is(.ui-shell__content, .ui-main, section, article, header, form, fieldset),
[data-ui6-operator] :is(section, article, header, form) { min-width: 0; }

[data-ui-shell] :is(h1, h2, h3, p, strong, span, label, a, td),
[data-ui6-operator] :is(h1, h2, h3, p, strong, span, label, a) {
  overflow-wrap: anywhere;
}

/* Never let supporting text drop below a readable 12px. */
:is(.ui2-student, .ui3-mentor, .ui4-commander, .ui5-parent, .ui6-tarbiyati, .ui6o-app) small {
  font-size: max(.75rem, 12px) !important;
  line-height: 1.65;
}

/* Consistent touch targets for compact icon controls. */
:is(.ui-icon-button, .ui1-action, .ui3-icon-btn, .ui4-icon-btn, .ui5-icon-btn,
    .ui6t-icon-btn, .ui-sidebar__close, [data-ui-sidebar-open], [data-ui-sidebar-close],
    .ui6o-header__actions button, [data-ui6o-minus], [data-ui6o-plus]) {
  min-width: var(--ui8-tap-size);
  min-height: var(--ui8-tap-size);
  flex: 0 0 auto;
}

[data-ui-shell] :is(button, .ui-button, a[class*="button"], a[class*="btn"]),
[data-ui6-operator] :is(button, a[class*="button"], a[class*="btn"]) {
  max-width: 100%;
}

[data-ui-shell] :is(input, select, textarea),
[data-ui6-operator] :is(input, select, textarea) {
  max-width: 100%;
  min-width: 0;
}

/* Tables remain usable on narrow screens instead of widening the document. */
:is(.table-responsive, .ui6t-table-wrap) {
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-gutter: stable;
}

.ui6t-table { min-width: 42rem; border-collapse: separate; border-spacing: 0; }
.ui6t-table :is(th, td) { white-space: normal; vertical-align: middle; }
.ui6t-table th { position: relative; z-index: 1; }

/* Shared dialogs: safe viewport bounds, scrollable body and visible controls. */
dialog.ui-modal {
  width: min(42rem, calc(100vw - 1.5rem));
  max-width: calc(100vw - 1.5rem);
  max-height: calc(100dvh - 1.5rem);
  padding: 0;
}

.ui-modal__surface {
  max-width: 100%;
  max-height: calc(100dvh - 1.5rem);
  overflow: auto;
  overscroll-behavior: contain;
}

.ui-modal__header { position: sticky; inset-block-start: 0; z-index: 2; }

/* Logical-direction mobile drawer shared by every dashboard role. */
@media (max-width: 991.98px) {
  [data-ui-shell] .ui-sidebar {
    position: fixed !important;
    inset-block: 0 !important;
    inset-inline-start: auto !important;
    inset-inline-end: 0 !important;
    width: min(19rem, 88vw) !important;
    max-width: 88vw;
    height: 100dvh !important;
    padding-block-end: calc(1rem + var(--ui8-safe-bottom));
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
    transform: translateX(105%) !important;
    visibility: hidden;
  }

  [data-ui-shell].is-sidebar-open .ui-sidebar {
    transform: translateX(0) !important;
    visibility: visible;
  }

  [data-ui-shell] .ui-shell__content { width: 100%; max-width: 100%; }
  [data-ui-shell] :is(.ui-topbar, [class*="topbar"], [class*="hero"], [class*="card"]) { min-width: 0; }
}

@media (max-width: 767.98px) {
  [data-ui-shell] :is(input, select, textarea),
  [data-ui6-operator] :is(input, select, textarea) { font-size: 16px !important; }

  [data-ui-shell] :is(.ui-shell__content, .ui-main) { padding-inline: var(--ui8-page-gutter); }
  [data-ui-shell] :is(header, [class*="topbar"], [class*="toolbar"], [class*="actions"]) { row-gap: .65rem; }

  [data-ui-shell] :is(.ui2-card, .ui3-card, .ui4-card, .ui5-card, .ui6t-card) { max-width: 100%; }
  [data-ui-shell] :is(.ui2-card, .ui3-card, .ui4-card, .ui5-card, .ui6t-card) > header {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  dialog.ui-modal {
    width: calc(100vw - 1rem);
    max-width: calc(100vw - 1rem);
    max-height: calc(100dvh - 1rem);
  }

  .ui-modal__surface { max-height: calc(100dvh - 1rem); }
  .ui6o-app { padding-inline: max(.75rem, var(--ui8-safe-inline-start), var(--ui8-safe-inline-end)); }
  .ui6o-header { min-width: 0; gap: .65rem; }
  .ui6o-header__actions { margin-inline-start: auto; flex-wrap: nowrap; }
}

@media (max-width: 430px) {
  .ui6t-stats { grid-template-columns: 1fr !important; }
  .ui6o-header { flex-wrap: wrap; }
  .ui6o-brand, .ui6o-operator { min-width: 0; }
  .ui6o-header__actions { width: 100%; justify-content: flex-end; }
  .ui6o-manual > div, .ui6o-scan-actions { grid-template-columns: 1fr !important; }
}

@media (max-width: 370px) {
  .ui6o-brand small, .ui6o-operator small { display: none; }
  [data-ui-shell] :is(.ui2-stats, .ui3-stats, .ui4-stats, .ui5-stats, .ui6t-stats) {
    grid-template-columns: 1fr !important;
  }
}

@media print {
  .ui-sidebar, .ui-sidebar-scrim, [data-ui-sidebar-open],
  .ui7-toast-region, .ui7-offline, .ui6o-header__actions { display: none !important; }
  [data-ui-shell] .ui-shell__content { width: 100% !important; margin: 0 !important; padding: 0 !important; }
  body { background: #fff !important; }
  article, section { break-inside: avoid; box-shadow: none !important; }
}

@media (forced-colors: active) {
  [data-ui-shell] :is(button, a, input, select, textarea),
  [data-ui6-operator] :is(button, a, input, select, textarea) { border-color: ButtonText; }
}

/* Stabilization 6: shared accessible paging and always-visible family switch. */
.mahyar-pagination{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:1rem;margin:1rem 0;padding:1rem;background:#fff;border:1px solid #d6e1e8;border-radius:1rem;color:#243a50;font-size:.85rem}
.mahyar-pagination a{display:inline-block;padding:.6rem .9rem;background:#edf3f9;border-radius:.6rem;color:#173f71;text-decoration:underline}
.ui5-main .ui5-child-switch{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem;background:#fff;border:1px solid #c6d5e8;padding:1rem}
.ui5-main .ui5-child-switch label{color:#234369;font-size:.85rem}
.ui5-main .ui5-child-switch select{color:#193b69;background:#f5f8fc;border:1px solid #819dbf;flex:1;min-width:120px;width:auto;font-size:.9rem}
.ui3-card details,.ui3-card summary{overflow-wrap:anywhere}
.mahyar-pagination a:focus-visible,.ui5-child-switch button:focus-visible{outline:3px solid #e5aa25;outline-offset:3px}
@media(max-width:520px){.ui5-main .ui5-child-switch{display:grid;grid-template-columns:minmax(0,1fr)}.ui5-main .ui5-child-switch select{width:100%}.ui4-search,.ui6t-search{flex-wrap:wrap;max-width:100%}}

/* Mobile stage 2: retain the student palette while giving text and controls room. */
.mahyar-share-tools{display:flex;flex-wrap:wrap;gap:.75rem;padding:1rem;margin-block:.75rem;background:#f3edff;border:1px solid #bda7ee;border-radius:1rem}
.mahyar-share-tools :is(a,button){display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:.65rem 1rem;border:1px solid #6930bd;border-radius:.65rem;background:#fff;color:#482080;font:inherit;text-decoration:none;cursor:pointer}
@media(max-width:767px){
 body[data-ui-role="student"]{font-size:16px}
 body[data-ui-role="student"] :is(p,li,label,textarea,input,select){font-size:1rem;line-height:1.8}
 body[data-ui-role="student"] :is(small,em,.ui2-kicker,.ui2-live-dot,.ui2-panel span,.uild-quest-content span){font-size:.8125rem;line-height:1.7}
 body[data-ui-role="student"] :is(button,.ui-button,.uil-btn){min-height:44px;min-width:44px;font-size:.875rem;white-space:normal}
 body[data-ui-role="student"] :is(h1,h2,h3,h4,p,label,.uild-teen-text,.uil5-approved-answer,.ui2-mission,.uil-breadcrumb){overflow-wrap:anywhere;min-width:0}
 body[data-ui-role="student"] :is(input,select,textarea){max-width:100%;font-size:16px}
 body[data-ui-role="student"] :is(main,.ui2-panel,.uild-quest-content){min-width:0}
 body[data-ui-role="student"] main{padding-bottom:max(1.5rem,env(safe-area-inset-bottom));padding-right:max(12px,env(safe-area-inset-right));padding-left:max(12px,env(safe-area-inset-left))}
 body[data-ui-role="student"] .uild-teen-text{font-size:1rem;line-height:2;white-space:pre-wrap}
 body[data-ui-role="student"] .ui2-qr{padding-top:3.5rem}
 body[data-ui-role="student"] .ui2-qr [data-ui2-qr-close]{width:44px;height:44px}
 body[data-ui-role="student"] [data-ui2-qr-image] img{max-width:100%;height:auto}
 body[data-ui-role="student"] .uili-feedback-form fieldset>div{display:flex;flex-wrap:wrap;gap:.5rem}
 body[data-ui-role="student"] .uili-feedback-form fieldset label{flex:1 1 72px}
 body[data-ui-role="student"] .uili-feedback-form fieldset label span{min-height:64px}
 body[data-ui-role="student"] :is(dialog,.modal-dialog){max-width:calc(100vw - 24px)}
 body[data-ui-role="student"] .modal-content{max-height:calc(100dvh - 24px);overflow-y:auto}
 body[data-ui-role="student"] :is(a,button,input,select,textarea):focus-visible{outline:3px solid #9257df;outline-offset:3px}
}
@media(max-width:390px){
 body[data-ui-role="student"] .ui2-hero{padding:1.25rem}
 body[data-ui-role="student"] .ui2-panel__header{flex-wrap:wrap;gap:.75rem}
 body[data-ui-role="student"] .ui1-topbar{flex-wrap:wrap;gap:.5rem}
 body[data-ui-role="student"] .uild-quest-list article{grid-template-columns:minmax(0,1fr)}
 .mahyar-share-tools>*{width:100%}
}