/* =========================
   THEME TOKENS
========================= */
:root{
  --gh-bg:#0b0f17;
  --gh-border: rgba(255,255,255,.08);
  --gh-text: rgba(255,255,255,.92);
  --gh-muted: rgba(255,255,255,.65);
  --gh-accent:#ffb300;
  --gh-accent2:#ff7a18;

  /* spacing for mobile */
  --gh-radius: 22px;
  --gh-nav-h: 76px;
}

/* Mobile rendering fixes */
*,
*::before,
*::after{ box-sizing: border-box; }

html, body{
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

.gh-body{
  min-height: 100vh;
  background:
    radial-gradient(900px 500px at 10% -10%, rgba(255,179,0,.20), transparent 60%),
    radial-gradient(900px 500px at 90% 10%, rgba(255,122,24,.18), transparent 55%),
    radial-gradient(700px 500px at 50% 120%, rgba(99,102,241,.10), transparent 60%),
    var(--gh-bg);
  color: var(--gh-text);
  -webkit-text-size-adjust: 100%;
}

/* =========================
   NAV
========================= */
.gh-nav{
  background: rgba(10,14,24,.72);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--gh-border);
}

.gh-toggler{
  border: 1px solid var(--gh-border);
  border-radius: 12px;
}

/* Bootstrap navbar links */
.navbar .nav-link{
  color: var(--gh-muted);
  padding: .6rem .8rem; /* better tap target */
}
.navbar .nav-link:hover{ color: var(--gh-text); }
.navbar .nav-link:focus-visible{
  outline: 2px solid rgba(255,179,0,.55);
  outline-offset: 3px;
  border-radius: 12px;
}

/* Fix collapsed nav on mobile (Bootstrap) */
.navbar-collapse{
  background: rgba(10,14,24,.65);
  border: 1px solid var(--gh-border);
  border-radius: 18px;
  padding: .75rem;
}

