/* =================================================================
   LAYOUT SHELL
   ================================================================= */
.ind__wrapper {
  display: flex;
  flex-direction: column;
  background-color: #F7F7F7;
  grid-template-columns: none !important;
}
.ind__wrapper.collapsed { grid-template-columns: none !important; }

#sidebar { width: 100%; }

/* Main content — top offset is set dynamically by JS (adjustContentOffset).
   The CSS fallback below is overridden as soon as JS runs. */
.ind__main__content {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
  display: flex;
  background-color: #F7F7F7;
  flex-wrap: wrap;
  z-index: 0;
  /* fallback: header(60) + nav(44) = 104px */
  margin-top: 104px;
  padding-top: 4px;
}

thead th {
  position: sticky;
  top: 0;
  background-color: #F7F7F7;
  z-index: 10;
}

/* =================================================================
   HORIZONTAL NAV BAR  (desktop)
   ================================================================= */
.ind__sidebar,
.ind__sidebar.ind__hide {
  position: fixed !important;
  top: 60px;            /* height of the fixed header */
  left: 0;
  right: 0;
  z-index: 900;

  width: 100% !important;
  height: auto !important;
  min-height: 48px;

  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap;
  align-items: center;

  padding: 0 16px !important;
  margin-top: 0 !important;

  background: #ffffff !important;
  border-right: none !important;
  border-bottom: 2px solid #e3e8ef;
  box-shadow: 0 2px 8px rgba(16, 24, 40, 0.07);

  /* Single row: scroll horizontally if the items overflow instead of
     wrapping or overlapping. Fixed-position dropdowns are not clipped by
     this because their containing block is the viewport (transform:none). */
  overflow-x: auto !important;
  overflow-y: hidden;
  transform: none !important;
  opacity: 1 !important;
  visibility: visible !important;

  /* smooth mobile open/close */
  transition: max-height 0.3s ease, box-shadow 0.3s ease;
}

