/* The Pickle Coaches, LLC — portal chrome */

:root {
  --tpc-nav: #14210A;
  --tpc-cream: #f4efe4;
  --tpc-ink: #1a2410;
  --tpc-display: 'Oswald', Impact, 'Arial Narrow', sans-serif;
  --tpc-ui: 'Manrope', Inter, system-ui, sans-serif;
}

body.tpc-portal {
  font-family: var(--tpc-ui);
  background: var(--tpc-cream);
  color: var(--tpc-ink);
}

body.tpc-portal.auth-bg {
  background:
    radial-gradient(ellipse 80% 60% at 80% -10%, rgb(var(--color-primary-rgb) / 0.42), transparent 55%),
    linear-gradient(160deg, #4d7c0f 0%, #1a2e05 48%, #0c1406 100%) !important;
}

body.tpc-portal .tpc-mark {
  display: grid;
  place-items: center;
  width: 2.35rem;
  height: 2.35rem;
  color: rgb(var(--color-primary-rgb));
  flex-shrink: 0;
}

body.tpc-portal .tpc-mark svg {
  width: 2.35rem;
  height: 2.35rem;
  display: block;
}

body.tpc-portal .tpc-cms-logo,
html:not(.has-custom-logo) body.tpc-portal [data-site="logo"] {
  display: none !important;
}

html.has-custom-logo body.tpc-portal .tpc-mark {
  display: none;
}

html.has-custom-logo body.tpc-portal [data-site="logo"] {
  display: block !important;
  height: 2.35rem;
  width: auto;
  max-width: 8.5rem;
  object-fit: contain;
}

html.has-custom-logo body.tpc-portal #sidebar [data-site="logo"] {
  height: 2.15rem;
  max-width: 3.5rem;
}

body.tpc-portal .tpc-portal-brand-name {
  font-family: var(--tpc-display);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  line-height: 1.12;
  white-space: normal;
  max-width: 12.5rem;
}

/* —— Auth (login / register) —— */
body.tpc-portal header .tpc-portal-brand-name {
  color: var(--tpc-cream);
}

body.tpc-portal .auth-card {
  background: #fffdf8;
  border-radius: 1.25rem;
  box-shadow: 0 28px 60px rgba(12, 20, 6, 0.35);
}

body.tpc-portal h1 {
  font-family: var(--tpc-display);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

body.tpc-portal .login-as-card {
  background: #f4efe4;
  border-color: rgba(20, 33, 10, 0.12);
  border-radius: 1rem;
}

body.tpc-portal .login-as-card:hover {
  background: #fff;
  border-color: rgb(var(--color-primary-rgb) / 0.45);
}

body.tpc-portal .login-as-card:has(input:checked) {
  background: rgb(var(--color-primary-rgb) / 0.12);
  border-color: rgb(var(--color-primary-rgb));
}

body.tpc-portal button[type="submit"].bg-primary,
body.tpc-portal .auth-card .bg-primary {
  border-radius: 999px;
  background: linear-gradient(135deg, #d9f99d 0%, #84cc16 46%, #4d7c0f 100%) !important;
  color: #14210a !important;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 0.78rem;
  box-shadow: 0 12px 28px rgb(132 204 22 / 0.28);
}

/* —— App chrome —— */
body.tpc-portal #sidebar {
  --tpc-sidebar-ink: #f4efe4;
  background:
    radial-gradient(ellipse 80% 36% at 50% -8%, rgb(var(--color-primary-rgb) / 0.45), transparent 58%),
    linear-gradient(180deg, #65a30d 0%, #3f6212 28%, var(--tpc-nav) 58%, #0c1406 100%) !important;
  color: var(--tpc-sidebar-ink);
  border-right: 1px solid rgba(244, 239, 228, 0.08);
  overflow: hidden;
}

body.tpc-portal #sidebar::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: linear-gradient(
    180deg,
    rgb(var(--color-primary-rgb)),
    rgb(var(--color-primary-rgb) / 0.2)
  );
  pointer-events: none;
  z-index: 2;
}

body.tpc-portal #sidebar .tpc-sidebar-head {
  position: relative;
  background: transparent;
  border: 0 !important;
  border-bottom: 1px solid rgba(244, 239, 228, 0.1) !important;
  margin: 0;
  padding: 1.05rem 1.05rem 0.95rem !important;
  border-radius: 0;
  box-shadow: none;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.5rem;
}

body.tpc-portal #sidebar .tpc-sidebar-brand {
  display: flex;
  flex-direction: row;
  align-items: center;
  text-align: left;
  gap: 0.7rem;
  min-width: 0;
  flex: 1;
}

