/* ==========================================================================
   RESET & BASE
   ========================================================================== */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  /* font-family: "Roboto", Arial, Helvetica, sans-serif; */
  /* font-family: 'Source Sans Pro', sans-serif !important; */ /* Body text */
  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !important; /* Body text */
  background: #0f0f0f;
  color: #f1f1f1;
  min-height: 100vh;
  padding-top: 56px;           /* Prevents content from hiding under fixed header */
  font-size: 14px !important;
  line-height: 1.5;
}

/* ==========================================================================
   HEADER (App Bar)
   ========================================================================== */

.finhazi-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 56px;
  font-family: 'Inter', sans-serif !important; /* Headings */
  background: linear-gradient(135deg, #ffffff, #f8f9fa) !important;
  /* border-bottom: 1px solid #7d7c7c; */
  /* color: rgb(43, 42, 42); */
  display: flex;
  align-items: center;
  padding: 0 16px;
  gap: 16px;
  z-index: 1000;
  box-shadow: 0 1px 4px rgba(70, 68, 68, 0.4);
}

.left {
  flex: 0 0 auto;
}

.hamburger-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  background: none;
  border: none;
  color: white;
  font-size: 1.1rem;
  padding: 8px 12px;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.18s;
}

.hamburger-btn:hover {
  background: rgba(255, 255, 255, 0.08);
}

.menu-label {
  font-size: 14px;
  font-weight: 500;
  color: #aaaaaa;
}

/* ── Main content area (title + actions) ── */
.header-row {
  flex: 0 1 auto;  /* Change from 1 to 0 so it doesn't push the center away */
  display: flex;
  align-items: center;
  /* justify-content: space-between; */
  min-width: 0;
  gap: 16px;
}

.title {
  font-size: 0.925rem;
  /* font-weight: 600; */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 420px;              /* Increased a bit – adjust as needed */
}

.actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: nowrap;
  white-space: nowrap;
}

/* Button inside actions in header to be gray */
/* Gray button for header actions */
.actions .btn.headerbtn-gray{
  background: #6c757d !important;        /* neutral gray */
  color: #fff;
  border: none;
  font-size: 14px !important;
}

.actions .btn.headerbtn-gray:hover{
  background: #5a6268 !important;        /* darker on hover */
  color: #fff;
}

.actions .btn.headerbtn-gray:active{
  background: #4e555b !important;
}

/* ==================== MODERN HEADER BUTTONS ==================== */

/* =============================================================
   SPECIAL RULE: Inside .actions → force BLACK text on buttons
   ============================================================= */

