/* =========================================================
   1) Design tokens
   ========================================================= */
:root{
  --thera-primary: #2E62A6;
  --thera-primary-2: #2D6DA6;
  --thera-success: #038C7F;
  --thera-success-2: #03A688;

  --thera-bg: #f2f2f2;
  --thera-text: #272C33;

  --thera-border: var(--thera-bg);
  --thera-topbar-h: 72px;

  --thera-radius-sm: 10px;
  --thera-radius-md: 12px;
  --thera-radius-lg: 16px;
}


/* =========================================================
   2) Bootstrap compat / overrides (mínimo)
   - Evitar espalhar !important, use apenas quando necessário
   ========================================================= */
.bg-primary{ background-color: var(--thera-primary) !important; }
.bg-secondary{ background-color: var(--thera-primary-2) !important; }
.bg-tertiary{ background-color: var(--thera-success) !important; }
.bg-quaternary{ background-color: var(--thera-success-2) !important; }

.btn-primary{
  background-color: var(--thera-primary) !important;
  border: none;
}

td .badge{
  background-color: #ebf2ff !important;
  color: #68768a !important;
  font-weight: 600;
}

/* Neutraliza regras antigas do navbar horizontal (legado) */
.nav-item{ margin-left: 0 !important; }
.nav-link{ text-align: left !important; }

/* Breadcrumb */
.breadcrumb{
  margin-top: 10px;
  font-size: 10pt;
}
.breadcrumb-item a{
  color: var(--thera-primary) !important;
}

/* Tipografia: primeira letra maiúscula (se realmente for requisito) */
h2::first-letter,
.breadcrumb-item::first-letter{
  text-transform: uppercase;
}


/* =========================================================
   3) Layout - Topbar / Shell / Sidebar / Content
   ========================================================= */
.thera-topbar{
  position: sticky;
  top: 0;
  z-index: 1030;
  background: #fff;
  border-bottom: 2px solid var(--thera-border);
  padding: 8px 0;
}

.thera-brand img{
  height: 56px;
}

.thera-icon-btn,
.thera-user-btn{
  border: 1px solid var(--thera-border);
  background: #fff;
  color: var(--thera-primary);
}
.thera-user-btn{
  font-weight: 600;
}

.thera-shell{
  display: flex;
  min-height: calc(100vh - var(--thera-topbar-h));
  background: var(--thera-bg);
}

.thera-content{
  flex: 1 1 auto;
  min-width: 0;
  padding: 16px 18px;
  background: var(--thera-bg);
}


/* =========================================================
   4) Sidebar (desktop) + states
   ========================================================= */
.thera-sidebar{
  width: 260px;
  flex: 0 0 260px;
  background: #fff;
  border-right: 1px solid var(--thera-border);
  padding: 12px 10px;

  position: sticky;
  top: var(--thera-topbar-h);
  height: calc(100vh - var(--thera-topbar-h));

  display: flex;               /* importante p/ footer ir ao fundo */
  flex-direction: column;
}

.thera-nav{
  display: flex;
  flex-direction: column;
  gap: 4px;
  overflow: auto;
  padding-right: 6px;
}

.thera-nav-section{
  margin-top: 10px;
  margin-bottom: 6px;
  padding: 8px 10px 0 10px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  color: #6c757d;
}

.thera-nav-item{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 3px 5px;
  border-radius: var(--thera-radius-sm);
  text-decoration: none;
  color: var(--thera-text);
  border: 1px solid transparent;
}

.thera-nav-item i{
  width: 18px;
  text-align: center;
  color: var(--thera-primary);
}

.thera-nav-item span{
  font-weight: 600;
  color: var(--thera-text);
}

.thera-nav-item:hover{
  background: #fff;
  border-color: var(--thera-border);
  color: var(--thera-text);
}

.thera-nav-item.active{
  background: rgba(46, 98, 166, 0.08);
  border-color: rgba(46, 98, 166, 0.18);
}

/* Sidebar footer */
.thera-sidebar-footer{
  margin-top: auto;
  padding: 10px 6px 0 6px;
  border-top: 1px solid var(--thera-border);
}

.thera-collapse-btn{
  width: 100%;
  border: 1px solid var(--thera-border);
  background: #fff;
  color: var(--thera-primary);
  font-weight: 700;
}

/* Collapsed (desktop) */
.thera-sidebar.is-collapsed{
  width: 76px;
  flex-basis: 76px;
}
.thera-sidebar.is-collapsed .thera-nav-item span,
.thera-sidebar.is-collapsed .thera-nav-section{
  display: none;
}
.thera-sidebar.is-collapsed .thera-nav-item{
  justify-content: center;
}


/* =========================================================
   5) Mobile fullscreen menu (overlay)
   ========================================================= */
.thera-backdrop{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.45);
  z-index: 1040;
}

/* Header do menu (existe no HTML, mas só aparece no mobile) */
.thera-mobile-menu-header{
  display: none;
}

