/* =========================================================
   VastkamTechnology — additions on top of the Nova theme
   Everything here reuses Nova's CSS variables (--bs-primary,
   --bs-secondary, --bs-heading-color, etc.) so it always
   follows whichever palette/light-dark mode Nova is set to.
   ========================================================= */

/* ---- Logo mark (small icon badge used on service/industry cards etc.) ---- */
.vt-logo-mark {
  width: 38px; height: 38px; border-radius: 10px;
  background: var(--bs-primary);
  color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 14px; flex-shrink: 0;
}
.vt-logo-text { font-weight: 700; font-size: 17px; color: var(--bs-heading-color); }
.vt-logo-text span { color: var(--bs-primary); }

/* ---- Site logo image (header/footer brand mark, uploaded by admin) ----
   Height is controlled by --vt-logo-height, set inline per-page from the
   siteContent.logo_height admin field (see header.ejs). Width scales
   automatically via object-fit so it never distorts. ---- */
.vt-logo-img {
  height: var(--vt-logo-height, 38px);
  width: auto;
  max-width: 220px;
  object-fit: contain;
  flex-shrink: 0;
}
@media (max-width: 991.98px) {
  .vt-logo-img { height: calc(var(--vt-logo-height, 38px) * 0.85); }
}

/* ---- Mega menu for Services -----------------------------------------
   IMPORTANT: don't set `display` unconditionally here — Bootstrap's
   .dropdown-menu is `display:none` until Nova's own JS/CSS adds `.show`
   (hover on desktop, click in the offcanvas on mobile). Only lay out
   the *contents* here; visibility stays entirely controlled by Nova.

   SPECIFICITY NOTE: Nova's own CSS targets this element with
   `.fbs__net-navbar .navbar-nav .dropdown > .dropdown-menu` (forcing a
   fixed 200px width) and `...dropdown:hover > .dropdown-menu { display:
   block }` on hover — both more specific than a bare `.vt-mega-menu`
   class, so they were silently winning and collapsing the layout into
   one long vertical list. Matching Nova's own selector chain (plus our
   class) here gives us equal-or-higher specificity so our width/flex
   rules actually win instead. */
.fbs__net-navbar .navbar-nav .dropdown > .dropdown-menu.vt-mega-menu {
  flex-wrap: wrap; gap: 24px;
  padding: 24px !important; width: auto; min-width: 640px; max-width: 720px;
}
.fbs__net-navbar .navbar-nav .dropdown > .dropdown-menu.vt-mega-menu.show { display: flex; }
@media (min-width: 992px) {
  .fbs__net-navbar .navbar-nav .dropdown:hover > .dropdown-menu.vt-mega-menu {
    display: flex;
  }
}
@media (max-width: 991.98px) {
  .fbs__net-navbar .navbar-nav .dropdown > .dropdown-menu.vt-mega-menu {
    min-width: 0; max-width: 100%; flex-direction: column; gap: 16px; padding: 12px 4px !important;
  }
  .fbs__net-navbar .navbar-nav .dropdown > .dropdown-menu.vt-mega-menu.show { display: flex; }
}
.vt-mega-col { flex: 1 1 45%; min-width: 180px; list-style: none; }
.vt-mega-col h5 {
  font-size: 12px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--bs-primary); font-weight: 700; margin-bottom: 10px;
}
.vt-mega-col .dropdown-item { padding: 4px 0; white-space: normal; }

/* ---- Simple horizontal dropdowns (e.g. "Company") — same specificity
   fix as the mega-menu above so Nova's own 200px-width / block-on-hover
   rules don't collapse these into a long vertical list either. ---- */
.fbs__net-navbar .navbar-nav .dropdown > .dropdown-menu.vt-hdropdown {
  flex-wrap: nowrap; gap: 4px;
  padding: 10px !important; width: auto; min-width: 0; max-width: none;
  white-space: nowrap;
}
.fbs__net-navbar .navbar-nav .dropdown > .dropdown-menu.vt-hdropdown.show { display: flex; }
@media (min-width: 992px) {
  .fbs__net-navbar .navbar-nav .dropdown:hover > .dropdown-menu.vt-hdropdown { display: flex; }
}
.vt-hdropdown .dropdown-item { width: auto; border-radius: 8px; padding: 8px 14px; white-space: nowrap; }
@media (max-width: 991.98px) {
  .fbs__net-navbar .navbar-nav .dropdown > .dropdown-menu.vt-hdropdown {
    flex-direction: column; flex-wrap: wrap; white-space: normal;
  }
  .fbs__net-navbar .navbar-nav .dropdown > .dropdown-menu.vt-hdropdown.show { display: flex; }
  .vt-hdropdown .dropdown-item { white-space: normal; }
}

