/* ==========================================================
   Hexacode Academy CRM - Stylesheet
   Brand colors default to logo: Dark #2B2D32 / Orange #E5781F
   All colors driven by CSS variables so theme is customizable
   from Settings > Theme & Branding.
   ========================================================== */

:root{
  --hx-primary: #E5781F;
  --hx-primary-dark: #c8630f;
  --hx-primary-soft: #FDEBDA;
  --hx-dark: #2B2D32;
  --hx-light: #FFF9F4;
  --hx-sidebar: #FFFFFF;
  --hx-sidebar-text: #6b6d74;
  --hx-border: #F0E6DA;
  --hx-radius: 14px;
  --hx-sidebar-width: 250px;
}

*{ box-sizing:border-box; }

body{
  font-family:'Poppins', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  background:var(--hx-light);
  color:#2c2e33;
  margin:0;
}

a{ text-decoration:none; }

/* ---------------- Layout ---------------- */
.hx-app{ display:flex; min-height:100vh; }

.hx-sidebar{
  width:var(--hx-sidebar-width);
  background:var(--hx-sidebar);
  color:var(--hx-sidebar-text);
  border-right:1px solid var(--hx-border);
  position:fixed;
  top:0; left:0; bottom:0;
  display:flex;
  flex-direction:column;
  z-index:1030;
  transition:transform .25s ease;
}

.hx-sidebar-brand{
  padding:22px 20px;
  border-bottom:1px solid var(--hx-border);
}
.hx-logo{ max-width:100%; height:34px; }

.hx-nav{ flex:1; padding:14px 10px; overflow-y:auto; }

.hx-nav-divider{
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:#c3ae9a;
  padding:16px 14px 6px;
  font-weight:600;
}

