/* School 360 portal bridge split: Shared portal responsive containment, login shell, and mobile control polish.
   Source: assets/css/portal.css before UI/IX Tier 3 Phase 12.3. */


/* Phase 14: responsive/mobile polish for parent and staff portals. */
.s360-portal,
.s360-portal *{
  box-sizing:border-box;
}
.s360-portal .s360-ui-card,
.s360-portal .s360-ui-card,
.s360-portal .s360-ui-card--hr-portal,
.s360-portal .s360-ui-stat-card--hr-portal,
.s360-portal .s360-hr-portal-mini-grid > div{
  min-width:0;
}
.s360-portal table{
  width:100%;
}
@media (max-width: 782px){
  .s360-portal .s360-ui-card,
  .s360-portal .s360-ui-card,
  .s360-portal .s360-ui-card--hr-portal,
  .s360-portal .s360-ui-stat-card--hr-portal,
  .s360-portal .s360-hr-portal-mini-grid > div{
    border-radius:16px;
  }
  .s360-portal .s360-ui-button,
  .s360-portal button,
  .s360-portal input[type="submit"]{
    min-height:var(--s360-touch-target-min, 44px);
    white-space:normal;
  }
  .s360-portal input[type="text"],
  .s360-portal input[type="email"],
  .s360-portal input[type="password"],
  .s360-portal input[type="search"],
  .s360-portal input[type="number"],
  .s360-portal input[type="date"],
  .s360-portal select,
  .s360-portal textarea{
    max-width:100%;
    width:100%;
  }
  .s360-portal .s360-ui-table-wrap,
  .s360-portal .s360-hr-portal-table-wrap{
    max-width:100%;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
  }
  .s360-portal .s360-ui-table-wrap table,
  .s360-portal .s360-hr-portal-table,
  .s360-portal .s360-parent-fees-table,
  .s360-portal .s360-calendar-table{
    min-width:640px;
  }
  .s360-portal .s360-parent-payment-actions,
  .s360-portal .s360-parent-pay-form,
  .s360-portal .s360-hr-portal-quick-actions,
  .s360-portal .s360-hr-portal-form-actions{
    align-items:stretch;
    flex-direction:column;
  }
  .s360-portal .s360-parent-payment-actions .s360-ui-button,
  .s360-portal .s360-parent-pay-form .s360-ui-button,
  .s360-portal .s360-hr-portal-quick-actions .s360-ui-button,
  .s360-portal .s360-hr-portal-form-actions .s360-ui-button{
    justify-content:center;
    text-align:center;
    width:100%;
  }
}
@media (max-width: 480px){
  .s360-portal{
    padding-inline:10px;
  }
  .s360-portal .s360-ui-table-wrap table,
  .s360-portal .s360-hr-portal-table,
  .s360-portal .s360-parent-fees-table,
  .s360-portal .s360-calendar-table{
    min-width:600px;
  }
}

/* Phase 15: portal visual consistency micro-polish. */
.s360-portal :where(.s360-ui-card,.s360-ui-card,.s360-parent-panel,.s360-ui-card--hr-portal,.s360-ui-stat-card--hr-portal,.s360-ui-card[data-s360-portal-card="login"]){
  border-radius:var(--s360-component-card-radius);
  border-color:var(--s360-component-card-border-color);
}

.s360-portal :where(.s360-ui-card,.s360-ui-card,.s360-parent-panel,.s360-ui-card--hr-portal,.s360-ui-stat-card--hr-portal,.s360-ui-card[data-s360-portal-card="login"]) > :first-child{
  margin-top:0;
}

.s360-portal :where(.s360-ui-card,.s360-ui-card,.s360-parent-panel,.s360-ui-card--hr-portal,.s360-ui-stat-card--hr-portal,.s360-ui-card[data-s360-portal-card="login"]) > :last-child{
  margin-bottom:0;
}

.s360-portal :where(.s360-ui-button,button,input[type="submit"]){
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  border-radius:var(--s360-control-radius);
  line-height:1.2;
}

.s360-portal :where(.s360-badge,.s360-badge,.s360-badge-muted,.s360-badge-success,.s360-hr-portal-badge){
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  min-height:var(--s360-component-badge-min-height);
  border-radius:var(--s360-component-pill-radius);
  font-size:var(--s360-component-badge-font-size);
  line-height:1.2;
  vertical-align:middle;
}

.s360-portal :where(.s360-portal-notice,.s360-hr-portal-notice,.s360-calendar-empty-state,.s360-hr-portal-empty){
  border-radius:var(--s360-component-notice-radius);
  line-height:1.55;
}

.s360-portal :where(.s360-parent-payment-actions,.s360-parent-pay-form,.s360-hr-portal-quick-actions,.s360-hr-portal-form-actions){
  gap:var(--s360-component-toolbar-control-gap);
}

.s360-portal :where(table) th,
.s360-portal :where(table) td{
  vertical-align:middle;
}


