/*
 * Y4T PWA preservation-first UI refresh
 *
 * Additive presentation layer for martech-agent-platform#155.
 * This file intentionally does not remove/hide controls or change business logic.
 */

:root{
  --ui-content-max:1440px;
  --ui-panel-radius:18px;
  --ui-control-radius:12px;
  --ui-touch:44px;
  --ui-panel-shadow:0 1px 2px rgba(15,23,42,.04),0 8px 28px rgba(15,23,42,.035);
  --ui-focus:0 0 0 4px rgba(37,99,235,.16);
}

html{
  min-width:0;
  overflow-x:hidden;
  scroll-padding-bottom:calc(84px + env(safe-area-inset-bottom));
}

body{
  min-width:0;
  overflow-x:hidden;
  -webkit-text-size-adjust:100%;
}

.portal-page .main,
.portal-page .content-shell,
.portal-page .panel,
.portal-page .data-card,
.portal-page .action-card,
.portal-page .metric-card{
  min-width:0;
}

.portal-page .content-shell{
  width:100%;
  max-width:var(--ui-content-max);
}

/* ---------- Shared typography and hierarchy ---------- */
.portal-page .page-heading h2{
  line-height:1.18;
  letter-spacing:-.025em;
}

.portal-page .panel-heading h3,
.portal-page .data-card strong,
.portal-page .action-card h3{
  line-height:1.25;
}

.portal-page .panel-heading p,
.portal-page .data-card p,
.portal-page .empty-state p,
.portal-page .muted{
  line-height:1.55;
}

.portal-page code,
.portal-page pre,
.portal-page dd,
.portal-page td{
  overflow-wrap:anywhere;
  word-break:normal;
}

/* ---------- Shared surfaces ---------- */
.portal-page .panel,
.portal-page .metric-card,
.portal-page .data-card,
.portal-page .action-card{
  border-radius:var(--ui-panel-radius);
  box-shadow:var(--ui-panel-shadow);
}

.portal-page .panel{
  overflow:visible;
}

.portal-page .panel-heading{
  align-items:flex-start;
}

.portal-page .panel-heading>div{
  min-width:0;
  flex:1 1 auto;
}

.portal-page .panel-heading p{
  margin-bottom:0;
}

.portal-page .empty-state{
  min-width:0;
  overflow-wrap:anywhere;
}

/* ---------- Forms: preserve every control, make layout resilient ---------- */
.portal-page .stack{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:16px;
  min-width:0;
}

.portal-page .stack>label{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:7px;
  min-width:0;
  font-weight:700;
  line-height:1.35;
}

.portal-page .stack>label>input,
.portal-page .stack>label>select,
.portal-page .stack>label>textarea{
  width:100%;
  min-width:0;
}

.portal-page input[type="text"],
.portal-page input[type="password"],
.portal-page input[type="email"],
.portal-page input[type="url"],
.portal-page input[type="search"],
.portal-page input[type="tel"],
.portal-page input[type="number"],
.portal-page input[type="date"],
.portal-page input[type="datetime-local"],
.portal-page input[type="time"],
.portal-page select,
.portal-page textarea,
.login-body input[type="text"],
.login-body input[type="password"],
.login-body input[type="email"],
.login-body input[type="url"],
.login-body select,
.login-body textarea{
  max-width:100%;
  min-height:var(--ui-touch);
  border-radius:var(--ui-control-radius);
  line-height:1.35;
}

.portal-page textarea,
.login-body textarea{
  min-height:96px;
}

.portal-page input:focus,
.portal-page select:focus,
.portal-page textarea:focus,
.login-body input:focus,
.login-body select:focus,
.login-body textarea:focus{
  border-color:#60a5fa;
  box-shadow:var(--ui-focus);
}

.portal-page .button,
.login-body .button{
  min-height:var(--ui-touch);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  border-radius:var(--ui-control-radius);
  line-height:1.2;
  text-align:center;
}

.portal-page .inline-form,
.portal-page .workspace-form,
.portal-page .approval-form{
  min-width:0;
}

.portal-page .inline-form>*{
  max-width:100%;
}

/* ERPNext and other connection forms use .stack. Keep each label/input pair
   on its own row so API Key/API Secret can never collide at narrow widths. */
.portal-page-connections .stack{
  width:100%;
  max-width:760px;
}

.portal-page-connections .stack>label{
  width:100%;
}

.portal-page-connections .stack>.muted{
  margin:0;
}

.portal-page-connections .stack>.button{
  justify-self:start;
}

/* ---------- Status/detail patterns ---------- */
.portal-page .status-pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:32px;
  max-width:100%;
  padding:6px 10px;
  border-radius:999px;
  font-size:12px;
  font-weight:800;
  line-height:1.25;
  overflow-wrap:anywhere;
}