@media (max-width: 991.98px){
  .thera-sidebar{
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100dvh;
    z-index: 1200;
    background: #fff;

    transform: translateX(-100%);
    transition: transform .25s ease;

    padding: 16px 14px;
  }

  .thera-sidebar.is-open{
    transform: translateX(0);
  }

  body.thera-menu-open .thera-topbar{
    visibility: hidden;
  }

  .thera-mobile-menu-header{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--thera-border);
    margin-bottom: 10px;
  }

  .thera-mobile-menu-title{
    font-size: 20px;
    font-weight: 800;
    color: var(--thera-text);
  }

  .thera-mobile-menu-close{
    border: 0;
    background: transparent;
    font-size: 20px;
    color: var(--thera-text);
  }

  .thera-nav{
    flex: 1 1 auto;
    overflow-y: auto;
    padding-right: 4px;
  }

  /* No mobile, escondemos o botão de recolher (não faz sentido aqui) */
  .thera-sidebar-footer{
    display: none;
  }

  /* backdrop abaixo do menu (menu tem z-index 1200) */
  .thera-backdrop{
    z-index: 1100;
  }
}


/* =========================================================
   6) Home cards (dashboard)
   ========================================================= */
.stat-card{
  border-radius: 10px;
  transition: transform 0.2s, box-shadow 0.2s;
  border: none;
}
.stat-card:hover{
  transform: translateY(-5px);
  box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}
.stat-icon{
  font-size: 2.5rem;
  opacity: 0.8;
}
.stat-number{
  font-size: 2rem;
  font-weight: bold;
}
.stat-title{
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 1px;
}
.quick-action-card{ height: 100%; }
.quick-action-icon{
  width: 50px;
  height: 50px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
}
.recent-activity-item{
  border-left: 3px solid transparent;
  padding-left: 15px;
  margin-bottom: 15px;
  transition: all 0.2s;
}
.activity-time{
  font-size: 0.8rem;
  color: #6c757d;
}
.color-indicator{
  width: 15px;
  height: 15px;
  border-radius: 50%;
  display: inline-block;
  margin-right: 8px;
}


/* =========================================================
   7) Auth (Login / Reset / etc.)
   ========================================================= */
.auth-page{
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding: 32px 0;
  background: var(--thera-bg);
}

.auth-card{
  background: #fff;
  border: 1px solid rgba(0,0,0,.06);
  border-radius: var(--thera-radius-lg);
  padding: 28px 24px;
  box-shadow: 0 10px 30px rgba(0,0,0,.08);
}

.auth-mark{
  width: 56px;
  height: 56px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(46, 98, 166, 0.10);
  color: var(--thera-primary);
  font-size: 28px;
}

.auth-title{
  margin: 0;
  font-weight: 800;
  font-size: 28px;
  line-height: 1.1;
  color: var(--thera-text);
}

.auth-subtitle{
  margin: 6px 0 0 0;
  color: #6c757d;
}

.auth-card .form-label{
  font-weight: 700;
  margin-bottom: 6px;
}

.auth-card .form-control{
  padding: 12px 12px;
  border-radius: var(--thera-radius-md);
}

.auth-footer{
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid rgba(0,0,0,.06);
  text-align: center;
}

.auth-help{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  font-weight: 600;
}

.auth-meta{
  margin-top: 12px;
  color: #6c757d;
  font-size: 12px;
  display: grid;
  gap: 4px;
}

.thera-brand-login{
  height: 150px;
}


/* =========================================================
   8) PT pages (Planos / Detalhes etc.)
   ========================================================= */
.pt-header{
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 12px;
}

.pt-header__meta{
  color: #6c757d;
  font-size: 0.9rem;
}

.pt-header__actions{
  display: flex;
  gap: 8px;
  align-items: center;
}

.pt-card{
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,.08);
}

.pt-card__header{
  background: #fff;
  border-bottom: 1px solid rgba(0,0,0,.06);
}

.pt-card__header--row{
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.pt-dl dt{
  color: #6c757d;
  font-weight: 700;
}
.pt-dl dd{
  margin-bottom: .5rem;
}

.pt-stat{
  display: block;
  text-decoration: none;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 14px;
  padding: 14px 10px;
  background: #fff;
  text-align: center;
}
.pt-stat:hover{ border-color: rgba(0,0,0,.16); }
.pt-stat--static{ cursor: default; }

.pt-stat__value{
  font-size: 1.8rem;
  font-weight: 800;
  line-height: 1.1;
}
.pt-stat__label{
  color: #6c757d;
  font-weight: 600;
  margin-top: 2px;
}

.pt-chip{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.08);
  background: rgba(0,0,0,.02);
  font-size: .875rem;
  font-weight: 600;
  color: #333;
}

.pt-table th{
  font-size: .85rem;
  letter-spacing: .02em;
  text-transform: uppercase;
}
.pt-table td{
  vertical-align: middle;
}

.pt-footer{
  background: #fff;
}
.pt-footer__meta{
  margin-top: 10px;
  font-size: .85rem;
  color: #6c757d;
}

.pt-progress .progress{ border-radius: 999px; }
.pt-progress .progress-bar{ border-radius: 999px; }

@media (max-width: 576px){
  .pt-header__actions{
    width: 100%;
    justify-content: stretch;
  }
  .pt-header__actions .btn,
  .pt-header__actions .dropdown{
    flex: 1;
  }
  .pt-card__header--row{
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
}


/* =========================================================
   9) 403 Page
   ========================================================= */
.card-403{
  background: #fff;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: var(--thera-radius-lg);
  padding: 28px 24px;
  box-shadow: 0 10px 30px rgba(0,0,0,.08);
  margin: 1% auto;
  width: 50%;
  text-align: center;
}

.img-page403{
  width: 80%;
  margin-bottom: 20px;
}

@media (max-width: 576px){
  .card-403{ width: 95%; }
}