/* Thin horizontal scrollbar for the one-row nav */
.ind__sidebar::-webkit-scrollbar { width: 4px; height: 6px; }
.ind__sidebar::-webkit-scrollbar-track { background: transparent; }
.ind__sidebar::-webkit-scrollbar-thumb { background: #bdbdbd; border-radius: 3px; }


/* =================================================================
   MENU SECTION  (flex row of groups)
   ================================================================= */
.ind__menu-section {
  display: flex !important;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  flex-grow: 1 !important;
  flex-shrink: 0 !important;   /* never compress below content width (was causing overlap) */
  gap: 0;
  margin: 0;
  padding: 0;
  /* Keep visible so the fixed-position dropdowns are not clipped; the parent
     .ind__sidebar owns the horizontal scroll. */
  overflow: visible;
}

/* Groups that live OUTSIDE .ind__menu-section (Groups, User Mgmt) */
.ind__sidebar > .ind__menu-group {
  margin: 0 !important;
  padding: 0 !important;
  flex-shrink: 0;
}

/* =================================================================
   MENU GROUP
   ================================================================= */
.ind__menu-group {
  position: relative;
  margin: 0 !important;
  flex-shrink: 0;
}

/* =================================================================
   TOP-LEVEL HEADER  (parent item / button)
   ================================================================= */
.ind__menu-header {
  display: flex !important;
  align-items: center;
  gap: 3px;
  padding: 12px 7px;     /* compact — fit more items per row before wrapping */
  white-space: nowrap;
  font-weight: 500;
  font-size: 13px;
  color: #334155 !important;
  border-bottom: 3px solid transparent;
  cursor: pointer;
  user-select: none;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.ind__menu-header:hover {
  background: #f1f5f9;
  text-decoration: none !important;
}
.ind__menu-header.active,
.ind__menu-header.parent-active {
  color: #0f519b !important;
  border-bottom-color: #0f519b;
  background: #f8fafc;
}
/* Direct link inside header (e.g. Dashboard) */
.ind__menu-header > .ind__menu-link,
.ind__menu-header > a.ind__menu-link {
  padding: 0;
  color: inherit !important;
  font-size: inherit;
  font-weight: inherit;
}

.ind__caret {
  display: inline-flex;
  margin-left: 2px;
  flex-shrink: 0;
}
.ind__caret img {
  width: 11px;
  height: 11px;
  transition: transform 0.2s ease;
  opacity: 0.6;
}
.ind__menu-header.active .ind__caret img { transform: rotate(180deg); }

/* =================================================================
   DROPDOWN PANEL
   Uses position:fixed (not absolute) so it fully escapes any
   overflow clipping from ancestor elements.
   JS in ind_side_headers.js calculates left/top at open time.
   ================================================================= */
.ind__submenu {
  position: fixed !important;    /* escape all overflow clipping */
  /* top/left set dynamically by JS */
  top: 108px;
  left: 0;
  display: none;
  min-width: 200px;
  max-width: min(92vw, 520px);
  width: max-content;
  margin: 0 !important;
  padding: 6px !important;
  background: #ffffff;
  border: 1px solid #e3e8ef;
  border-radius: 10px;
  box-shadow: 0 12px 32px rgba(16, 24, 40, 0.16);
  z-index: 9999;                /* above everything */
  opacity: 1;
  visibility: visible;
  transform: none;
  pointer-events: auto;
}
.ind__submenu.ind__show {
  display: block;
  animation: dropIn 0.16s ease;
}
@keyframes dropIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Submenu links */
.ind__submenu a {
  display: block;
  padding: 9px 13px !important;
  border-radius: 6px;
  color: #475569 !important;
  font-weight: 400;
  font-size: 13.5px;
  line-height: 1.35;
  white-space: nowrap;
  border-left: 3px solid transparent;
  text-decoration: none;
  transition: background 0.12s ease, color 0.12s ease;
}
.ind__submenu a:hover {
  background: #eef4ff;
  color: #0f519b !important;
  font-weight: 500;
}
.ind__submenu a.active-link {
  background: #e8f0fe;
  border-left: 3px solid #0f519b !important;
  color: #0f519b !important;
  font-weight: 600 !important;
}

/* =================================================================
   HAMBURGER BUTTON  (shown in header on mobile)
   ================================================================= */
.ind__hamb__menu {
  display: none;   /* hidden on desktop */
  cursor: pointer;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  border: 1.5px solid rgba(255,255,255,0.4);
  background: rgba(255,255,255,0.15);
  transition: background 0.2s ease;
  flex-shrink: 0;
}
.ind__hamb__menu:hover { background: rgba(255,255,255,0.25); }
.ind__hamb__menu img {
  width: 20px;
  height: 20px;
  filter: brightness(0) invert(1); /* white icon on blue header */
}

/* Legacy injected toggle (disabled — we use the header button instead) */
.ind__nav-toggle { display: none !important; }

/* =================================================================
   HEADER  (fixed top bar)
   ================================================================= */
.ind__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #1565C0;
  color: white;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  height: 60px;
  padding: 0 16px;
  gap: 12px;
}
.ind__header a,
.ind__header .ind__logo__text,
.ind__header .ind__username,
.ind__header .ind__right__header,
.ind__header .ind__user__profile,
.ind__header .bx-bell,
.ind__header .bx-chevron-down { color: white !important; }

.ind__header__deactivated {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: rgb(192, 192, 192);
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.1);
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  height: 60px;
  padding: 0 16px;
  pointer-events: none;
}

.ind__left__header {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-shrink: 0;
}

.ind___logo__header {
  height: 28px;
  width: 46px;
  display: flex;
  align-items: center;
}
.ind___logo__header img { height: 100%; width: auto; }

.ind__logo__text {
  font-size: 18px;
  font-weight: 700;
  white-space: nowrap;
}