.portal-page .status-pill.success{
  background:#dcfce7;
  color:#166534;
}

.portal-page .status-pill.muted{
  background:#f1f5f9;
  color:#64748b;
}

.portal-page .detail-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
  margin:0;
}

.portal-page .detail-grid>div{
  min-width:0;
  padding:14px;
  border:1px solid var(--line);
  border-radius:14px;
  background:#f8fafc;
}

.portal-page .detail-grid dt{
  margin:0 0 5px;
  color:var(--muted);
  font-size:11px;
  font-weight:800;
  letter-spacing:.06em;
  text-transform:uppercase;
}

.portal-page .detail-grid dd{
  margin:0;
  color:var(--ink);
}

.portal-page .connection-row{
  min-width:0;
  padding:14px 0;
  gap:14px;
}

.portal-page .connection-row>div,
.portal-page .connection-row>form{
  min-width:0;
}

/* ---------- Tables ---------- */
.portal-page .table-wrap{
  width:100%;
  max-width:100%;
  overflow-x:auto;
  overscroll-behavior-inline:contain;
  -webkit-overflow-scrolling:touch;
  border-radius:14px;
}

.portal-page table{
  max-width:none;
}

.portal-page th,
.portal-page td{
  line-height:1.45;
}

/* ---------- Shared top bar ---------- */
.portal-page .topbar{
  min-width:0;
}

.portal-page .topbar>div{
  min-width:0;
}

.portal-page .workspace-form{
  row-gap:6px;
}

.portal-page .workspace-form-label{
  flex:0 0 100%;
}

.portal-page .workspace-form select{
  max-width:100%;
}

/* ---------- Cards and responsive grids ---------- */
.portal-page .card-grid,
.portal-page .metric-grid,
.portal-page .participant-task-grid{
  min-width:0;
}

.portal-page .data-card,
.portal-page .metric-card,
.portal-page .participant-task-card{
  min-width:0;
}

.portal-page .data-card-top{
  flex-wrap:wrap;
}

.portal-page .data-card dl{
  min-width:0;
}

/* ---------- Disclosures and dialogs ---------- */
.portal-page details>summary{
  min-height:var(--ui-touch);
  align-content:center;
}

.portal-page .mobile-menu-toggle,
.portal-page .mobile-menu-close{
  min-width:var(--ui-touch);
  min-height:var(--ui-touch);
}

/* ---------- Desktop refinement ---------- */
@media(min-width:761px){
  .portal-page .content-shell{
    padding-top:30px;
  }

  .portal-page .panel{
    padding:24px;
  }

  .portal-page-connections .stack>.button{
    min-width:180px;
  }
}

/* ---------- Tablet ---------- */
@media(max-width:1024px){
  .portal-page .panel-heading{
    gap:12px;
  }

  .portal-page .detail-grid{
    grid-template-columns:minmax(0,1fr);
  }

  .portal-page .approval-form{
    margin-left:0;
  }
}

