/* CatchaDoc Members – Global UI */

:root{
  --radius: 16px;

  /* Requested fixed sidebar height */
  --sidebarH: 800px;

  /* Sidebar width used for footer alignment */
  --sidebarW: 360px;
}

/* Buttons */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:10px 14px;
  border-radius:14px;
  font-weight:950;
  text-decoration:none;
  line-height:1;
  cursor:pointer;
  user-select:none;
  border:1px solid transparent;
  transition:transform .08s ease, filter .12s ease;
}
.btn:hover{ filter:brightness(.98); transform:translateY(-1px); }
.btn:active{ transform:translateY(0px); filter:brightness(.96); }

.reg-primary{
  background:#2563eb;
  color:#fff;
  border-color: rgba(37,99,235,.45);
}
.reg-ghost{
  background:rgba(15,23,42,.04);
  color:#0f172a;
  border-color: rgba(148,163,184,.35);
}

/* Cards */
.card{
  border-radius: var(--radius);
  border:1px solid rgba(148,163,184,.25);
  background:#fff;
  box-shadow:0 10px 30px rgba(2,6,23,.06);
  padding:14px;
}
.muted{ color:#64748b; }

/* =========================================================
   FIXED SHELL:
   - Sidebar always --sidebarH tall, scrolls internally
   - Main column same height, content scrolls inside
   - Footer sits BELOW the shell row, offset by sidebar width
   ========================================================= */

.app-wrapper{
  display:flex;
  flex-direction:column;
  width:100%;
  flex: 1 1 auto;
}

.app-shell-row{
  display:flex;
  width:100%;
  align-items:flex-start;
}

/* Sidebar: always full viewport height minus header, sticky on scroll */
.app-sidebar{
  width: var(--sidebarW);
  flex: 0 0 var(--sidebarW);
  position: sticky;
  top: 0;
  height: calc(100vh - var(--header-h, 78px));
  overflow-y: auto;
  padding-bottom: 28px;
}

/* Main: natural height, no overflow clipping */
.app-main{
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.app-scroll.with-sidebar{
  flex: 1 1 auto;
}

/* Footer row: sits directly below app-shell-row */
.app-footer-row{
  display:flex;
  width:100%;
  background:#ffffff;
  border-top:1px solid rgba(15,23,42,.12);
}

/* Spacer matches sidebar width so footer content aligns under main */
.app-footer-spacer{
  width: var(--sidebarW);
  flex: 0 0 var(--sidebarW);
  background: transparent;
}

.app-footer-main{
  flex: 1 1 auto;
  min-width:0;
}

/* ===== Footer component styles ===== */
.cad-site-footer{
  width:100%;
  background:#ffffff;
}

.cad-site-footer__inner{
  max-width: 1200px;
  margin: 0 auto;
  padding: 26px 18px 20px;
}

.cad-site-footer__grid{
  display:grid;
  grid-template-columns: repeat(4, minmax(160px, 1fr)) 170px;
  gap: 28px;
  align-items: start;
}

.cad-site-footer__title{
  font-weight: 900;
  font-size: 22px;
  letter-spacing: -0.01em;
  color:#0f172a;
  margin-bottom: 14px;
}

.cad-site-footer__list{
  margin:0;
  padding:0;
  list-style:none;
  display:flex;
  flex-direction:column;
  gap: 10px;
}

.cad-site-footer__link{
  color:#111827;
  text-decoration:none;
  font-weight:500;
  font-size: 20px;
}

.cad-site-footer__link:hover{ text-decoration: underline; }

.cad-site-footer__logoWrap{
  display:flex;
  justify-content:flex-end;
  align-items:flex-start;
  padding-top: 4px;
}

.cad-site-footer__logo{
  width: 150px;
  height:auto;
  display:block;
}

.cad-site-footer__bottom{
  margin-top: 30px;
  text-align:center;
}

.cad-site-footer__copy{
  color:#111827;
  font-size:18px;
  font-weight:500;
}

@media (max-width: 980px){
  :root{ --sidebarW: 320px; }

  .cad-site-footer__grid{
    grid-template-columns: repeat(2, minmax(160px, 1fr));
  }
  .cad-site-footer__logoWrap{
    grid-column: 1 / -1;
    justify-content:flex-start;
    margin-top: 8px;
  }
}

@media (max-width: 640px){
  .app-footer-spacer{ display:none; }
  .cad-site-footer__title{ font-size: 18px; }
  .cad-site-footer__link{ font-size: 16px; }
  .cad-site-footer__copy{ font-size: 14px; }

  /* Sidebar becomes a slide-in overlay on mobile */
  .app-sidebar{
    position: fixed !important;
    left: -360px;
    top: 0;
    bottom: 0;
    height: 100% !important;
    z-index: 9999;
    transition: left .25s;
    overflow-y: auto;
  }
  .app-sidebar.open{ left: 0; }
}

/* =========================================================
   Mobile: Overview layout (SCOPED)
   NOTE:
   - Wrap overview output in <div class="dash-overview"> ... </div>
   - Add classes:
     - stats grid: class="cad-overview-stats"
     - main grid:  class="cad-overview-main"
   ========================================================= */
@media (max-width: 820px){

  /* Top stats -> 2x2 grid */
  .dash-overview .cad-overview-stats{
    display:grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }

  /* Big numbers a bit smaller */
  .dash-overview .navbtn p:first-child{
    font-size: 28px !important;
  }

  /* Everything below -> single column */
  .dash-overview .cad-overview-main{
    display:grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  /* Finish setup first */
  .dash-overview .cad-overview-main > .card:first-child{
    order: -1;
  }
}