/*
 UPDATED: Larger Down/Up Arrow for Collapse
 - Increases arrow size
 - Improves click/visibility
 - Keeps all existing behavior
*/

/* ================= HEADER (UNCHANGED) ================= */
header {
  background-color: #4B85A3;
  height: 36px;
  width: 100%;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);

 
}

header > p {
  color: #FFFFFF;
  font: 600 1.4em "Segoe UI", Arial, sans-serif;
  margin-left: 500px;
  padding-top: 10px;
  
}



main { width: 100%; margin: 0 auto; }
iframe { border: none; }

/* ================= SIDEBAR CONTAINER ================= */
.sidebar-upgrade {
  width: 210px;
  min-width: 210px;
  background: #f9fbfd;
  border-right: 1px solid #e3e6f0;
  box-shadow: 2px 0 12px rgba(44,62,80,0.06);
}

/* ================= SIDEBAR LINKS ================= */
.sidebar-link {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 4px 8px;
  padding: 9px 40px 9px 12px; /* extra space for larger arrow */
  font-size: 13.5px;
  font-weight: 500;
  color: #0f6fc2;
  background: linear-gradient(90deg, rgba(75,133,163,0.08), rgba(75,133,163,0.02));
  border-radius: 10px;
  text-decoration: none;
  transition: background 0.25s ease, color 0.25s ease, padding-left 0.25s ease;
}

.sidebar-link i {
  font-size: 15px;
  color: #0f6fc2;
}

/* ================= BIGGER ARROW ================= */
.sidebar-link[data-toggle="collapse"]::after,
.sidebar-link[aria-expanded]::after {
  content: "▾";
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);

  /* 🔼 SIZE INCREASE */
  font-size: 16px;        /* was 11px */
  line-height: 1;
  font-weight: bold;

  color: #4B85A3;
  cursor: pointer;

  transition: transform 0.25s ease, color 0.25s ease, opacity 0.2s ease;
}

/* Rotate arrow when expanded */
.sidebar-link[aria-expanded="true"]::after {
  transform: translateY(-50%) rotate(180deg);
}

/* ================= HIDE WHEN SIDEBAR COLLAPSED ================= */
body.sidebar-collapsed .sidebar-link::after,
#sidebar.collapsed .sidebar-link::after {
  opacity: 0;
  visibility: hidden;
}

/* ================= HOVER & ACTIVE ================= */
.sidebar-link:hover {
  background: linear-gradient(90deg, rgba(75,133,163,0.18), rgba(75,133,163,0.06));
  color: #1e4c66;
  padding-left: 16px;
}

.sidebar-link.active,
.sidebar-link[aria-expanded="true"] {
  background: linear-gradient(90deg, rgba(75,133,163,0.30), rgba(75,133,163,0.12));
  color: #1e4c66;
  font-weight: 600;
}

.sidebar-link.active::before,
.sidebar-link[aria-expanded="true"]::before {
  content: "";
  position: absolute;
  left: -8px;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 70%;
  border-radius: 4px;
  background-color: #4B85A3;
}

/* ================= SUBMENU ================= */
#sidebar .collapse .sidebar-link::after { display: none; }
#sidebar .collapse .sidebar-link {
  font-size: 12.5px;
  padding-left: 30px;
  background: transparent;
}

/* ================= SIDEBAR FOOTER ================= */
.sidebar-footer {
  background: #f1f6fa;
  font-size: 0.75rem;
  color: #6b7280;
}

/* ================= BUTTONS ================= */
.btn-primary {
  background-color: #4B85A3 !important;
  border: none !important;
  border-radius: 8px !important;
  font-weight: 500 !important;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active { background-color: #37627A !important; }

/* Smooth width animation */
#sidebar {
  width: 210px;              /* expanded width */
  min-width: 210px;            /* minimized width */
  transition: width 0.3s ease;
}

/* Collapsed sidebar frame */
#sidebar.collapsed {
  width: 60px;               /* minimized frame */
  min-width: 60px;
}