/* ---------- Mobile-first resilience ---------- */
@media(max-width:760px){
  body.portal-page{
    padding-bottom:calc(72px + env(safe-area-inset-bottom));
  }

  .portal-page .sidebar{
    height:calc(66px + env(safe-area-inset-bottom));
    padding-bottom:calc(6px + env(safe-area-inset-bottom));
  }

  .portal-page .main{
    min-width:0;
  }

  .portal-page .topbar{
    position:sticky;
    top:0;
    z-index:30;
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    align-items:center;
    gap:8px 10px;
    min-height:0;
    padding:10px 12px 11px!important;
  }

  .portal-page .topbar>div:first-child{
    grid-column:1;
    grid-row:1;
  }

  .portal-page .topbar h1{
    max-width:100%;
    font-size:17px!important;
    line-height:1.2;
    white-space:normal;
    overflow:visible;
    text-overflow:clip;
  }

  .portal-page .mobile-menu-disclosure{
    grid-column:2;
    grid-row:1;
    justify-self:end;
  }

  .portal-page .workspace-form{
    grid-column:1/-1;
    grid-row:2;
    width:100%;
    max-width:none;
    margin:0;
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    gap:7px;
    align-items:end;
  }

  .portal-page .workspace-form-label{
    grid-column:1/-1;
    display:block;
    font-size:10px;
  }

  .portal-page .workspace-form select{
    grid-column:1;
    width:100%;
    min-width:0;
    min-height:44px;
    padding:9px 34px 9px 11px;
    font-size:16px;
  }

  /* portal.css historically hid this duplicate desktop control on mobile.
     Restore it so workspace switching never depends on an implicit JS behavior. */
  .portal-page .workspace-form .button{
    grid-column:2;
    display:inline-flex;
    min-height:44px;
    padding-inline:12px;
  }

  .portal-page .content-shell{
    width:100%;
    max-width:100%;
    padding:18px 12px calc(96px + env(safe-area-inset-bottom));
  }

  .portal-page .page-heading{
    align-items:flex-start;
    gap:10px;
  }

  .portal-page .page-heading h2{
    font-size:24px;
    overflow-wrap:anywhere;
  }

  .portal-page .panel,
  .portal-page .metric-card,
  .portal-page .data-card,
  .portal-page .action-card{
    width:100%;
    max-width:100%;
    border-radius:16px;
  }

  .portal-page .panel{
    padding:17px;
    margin-bottom:16px;
  }

  .portal-page .panel-heading{
    flex-direction:column;
    align-items:stretch;
    gap:10px;
    margin-bottom:16px;
  }

  .portal-page .panel-heading>.status-pill,
  .portal-page .panel-heading>.badge{
    align-self:flex-start;
  }

  .portal-page .stack{
    gap:15px;
  }

  .portal-page .stack>label{
    gap:7px;
    font-size:15px;
  }

  .portal-page input[type="text"],
  .portal-page input[type="password"],
  .portal-page input[type="email"],
  .portal-page input[type="url"],
  .portal-page input[type="search"],
  .portal-page input[type="tel"],
  .portal-page input[type="number"],
  .portal-page input[type="date"],
  .portal-page input[type="datetime-local"],
  .portal-page input[type="time"],
  .portal-page select,
  .portal-page textarea,
  .login-body input[type="text"],
  .login-body input[type="password"],
  .login-body input[type="email"],
  .login-body input[type="url"],
  .login-body select,
  .login-body textarea{
    width:100%;
    min-width:0;
    max-width:100%;
    font-size:16px;
  }

  .portal-page .stack>.button{
    width:100%;
    justify-self:stretch;
  }

  .portal-page .detail-grid{
    grid-template-columns:minmax(0,1fr);
    gap:10px;
  }

  .portal-page .detail-grid>div{
    padding:12px;
  }

  .portal-page .connection-row{
    display:flex;
    flex-direction:column;
    align-items:stretch;
    gap:10px;
  }

  .portal-page .connection-row>div:last-child{
    width:100%;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    flex-wrap:wrap;
  }

  .portal-page .connection-row .inline-form{
    margin-left:0;
  }

  .portal-page .inline-form{
    max-width:100%;
  }

  .portal-page .inline-form .button{
    min-height:44px;
  }

  .portal-page .data-card dl{
    grid-template-columns:minmax(92px,auto) minmax(0,1fr);
    gap:8px 10px;
  }

  .portal-page .table-wrap{
    margin-inline:0;
    padding-bottom:4px;
  }

  .portal-page pre{
    max-width:100%;
    white-space:pre-wrap;
    word-break:break-word;
  }

  .portal-page .flash{
    max-width:calc(100% - 24px);
    margin:12px auto 0;
    overflow-wrap:anywhere;
  }

  .portal-page .empty-state{
    padding:24px 16px;
  }

  .portal-page .empty-state .button,
  .portal-page .participant-help .button{
    max-width:100%;
  }
}

@media(max-width:420px){
  .portal-page .topbar{
    padding-inline:10px!important;
  }

  .portal-page .content-shell{
    padding-inline:10px;
  }

  .portal-page .panel{
    padding:15px;
  }

  .portal-page .page-heading h2{
    font-size:22px;
  }

  .portal-page .data-card dl{
    grid-template-columns:minmax(0,1fr);
  }

  .portal-page .data-card dt{
    margin-top:5px;
  }
}

@media(max-width:360px){
  .portal-page .workspace-form{
    grid-template-columns:minmax(0,1fr);
  }

  .portal-page .workspace-form select,
  .portal-page .workspace-form .button{
    grid-column:1;
    width:100%;
  }

  .portal-page .mobile-menu-toggle{
    padding-inline:10px;
  }
}

/* ---------- Login / MFA ---------- */
.login-body{
  min-width:0;
  overflow-x:hidden;
}

.login-card{
  max-width:100%;
}

.login-card .stack{
  display:grid;
  grid-template-columns:minmax(0,1fr);
}

@media(max-width:480px){
  .login-body{
    place-items:start center;
    padding:18px 12px;
  }

  .login-card{
    width:100%;
    padding:24px 18px;
    border-radius:18px;
  }

  .login-card .button{
    width:100%;
  }
}

/* ---------- Specialized conversational view safety ----------
   Keep the established Copilot visual system; only prevent shared mobile
   shell changes from obscuring its composer or controls. */
@media(max-width:760px){
  .portal-page-copilot .content-shell{
    padding-inline:0;
  }

  .portal-page-copilot .topbar{
    grid-template-columns:minmax(0,1fr) auto;
  }

  .portal-page-copilot .copilot-input-stack{
    max-width:calc(100% - 16px);
    bottom:calc(74px + env(safe-area-inset-bottom));
  }
}