/* ---- Flash messages ---- */
.vt-flash {
  position: fixed; top: 90px; left: 50%; transform: translateX(-50%);
  z-index: 2000; padding: 12px 22px; border-radius: 10px;
  font-size: 14px; font-weight: 500; display: flex; align-items: center; gap: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.15);
}
.vt-flash-success { background: var(--bs-secondary); color: var(--bs-heading-color); }
.vt-flash-error { background: #f8d7da; color: #842029; }

/* ---- Theme toggle button ---- */
.vt-theme-toggle {
  width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid rgba(var(--inverse-color-rgb), .15);
  background: transparent; color: var(--bs-body-color);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; transition: all .2s;
}
.vt-theme-toggle:hover { color: var(--bs-primary); border-color: var(--bs-primary); }

/* ---- Header action buttons ----------------------------------------
   Nova's global `.btn{ padding:12px 20px }` is tuned for large hero
   CTAs and was winning over Bootstrap's `.py-2`, making the header
   buttons oversized. Give the navbar its own compact button sizing,
   matching Nova's own `.fbs__net-navbar .header-social .btn` pattern.

   BUG FIX: Nova's `.fbs__net-navbar .header-social .btn` rule force-sets
   `color: var(--bs-white) !important` on every button in this area
   (written for its own solid teal "Get Started" button). Our outline
   "Live Chat" button reset the background to transparent but couldn't
   beat that !important on color, leaving invisible white-on-white/teal
   text. Every color/border override below needs `!important` to
   actually win against Nova's rule, in both the transparent (top of
   page) and `.active` (scrolled) navbar states. */
.fbs__net-navbar .header-social .btn {
  padding: 9px 18px !important;
  font-size: 0.875rem;
  line-height: 1.3;
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
}
.fbs__net-navbar .header-social .btn-outline-primary,
.fbs__net-navbar.active .header-social .btn-outline-primary {
  background-color: transparent !important;
  border: 1px solid var(--bs-primary) !important;
  color: var(--bs-primary) !important;
}
.fbs__net-navbar .header-social .btn-outline-primary:hover,
.fbs__net-navbar.active .header-social .btn-outline-primary:hover {
  background-color: var(--bs-primary) !important;
  color: #fff !important;
}

/* ---- Navbar fit: with 7 top-level items + actions, give the bar a
   little more breathing room right at the collapse breakpoint so
   nothing wraps or crowds the buttons. ---- */
.fbs__net-navbar .container { max-width: 1240px; }
@media (min-width: 992px) and (max-width: 1120px) {
  .fbs__net-navbar .navbar-nav > li > .nav-link { padding-left: 8px; padding-right: 8px; font-size: 0.875rem; }
  .fbs__net-navbar .header-social .btn { padding: 8px 14px !important; font-size: 0.8125rem; }
}

/* ---- Back to top ---- */
#back-to-top {
  position: fixed; bottom: 24px; left: 24px; z-index: 1500;
  width: 44px; height: 44px; border-radius: 50%; border: none;
  background: var(--bs-primary); color: #fff; font-size: 20px;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; visibility: hidden; transform: translateY(10px);
  transition: all .25s; cursor: pointer; box-shadow: 0 6px 18px rgba(0,0,0,0.2);
}
#back-to-top.show { opacity: 1; visibility: visible; transform: translateY(0); }
#back-to-top:hover { background: var(--bs-primary-hover); }