/* Hide text when collapsed */
#sidebar.collapsed .sidebar-text,
#sidebar.collapsed span {
  display: none;
}

/* Center icons when collapsed */
#sidebar.collapsed .sidebar-link {
  justify-content: center;
}

/* Toggle button style */
.sidebar-toggle-btn {
  background: none;
  border: none;
  font-size: 18px;
  padding: 10px;
  cursor: pointer;
  align-self: flex-end;
  transition: transform 0.3s ease;
}

/* Rotate arrow when collapsed */
#sidebar.collapsed .sidebar-toggle-btn {
  transform: rotate(180deg);
}


/* =========================================================
   FIX: Force left pane width to actually collapse / expand
   (Overrides Bootstrap grid behavior)
   ========================================================= */

/* Break Bootstrap row width lock safely */
.container-fluid > .row {
  display: flex !important;
  flex-wrap: nowrap !important;
}

/* Sidebar must control its own width */
#sidebar.sidebar-upgrade {
  flex: 0 0 auto !important;
  width: 350px !important;      /* expanded width */
  min-width: 210px !important;
  max-width: 290px !important;
  transition: width 0.3s ease, min-width 0.3s ease;
}

/* Collapsed sidebar width */
#sidebar.sidebar-upgrade.collapsed {
  width: 85px !important;       /* collapsed width */
  min-width: 85px !important;
  max-width: 85px !important;
}

/* Hide labels when collapsed */
#sidebar.collapsed span {
  display: none !important;
}

/* Center icons when collapsed */
#sidebar.collapsed .sidebar-link {
  justify-content: center;
}

/* Allow main content to expand */
main.col-md-10 {
  flex: 1 1 auto !important;
  max-width: none !important;
}

/* =========================================================
   ALIGN ICON & BACKGROUND IN COLLAPSED SIDEBAR (VISUAL FIX)
   ========================================================= */

/* Consistent row height */
.sidebar-link {
  height: 48px;
}

/* Perfect centered icon pill in collapsed mode */
#sidebar.collapsed .sidebar-link {
  padding: 0 !important;
  margin: 6px auto;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
}

/* Icon centering */
#sidebar.collapsed .sidebar-link i {
  margin: 0 !important;
  font-size: 22px;
}

/* Hover & active background stays centered */
#sidebar.collapsed .sidebar-link:hover,
#sidebar.collapsed .sidebar-link.active {
  background: linear-gradient(
    90deg,
    rgba(75,133,163,0.18),
    rgba(75,133,163,0.06)
  );
}

/* Remove left accent bar when collapsed */
#sidebar.collapsed .sidebar-link::before {
  display: none;
}
/* =========================================================
   SIDEBAR TOGGLE BUTTON – CENTERED ON DIVIDER
   Adds elegant, centered placement without altering layout
   ========================================================= */

/* Sidebar must be relative for absolute toggle positioning */
#sidebar {
  position: relative;
}

/* Toggle button positioned at vertical center of divider */
#sidebarToggle {
  position: absolute;
  top: 50%;
  right: -8px;               /* overlaps the divider */
  transform: translateY(-50%);
  z-index: 1000;

  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #ffffff;
  border: 1px solid #d1d5db;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);

  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  cursor: pointer;
}

/* Rotate toggle arrow when sidebar is collapsed */
#sidebar.collapsed #sidebarToggle {
  transform: translateY(-50%) rotate(180deg);
}

/* Optional hover polish */
#sidebarToggle:hover {
  color: #37627A;
}


/* =========================================================
   COLLAPSED SIDEBAR: DARK HOVER + NATIVE TOOLTIP SUPPORT
   ========================================================= */

/* Darker background when collapsed & hovered */
#sidebar.collapsed .sidebar-link:hover,
#sidebar.collapsed .sidebar-link.active {
  background-color: #2f5f79 !important; /* dark blue */
  color: #ffffff !important;
}

#sidebar.collapsed .sidebar-link:hover i {
  color: #ffffff !important;
}

