/* School 360 portal bridge split: Frontend portal Phase 5 and 9.6 containment/mobile cleanup bridge.
   Source: assets/css/portal.css before UI/IX Tier 3 Phase 12.3. */

/* UI/IX CSS Phase 5: frontend portal responsive refactor. */
.s360-frontend-portal-phase5{
  --s360-portal-phase5-gap:clamp(14px,2vw,22px);
  --s360-portal-phase5-card-padding:clamp(16px,2.2vw,24px);
  --s360-portal-phase5-compact-padding:clamp(12px,1.8vw,16px);
  --s360-portal-phase5-radius:22px;
  --s360-portal-phase5-mobile-radius:16px;
  --s360-portal-phase5-control-min:44px;
  width:100%;
  max-width:min(1180px, calc(100vw - 24px));
  overflow-x:clip;
}
@supports not (overflow: clip){
  .s360-frontend-portal-phase5{overflow-x:hidden;}
}
.s360-frontend-portal-phase5 .s360-portal.s360-portal-phase-5{
  max-width:100%;
  display:grid;
  gap:var(--s360-portal-phase5-gap);
  overflow:visible;
}
.s360-frontend-portal-phase5 .s360-portal.s360-portal-phase-5 > .s360-ui-card{
  min-width:0;
}
.s360-frontend-portal-phase5 .s360-ui-section-card[data-s360-portal-card="hero"]{
  padding:var(--s360-portal-phase5-card-padding);
  border-radius:var(--s360-portal-phase5-radius);
  background:
    radial-gradient(circle at 92% 8%, color-mix(in srgb,var(--s360-color-primary,#2271b1) 12%, transparent), transparent 18rem),
    linear-gradient(135deg,var(--s360-color-surface-raised,#fff),var(--s360-color-bg-soft,#f8fbff));
}
.s360-frontend-portal-phase5 .s360-ui-section-card[data-s360-portal-card="hero"] .s360-cluster-between,
.s360-frontend-portal-phase5 .s360-ui-section-card--toolbar > .s360-cluster-between,
.s360-frontend-portal-phase5 #portal-payment-center > .s360-cluster-between,
.s360-frontend-portal-phase5 [id$="-documents"] > .s360-cluster-between,
.s360-frontend-portal-phase5 [id$="-document-requirements"] > .s360-cluster-between{
  align-items:flex-start;
  gap:var(--s360-portal-phase5-gap);
}
.s360-frontend-portal-phase5 .s360-ui-section-card[data-s360-portal-card="hero"] h2{
  overflow-wrap:anywhere;
}
.s360-frontend-portal-phase5 .s360-portal-logo-wrap,
.s360-frontend-portal-phase5 .s360-login-logo-wrap{
  max-width:100%;
}
.s360-frontend-portal-phase5 .s360-school-logo{
  max-width:min(180px,100%);
  height:auto;
}
.s360-frontend-portal-phase5 .s360-stat-grid{
  grid-template-columns:repeat(auto-fit,minmax(min(170px,100%),1fr));
  gap:var(--s360-portal-phase5-gap);
}
.s360-frontend-portal-phase5 .s360-ui-stat-card{
  min-width:0;
  min-height:108px;
  padding:var(--s360-portal-phase5-compact-padding);
}
.s360-frontend-portal-phase5 .s360-stat-value,
.s360-frontend-portal-phase5 .s360-stat-label{
  overflow-wrap:anywhere;
}
.s360-frontend-portal-phase5 .s360-grid-auto-220{
  grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr));
}
.s360-frontend-portal-phase5 .s360-grid-auto-lg{
  grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));
}
.s360-frontend-portal-phase5 .s360-ui-card--compact{
  padding:var(--s360-portal-phase5-compact-padding);
  border-radius:calc(var(--s360-portal-phase5-radius) - 6px);
}
.s360-frontend-portal-phase5 .s360-ui-card:has(> .s360-ui-table--portal),
.s360-frontend-portal-phase5 .s360-ui-card:has(table.s360-ui-table--portal){
  max-width:100%;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
}
.s360-frontend-portal-phase5 .s360-ui-table--portal{
  border-collapse:separate;
  border-spacing:0;
}
.s360-frontend-portal-phase5 .s360-ui-table--portal th,
.s360-frontend-portal-phase5 .s360-ui-table--portal td{
  vertical-align:top;
  overflow-wrap:normal;
}
.s360-frontend-portal-phase5 .s360-parent-workflow-form,
.s360-frontend-portal-phase5 .s360-portal-upload-form,
.s360-frontend-portal-phase5 #parent-communication-center form{
  max-width:100%;
}
.s360-frontend-portal-phase5 .s360-parent-workflow-form :where(input:not([type="checkbox"]):not([type="radio"]),select,textarea),
.s360-frontend-portal-phase5 #parent-communication-center :where(input:not([type="checkbox"]):not([type="radio"]),select,textarea){
  width:100%;
  max-width:100%;
}
.s360-frontend-portal-phase5 .s360-portal-upload-form{
  display:grid;
  gap:10px;
  padding:12px;
  border:1px dashed var(--s360-color-border-strong,#cbd5e1);
  border-radius:14px;
  background:var(--s360-color-bg-subtle,#f8fafc);
}
.s360-frontend-portal-phase5 .s360-portal-upload-form input[type="file"]{
  min-height:var(--s360-portal-phase5-control-min);
  padding:9px 10px;
  border-style:dashed;
  background:var(--s360-color-surface-raised,#fff);
}
.s360-frontend-portal-phase5 .s360-portal-upload-form .s360-ui-button,
.s360-frontend-portal-phase5 .s360-parent-pay-form .s360-ui-button,
.s360-frontend-portal-phase5 .s360-parent-payment-actions .s360-ui-button{
  min-height:var(--s360-portal-phase5-control-min);
}
.s360-frontend-portal-phase5 #onboarding-center,
.s360-frontend-portal-phase5 [id$="-documents"],
.s360-frontend-portal-phase5 [id$="-document-requirements"],
.s360-frontend-portal-phase5 #parent-communication-center,
.s360-frontend-portal-phase5 #portal-payment-center{
  scroll-margin-top:24px;
}
.s360-frontend-portal-phase5 .s360-ui-notice{
  overflow-wrap:anywhere;
}
@media (max-width:782px){
  .s360-frontend-portal-phase5{
    max-width:calc(100vw - 16px);
    padding-inline:8px;
  }
  .s360-frontend-portal-phase5 .s360-portal.s360-portal-phase-5{
    gap:14px;
  }
  .s360-frontend-portal-phase5 .s360-ui-section-card[data-s360-portal-card="hero"],
  .s360-frontend-portal-phase5 .s360-ui-card,
  .s360-frontend-portal-phase5 .s360-ui-card{
    border-radius:var(--s360-portal-phase5-mobile-radius);
    padding:var(--s360-component-card-padding-compact, 16px);
  }
  .s360-frontend-portal-phase5 .s360-ui-section-card[data-s360-portal-card="hero"] .s360-cluster-between,
  .s360-frontend-portal-phase5 .s360-ui-section-card--toolbar > .s360-cluster-between,
  .s360-frontend-portal-phase5 #portal-payment-center > .s360-cluster-between,
  .s360-frontend-portal-phase5 [id$="-documents"] > .s360-cluster-between,
  .s360-frontend-portal-phase5 [id$="-document-requirements"] > .s360-cluster-between,
  .s360-frontend-portal-phase5 .s360-parent-payment-actions,
  .s360-frontend-portal-phase5 .s360-parent-pay-form{
    align-items:stretch;
    flex-direction:column;
  }
  .s360-frontend-portal-phase5 .s360-ui-button,
  .s360-frontend-portal-phase5 .button,
  .s360-frontend-portal-phase5 button[type="submit"],
  .s360-frontend-portal-phase5 input[type="submit"]{
    width:100%;
    justify-content:center;
    text-align:center;
    white-space:normal;
  }
  .s360-frontend-portal-phase5 .s360-stat-grid,
  .s360-frontend-portal-phase5 .s360-grid-auto-220,
  .s360-frontend-portal-phase5 .s360-grid-auto-lg{
    grid-template-columns:1fr;
  }
  .s360-frontend-portal-phase5 .s360-ui-table--portal{
    min-width:620px;
  }
  .s360-frontend-portal-phase5 .s360-portal-upload-form{
    padding:10px;
  }
}
@media (max-width:480px){
  .s360-frontend-portal-phase5{
    max-width:calc(100vw - 10px);
    padding-inline:5px;
  }
  .s360-frontend-portal-phase5 .s360-ui-section-card[data-s360-portal-card="hero"],
  .s360-frontend-portal-phase5 .s360-ui-card,
  .s360-frontend-portal-phase5 .s360-ui-card{
    padding:var(--s360-component-card-padding-tight, 14px);
  }
  .s360-frontend-portal-phase5 .s360-ui-table--portal{
    min-width:580px;
  }
}

/* Phase 9.6: portal legacy-card cleanup and final mobile containment. */
.s360-frontend-portal-phase5 .s360-portal.s360-portal-phase-9-6{
  contain:layout paint;
}
.s360-frontend-portal-phase5 .s360-portal.s360-portal-phase-9-6 .s360-ui-card{
  min-width:0;
  max-width:100%;
}
.s360-frontend-portal-phase5 .s360-portal.s360-portal-phase-9-6 :where(.s360-ui-stat-card,.s360-ui-section-card--toolbar,.s360-ui-card--compact,.s360-ui-card[data-s360-portal-card="login"]){
  overflow-wrap:anywhere;
}
.s360-frontend-portal-phase5 .s360-portal.s360-portal-phase-9-6 :where(.s360-ui-table--portal){
  width:100%;
}
.s360-parent-mobile-phase9-6 .s360-parent-mobile{
  min-width:0;
  max-width:100%;
  overflow-x:clip;
}
@supports not (overflow: clip){
  .s360-parent-mobile-phase9-6 .s360-parent-mobile{overflow-x:hidden;}
}
@media (max-width:480px){
  .s360-frontend-portal-phase5 .s360-portal.s360-portal-phase-9-6 .s360-ui-card{
    border-radius:var(--s360-portal-phase5-mobile-radius,16px);
  }
}

/* UI-C4: Expense portal responsive CSS extracted from shortcode inline style. */
.s360-expense-portal-mobile-ready .s360-expense-mobile-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
  margin: 16px 0;
}

.s360-expense-portal-mobile-ready .s360-expense-stat {
  border: 1px solid var(--s360-color-border);
  border-radius: 12px;
  padding: var(--s360-space-sm, 12px);
  background: var(--s360-color-surface);
}

.s360-expense-portal-mobile-ready .s360-expense-stat strong {
  display: block;
  font-size: 18px;
}

.s360-expense-portal-mobile-ready .s360-expense-form-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  align-items: end;
}

