/*
  YaSimba 24M Full Portal Consistency Pass
  Created and maintained by Master John V. Thomas, MBA, MHRM, U.M.A.A. Regional Director.

  Purpose:
  - One consistent crystal app-style layout language across admin and member portal pages.
  - Larger readable feature button text.
  - Keep hero/top boxes inside the page line.
  - Remove old tab rows where they are still showing.
  - Protect Guest Wall, public UMAA pages, legal policy text, passwords, and data files.
*/

:root{
  --ys24m-bg:#101114;
  --ys24m-panel:#171a20;
  --ys24m-panel2:#1d2129;
  --ys24m-line:#343a45;
  --ys24m-gold:#d8b84f;
  --ys24m-red:#c71925;
  --ys24m-text:#f7f7f4;
  --ys24m-muted:#d8dbe0;
  --ys24m-width:min(1180px,94vw);
}

html,body{
  background:var(--ys24m-bg)!important;
  color:var(--ys24m-text)!important;
  overflow-x:hidden!important;
}

*,
*::before,
*::after{
  box-sizing:border-box!important;
}

body{
  margin:0!important;
}

/* Main shells across admin and member portal */
.ys24i-admin-shell,
.ys24l-shell,
.ys24f-shell,
.ys24b-shell,
.ys24a-shell,
.ys20b-shell,
main,
.page,
.wrap,
.container{
  width:var(--ys24m-width)!important;
  max-width:1180px!important;
  margin-left:auto!important;
  margin-right:auto!important;
}

/* Remove old repeated tab rows/navigation from admin and member portal feature pages */
.ys20b-nav,
.ys24b-nav,
.ys24a-nav,
.admin-tabs,
.top-tabs,
.tabbar,
.tabs,
nav[aria-label="Admin"],
nav.admin-nav,
nav.ys-admin-nav,
.ys24f-nav,
.member-tabs,
.member-nav,
.portal-tabs,
.portal-nav{
  display:none!important;
}

/* Consistent header */
.ys24i-admin-top,
.ys24l-header,
.ys24f-header,
.ys24b-header,
.ys24a-header,
.ys20b-header{
  width:var(--ys24m-width)!important;
  max-width:1180px!important;
  margin:0 auto 18px!important;
  padding:16px 0 18px!important;
  border-bottom:1px solid var(--ys24m-line)!important;
  background:transparent!important;
}

.ys24i-brand,
.ys24l-brand,
.ys24f-brand,
.ys24b-brand,
.ys20b-logo{
  display:flex!important;
  align-items:center!important;
  gap:14px!important;
}

.ys24i-brand img,
.ys24l-brand img,
.ys24f-brand img,
.ys24b-brand img,
.ys20b-logo img{
  width:62px!important;
  height:62px!important;
  min-width:62px!important;
  object-fit:contain!important;
}

.ys24i-brand strong,
.ys24l-brand strong,
.ys24f-brand strong,
.ys24b-brand strong,
.ys20b-logo strong{
  display:block!important;
  font-family:Georgia,serif!important;
  font-size:34px!important;
  line-height:1!important;
  letter-spacing:-.04em!important;
  color:var(--ys24m-gold)!important;
}

.ys24i-brand span,
.ys24l-brand span,
.ys24f-brand span,
.ys24b-brand span,
.ys20b-logo span{
  display:block!important;
  color:var(--ys24m-muted)!important;
  font-size:14px!important;
  margin-top:4px!important;
}

.ys24i-admin-id,
.ys24l-admin-id,
.ys24f-member-id{
  color:var(--ys24m-muted)!important;
  text-align:right!important;
  font-size:12px!important;
}

.ys24i-admin-id strong,
.ys24l-admin-id strong,
.ys24f-member-id strong{
  color:var(--ys24m-text)!important;
  font-size:16px!important;
  display:block!important;
}

/* Hero / intro boxes must stay aligned inside the same page width */
.ys24i-welcome,
.ys24l-hero,
.ys24f-welcome,
.ys24b-hero,
.ys24a-hero,
.ys20b-hero,
.hero,
.page-hero{
  width:100%!important;
  max-width:100%!important;
  margin:18px 0 20px!important;
  padding:24px 26px!important;
  background:linear-gradient(135deg,#181a1f,#111216)!important;
  border:1px solid var(--ys24m-line)!important;
  box-shadow:0 18px 32px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.04)!important;
  border-radius:0!important;
  overflow:hidden!important;
}

.ys24i-welcome small,
.ys24l-hero small,
.ys24f-welcome small,
.ys24b-hero small,
.ys24a-hero small,
.ys20b-hero small,
.hero small{
  display:block!important;
  color:var(--ys24m-gold)!important;
  text-transform:uppercase!important;
  letter-spacing:.16em!important;
  font-size:12px!important;
  font-weight:900!important;
  margin-bottom:8px!important;
}