/* =========================================================
   DARK HOVER FOR EXPANDED (UN-COLLAPSED) SIDEBAR ITEMS
   Matches collapsed hover behavior
   ========================================================= */

/* Expanded sidebar hover */
#sidebar:not(.collapsed) .sidebar-link:hover,
#sidebar:not(.collapsed) .sidebar-link.active {
  background-color: #2f5f79 !important;  /* same dark blue as collapsed */
  color: #ffffff !important;
}

#sidebar:not(.collapsed) .sidebar-link:hover i,
#sidebar:not(.collapsed) .sidebar-link.active i {
  color: #ffffff !important;
}

/* Keep left indicator bar visible & aligned */
#sidebar:not(.collapsed) .sidebar-link.active::before,
#sidebar:not(.collapsed) .sidebar-link:hover::before {
  background-color: #ffffff;
}

/* ================================
   COLLAPSED MODE – COMMERCIAL FLYOUT
   ================================ */

#sidebar.collapsed .commercial-flyout {
  position: fixed;
  left: 60px;                 /* collapsed sidebar width */
  top: auto;
  min-width: 260px;
  background: #ffffff;
  box-shadow: 0 8px 24px rgba(0,0,0,0.18);
  border-radius: 8px;
  padding: 8px;
  z-index: 3000;
  display: none;
}

#sidebar.collapsed .commercial-hover:hover .commercial-flyout {
  display: block;
}


/* =============================================
   FLYOUT PANEL STYLING (COLLAPSED MODE)
   ============================================= */

.flyout-panel {
  position: fixed !important;
  top: 120px;
  left: 85px;                   /* collapsed sidebar width */
  min-width: 360px;
  max-height: 70vh;
  overflow-y: auto;

  background: #ffffff;
  border-radius: 10px;
  box-shadow: 0 12px 32px rgba(0,0,0,0.25);
  padding: 8px 0;
  z-index: 6000;

  display: block !important;
}

.flyout-panel .sidebar-link {
  justify-content: flex-start !important;
  padding: 10px 18px !important;
  margin: 4px 12px;
  border-radius: 8px;
  font-size: 13.5px;
  white-space: nowrap;
}

.flyout-panel .sidebar-link:hover {
  background-color: #2f5f79;
  color: #ffffff;
}

.flyout-panel .sidebar-link i {
  display: none; /* text-only */
}



/* =========================================================
   COLLAPSED MODE RULES – DISABLE INLINE SUBMENUS
   Reports appear ONLY in fly-out panels
   ========================================================= */

/* Prevent clicking / expanding categories in collapsed mode */
#sidebar.collapsed .sidebar-link[data-toggle="collapse"] {
  pointer-events: none;
}

/* Ensure submenus never appear inside sidebar when collapsed */
#sidebar.collapsed ul.collapse {
  display: none !important;
  height: 0 !important;
  overflow: hidden !important;
}


/* =========================================================
   COLLAPSED MODE – FLYOUT ONLY
   ========================================================= */

/* Disable category clicks when collapsed */
#sidebar.collapsed .sidebar-link[data-toggle="collapse"]{
  pointer-events: none;
}

/* Never show reports inside collapsed sidebar */
#sidebar.collapsed ul.collapse{
  display: none !important;
}

/* =========================================================
   FLYOUT PANEL (REPORT SELECTION WINDOW)
   ========================================================= */
.flyout-panel{
  position: fixed !important;
  top: 120px;
  left: 85px;
  min-width: 360px;
  max-height: 70vh;
  overflow-y: auto;
  background: #ffffff;
  border-radius: 10px;
  box-shadow: 0 12px 32px rgba(0,0,0,0.25);
  padding: 8px 0;
  z-index: 9999;
}

.flyout-panel .sidebar-link{
  pointer-events: auto !important;
  cursor: pointer;
  justify-content: flex-start !important;
  padding: 10px 18px !important;
  margin: 4px 12px;
  border-radius: 8px;
  white-space: nowrap;
}

.flyout-panel .sidebar-link:hover{
  background-color: #2f5f79;
  color: #ffffff;
}