.hx-nav-link{
  display:flex;
  align-items:center;
  gap:12px;
  padding:11px 14px;
  border-radius:10px;
  color:var(--hx-sidebar-text);
  font-size:14.5px;
  font-weight:500;
  margin-bottom:2px;
  border-left:3px solid transparent;
  transition:.15s;
}
.hx-nav-link i{ font-size:17px; width:20px; text-align:center; color:#c9ab8c; }
.hx-nav-link:hover{ background:#FBF4EC; color:var(--hx-dark); }
.hx-nav-link.active{
  background:var(--hx-primary-soft);
  color:var(--hx-primary-dark);
  border-left:3px solid var(--hx-primary);
  font-weight:600;
}
.hx-nav-link.active i{ color:var(--hx-primary); }

.hx-sidebar-footer{ padding:14px 10px; border-top:1px solid var(--hx-border); }

.hx-main{
  margin-left:var(--hx-sidebar-width);
  flex:1;
  min-width:0;
  display:flex;
  flex-direction:column;
}

.hx-topbar{
  height:66px;
  background:#fff;
  border-bottom:1px solid var(--hx-border);
  display:flex;
  align-items:center;
  gap:16px;
  padding:0 24px;
  position:sticky;
  top:0;
  z-index:1020;
}
.hx-page-title{ font-size:19px; font-weight:600; margin:0; color:var(--hx-dark); flex:1; }
.hx-burger{ background:none; border:none; font-size:22px; color:var(--hx-dark); }
.hx-user-chip{ font-size:14px; font-weight:500; color:#555; display:flex; align-items:center; gap:6px; }
.hx-user-chip i{ font-size:20px; color:var(--hx-primary); }

.hx-content{ padding:24px; flex:1; }

@media (max-width: 991.98px){
  .hx-sidebar{ transform:translateX(-100%); }
  .hx-sidebar.show{ transform:translateX(0); }
  .hx-main{ margin-left:0; }
}

/* ---------------- Cards ---------------- */
.hx-card{
  background:#fff;
  border:1px solid var(--hx-border);
  border-radius:var(--hx-radius);
  padding:20px;
}

.hx-stat-card{
  background:#fff;
  border-radius:var(--hx-radius);
  padding:20px;
  border:1px solid var(--hx-border);
  display:flex;
  align-items:center;
  gap:16px;
  height:100%;
}
.hx-stat-icon{
  width:52px; height:52px;
  border-radius:14px;
  display:flex; align-items:center; justify-content:center;
  font-size:22px;
  flex-shrink:0;
}
.hx-icon-orange{ background:#FDEBDA; color:#E5781F; }
.hx-icon-blue{   background:#DFEBFF; color:#0d6efd; }
.hx-icon-green{  background:#DEF3E6; color:#198754; }
.hx-icon-amber{  background:#FEEBD9; color:#fd7e14; }
.hx-icon-purple{ background:#EDE3FA; color:#6f42c1; }
.hx-icon-cyan{   background:#DBF4FA; color:#0dabc4; }
.hx-icon-red{    background:#FBE1E3; color:#dc3545; }
.hx-icon-dark{   background:#E9E9EB; color:#2B2D32; }
.hx-icon-teal{   background:#DCF3F1; color:#20A39E; }
.hx-stat-value{ font-size:24px; font-weight:700; color:var(--hx-dark); line-height:1.2; }
.hx-stat-label{ font-size:13px; color:#888; font-weight:500; }

/* ---------------- Buttons ---------------- */
.btn-hx-primary{
  background:var(--hx-primary);
  border-color:var(--hx-primary);
  color:#fff;
  font-weight:500;
}
.btn-hx-primary:hover{
  background:var(--hx-primary-dark);
  border-color:var(--hx-primary-dark);
  color:#fff;
}
.btn-hx-outline{
  border:1.5px solid var(--hx-primary);
  color:var(--hx-primary);
  background:transparent;
  font-weight:500;
}
.btn-hx-outline:hover{ background:var(--hx-primary); color:#fff; }

/* ---------------- Badges (ExtraEdge style pills) ---------------- */
.hx-badge{
  display:inline-block;
  padding:4px 12px;
  border-radius:20px;
  font-size:12px;
  font-weight:600;
  letter-spacing:.02em;
  white-space:nowrap;
}
.hx-badge-outline{
  background:transparent !important;
  border:1.5px solid currentColor;
}

/* ---------------- Tables ---------------- */
.hx-table-wrap{
  background:#fff;
  border-radius:var(--hx-radius);
  border:1px solid var(--hx-border);
  overflow:hidden;
}
.table.hx-table{ margin-bottom:0; }
.table.hx-table thead th{
  background:#fafafa;
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.04em;
  color:#8a8b90;
  font-weight:600;
  border-bottom:1px solid var(--hx-border);
  padding:13px 16px;
  white-space:nowrap;
}
.table.hx-table tbody td{
  padding:13px 16px;
  vertical-align:middle;
  font-size:14px;
  border-bottom:1px solid #f1f1f3;
}
.table.hx-table tbody tr:hover{ background:#fbfaf9; }
.hx-lead-name{ font-weight:600; color:var(--hx-dark); }
.hx-lead-sub{ font-size:12.5px; color:#9a9a9f; }

.hx-avatar{
  width:34px; height:34px;
  border-radius:50%;
  background:var(--hx-primary);
  color:#fff;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:13px;
  font-weight:700;
  text-transform:uppercase;
}

/* ---------------- Auth / Login ---------------- */
.hx-auth-wrap{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  background:
    radial-gradient(circle at 15% 20%, rgba(229,120,31,.10) 0, transparent 40%),
    radial-gradient(circle at 85% 80%, rgba(43,45,50,.06) 0, transparent 45%),
    var(--hx-light);
  padding:20px;
}
.hx-auth-card{
  background:#fff;
  border-radius:20px;
  padding:40px;
  width:100%;
  max-width:400px;
  box-shadow:0 20px 60px rgba(43,45,50,.10);
  border:1px solid var(--hx-border);
}
.hx-auth-logo{ text-align:center; margin-bottom:26px; }
.hx-auth-logo img{ height:44px; }

/* ---------------- Misc ---------------- */
.hx-section-title{
  font-size:15px;
  font-weight:600;
  color:var(--hx-dark);
  margin-bottom:14px;
  display:flex; align-items:center; gap:8px;
}
.hx-section-title i{ color:var(--hx-primary); }

.hx-color-swatch{
  width:38px; height:38px;
  border-radius:8px;
  border:2px solid #fff;
  box-shadow:0 0 0 1px var(--hx-border);
  cursor:pointer;
}

.hx-drop-zone{
  border:2px dashed #d6d6da;
  border-radius:14px;
  padding:40px 20px;
  text-align:center;
  color:#9a9a9f;
  transition:.15s;
  cursor:pointer;
}
.hx-drop-zone.dragover{ border-color:var(--hx-primary); background:#fff7f0; color:var(--hx-primary); }

.hx-pipeline-pill{
  display:inline-flex; align-items:center; gap:6px;
  padding:5px 10px; border-radius:8px; font-size:12.5px; font-weight:600;
  background:#fff; border:1px solid var(--hx-border); margin-right:4px;
}
.hx-dot{ width:9px; height:9px; border-radius:50%; display:inline-block; }

.hx-timeline{ position:relative; padding-left:28px; }
.hx-timeline::before{
  content:''; position:absolute; left:9px; top:4px; bottom:4px; width:2px; background:var(--hx-border);
}
.hx-timeline-item{ position:relative; margin-bottom:18px; }
.hx-timeline-item::before{
  content:''; position:absolute; left:-28px; top:4px; width:12px; height:12px; border-radius:50%;
  background:var(--hx-primary); border:2px solid #fff; box-shadow:0 0 0 2px var(--hx-primary);
}
.hx-timeline-time{ font-size:12px; color:#9a9a9f; }

.nowrap{ white-space:nowrap; }

/* ==========================================================
   PUBLIC "BOOK YOUR DEMO CLASS" PAGE
   ========================================================== */
.hx-pub-topbar{
  background:var(--hx-primary);
  color:#fff;
  font-size:12.5px;
  padding:7px 24px;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:10px;
}
.hx-pub-live{
  background:#fff;
  color:#e11d5f;
  font-weight:700;
  font-size:11px;
  padding:3px 12px;
  border-radius:20px;
  letter-spacing:.04em;
}
.hx-pub-cta{
  background:#e11d5f;
  color:#fff;
  font-weight:600;
  font-size:12.5px;
  padding:5px 16px;
  border-radius:20px;
}
.hx-pub-nav{
  background:#fff;
  border-bottom:1px solid var(--hx-border);
  padding:14px 24px;
  display:flex;
  align-items:center;
  gap:32px;
}
.hx-pub-nav img{ height:32px; }
.hx-pub-nav a{ color:#3a3b40; font-size:14.5px; font-weight:500; }
.hx-pub-nav a:hover{ color:var(--hx-primary); }

.hx-pub-hero{
  position:relative;
  overflow:hidden;
  padding:56px 24px 70px;
  background:
    radial-gradient(circle at 8% 15%, rgba(229,120,31,.08) 0, transparent 35%),
    radial-gradient(circle at 92% 85%, rgba(43,45,50,.05) 0, transparent 40%),
    var(--hx-light);
}
.hx-pub-hero-inner{
  max-width:1100px;
  margin:0 auto;
  display:grid;
  grid-template-columns:1.1fr 1fr;
  gap:40px;
  align-items:start;
  position:relative;
  z-index:1;
}
@media (max-width: 991.98px){ .hx-pub-hero-inner{ grid-template-columns:1fr; } }

.hx-pub-badge{
  display:inline-flex; align-items:center; gap:6px;
  background:var(--hx-primary-soft); color:var(--hx-primary-dark);
  font-size:12.5px; font-weight:600; padding:6px 14px; border-radius:20px;
  margin-bottom:16px;
}
.hx-pub-title{ font-size:clamp(28px,4vw,40px); font-weight:700; color:var(--hx-dark); line-height:1.2; margin-bottom:14px; }
.hx-pub-title span{ color:var(--hx-primary); }
.hx-pub-sub{ color:#75767c; font-size:15.5px; margin-bottom:24px; max-width:480px; }
.hx-pub-points{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:12px; }
.hx-pub-points li{ display:flex; align-items:center; gap:10px; font-size:14.5px; color:#4a4b50; font-weight:500; }
.hx-pub-points i{ color:var(--hx-primary); font-size:18px; }

.hx-pub-form-card{
  background:#fff;
  border-radius:20px;
  padding:30px;
  box-shadow:0 20px 60px rgba(43,45,50,.12);
  border:1px solid var(--hx-border);
}
.hx-pub-form-card h4{ font-weight:700; color:var(--hx-dark); margin-bottom:4px; }
.hx-pub-form-card .sub{ color:#8a8b90; font-size:13.5px; margin-bottom:20px; }

.hx-mode-toggle{ display:flex; gap:10px; margin-bottom:4px; }
.hx-mode-option{
  flex:1;
  border:1.5px solid var(--hx-border);
  border-radius:12px;
  padding:12px;
  text-align:center;
  cursor:pointer;
  font-size:13.5px;
  font-weight:600;
  color:#8a8b90;
  transition:.15s;
}
.hx-mode-option i{ display:block; font-size:20px; margin-bottom:4px; }
.hx-mode-option.active{
  border-color:var(--hx-primary);
  background:var(--hx-primary-soft);
  color:var(--hx-primary-dark);
}

.hx-pub-success{
  max-width:520px; margin:80px auto; text-align:center;
  background:#fff; border-radius:20px; padding:48px 36px;
  box-shadow:0 20px 60px rgba(43,45,50,.12); border:1px solid var(--hx-border);
}
.hx-pub-success .icon{
  width:76px; height:76px; border-radius:50%; background:#DEF3E6; color:#198754;
  display:flex; align-items:center; justify-content:center; font-size:36px; margin:0 auto 20px;
}

.hx-pub-footer{ text-align:center; padding:24px; color:#a3a4a9; font-size:13px; }