/* =========================================================
   UMEED Phase 9: Login + Role Dashboard Final Polish
   Focus: responsive login cards, safer dashboard grids, clean auth status.
   ========================================================= */

html{ -webkit-text-size-adjust:100%; }
body{ overflow-x:hidden; }

/* Login pages */
.layout,
.glass,
.card-3d{ max-width:100%; }
.status-msg{
  min-height:22px;
  line-height:1.45;
  overflow-wrap:anywhere;
}
.status-msg.ok{ color:#4ade80; }
.status-msg.warn{ color:#fbbf24; }
.field input{ font-size:16px; }
.btn-signin[disabled]{ opacity:.82; cursor:not-allowed; }
.card-foot{
  display:flex;
  gap:10px;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
}
.role-badge{ max-width:100%; overflow-wrap:anywhere; }

@media (max-width: 860px){
  .layout{
    min-height:100svh;
    display:block;
    padding:14px;
  }
  .left{
    width:100%;
    min-height:100svh;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:14px 0;
  }
  .right{ display:none !important; }
  .card-3d{
    width:min(100%, 520px);
    transform:none !important;
  }
  .glass{
    border-radius:24px !important;
    padding:22px !important;
  }
  .card-head{
    align-items:flex-start;
    gap:12px;
  }
  .card-head h1{
    font-size:clamp(1.45rem, 8vw, 2.1rem) !important;
    line-height:1.05;
    overflow-wrap:anywhere;
  }
  .x-btn{ top:12px !important; right:12px !important; }
}

@media (max-width: 420px){
  .layout{ padding:8px; }
  .glass{ padding:18px !important; border-radius:20px !important; }
  .card-head{ flex-direction:column; }
  .logo-box{ width:64px !important; height:64px !important; }
  .role-badge-change{ display:none; }
  .card-foot a{ width:100%; text-align:center; }
}

/* Dashboard global hardening */
.header{
  gap:12px;
  min-width:0;
}
.header .brand{
  min-width:0;
  overflow-wrap:anywhere;
}
.header > div:last-child{
  min-width:0;
  flex-wrap:wrap;
}
.container,
.cards,
.grid,
.card,
.row,
.row-main{ min-width:0; }
.card,
.row,
.row-title,
.row-sub,
.muted,
p,h1,h2,h3,h4,span,label,button,a{
  overflow-wrap:anywhere;
}
.card img,
.card video,
.card iframe{
  max-width:100%;
  height:auto;
}
.card iframe{ border:0; border-radius:14px; }
.table-wrap,
.table-scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
table{ max-width:100%; }
canvas{ max-width:100% !important; }
input,select,textarea,button{ font-size:16px; }

/* Any old inline grid spans must collapse on phones */
@media (max-width: 820px){
  .cards{ grid-template-columns:1fr !important; }
  .cards > *,
  .grid > *,
  .card[style*="grid-column"],
  div[style*="grid-column: span"]{
    grid-column:1 / -1 !important;
  }
  .header{
    position:sticky;
    align-items:flex-start;
  }
  .header > div:last-child{
    width:100%;
    justify-content:space-between;
  }
  .container{ padding-left:12px; padding-right:12px; }
  .card{ padding:14px !important; }
  .row{ align-items:stretch; }
  .btn, button{ width:auto; max-width:100%; }
}

@media (max-width: 520px){
  .header{ padding:12px; }
  .brand{ font-size:15px; }
  .btn, button{ width:100%; justify-content:center; text-align:center; }
  .tabbar .btn,
  [data-tab],
  .notice-bell{ width:auto; }
  input,select,textarea{ margin:8px 0; }
}

/* Dashboard auth state pill, if present */
[data-auth-state]{
  margin:10px 0;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.16);
  background:rgba(255,255,255,.06);
  color:rgba(255,255,255,.78);
  font-size:.92rem;
}

/* Chat dashboard safety */
.chat-shell,
.chat-panel,
.chat-thread,
.chat-messages,
.chat-composer{
  min-width:0;
  max-width:100%;
}
.chat-messages{ overflow-y:auto; }
.chat-message,
.message-bubble{ overflow-wrap:anywhere; }
@media (max-width: 760px){
  .chat-shell{ grid-template-columns:1fr !important; }
  .chat-composer{ flex-direction:column; align-items:stretch; }
}