.s360-expense-portal-mobile-ready .s360-expense-field label {
  display: block;
  font-weight: 600;
  margin-bottom: 4px;
}

.s360-expense-portal-mobile-ready .s360-expense-field input,
.s360-expense-portal-mobile-ready .s360-expense-field select,
.s360-expense-portal-mobile-ready .s360-expense-field textarea {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.s360-expense-portal-mobile-ready .s360-expense-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 12px;
}

.s360-expense-portal-mobile-ready .s360-expense-mobile-list {
  display: none;
}

.s360-expense-portal-mobile-ready .s360-ui-card--expense-mobile {
  border: 1px solid var(--s360-color-border);
  border-radius: 14px;
  background: var(--s360-color-surface);
  padding: var(--s360-component-card-padding-tight, 14px);
  margin: var(--s360-space-sm, 12px) 0;
  box-shadow: var(--s360-shadow-sm);
}

.s360-expense-portal-mobile-ready .s360-ui-card--expense-mobile-head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: flex-start;
}

.s360-expense-portal-mobile-ready .s360-ui-card--expense-mobile-meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s360-space-xs, 8px);
  margin-top: 10px;
}

.s360-expense-portal-mobile-ready .s360-ui-card--expense-mobile-meta span,
.s360-expense-portal-mobile-ready .s360-expense-help {
  font-size: 12px;
  color: var(--s360-color-text-muted);
  display: block;
}

.s360-expense-portal-mobile-ready .s360-expense-help {
  margin-top: 4px;
}

@media (max-width: 782px) {
  .s360-expense-portal-mobile-ready .s360-expense-mobile-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .s360-expense-portal-mobile-ready .s360-expense-form-grid,
  .s360-expense-portal-mobile-ready .s360-ui-card--expense-mobile-meta {
    grid-template-columns: 1fr;
  }

  .s360-expense-portal-mobile-ready .s360-expense-table-wrap {
    display: none;
  }

  .s360-expense-portal-mobile-ready .s360-expense-mobile-list {
    display: block;
  }

  .s360-expense-portal-mobile-ready .s360-expense-actions .button {
    width: 100%;
    text-align: center;
  }

  .s360-expense-portal-mobile-ready input[type="file"] {
    font-size: 16px;
  }
}