.flyout-panel i{ display:none; }


/* =========================================================
   COLLAPSED MODE – FLYOUT ONLY
   ========================================================= */

#sidebar.collapsed .sidebar-link[data-toggle="collapse"] {
  pointer-events: none;
}

#sidebar.collapsed ul.collapse {
  display: none !important;
}

/* =========================================================
   FLYOUT PANEL – CLICK ENABLED
   ========================================================= */
.flyout-panel {
  position: fixed !important;
  top: 120px;
  left: 85px;
  min-width: 380px;
  max-height: 70vh;
  overflow-y: auto;
  background: #ffffff;
  border-radius: 10px;
  box-shadow: 0 12px 32px rgba(0,0,0,0.25);
  padding: 8px 0;
  z-index: 99999;
}

.flyout-panel .sidebar-link {
  pointer-events: auto !important;
  cursor: pointer !important;
  justify-content: flex-start !important;
  padding: 10px 18px !important;
  margin: 4px 12px;
  border-radius: 8px;
  white-space: nowrap;
}

.flyout-panel .sidebar-link:hover {
  background-color: #2f5f79;
  color: #ffffff;
}

.flyout-panel i { display: none; }


/* =========================================================
   COLLAPSED MODE – INLINE SUBMENUS HIDDEN
   ========================================================= */
#sidebar.collapsed ul.collapse {
  display: none;
}


/* =========================================================
   COLLAPSED SIDEBAR – FIX TOOLTIP VISIBILITY
   Root cause: overflow hidden was clipping tooltips
   ========================================================= */

#sidebar.collapsed {
  overflow: visible !important; /* allow tooltip to escape */
}

/* Hide text labels when collapsed */
#sidebar.collapsed .sidebar-link span {
  display: none;
}

/* Enable tooltips using title attribute */
#sidebar.collapsed .sidebar-link {
  white-space: nowrap;
}


/* =========================================================
   ON-FLY WINDOW – STABLE STYLE
   ========================================================= */
.onfly-panel{
  position: fixed;
  min-width: 360px;
  max-height: 70vh;
  overflow-y: auto;
  background: #ffffff;
  border-radius: 10px;
  box-shadow: 0 12px 32px rgba(0,0,0,0.25);
  z-index: 10000;
  padding: 6px 0;
}

.onfly-panel .sidebar-link{
  cursor: pointer;
  display: block;
  padding: 10px 18px;
}

.onfly-panel .sidebar-link:hover{
  background-color: #2f5f79;
  color: #ffffff;
}

#sidebar.collapsed ul.collapse{
  display:none !important;
}


/* =========================================================
   ON-FLY REPORT WINDOW – VISUAL PARITY
   ========================================================= */
.onfly-panel {
  position: fixed;
  min-width: 360px;
  max-height: 70vh;
  overflow-y: auto;
  background: #ffffff;
  border-radius: 10px;
  box-shadow: 0 12px 32px rgba(0,0,0,0.25);
  z-index: 10000;
  padding: 6px 0;
}

.onfly-panel .sidebar-link {
  display: block;
  cursor: pointer;
  padding: 10px 18px;
}

.onfly-panel .sidebar-link:hover {
  background-color: #2f5f79;
  color: #ffffff;
}

#sidebar.collapsed ul.collapse {
  display: none !important;
}


/* =========================================================
   ON-FLY REPORT WINDOW – VISUAL ONLY
   ========================================================= */
.onfly-panel {
  position: fixed;
  min-width: 360px;
  max-height: 70vh;
  overflow-y: auto;
  background: #ffffff;
  border-radius: 10px;
  box-shadow: 0 12px 32px rgba(0,0,0,0.25);
  z-index: 10000;
  padding: 6px 0;
}

.onfly-panel .sidebar-link {
  display: block;
  cursor: pointer;
  padding: 10px 18px;
}

.onfly-panel .sidebar-link:hover {
  background-color: #2f5f79;
  color: #ffffff;
}

#sidebar.collapsed ul.collapse {
  display: none !important;
}