.ys24i-welcome h1,
.ys24l-hero h1,
.ys24f-welcome h1,
.ys24b-hero h1,
.ys24a-hero h1,
.ys20b-hero h1,
.hero h1,
h1{
  color:var(--ys24m-text)!important;
  font-size:clamp(30px,4vw,42px)!important;
  line-height:1.08!important;
  letter-spacing:-.035em!important;
  margin:0 0 10px!important;
}

.ys24i-welcome h1 span,
.ys24l-hero h1 span,
.ys24f-welcome h1 span{
  color:var(--ys24m-red)!important;
}

.ys24i-welcome p,
.ys24l-hero p,
.ys24f-welcome p,
.ys24b-hero p,
.ys24a-hero p,
.ys20b-hero p,
.hero p{
  color:var(--ys24m-muted)!important;
  font-size:18px!important;
  line-height:1.5!important;
  max-width:960px!important;
  margin:0!important;
}

/* Grids must not overrun the shell */
.ys24i-app-grid,
.ys24l-grid,
.ys24f-app-grid,
.app-grid,
.feature-grid{
  width:100%!important;
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:18px!important;
  margin:20px 0!important;
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  overflow:visible!important;
}

/* Crystal app buttons: bigger, readable, proportional */
.ys24i-app-tile,
.ys24l-tile,
.ys24f-app-card,
.app-tile,
.feature-tile{
  position:relative!important;
  display:flex!important;
  align-items:flex-start!important;
  gap:18px!important;
  width:100%!important;
  min-width:0!important;
  min-height:150px!important;
  padding:24px!important;
  border-radius:20px!important;
  overflow:hidden!important;
  color:#fff!important;
  text-decoration:none!important;
  border:1px solid rgba(255,255,255,.20)!important;
  box-shadow:0 18px 30px rgba(0,0,0,.26), inset 0 1px 0 rgba(255,255,255,.25)!important;
  transform:translateY(0)!important;
  transition:transform .14s ease, box-shadow .14s ease, filter .14s ease!important;
}

.ys24i-app-tile::before,
.ys24l-tile::before,
.ys24f-app-card::before,
.app-tile::before,
.feature-tile::before{
  content:""!important;
  position:absolute!important;
  inset:0!important;
  background:
    radial-gradient(circle at 20% 5%,rgba(255,255,255,.52),rgba(255,255,255,.10) 18%,transparent 34%),
    linear-gradient(180deg,rgba(255,255,255,.22),rgba(255,255,255,0) 42%)!important;
  pointer-events:none!important;
}

.ys24i-app-tile:hover,
.ys24l-tile:hover,
.ys24f-app-card:hover,
.app-tile:hover,
.feature-tile:hover{
  transform:translateY(-3px)!important;
  box-shadow:0 24px 38px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.30)!important;
  filter:saturate(1.08)!important;
}

.ys24i-app-tile:active,
.ys24l-tile:active,
.ys24f-app-card:active,
.app-tile:active,
.feature-tile:active{
  transform:translateY(3px) scale(.992)!important;
}

.ys24i-icon,
.ys24l-icon,
.ys24f-app-icon,
.app-icon,
.feature-icon{
  position:relative!important;
  z-index:1!important;
  width:72px!important;
  height:72px!important;
  min-width:72px!important;
  border-radius:18px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  color:#fff!important;
  font-weight:900!important;
  font-size:18px!important;
  letter-spacing:.02em!important;
  background:rgba(255,255,255,.18)!important;
  border:1px solid rgba(255,255,255,.30)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.24)!important;
}

.ys24i-copy,
.ys24l-copy,
.ys24f-app-copy,
.app-copy,
.feature-copy{
  position:relative!important;
  z-index:1!important;
  min-width:0!important;
  flex:1!important;
}

.ys24i-copy strong,
.ys24l-copy strong,
.ys24f-app-copy strong,
.app-copy strong,
.feature-copy strong,
.ys24f-app-card strong{
  display:block!important;
  color:#fff!important;
  font-size:clamp(24px,2.1vw,30px)!important;
  line-height:1.08!important;
  margin:0 0 10px!important;
  letter-spacing:-.02em!important;
  overflow-wrap:break-word!important;
}

.ys24i-copy span,
.ys24l-copy span,
.ys24f-app-copy span,
.app-copy span,
.feature-copy span,
.ys24f-app-card span{
  display:block!important;
  color:rgba(255,255,255,.94)!important;
  font-size:17px!important;
  line-height:1.38!important;
  overflow-wrap:break-word!important;
}