/* =========================
   BRAND
========================= */
/* Logo container */
.gh-logo{
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Logo image */
.gh-logo img{
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Brand text */
.gh-brand-text{
  font-weight: 700;
  font-size: 1.4rem;
  letter-spacing: 0.5px;
  background: linear-gradient(90deg, #848484, #ff7a00);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
/* =========================
   CARDS / UI
========================= */
.gh-card{
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  border: 1px solid var(--gh-border);
  border-radius: var(--gh-radius);
  overflow: hidden;
  box-shadow: 0 18px 55px rgba(0,0,0,.35);
}

.gh-chip{
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  padding:.35rem .6rem;
  border-radius: 999px;
  border: 1px solid var(--gh-border);
  background: rgba(255,255,255,.03);
  color: var(--gh-muted);
  font-size: .85rem;
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

.gh-btn,
.gh-btn-soft{
  border-radius: 14px;
  padding: .7rem 1rem;
  min-height: 44px; /* mobile tap target */
}

.gh-btn{
  border: 1px solid rgba(255,179,0,.35);
  background: linear-gradient(135deg, rgba(255,179,0,.95), rgba(255,122,24,.92));
  color:#1b1400;
  font-weight: 900;
  box-shadow: 0 14px 35px rgba(255,179,0,.15);
}
.gh-btn:hover{ filter: brightness(1.04); }
.gh-btn:active{ transform: translateY(1px); }

.gh-btn-soft{
  border: 1px solid var(--gh-border);
  background: rgba(255,255,255,.04);
  color: var(--gh-text);
}

.gh-alert{
  border: 1px solid var(--gh-border);
  background: rgba(255,255,255,.04);
  color: var(--gh-text);
  border-radius: 16px;
}

.gh-badge{
  border: 1px solid var(--gh-border);
  background: rgba(255,255,255,.03);
  color: var(--gh-muted);
  border-radius: 999px;
  padding: .45rem .6rem;
  max-width: 100%;
}

/* =========================
   HERO
========================= */
.gh-hero-title{
  font-size: clamp(1.5rem, 2.3vw, 2.5rem);
  line-height: 1.1;
  font-weight: 900;
  letter-spacing: -.02em;
  word-break: break-word;
}

.gh-hero-sub{
  color: var(--gh-muted);
  max-width: 56ch;
}

/* =========================
   KPI
========================= */
.gh-kpi{
  border: 1px solid var(--gh-border);
  background: rgba(255,255,255,.03);
  border-radius: 18px;
  padding: .9rem 1rem;
  min-width: 0;
}

/* =========================
   IMAGES
========================= */
.gh-img{
  width:100%;
  height: 260px;
  object-fit: cover;
  display:block;
}

/* prevent tall images on small screens */
@media (max-width: 576px){
  .gh-img{ height: 210px; }
}

/* =========================
   CATEGORY TILE
========================= */
.gh-cat{
  border: 1px solid var(--gh-border);
  background: rgba(255,255,255,.03);
  border-radius: 18px;
  padding: 1rem;
  transition: transform .15s ease, background .15s ease, border-color .15s ease;
  text-decoration: none;
  color: var(--gh-text);
  display:block;
  min-width: 0;
}
.gh-cat:hover{
  transform: translateY(-2px);
  background: rgba(255,255,255,.05);
  border-color: rgba(255,179,0,.22);
}

/* =========================
   FOOTER
========================= */
.gh-footer{
  border-top: 1px solid var(--gh-border);
  background: rgba(10,14,24,.55);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* =========================
   BOOTSTRAP FORMS
========================= */
.form-control,
.form-select,
.input-group-text{
  background: rgba(255,255,255,.03) !important;
  border: 1px solid var(--gh-border) !important;
  color: var(--gh-text) !important;
  border-radius: 14px !important;
  min-height: 44px; /* tap target */
}

.form-control::placeholder{ color: rgba(255,255,255,.45); }

/* Fix select arrow visibility on dark bg in some browsers */
.form-select{
  color-scheme: dark;
}

/* =========================
   BOTTOM NAV (MOBILE)
========================= */
/* Centered pill bottom nav */
.gh-bottom-nav{
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(14px + env(safe-area-inset-bottom));
  z-index: 9999;

  width: min(520px, calc(100vw - 24px));
  padding: 10px;
  border-radius: 22px;

  background: rgba(10,14,24,.72);
  border: 1px solid var(--gh-border);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 18px 55px rgba(0,0,0,.45);

  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr; /* equal tabs */
  gap: 8px;
}

/* Each tab */
.gh-bottom-nav a{
  text-decoration: none;
  color: var(--gh-muted);

  display: grid;
  justify-items: center;
  align-content: center;

  padding: 10px 6px;
  border-radius: 16px;
  min-height: 56px;       /* consistent height */
  line-height: 1.1;
  text-align: center;
}

/* Icon */
.gh-bottom-nav a i{
  display: block;
  font-size: 20px;
  margin-bottom: 6px;
}

/* Label */
.gh-bottom-nav a span{
  display: block;
  font-size: 12px;
  letter-spacing: .2px;
}

/* Active tab */
.gh-bottom-nav a.active{
  color: #141414;
  background: linear-gradient(135deg, var(--gh-accent), var(--gh-accent2));
  font-weight: 900;
}

/* Keep content above the nav */
@media (max-width: 991px){
  main{ padding-bottom: calc(120px + env(safe-area-inset-bottom)); }
}

/* Give room for bottom nav on smaller viewports */
@media (max-width: 991px){
  main{
    padding-bottom: calc(110px + env(safe-area-inset-bottom));
  }
}

/* =========================
   ACCESSIBILITY / REDUCED MOTION
========================= */
@media (prefers-reduced-motion: reduce){
  *{ transition: none !important; scroll-behavior: auto !important; }
}

/* Chat wrapper */
.gh-chat-area{
  background: rgba(255,255,255,.02);
  border-radius: 18px;
}

/* Base bubble */
.chat-bubble{
  padding: 10px 14px;
  border-radius: 18px;
  max-width: 85%;
  font-size: 14px;
  line-height: 1.4;
  position: relative;
  word-break: break-word;
}

/* USER message (right side) */
.chat-user{
  background: linear-gradient(135deg, var(--gh-accent), var(--gh-accent2));
  color: #141414;
  border-bottom-right-radius: 6px;
}

/* ADMIN message (left side) */
.chat-admin{
  background: rgba(255,255,255,.06);
  border: 1px solid var(--gh-border);
  color: var(--gh-text);
  border-bottom-left-radius: 6px;
}

/* Sender name + time */
.chat-meta{
  font-size: 11px;
  opacity: .7;
  margin-bottom: 4px;
}
/* Chat bubbles */
.chat-bubble{
  padding: 10px 14px;
  border-radius: 18px;
  max-width: 85%;
  font-size: 14px;
  line-height: 1.4;
  word-break: break-word;
}
.chat-meta{
  font-size: 11px;
  opacity: .75;
  margin-bottom: 4px;
}

/* USER bubble = yellow/orange */
.chat-user{
  background: linear-gradient(135deg, var(--gh-accent), var(--gh-accent2));
  color: #141414;
  border-bottom-right-radius: 7px;
}

/* ADMIN bubble = dark glass */
.chat-admin{
  background: rgba(255,255,255,.06);
  border: 1px solid var(--gh-border);
  color: var(--gh-text);
  border-bottom-left-radius: 7px;
}

/* Collapsible GH Cards (minimized by default) */
.gh-acc {
  border: 1px solid var(--gh-border);
  border-radius: 16px;
  background: rgba(255,255,255,0.02);
}

.gh-acc summary {
  list-style: none;
  cursor: pointer;
  user-select: none;
  padding: 14px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.gh-acc summary::-webkit-details-marker { display: none; }

.gh-acc .gh-acc-left {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.gh-acc .gh-acc-title {
  font-weight: 800;
  font-size: 1.1rem;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.gh-acc .gh-acc-sub {
  color: rgba(255,255,255,0.55);
  font-size: .85rem;
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.gh-acc .gh-acc-caret {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  border: 1px solid var(--gh-border);
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  background: rgba(255,255,255,0.02);
  transition: transform .15s ease;
}

.gh-acc[open] .gh-acc-caret { transform: rotate(180deg); }

.gh-acc .gh-acc-body {
  padding: 0 14px 14px 14px;
}

/* Search bar */
.gh-search {
  border: 1px solid var(--gh-border);
  border-radius: 14px;
  background: rgba(255,255,255,0.02);
  padding: 10px 12px;
  display: flex;
  gap: 10px;
  align-items: center;
}

.gh-search input {
  background: transparent;
  border: 0;
  outline: 0;
  color: var(--gh-text);
  width: 100%;
}

.gh-muted {
  color: rgba(255,255,255,0.55);
  font-size: .85rem;
}