body.tpc-portal #sidebar .tpc-sidebar-head .tpc-mark {
  width: 2.15rem;
  height: 2.15rem;
}

body.tpc-portal #sidebar .tpc-sidebar-head .tpc-mark svg {
  width: 2.15rem;
  height: 2.15rem;
}

body.tpc-portal #sidebar .sidebar-brand-text {
  min-width: 0;
}

body.tpc-portal #sidebar .tpc-sidebar-head .tpc-portal-brand-name,
body.tpc-portal #sidebar .tpc-sidebar-head .font-bold {
  color: var(--tpc-cream) !important;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  line-height: 1.15;
  white-space: normal;
}

body.tpc-portal #sidebar .tpc-sidebar-head .tpc-portal-brand-name span {
  display: inline;
}

body.tpc-portal #sidebar .tpc-sidebar-role {
  font-family: var(--tpc-ui) !important;
  font-style: normal;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.12em !important;
  color: rgb(244 239 228 / 0.45) !important;
  font-size: 0.62rem !important;
  margin-top: 0.12rem;
}

body.tpc-portal #sidebar #sidebar-close {
  position: static;
  color: rgb(244 239 228 / 0.55) !important;
}

body.tpc-portal #sidebar nav {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  padding: 0.75rem 0.7rem 0.5rem;
}

body.tpc-portal #sidebar .tpc-nav-home {
  padding: 0;
}

body.tpc-portal #sidebar .tpc-nav-block {
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
}

body.tpc-portal #sidebar .tpc-nav-block:not(:has(a:not(.hidden))) {
  display: none;
}

body.tpc-portal #sidebar .sidebar-section-label,
body.tpc-portal #sidebar [data-nav-group-label] {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  color: rgb(244 239 228 / 0.55) !important;
  font-family: var(--tpc-display);
  font-size: 0.62rem !important;
  letter-spacing: 0.14em !important;
  font-weight: 600 !important;
  padding: 0.15rem 0.45rem 0.4rem !important;
  margin: 0 !important;
}

body.tpc-portal #sidebar .tpc-nav-num {
  display: grid;
  place-items: center;
  width: 1.15rem;
  height: 1.15rem;
  border-radius: 999px;
  background: rgb(var(--color-primary-rgb) / 0.18);
  color: rgb(var(--color-primary-rgb));
  font-size: 0.58rem;
  letter-spacing: 0;
  font-family: var(--tpc-display);
}

body.tpc-portal #sidebar a,
body.tpc-portal #sidebar a.text-gray-600,
body.tpc-portal #sidebar a.text-gray-400 {
  position: relative;
  color: rgb(244 239 228 / 0.86) !important;
  border-radius: 0.8rem !important;
  font-size: 0.84rem;
  font-weight: 600;
  padding: 0.5rem 0.7rem 0.5rem 0.55rem !important;
  gap: 0.65rem !important;
}

body.tpc-portal #sidebar a i {
  display: grid;
  place-items: center;
  width: 1.7rem;
  height: 1.7rem;
  border-radius: 0.55rem;
  background: rgba(244, 239, 228, 0.08);
  color: rgb(244 239 228 / 0.72);
  font-size: 0.72rem;
  flex-shrink: 0;
}

body.tpc-portal #sidebar a:hover {
  background: rgb(244 239 228 / 0.08) !important;
  color: var(--tpc-cream) !important;
}

body.tpc-portal #sidebar a:hover i {
  background: rgb(244 239 228 / 0.14);
  color: var(--tpc-cream);
}

body.tpc-portal #sidebar a.text-primary,
body.tpc-portal #sidebar a.bg-primary\/10,
body.tpc-portal #sidebar a.bg-primary\/20,
body.tpc-portal #sidebar a.font-semibold.text-primary {
  background: var(--tpc-cream) !important;
  color: var(--tpc-nav) !important;
  box-shadow: 0 8px 18px rgba(12, 20, 6, 0.22);
}

body.tpc-portal #sidebar a.text-primary::before,
body.tpc-portal #sidebar a.bg-primary\/10::before,
body.tpc-portal #sidebar a.bg-primary\/20::before {
  content: "";
  position: absolute;
  left: 0.28rem;
  top: 0.42rem;
  bottom: 0.42rem;
  width: 3px;
  border-radius: 99px;
  background: rgb(var(--color-primary-rgb));
}