/* Phase 6: portal login/mobile polish and custom button consolidation. */
.s360-portal.s360-portal-phase-6,
.s360-portal-phase-6.s360-portal,
.s360-portal-login-shell.s360-portal-phase-6{
  width:100%;
  max-width:min(1180px, calc(100vw - 32px));
  margin-inline:auto;
}
.s360-portal-login-shell.s360-portal-phase-6{
  max-width:min(560px, calc(100vw - 28px));
  padding-block:clamp(18px, 4vw, 42px);
}
.s360-portal-phase-6 .s360-ui-card,
.s360-portal-login-shell .s360-ui-card{
  min-width:0;
}
.s360-portal-phase-6 .s360-ui-section-card[data-s360-portal-card="hero"],
.s360-portal-login-shell .s360-ui-card[data-s360-portal-card="login"]{
  border-radius:var(--s360-component-card-radius);
  border:1px solid var(--s360-component-card-border-color);
  box-shadow:var(--s360-shadow-card, 0 10px 28px rgba(15,23,42,.08));
}
.s360-portal-login-shell .s360-ui-card[data-s360-portal-card="login"]{
  padding:clamp(20px, 4vw, 32px);
}
.s360-portal-login-shell .s360-login-logo-wrap{
  text-align:center;
}
.s360-portal-login-shell .s360-school-logo--login{
  max-width:min(180px, 70vw);
  height:auto;
}
.s360-portal-phase-6 .s360-ui-button,
.s360-portal-login-shell .s360-ui-button,
.s360-parent-mobile-phase-j .s360-ui-button{
  min-height:var(--s360-touch-target-min,44px);
  text-decoration:none;
}
.s360-portal-phase-6 .s360-ui-button--small,
.s360-parent-mobile-phase-j .s360-ui-button--small{
  min-height:38px;
}
.s360-portal-phase-6 .s360-ui-control,
.s360-portal-login-shell .s360-ui-control{
  max-width:100%;
}
.s360-portal-phase-6 .s360-ui-table{
  width:100%;
}
.s360-portal-phase-6 .s360-ui-card:has(> .s360-ui-table),
.s360-portal-phase-6 .s360-ui-card:has(table){
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
}
.s360-portal-phase-6 .s360-parent-pay-form,
.s360-portal-phase-6 .s360-parent-payment-actions,
.s360-portal-phase-6 .s360-hr-portal-quick-actions,
.s360-portal-phase-6 .s360-hr-portal-form-actions{
  display:flex;
  flex-wrap:wrap;
  gap:var(--s360-component-toolbar-control-gap,10px);
}
.s360-portal-phase-6 .s360-parent-workflow-form,
.s360-portal-phase-6 .s360-hr-portal-form{
  max-width:100%;
}
.s360-portal-phase-6 .s360-parent-workflow-form label,
.s360-portal-phase-6 .s360-hr-portal-form label{
  font-weight:700;
}
.s360-portal-phase-6 .s360-parent-workflow-form :where(input:not([type="checkbox"]):not([type="radio"]), select, textarea),
.s360-portal-phase-6 .s360-hr-portal-form :where(input:not([type="checkbox"]):not([type="radio"]), select, textarea){
  margin-top:6px;
}
.s360-portal-phase-6 .s360-parent-form-preview{
  border-radius:var(--s360-radius-lg,14px);
}
.s360-portal-phase-6 :target{
  scroll-margin-top:24px;
}
@media (max-width: 782px){
  .s360-portal.s360-portal-phase-6,
  .s360-portal-phase-6.s360-portal,
  .s360-portal-login-shell.s360-portal-phase-6{
    max-width:calc(100vw - 20px);
  }
  .s360-portal-phase-6 .s360-cluster-between,
  .s360-portal-phase-6 .s360-parent-payment-actions,
  .s360-portal-phase-6 .s360-parent-pay-form,
  .s360-portal-phase-6 .s360-hr-portal-quick-actions,
  .s360-portal-phase-6 .s360-hr-portal-form-actions{
    align-items:stretch;
    flex-direction:column;
  }
  .s360-portal-phase-6 .s360-ui-button,
  .s360-portal-login-shell .s360-ui-button,
  .s360-parent-mobile-phase-j .s360-ui-button{
    width:100%;
  }
  .s360-portal-phase-6 .s360-ui-table,
  .s360-portal-phase-6 .s360-hr-portal-table,
  .s360-portal-phase-6 .s360-calendar-table{
    min-width:620px;
  }
}
@media (max-width:480px){
  .s360-portal-login-shell .s360-ui-card[data-s360-portal-card="login"],
  .s360-portal-phase-6 .s360-ui-card{
    border-radius:16px;
  }
  .s360-portal-phase-6 .s360-ui-table,
  .s360-portal-phase-6 .s360-hr-portal-table,
  .s360-portal-phase-6 .s360-calendar-table{
    min-width:580px;
  }
}

.s360-portal-phase-6 .s360-ui-notice,
.s360-portal-login-shell .s360-ui-notice{
  border:1px solid var(--s360-color-border-subtle, #d8dee9);
  border-radius:var(--s360-component-notice-radius, 12px);
  padding:12px 14px;
  background:var(--s360-color-bg-subtle, #f8fafc);
  color:var(--s360-color-text, #0f172a);
}
.s360-portal-phase-6 .s360-ui-notice p,
.s360-portal-login-shell .s360-ui-notice p{
  margin:0;
}
.s360-portal-phase-6 .s360-ui-notice--success,
.s360-portal-login-shell .s360-ui-notice--success{
  border-color:var(--s360-color-border-success, #bbf7d0);
  background:var(--s360-color-success-bg, #f0fdf4);
  color:var(--s360-color-success-strong, #166534);
}
.s360-portal-phase-6 .s360-ui-notice--error,
.s360-portal-login-shell .s360-ui-notice--error{
  border-color:var(--s360-color-border-danger, #fecaca);
  background:var(--s360-color-danger-bg, #fef2f2);
  color:var(--s360-color-danger-strong, #991b1b);
}