/* Global Body */
body {
  font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, 'Helvetica Neue', Arial, 'Noto Sans', 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
background:#f8f9fa;
}

/* Heading sizes per your spec */
h1, .h1 { font-size: 20px; line-height: 1.3; font-weight: 600; }
h2, .h2 { font-size: 14px; line-height: 1.35; font-weight: 600; }

/* Optional: tighten table fonts slightly for CRM look */
.table.hc-table td, .table.hc-table th { font-size: 14px; }


:root {
--black: #0a0a0a;
  --blue: #1a237e;
  --light-blue: #3949ab;
  --purple: #6366f1;
  --green: #00c853;
}

/* Logo Styles */
.logo-circle {
  width: 32px;
  height: 32px;
  background-color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}


  /* Left hero gradient (your colors) */
    .hf-hero {
      background: linear-gradient(180deg, #3949ab, #0a0a0a);
      color: #fff;
      min-height: 100vh;

    }

    /* Keep content centered nicely on xl screens */
    .hf-wrap { min-height: 100vh;}
    

    /* Headline */
    .hf-hero h1 {
      font-weight: 700;
      letter-spacing: .2px;
      line-height: 1.15;
    }

    /* Divider with text */
    .hf-divider {
      display: flex; align-items: center; gap: .75rem;
      margin: 1.25rem 0;
    }
    .hf-divider::before, .hf-divider::after {
      content: ""; height: 1px; background: #e9ecef; flex: 1;
    }
    .hf-divider span { color: #6c757d; font-size: .85rem; }


    /* Small tweaks */
    .form-label { font-weight: 500; }
    .hf-card { border: 0; border-radius: 1rem; box-shadow: 0 12px 40px rgba(0,0,0,.08); }
    .hf-forgot { text-decoration: none; }

/* Make input + button borders consistent */
.input-group .form-control,
.input-group .btn {
  border-color: #ced4da; /* same as default input border */
  box-shadow: none;      /* remove focus shadow unless wanted */
}

/* When focusing inside input group */
.input-group:focus-within .form-control,
.input-group:focus-within .btn {
  border-color: #0d6efd; /* Bootstrap primary blue on focus */
}

/* Match input background */
#togglePassword {
  background-color: #fff;
  color: #6c757d;
}
#togglePassword:hover {
  background-color: #f8f9fa;
  color: #0d6efd; /* highlight eye on hover */
}