body.tpc-portal #sidebar a.text-primary i,
body.tpc-portal #sidebar a.bg-primary\/10 i,
body.tpc-portal #sidebar a.bg-primary\/20 i {
  background: rgb(var(--color-primary-rgb) / 0.16);
  color: rgb(var(--color-primary-rgb));
}

body.tpc-portal #sidebar .tpc-sidebar-foot {
  margin: 0.35rem 0.85rem 0.85rem;
  padding: 0 !important;
  border: 0 !important;
}

body.tpc-portal #sidebar #logout-btn {
  color: rgb(244 239 228 / 0.72) !important;
  border-radius: 0.9rem !important;
  border: 1px solid rgba(244, 239, 228, 0.14);
  background: rgba(244, 239, 228, 0.04);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-size: 0.68rem;
  padding: 0.7rem 0.85rem !important;
}

body.tpc-portal #sidebar #logout-btn:hover {
  background: rgba(127, 29, 29, 0.42) !important;
  border-color: transparent;
  color: #fecaca !important;
}

body.tpc-portal #sidebar.sidebar-rail .tpc-sidebar-head {
  margin: 0;
  padding: 0.85rem 0.45rem 0.7rem !important;
  justify-content: center;
}

body.tpc-portal #sidebar.sidebar-rail .tpc-sidebar-foot {
  margin: 0.3rem 0.4rem 0.55rem;
}

body.tpc-portal #sidebar.sidebar-rail nav {
  padding-left: 0.4rem;
  padding-right: 0.4rem;
}

body.tpc-portal #sidebar.sidebar-rail .tpc-nav-block {
  padding: 0.3rem 0.2rem;
}

body.tpc-portal #sidebar.sidebar-rail nav a {
  font-size: 0;
  justify-content: center;
  padding-left: 0.35rem !important;
  padding-right: 0.35rem !important;
}

body.tpc-portal #sidebar.sidebar-rail nav a::before {
  display: none;
}

body.tpc-portal #sidebar.sidebar-rail nav a i {
  font-size: 0.78rem;
}

body.tpc-portal #sidebar.sidebar-rail #logout-btn {
  font-size: 0;
  letter-spacing: 0;
  padding: 0.65rem 0.35rem !important;
}

body.tpc-portal #sidebar.sidebar-rail #logout-btn i {
  font-size: 0.9rem;
}

body.tpc-portal #portal-shell {
  background: var(--tpc-cream);
}

body.tpc-portal #portal-shell > header {
  background: #fffdf8 !important;
  border-bottom-color: rgba(20, 33, 10, 0.1) !important;
}

body.tpc-portal #page-title {
  font-family: var(--tpc-display);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tpc-nav) !important;
}

body.tpc-portal #user-avatar {
  border-radius: 999px !important;
  background: rgb(var(--color-primary-rgb)) !important;
  color: #1a2e05 !important;
}

body.tpc-portal #user-role-badge {
  border-radius: 999px;
}

body.tpc-portal:not(.auth-bg) main {
  background: var(--tpc-cream);
}

body.tpc-portal.auth-bg main {
  background: transparent;
}

body.tpc-portal .bg-white {
  background: #fffdf8 !important;
}

body.tpc-portal .border-gray-200,
body.tpc-portal .border-gray-100 {
  border-color: rgba(20, 33, 10, 0.1) !important;
}

body.tpc-portal .rounded-xl,
body.tpc-portal .rounded-2xl {
  border-radius: 1.05rem !important;
}

body.tpc-portal .shadow-sm {
  box-shadow: 0 10px 28px rgba(20, 33, 10, 0.06) !important;
}

body.tpc-portal h2,
body.tpc-portal h3 {
  color: var(--tpc-nav);
}

body.tpc-portal .bg-primary {
  color: #1a2e05;
}

body.tpc-portal button.bg-primary,
body.tpc-portal a.bg-primary {
  border-radius: 999px;
  font-weight: 800;
  letter-spacing: 0.04em;
}

body.tpc-portal .msg-sidebar-head h2 {
  font-family: var(--tpc-display);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* —— Guides —— */
body.tpc-portal.tpc-guide {
  background: var(--tpc-cream);
  color: var(--tpc-ink);
}

body.tpc-portal.tpc-guide > header.no-print,
body.tpc-portal.tpc-guide > header {
  background: var(--tpc-nav) !important;
  border-color: transparent !important;
}

body.tpc-portal.tpc-guide > header a {
  color: var(--tpc-cream) !important;
}

body.tpc-portal.tpc-guide h1 {
  font-family: var(--tpc-display);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tpc-nav);
}

body.tpc-portal.tpc-guide .bg-white {
  background: #fffdf8 !important;
}