/* Panels and forms */
.ys24l-panel,
.ys24f-panel,
.ys24b-panel,
.ys24a-panel,
.ys20b-panel,
.panel,
.card,
.box,
.form-card{
  width:100%!important;
  max-width:100%!important;
  background:linear-gradient(145deg,#171a20,#111216)!important;
  border:1px solid var(--ys24m-line)!important;
  box-shadow:0 14px 26px rgba(0,0,0,.20), inset 0 1px 0 rgba(255,255,255,.035)!important;
  color:var(--ys24m-text)!important;
  border-radius:0!important;
  overflow:hidden!important;
}

.ys24l-form-grid,
.form-grid{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:14px!important;
  width:100%!important;
}

input,
select,
textarea{
  width:100%!important;
  max-width:100%!important;
  background:#0c0d10!important;
  color:#f7f7f4!important;
  border:1px solid #4a5160!important;
}

label,
.ys24l-field label{
  color:var(--ys24m-gold)!important;
  text-transform:uppercase!important;
  letter-spacing:.16em!important;
  font-size:12px!important;
  font-weight:900!important;
}

/* Dashboard stat cards need consistent clickable sizing */
.ys24i-stat-grid{
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:16px!important;
  width:100%!important;
}

.ys24i-stat-card{
  min-height:120px!important;
  padding:22px!important;
}

.ys24i-stat-card b{
  font-size:38px!important;
}

.ys24i-stat-card span{
  font-size:16px!important;
  color:var(--ys24m-muted)!important;
}

/* Member portal action buttons already use color classes, keep them polished. */
.ys24f-red{background:linear-gradient(145deg,#d94d5b,#9e101d 70%)!important}
.ys24f-blue{background:linear-gradient(145deg,#6cb3f0,#174c86 70%)!important}
.ys24f-green{background:linear-gradient(145deg,#62c39d,#075f42 70%)!important}
.ys24f-purple{background:linear-gradient(145deg,#956be1,#51248d 70%)!important}
.ys24f-orange{background:linear-gradient(145deg,#e6a250,#8d4304 70%)!important}
.ys24f-gold{background:linear-gradient(145deg,#f3d875,#8f7619 70%)!important}
.ys24f-silver{background:linear-gradient(145deg,#a8adb6,#3e444e 70%)!important}
.ys24f-dark{background:linear-gradient(145deg,#60646b,#22252b 70%)!important}

/* Admin tile color classes */
.ys24i-red,.ys24l-red{background:linear-gradient(145deg,#d94d5b,#9e101d 70%)!important}
.ys24i-blue,.ys24l-blue{background:linear-gradient(145deg,#6cb3f0,#174c86 70%)!important}
.ys24i-green,.ys24l-green{background:linear-gradient(145deg,#62c39d,#075f42 70%)!important}
.ys24i-purple,.ys24l-purple{background:linear-gradient(145deg,#956be1,#51248d 70%)!important}
.ys24i-orange,.ys24l-orange{background:linear-gradient(145deg,#e6a250,#8d4304 70%)!important}
.ys24i-gold,.ys24l-gold{background:linear-gradient(145deg,#f3d875,#8f7619 70%)!important}
.ys24i-silver,.ys24l-silver{background:linear-gradient(145deg,#a8adb6,#3e444e 70%)!important}
.ys24i-dark,.ys24l-dark{background:linear-gradient(145deg,#60646b,#22252b 70%)!important}
.ys24i-teal,.ys24l-teal{background:linear-gradient(145deg,#55d6d6,#0b6470 70%)!important}

/* Simple Dashboard/Sign Out buttons should not look like the old tab row */
.ys24l-back-row{
  display:flex!important;
  gap:10px!important;
  margin:0 0 18px!important;
  padding:0!important;
  border:0!important;
}

.ys24l-back-row .ys24l-btn,
.ys24f-back-row .ys24f-btn{
  min-height:44px!important;
}

/* Footers */
.ys24l-footer,
.ys24i-footer,
.ys24f-footer,
footer{
  width:var(--ys24m-width)!important;
  max-width:1180px!important;
  margin:28px auto 0!important;
  border-top:1px solid var(--ys24m-line)!important;
  color:#a4a7ad!important;
  font-size:12px!important;
  padding:18px 0 30px!important;
}

@media(max-width:1050px){
  .ys24i-app-grid,
  .ys24l-grid,
  .ys24f-app-grid,
  .app-grid,
  .feature-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
  .ys24i-stat-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
}

@media(max-width:760px){
  .ys24i-admin-top,
  .ys24l-header,
  .ys24f-header{
    flex-direction:column!important;
    align-items:flex-start!important;
  }
  .ys24i-admin-id,
  .ys24l-admin-id,
  .ys24f-member-id{
    text-align:left!important;
  }
  .ys24i-app-grid,
  .ys24l-grid,
  .ys24f-app-grid,
  .app-grid,
  .feature-grid,
  .ys24i-stat-grid,
  .ys24l-form-grid,
  .form-grid{
    grid-template-columns:1fr!important;
  }
  .ys24i-app-tile,
  .ys24l-tile,
  .ys24f-app-card,
  .app-tile,
  .feature-tile{
    min-height:140px!important;
  }
}