.header-row .actions .btn,
.actions .btn {
    background: #1E293B !important;     /* Dark Slate Gray */
    /* background: #f8f9fa !important; */
    color: #fff !important;           /* Force BLACK text inside actions */
    /* color: #00000091 !important; */
    border: none !important;
    font-size:12.5px !important;
    /* border-color: #f8f9fa !important; */
    border-radius: 8px !important;
    font-weight: 500 !important;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

/* Hover effect */
.header-row .actions .btn:hover,
.actions .btn:hover {
    background: #727374 !important;
    color: #000000 !important;
    transform: translateY(-1px);
    /* transform: translateY(-1px) !important;
    box-shadow: 0 6px 15px rgba(4, 0, 2, 0.4) !important; */
}

/* Icon-only buttons */
.header-row .actions .btn.btn-icon,
.actions .btn.btn-icon {
    color: #fff !important;
    /* color: #000 !important; */
    /* padding: 0.5rem !important;
    width: 42px; */
    min-height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Extra strong override for text-white class inside actions and their children */
.header-row .actions .btn.text-white,
.actions .btn.text-white,
.actions .btn.text-white span,
.actions .btn.text-white i {
    color: #fff !important;
    /* color: #000000 !important; */
}

/* ── Centered company name ── */
.center {
  flex: 1 1 0;          /* Allow it to grow equally with other zones */
  font-size: 17px !important;
  font-weight: 500;
  color: #5d5a5a;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 60%;
  display: flex;
  align-items: center;   /* vertical */
  justify-content: center; /* horizontal */
  margin-top:10px;
}

/* ── Right side icons ── */
.right {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 20px;
}

.right button {
  background: none;
  border: none;
  color: #f1f1f1;
  font-size: 1.35rem;
  cursor: pointer;
  padding: 6px;
  border-radius: 50%;
  transition: background 0.18s;
}

.right button:hover {
  background: rgba(255, 255, 255, 0.1);
}

.avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
}

/* ==========================================================================
   BUTTON STYLES (missing in original → very important!)
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 6px;
  font-size: 0.9rem;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.18s;
}

.btn-icon i {
  font-size: 1.1rem;
}

.btn-success {
  background: #2ea44f;
  color: white;
  border: none;
}

.btn-success:hover {
  background: #26943e;
}

.btn-secondary {
  background: #444;
  color: white;
  border: none;
}

.btn-secondary:hover {
  background: #555;
}

/* ==========================================================================
   SIDEBAR (Drawer)
   ========================================================================== */

.finhazi-sidebar {
  position: fixed;
  top: 56px;
  left: -320px;
  width: 320px;                /* ✅ IMPORTANT: total sidebar width (blue + white) */
  height: calc(100vh - 56px); 
  display:block;
  min-height: 100%;
  /* background: #0f0f0f;
  border-right: 1px solid #272727; */
  transition: left 0.22s cubic-bezier(0, 0, 0.2, 1);
  z-index: 999;
  overflow-y: auto;
}

.finhazi-sidebar.open {
  left: 0;
}

.sidebar-content a {
  display: flex !important;
  /* align-items: center; */
  /* gap: 24px; */
  /* padding: 8px 24px; */
  /* color: white; */
  /* text-decoration: none; */
  /* font-size: 0.95rem; */
  transition: background 0.18s;
}

.sidebar-section h3 {
  padding: 16px 24px 8px;
  font-size: 0.9rem;
  color: #aaaaaa;
  font-weight: 500;
}

hr {
  border: none;
  border-top: 1px solid #272727;
  margin: 8px 0;
}

.subscriptions img {
  width: 24px;
  height: 24px;
  border-radius: 50%;
}

.show-more {
  font-weight: 500;
}

/* ==========================================================================
   OVERLAY (closes sidebar on outside click)
   ========================================================================== */

.overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.22s;
  z-index: 998;
}

.overlay.active {
  opacity: 1;
  pointer-events: all;
}

/* ==========================================================================
   MAIN CONTENT
   ========================================================================== */

main.content {
  padding: 24px;
}


/* ==========================================================
   SIDEBAR SECTION HEADER (Brand Wrapper)
   - Vertically centered
   - Horizontally LEFT aligned
   ========================================================== */

.brand-wrapper.sticky{
  position: sticky !important;
  top: 50px !important;       /* keep below your fixed header */
  z-index: 40;

  /* Layout */
  display: flex !important;
  align-items: center;             /* vertical center */
  justify-content: flex-start;     /* LEFT align */

  height: 48px;                    /* consistent header height */
  padding: 0 14px;                 /* left padding (adjust to match menu indent) */

  background: #ffffff;

  /* Subtle divider like pro apps */
  border-bottom: 1px solid rgba(0,0,0,0.06);
  box-shadow: 0 1px 2px rgba(0,0,0,0.03);
}

/* Title text styling */
.brand-wrapper.sticky span{
  font-size: 15px;
  font-weight: 500;
  color: #2f2f2f;

  line-height: 1;
  letter-spacing: 0.2px;

  /* Micro optical alignment (optional) */
  display: inline-block;
  transform: translateY(0.5px);
}

/* ==========================================================
   IF YOU ADD LEFT/RIGHT BUTTONS LATER (auto alignment)
   - Add class: .has-actions to the wrapper
   - Wrap title in .title-center
   ========================================================== */

.brand-wrapper.sticky.has-actions{
  justify-content: space-between;
}

.brand-wrapper.sticky .title-center{
  flex: 1;
  text-align: left;                /* keep title left aligned */
}

/* ==========================================================
   MOBILE ADAPTATION
   ========================================================== */