.ind__license__title {
  flex-grow: 1;
  text-align: center;
  font-size: 1rem;
  font-weight: 700;
  color: white;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ind__right__header {
  display: flex;
  align-items: center;
  height: 100%;
  border-left: 1px solid rgba(169,185,198,0.5);
  padding-left: 16px;
  flex-shrink: 0;
}

.ind__notification__icon {
  position: relative;
  font-size: 20px;
  cursor: pointer;
  display: flex;
  align-items: center;
  margin-right: 14px;
}
.ind__notification__icon .ind__dot {
  position: absolute;
  top: 0;
  right: -2px;
  height: 8px;
  width: 8px;
  background: #ff4c61;
  border-radius: 50%;
}

.ind__user__profile {
  display: flex;
  align-items: center;
  cursor: pointer;
  padding-right: 6px;
  gap: 8px;
}
.ind__user__profile .ind__avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
}
.ind__username {
  font-weight: 500;
  font-size: 14px;
  white-space: nowrap;
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* User dropdown panel */
.ind__dropdown {
  display: none;
  position: absolute;
  top: 62px;
  right: 0;
  width: 300px;
  background: #fff;
  box-shadow: 0 4px 24px rgba(0,0,0,0.14);
  border-radius: 12px;
  z-index: 1100;
  overflow: hidden;
}
.ind__dropdown.show { display: block; }

.ind__user__info {
  display: flex;
  padding: 16px;
  border-bottom: 1px solid #eee;
}
.ind__user__info .ind__avatar { width: 48px; height: 48px; margin-right: 12px; border-radius: 50%; }
.ind__user__info .ind__name { font-weight: 700; margin: 0; color: #1e293b; }
.ind__user__info .ind__role,
.ind__user__info .ind__last__login { font-size: 0.82rem; color: #64748b; margin: 2px 0; }

.ind__dropdown ul { list-style: none; padding: 0; margin: 0; }
.ind__dropdown ul li {
  padding: 11px 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: #334155;
  transition: background 0.2s;
}
.ind__dropdown ul li:hover { background: #f1f5f9; }

.ind__profile__icons { width: 22px; height: 22px; flex-shrink: 0; }

.logout-item { display: flex; align-items: center; }

.ind__dropdown ul li a {
  color: #334155 !important;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
}

/* parent-active badge */
.parent-active {
  font-weight: 600 !important;
  font-size: inherit !important;
  color: #0f519b !important;
  border-radius: 0;
}

/* active-link on direct top-level links (e.g. Dashboard) */
a.ind__menu-link.active-link.parent-active {
  color: #0f519b !important;
  font-weight: 700 !important;
}

/* =================================================================
   MISC
   ================================================================= */
.ind__active { font-weight: bold; text-decoration: underline; }
.ind__hide { transform: none; opacity: 1; visibility: visible; }

.ind__menu-link {
  display: block;
  color: #3b72af;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
}
.ind__menu-link.disabled {
  pointer-events: none;
  color: #a1a1a1 !important;
  cursor: not-allowed;
}

.custom-input-dropdown::-webkit-calendar-picker-indicator {
  display: none !important;
  -webkit-appearance: none;
}

/* =================================================================
   RESPONSIVE — TABLET  (≤ 1024px)
   Nav bar items can overflow-scroll; license title shrinks.
   ================================================================= */
@media (max-width: 1024px) {
  .ind__license__title {
    font-size: 0.85rem;
    letter-spacing: 0.6px;
  }
  .ind__logo__text { font-size: 16px; }
}

/* =================================================================
   RESPONSIVE — COLLAPSED NAV  (≤ 1280px)
   With ~14 top-level menus a single row only fits on very wide screens, so
   below this width the nav collapses into the hamburger accordion panel.
   ================================================================= */
@media (max-width: 1280px) {

  /* Show hamburger in header */
  .ind__hamb__menu { display: flex; }

  /* Nav bar: collapsed by default, stacks vertically when open */
  .ind__sidebar,
  .ind__sidebar.ind__hide {
    top: 60px;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    padding: 0 !important;
    min-height: 0 !important;
    max-height: 0;
    overflow: hidden !important;
    border-bottom: none;
    box-shadow: none;
    transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 0.35s ease;
  }

  /* When open: full-height scrollable panel */
  .ind__sidebar.nav-open {
    max-height: calc(100vh - 60px);
    overflow-y: auto !important;
    border-bottom: 2px solid #e3e8ef;
    box-shadow: 0 8px 24px rgba(16, 24, 40, 0.12);
  }

  /* Content: JS sets margin-top dynamically; no !important here */
  .ind__main__content { margin-top: 60px; }

  /* Menu section becomes vertical */
  .ind__menu-section {
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    flex-grow: 1 !important;
    overflow: visible !important;
    width: 100% !important;
  }

  /* Each group: full width */
  .ind__menu-group,
  .ind__sidebar > .ind__menu-group {
    width: 100%;
    border-bottom: 1px solid #f1f5f9;
  }

  /* Top-level item: full width row */
  .ind__menu-header {
    width: 100%;
    justify-content: space-between;
    padding: 13px 18px;
    border-bottom: none !important;
    font-size: 14px;
    border-radius: 0;
    background: #fafbfc;
  }
  .ind__menu-header:hover { background: #f1f5f9; }
  .ind__menu-header.active,
  .ind__menu-header.parent-active {
    background: #eef4ff;
    color: #0f519b !important;
    border-left: 4px solid #0f519b;
    border-bottom: none;
    padding-left: 14px;
  }

  /* Accordion submenus (static, not absolute) */
  .ind__submenu {
    position: static !important;
    display: none;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 4px 0 8px 0 !important;
    background: #f8fafc;
    animation: none;
    left: auto !important;
    right: auto !important;
  }
  .ind__submenu.ind__show { display: block !important; }

  /* Override flip-right rule on mobile */
  .ind__menu-section .ind__menu-group:nth-last-child(-n+3) .ind__submenu,
  .ind__sidebar > .ind__menu-group .ind__submenu {
    left: auto !important;
    right: auto !important;
  }

  .ind__submenu a {
    white-space: normal !important;
    padding: 10px 24px !important;
    font-size: 13.5px;
    border-radius: 0;
    border-left: 3px solid transparent;
  }
  .ind__submenu a:hover { background: #eef4ff; }
  .ind__submenu a.active-link {
    border-left: 3px solid #0f519b !important;
    background: #e8f0fe;
    padding-left: 21px !important;
  }

  /* Caret rotation on open */
  .ind__menu-header.active .ind__caret img { transform: rotate(180deg); }

  /* User dropdown: full width */
  .ind__dropdown {
    position: fixed;
    top: 60px;
    right: 0;
    left: 0;
    width: 100% !important;
    border-radius: 0 0 12px 12px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.18);
  }
}

/* =================================================================
   RESPONSIVE — MOBILE HEADER  (≤ 768px)
   Hide the center license title and username on small screens.
   ================================================================= */
@media (max-width: 768px) {
  .ind__license__title { display: none; }
  .ind__username { display: none; }
}

/* =================================================================
   RESPONSIVE — SMALL MOBILE  (≤ 480px)
   ================================================================= */
@media (max-width: 480px) {
  .ind__logo__text { display: none; }
  .ind___logo__header { margin-left: 4px; }
  .ind__right__header { padding-left: 10px; }
  .ind__notification__icon { margin-right: 8px; }
  .ind__user__profile { gap: 4px; }
}

/* =================================================================
   PRINT
   ================================================================= */
@media print {
  .filterForm input,
  .filterForm select,
  .filterForm a img,
  thead input,
  thead select,
  th input,
  th select { display: none !important; }

  .filterForm .p-1 { border: none !important; padding: 0 !important; }

  th img[src*="arrow-up-down-line.png"],
  a img[src*="arrow-up-down-line.png"] { display: none !important; }

  th:nth-child(3), th:nth-child(4),
  td:nth-child(2), td:nth-child(1) { display: none !important; }
}

/* =================================================================
   RESPONSIVE TRANSACTION FORMS  (≤ 768px)
   ================================================================= */
@media (max-width: 768px) {
  #trans_form .flex.items-center.space-x-4,
  #trans_actual .flex.items-center.space-x-4,
  #indforecastForm .flex.items-center.space-x-4,
  #indforecastForm .flex.items-center.gap-4,
  #trans_credit .flex.items-center.space-x-4 {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 4px;
  }

  #trans_form .flex.items-center.space-x-4 > label,
  #trans_actual .flex.items-center.space-x-4 > label,
  #indforecastForm .flex.items-center.space-x-4 > label,
  #indforecastForm .flex.items-center.gap-4 > label,
  #trans_credit .flex.items-center.space-x-4 > label {
    width: 100% !important;
    margin: 0 0 2px 0 !important;
  }

  #trans_form .flex.items-center.space-x-4 > :not(label),
  #trans_actual .flex.items-center.space-x-4 > :not(label),
  #indforecastForm .flex.items-center.space-x-4 > :not(label),
  #indforecastForm .flex.items-center.gap-4 > :not(label),
  #trans_credit .flex.items-center.space-x-4 > :not(label) {
    margin-left: 0 !important;
    width: 100% !important;
  }

  #trans_actual .border .flex.sm\:flex-row,
  #trans_actual .border .flex.flex-col.sm\:flex-row {
    flex-direction: column !important;
    align-items: stretch !important;
  }

  #trans_form .fc-grid,
  #trans_actual .fc-grid { grid-template-columns: 1fr !important; }

  .bottom-btn-box .max-w-4xl,
  .bottom-btn-box .max-w-6xl,
  #bottom-buttons-container .flex { flex-wrap: wrap !important; }

  #formView .hight_table,
  #formView [style*="57vh"] { height: auto !important; max-height: 78vh; }
}