/* ---- WhatsApp float ---- */
.vt-whatsapp-float {
  position: fixed; bottom: 90px; right: 24px; z-index: 1500;
  width: 56px; height: 56px; background: #25D366; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 20px rgba(37,211,102,0.4);
  color: #fff; font-size: 26px; text-decoration: none;
  transition: transform .2s;
}
.vt-whatsapp-float:hover { transform: scale(1.08); color: #fff; }
.vt-whatsapp-float .vt-tooltip {
  position: absolute; right: 65px; background: var(--bs-heading-color); color: #fff;
  padding: 6px 12px; border-radius: 8px; font-size: 13px; white-space: nowrap;
  opacity: 0; pointer-events: none; transition: opacity .2s;
}
.vt-whatsapp-float:hover .vt-tooltip { opacity: 1; }

/* ---- Chatbot widget ---- */
.vt-chatbot-btn {
  position: fixed; bottom: 24px; right: 24px; z-index: 1500;
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--bs-primary); border: none; color: #fff; font-size: 22px;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  box-shadow: 0 4px 20px rgba(var(--bs-primary-rgb), 0.45);
  transition: transform .2s;
}
.vt-chatbot-btn:hover { transform: scale(1.08); }
.vt-chatbot-window {
  position: fixed; bottom: 90px; right: 24px; z-index: 1600;
  width: 360px; max-width: calc(100vw - 32px); max-height: 500px; border-radius: 16px;
  background: var(--bs-body-bg); border: 1px solid rgba(var(--inverse-color-rgb), .1);
  box-shadow: 0 12px 40px rgba(0,0,0,.18); display: none; flex-direction: column; overflow: hidden;
}
.vt-chatbot-window.open { display: flex; }
.vt-chatbot-header {
  padding: 16px 20px; background: var(--bs-primary);
  display: flex; align-items: center; gap: 10px; color: #fff;
}
.vt-bot-avatar {
  width: 36px; height: 36px; background: rgba(255,255,255,.2); border-radius: 50%;
  display: flex; align-items: center; justify-content: center; font-size: 18px;
}
.vt-chatbot-close { margin-left: auto; background: none; border: none; color: #fff; font-size: 22px; cursor: pointer; line-height: 1; }
.vt-chatbot-messages { flex: 1; padding: 16px; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; min-height: 200px; max-height: 300px; }
.vt-chat-msg { max-width: 80%; padding: 10px 14px; border-radius: 12px; font-size: 13px; line-height: 1.5; }
.vt-chat-msg.bot { background: var(--bs-secondary); color: var(--bs-heading-color); align-self: flex-start; border-bottom-left-radius: 4px; }
.vt-chat-msg.user { background: var(--bs-primary); color: #fff; align-self: flex-end; border-bottom-right-radius: 4px; }
.vt-chatbot-input { padding: 12px 16px; border-top: 1px solid rgba(var(--inverse-color-rgb), .1); display: flex; gap: 8px; }
.vt-chatbot-input input {
  flex: 1; padding: 10px 14px; border-radius: 10px; border: 1px solid rgba(var(--inverse-color-rgb), .15);
  background: var(--bs-body-bg); color: var(--bs-body-color); font-size: 13px; outline: none;
}
.vt-chatbot-input button {
  padding: 10px 16px; border-radius: 10px; background: var(--bs-primary); color: #fff; border: none; cursor: pointer; font-size: 14px;
}

/* ---- Generic inner-page header --------------------------------------
   Nova is a single-page template with no "page header/banner" section,
   so this reuses Nova's own subtitle/h2/p pattern (see .hero__v6,
   .services__v3, etc.) at the top of every multi-page inner page,
   keeping the same spacing rhythm as Nova's own sections. */
.vt-page-header { padding: 150px 0 40px; }
.vt-page-header .subtitle { color: var(--bs-primary); }
.vt-breadcrumb { font-size: .85rem; color: var(--bs-body-color); margin-bottom: 1rem; }
.vt-breadcrumb a { color: var(--bs-body-color); text-decoration: none; }
.vt-breadcrumb a:hover { color: var(--bs-primary); }

.vt-card { background: var(--bs-secondary-bg, var(--bs-body-bg)); border: 1px solid rgba(var(--inverse-color-rgb), .08); border-radius: 1rem; }

/* ---- Share bar (portfolio / blog / detail pages) ---- */
.vt-share-btn {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 6px 14px; border-radius: 20px; font-size: 12px; font-weight: 600;
  text-decoration: none !important; cursor: pointer; border: none; color: #fff;
  transition: opacity .2s, transform .15s;
}
.vt-share-btn:hover { opacity: .85; transform: translateY(-1px); }
.vt-share-fb { background: #1877f2; }
.vt-share-wa { background: #25D366; }
.vt-share-li { background: #0A66C2; }
.vt-share-tw { background: #000; }
.vt-share-email { background: rgba(var(--bs-primary-rgb), .12); color: var(--bs-primary) !important; border: 1px solid rgba(var(--bs-primary-rgb), .3); }
.vt-share-copy { background: var(--bs-secondary); color: var(--bs-heading-color) !important; }

/* =========================================================
   Client Portal shell (sidebar layout used by dashboard,
   projects, invoices, tickets, documents)
   ========================================================= */
.vt-portal-wrap { display: flex; min-height: calc(100vh - 90px); }
.vt-portal-sidebar {
  width: 240px; flex-shrink: 0; padding: 24px 0;
  background: var(--bs-body-bg);
  border-right: 1px solid rgba(var(--inverse-color-rgb), .1);
}
.vt-portal-sidebar .vt-portal-user {
  padding: 0 24px 20px; margin-bottom: 12px;
  border-bottom: 1px solid rgba(var(--inverse-color-rgb), .1);
}
.vt-portal-sidebar a {
  display: flex; align-items: center; gap: 10px; padding: 11px 24px;
  color: var(--bs-body-color); text-decoration: none; font-size: 14px; font-weight: 500;
  transition: all .2s; border-right: 3px solid transparent;
}
.vt-portal-sidebar a:hover, .vt-portal-sidebar a.active {
  color: var(--bs-primary); background: rgba(var(--bs-primary-rgb), .08); border-right-color: var(--bs-primary);
}
.vt-portal-sidebar a.vt-portal-logout { color: #dc3545 !important; margin-top: 12px; }
.vt-portal-content { flex: 1; padding: 32px; min-width: 0; }

.vt-stat-card { background: var(--bs-body-bg); border: 1px solid rgba(var(--inverse-color-rgb), .1); border-radius: 1rem; padding: 24px; }
.vt-stat-val { font-size: 32px; font-weight: 700; color: var(--bs-primary); }
.vt-progress-track { height: 8px; background: var(--bs-secondary); border-radius: 4px; overflow: hidden; }
.vt-progress-fill { height: 100%; background: var(--bs-primary); border-radius: 4px; transition: width .6s ease; }

.vt-status-badge { display: inline-block; padding: 3px 12px; border-radius: 20px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .02em; }
.vt-status-badge.planning, .vt-status-badge.draft { background: rgba(99,102,241,.15); color: #6366f1; }
.vt-status-badge.in-progress, .vt-status-badge.sent { background: rgba(245,158,11,.15); color: #d97706; }
.vt-status-badge.completed, .vt-status-badge.resolved, .vt-status-badge.paid { background: rgba(34,197,94,.15); color: #16a34a; }
.vt-status-badge.on-hold, .vt-status-badge.open, .vt-status-badge.overdue { background: rgba(239,68,68,.15); color: #dc2626; }
.vt-status-badge.review { background: rgba(59,130,246,.15); color: #2563eb; }

/* =========================================================
   Dark mode values (Nova's own CSS only ships light-mode
   tokens under :root/[data-bs-theme=light] — this adds real
   dark values so the toggle actually changes the palette).
   ========================================================= */
[data-bs-theme=dark] {
  --bs-body-bg: #0f1115;
  --bs-body-color: #b7bac2;
  --bs-primary: #3aa0a0;
  --bs-primary-rgb: 58, 160, 160;
  --bs-primary-hover: #4fb8b8;
  --bs-primary-hover-rgb: 79, 184, 184;
  --bs-secondary: #1b2e2c;
  --bs-secondary-rgb: 27, 46, 44;
  --bs-heading-color: #f2f3f5;
  --inverse-color: #b7bac2;
  --inverse-color-rgb: 183, 186, 194;
  --nav-bg: #14161b;
}
[data-bs-theme=dark] .fbs__net-navbar:not(.active) { background: rgba(15,17,21,.85); }
[data-bs-theme=dark] .form-control,
[data-bs-theme=dark] .form-select { background: #171a20; border-color: rgba(255,255,255,.12); color: var(--bs-body-color); }
[data-bs-theme=dark] .form-control::placeholder { color: rgba(183,186,194,.5); }
[data-bs-theme=dark] .vt-chatbot-window,
[data-bs-theme=dark] .vt-mega-menu,
[data-bs-theme=dark] .dropdown-menu { background: #171a20; }

/* =========================================================
   Legacy variable compatibility shim.
   Several inner pages (portal, admin, some detail pages)
   still reference an earlier design system's variable names.
   Rather than hand-edit every inline style, alias them to
   Nova's real tokens so those pages inherit Nova's palette
   and respond correctly to the light/dark toggle too.
   ========================================================= */
:root {
  --bg-primary: var(--bs-body-bg);
  --bg-secondary: var(--bs-secondary);
  --bg-card: var(--bs-body-bg);
  --border-color: rgba(var(--inverse-color-rgb), .12);
  --text-primary: var(--bs-heading-color);
  --text-secondary: var(--bs-body-color);
  --text-muted: rgba(var(--inverse-color-rgb), .65);
  --card-shadow: 0 0.25rem 1rem rgba(0,0,0,.06);
  --vt-grad: var(--bs-primary);
}

/* =========================================================
   PWA install banner — native app-install-sheet feel
   ========================================================= */
.vt-pwa-install {
  position: fixed; left: 16px; right: 16px; bottom: -140px;
  z-index: 2000; max-width: 420px; margin: 0 auto;
  background: var(--bs-body-bg);
  border: 1px solid rgba(var(--inverse-color-rgb), .1);
  border-radius: 18px;
  box-shadow: 0 12px 40px rgba(0,0,0,.18);
  padding: 16px;
  display: flex; align-items: center; gap: 12px;
  transition: bottom .35s cubic-bezier(.2,.8,.2,1);
}
.vt-pwa-install.show { bottom: 16px; }
.vt-pwa-install-icon { width: 48px; height: 48px; border-radius: 12px; overflow: hidden; flex-shrink: 0; box-shadow: 0 2px 8px rgba(0,0,0,.15); }
.vt-pwa-install-icon img { width: 100%; height: 100%; object-fit: cover; }
.vt-pwa-install-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.vt-pwa-install-text strong { font-size: 14px; color: var(--bs-heading-color); }
.vt-pwa-install-text span { font-size: 12px; color: var(--bs-body-secondary); }
.vt-pwa-install-btn { background: var(--bs-primary); color: #fff; border: none; padding: 9px 18px; border-radius: 10px; font-size: 13px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.vt-pwa-install-dismiss { background: none; border: none; color: var(--bs-body-secondary); font-size: 18px; padding: 4px; cursor: pointer; line-height: 1; }
@media (min-width: 768px) {
  .vt-pwa-install { left: auto; right: 24px; bottom: -140px; margin: 0; }
  .vt-pwa-install.show { bottom: 24px; }
}

/* ---- Standalone PWA polish: respect notch / home-indicator safe areas
   so the installed app feels native rather than like a browser tab. ---- */
@media (display-mode: standalone) {
  body { padding-top: env(safe-area-inset-top); }
  .vt-whatsapp-float { bottom: calc(90px + env(safe-area-inset-bottom)); }
  .vt-chatbot-btn { bottom: calc(24px + env(safe-area-inset-bottom)); }
  .vt-chatbot-window { bottom: calc(90px + env(safe-area-inset-bottom)); }
  #back-to-top { bottom: calc(24px + env(safe-area-inset-bottom)); }
  .vt-pwa-install { display: none !important; } /* already installed */
}

/* Cards used across marketplace/blog/industries/jobs listing pages, styled like Nova's .service-card */
.vt-tile {
  border-radius: 1rem; padding: 1.75rem; height: 100%;
  background: var(--bs-body-bg);
  border: 1px solid rgba(var(--inverse-color-rgb), .08);
  box-shadow: 0 0.125rem 0.5rem rgba(0,0,0,.04);
  transition: transform .2s, box-shadow .2s;
}
.vt-tile:hover { transform: translateY(-4px); box-shadow: 0 1rem 2rem rgba(0,0,0,.08); }
.vt-tile img { border-radius: .75rem; }

.vt-badge { background: var(--bs-secondary); color: var(--bs-heading-color); border-radius: 999px; padding: .3rem .8rem; font-size: .75rem; font-weight: 600; }

/* ---- Homepage hero stat frame (replaces old gradient-glow hero mock) ---- */
.vt-stats-frame { background: var(--bs-secondary); }
.vt-stats-frame h3 { color: var(--bs-primary); }
.vt-stats-divider { border-left: 1px solid rgba(var(--inverse-color-rgb), .12); border-right: 1px solid rgba(var(--inverse-color-rgb), .12); }

/* ---- Testimonial avatar fallback (initial letter, no photo) ---- */
.vt-avatar-fallback {
  width: 48px; height: 48px; background: var(--bs-primary); color: #fff;
  font-weight: 700; font-size: 18px; flex-shrink: 0;
}

.vt-tile.p-0 { padding: 0 !important; }

/* ---- Footer social icons ----------------------------------------
   Bootstrap's .btn-sm + .rounded-circle combo doesn't force a square
   box, so icon glyphs were getting clipped/off-center and effectively
   invisible in some browsers. Use a fixed, explicitly-centered box. */
.vt-social-icon {
  width: 38px; height: 38px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--bs-primary);
  color: var(--bs-primary);
  font-size: 16px;
  line-height: 1;
  text-decoration: none !important;
  transition: all .2s;
}
.vt-social-icon:hover { background: var(--bs-primary); color: #fff; }