@media (max-width: 768px){
  .brand-wrapper.sticky{
    height: 44px;
    padding: 0 10px;
  }

  .brand-wrapper.sticky span{
    font-size: 14px;
    transform: translateY(0.25px);
  }

  .finhazi-sidebar{
    top: 17px !important;
  }
}

/* ==========================================================================
   CONTROL OR HIDE APPSIDE BAR MENU
   ========================================================================== */
/* Make sure sticky is relative to the scrolling panel */
#v-pills-tabContent{
  position: relative !important;
}

/* Hide all tab panes */
#v-pills-tabContent .tab-pane{
  padding-top: 50px !important;
  position: relative !important; /* Give space below the sticky brand header so list never goes under it */
  display: none !important;
  opacity: 0;
  transition: opacity 0.18s ease;  
/* EXTRA SAFETY: ensure the content starts below the sticky header height */
  padding-top: 50px !important;        /* must match brand-wrapper height */
}

/* If you have multiple sidebar-menu blocks, add a bit more breathing room */
#v-pills-tabContent .tab-pane .sidebar-menu{
  margin-top: 45px !important; 
}

/* But remove double spacing by pulling the header back up */
#v-pills-tabContent .tab-pane .brand-wrapper.sticky{
  margin-top: -50px !important;        /* same as padding-top above */
}

/* Show active pane */
#v-pills-tabContent .tab-pane.active{
  display: block !important;
  opacity: 1;
}

/* Optional: smooth fade (only if you want animation) */
#v-pills-tabContent .tab-pane.fade{
  transition: opacity 0.18s ease;
}

/* Force the list to start below the header (and reset theme margins) */
#v-pills-tabContent .sidebar-menu{
  margin: 0 !important;
  padding: 12px 0 0 0 !important;    /* gap below "Settings" */
}

/* If your theme pulls list items upward, neutralize it */
#v-pills-tabContent .sidebar-menu > li{
  margin-top: 0 !important;
  padding-left: 20px !important;
  border-bottom: 1px solid #cccccc72;
  padding-top: 4px;
  padding-bottom: 4px;
}

/* Reduce space between icon and menu text */
.sidebar-menu > li > a{
  display: flex;
  align-items: center;
  gap: 2px !important;          /* controls space between icon & text */
  padding-left: 4px !important;
}

.sidebar-menu > li > a span{
  margin-left: 0 !important;
  padding-left: 0 !important;
}

/* Make each icon button centered and not clipped */
#v-pills-tab .nav-link{
  width: 56px;
  height: 48px;
  padding: 0 !important;
  padding-top: 30px !important;
  padding-bottom: 30px !important; 

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

  overflow: visible;
}

/* Make icons a consistent size */
#v-pills-tab .nav-link i{
  font-size: 20px !important;
  line-height: 20px !important;
}

.sidebar-menu>li>a {
    /* display: block; */
    padding-bottom: 8px !important;
    /* color: #363232;  */
    font-size: 15px !important;
    line-height: 20px !important;
    font-weight: 400;
    font-style: normal;
    letter-spacing: .4px;
    font-style: normal;
}

.treeview a {
    font-size: 15px !important;
    line-height: 20px !important;
}

.treeview a i {
    display: inline-block;
    margin-top: 6px;
    font-size: 15px;
    color: inherit;
}

/* Style treeview menu which is the <ul> inside the <li> */
.sidebar-menu .treeview-menu {
    display: none;
    list-style: outside none none;
    font-size: 12px !important;
    font-weight: 400;
    margin: 0;
    margin-bottom: 10px; /* Give space between the last menu of the <ul> and the next <li> menu*/
}

/* ==========================================================================
   RESPONSIVE BREAKPOINTS
   ========================================================================== */

@media (max-width: 1100px) {
  .center {
    display: none;
  }
}

@media (max-width: 768px) {
  .finhazi-header {
    padding: 0 12px;
    gap: 12px;
  }

  .header-row {
    gap: 10px;
  }

  .title {
    font-size: 1.05rem;
    max-width: 220px;
  }

  .actions .btn {
    padding: 6px 10px;
    font-size: 0.85rem;
  }

  /* Hide button text on very small screens – keep only icons */
  @media (max-width: 580px) {
    .actions .btn span:not(.fe):not(.fa) {
      display: none;
    }
  }
}