/* Shell */
.hf-shell { background:#f6f7f9; min-height:100vh; }
.hf-topbar {
  height:56px; display:flex; align-items:center; background:#fff; border-bottom:1px solid #e9ecef;
  position:sticky; top:0; z-index:1020;
}
.hf-top-search { width:260px; }

/* Layout grid */
.hf-body { display:flex; min-height: calc(100vh - 56px); }
.hf-sidebar {
  width: 240px; background:#fff; border-right:1px solid #e9ecef; padding: .75rem;
}
.hf-main { flex:1; padding: 1rem 1.25rem; }

/* Collapse behavior */
.hf-sidebar .nav-link { color:#495057; border-radius:.5rem; padding:.5rem .75rem; }
.hf-sidebar .nav-link:hover { background:#f1f3f5; }
.hf-sidebar .nav-link.active { background:#0d6efd; color:#fff; }
.hf-sidebar .nav-link.active i { color:#fff; }

.hf-sidebar-collapsed .hf-sidebar { width: 68px; }
.hf-sidebar-collapsed .hf-sidebar .nav-link { text-overflow:ellipsis; white-space:nowrap; overflow:hidden; }
.hf-sidebar-collapsed .hf-sidebar .nav-link .bi { margin-right:0 !important; }
.hf-sidebar-collapsed .hf-sidebar .nav-link { text-align:center; }
.hf-sidebar-collapsed .hf-sidebar .nav-link i + span { display:none; }

/* Logo circle (as per your spec) */
.logo-circle {
  width: 32px; height:32px; background:#fff; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
}

/* Cards default */
.card.hf-card { border:0; border-radius:1rem; box-shadow: 0 8px 28px rgba(0,0,0,.06); }

/* Responsive tweak */
@media (max-width: 991.98px) {
  .hf-sidebar { position: fixed; left: 0; top: 56px; bottom: 0; transform: translateX(-100%); transition: transform .2s ease; z-index: 1040; }
  .hf-sidebar.show { transform: translateX(0); }
}
/* haioflow.css */

/* ---------- Topbar ---------- */
.hc-topbar {
  background: #f8f9fa;
  border-bottom: 1px solid #e9ecef;
}

/* Fluid brand badge that scales with viewport */
.hc-brand-badge {
  --badge: clamp(28px, 3.2vw, 44px);   /* fluid size */
  width: var(--badge);
  height: var(--badge);

  aspect-ratio: 1 / 1;                 /* 🔑 always equal width & height */
  border-radius: 50%;                  /* circle */
  flex-shrink: 0;                      /* prevent flexbox from squashing it */

  background: #111827;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  letter-spacing: .5px;
  font-size: calc(var(--badge) * 0.45);
  line-height: 1;
}

.hc-subtitle {
  color: #6b7280;
  font-size: .85rem;
}

/* Icon-only buttons in topbar */
.hc-icon-btn {
  background: transparent;
  border: none;
  padding: .5rem;
  border-radius: .5rem; /* keep rounded corners */
  color: #111827;        /* default icon color */
  transition: background-color .2s ease, color .2s ease;
  font-size: 1,rem;
}

.hc-icon-btn:hover,
.hc-icon-btn:focus {
  background: var(--purple); /* fallback to purple if --bs-purple missing */
  color: #fff;
}

.hc-icon-btn:active {
  background: #5a189a; /* darker purple when pressed */
  color: #fff;
}

/* ---------- Cards ---------- */
.hc-card {
  border: 1px solid #e9ecef;
  border-radius: 14px;
  background: #fff;
}

/* ---------- Floating Action Button ---------- */
.hc-fab {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 1080; /* above content, below modal (1055 is offcanvas default backdrop) */
}

.hc-fab .btn {
  width: 56px;
  height: 56px;
  border-radius: 18px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .15);
}

/* ---------- Offcanvas Menu ---------- */
.offcanvas.hc-menu {
  width: 340px;
  border-left: 1px solid #e9ecef;
}
.hc-menu .accordion-button {
  font-weight: 600;
}
.hc-menu a.list-group-item {
  border: 0;
  padding-left: 1.25rem;
}


/* ---------- Accordion Styling ---------- */
.hc-menu .accordion-item {
  border: 0;                       /* remove outer borders */
  background: transparent;          /* no background blocks */
}

.hc-menu .accordion-button {
  background: transparent;          /* remove Bootstrap grey */
  border: 0;
  font-weight: 600;
  color: #111827;                   /* dark text */
  padding: .75rem 1rem;
  box-shadow: none;                 /* no inset shadow */
  transition: background-color .2s ease, color .2s ease;
}

.hc-menu .accordion-button::after {
  filter: invert(0.5);              /* make caret icon darker */
}

.hc-menu .accordion-button:not(.collapsed) {
  color: var(--bs-purple, rebeccapurple);
  background: rgba(111, 66, 193, 0.08); /* light purple tint */
  box-shadow: none;
}

.hc-menu .accordion-button:hover {
  background: rgba(111, 66, 193, 0.1);  /* hover effect */
}

.hc-menu .accordion-body {
  padding: 0;                       /* tighter fit */
}

/* Submenu links */
.hc-menu .list-group-item {
  font-size: .95rem;
  padding: .5rem 1.25rem;
  color: #374151;                    /* slate grey */
  transition: background-color .2s ease, color .2s ease;
}

.hc-menu .list-group-item:hover {
  background: rgba(111, 66, 193, 0.08);
  color: var(--bs-purple, rebeccapurple);
}

/* Kill any inherited transform just in the topbar breadcrumb */
.hc-topbar nav[aria-label="breadcrumb"],
.hc-topbar nav[aria-label="breadcrumb"] * {
  text-transform: none !important;
}

/* Style breadcrumb links */
.hc-topbar .breadcrumb .breadcrumb-item a {
  text-decoration: none !important;  /* remove underline */
  color: #6c757d !important;         /* Bootstrap grey (muted) */
}

/* If you want the active breadcrumb also grey (not bold) */
.hc-topbar .breadcrumb .breadcrumb-item.active {
  color: #6c757d !important;
  font-weight: normal;
}


.hc-brand-badge { --badge: 28px; width: var(--badge); height: var(--badge); font-size: calc(var(--badge)*0.45); }
@media (min-width: 576px) { .hc-brand-badge { --badge: 32px; } }
@media (min-width: 768px) { .hc-brand-badge { --badge: 36px; } }
@media (min-width: 992px) { .hc-brand-badge { --badge: 40px; } }
@media (min-width:1200px) { .hc-brand-badge { --badge: 44px; } }

    .otp-grid { display:flex; gap:.5rem; }
    .otp-grid input { width: 52px; height: 56px; text-align:center; font-size:1.25rem; letter-spacing:.05em; }
    @media (max-width: 420px){ .otp-grid input{ width:46px; height:52px; } }
    .link-muted { color:#6c757d; text-decoration:none; }
    .link-muted:hover { text-decoration:underline; }

    /* Header & tabs */
.hc-list-header { position: sticky; top: 0; z-index: 101; }
.hc-tabs .nav-link { color:#6c757d; border:0; }
.hc-tabs .nav-link.active { color:#17a34a; border-bottom:2px solid #17a34a; font-weight:600; }

/* Table look */
.table.hc-table thead th { background:#f8fafb; font-weight:600; border-bottom:1px solid #e9ecef; }
.table.hc-table tbody td { border-top:1px solid #f1f3f5; }

/* Logo dot (fake avatar) */
.hc-logo-dot { width:28px; height:28px; border-radius:8px; }
.hc-logo-dot.bg-gradient {
  background: linear-gradient(135deg, #7c4dff 0%, #5b9cff 100%);
  box-shadow: 0 1px 0 rgba(0,0,0,.04), inset 0 0 0 1px rgba(255,255,255,.25);
}

/* Chips/pills */
.chip { display:inline-block; padding:.25rem .5rem; font-size:.75rem; border-radius:.5rem; line-height:1; white-space:nowrap; }
.chip-success { background:#e8f7ee; color:#15803d; border:1px solid #b6e3c6; }
.chip-muted   { background:#f1f3f5; color:#6c757d; border:1px solid #e9ecef; }
.chip-range   { background:#eef2ff; color:#4f46e5; border:1px solid #e0e7ff; }

.dropdown-menu {
  max-height: none !important;
  overflow-y: visible !important;
}

.crm-link {
  color: #212529;
  text-decoration: none;
}
.crm-link:hover {
  color: #0d6efd;
  text-decoration: underline;
  cursor: pointer;
}

/* tabs accent */
.hc-tabs .nav-link { color:#6c757d; border:0; }
.hc-tabs .nav-link.active { color:#17a34a; border-bottom:2px solid #17a34a; font-weight:600; }

/* cards */
.card { border-radius: 14px; }
.hc-logo-dot { width:32px; height:32px; border-radius:8px; }
.hc-logo-dot.bg-gradient { background: linear-gradient(135deg,#7c4dff,#5b9cff); }

/* small tweaks */
dl dt { font-weight:500; }