/*********************************************
*  theme.css
*  Project: 2ShineBS5 (https://2shine.org/)
*  Purpose: Bootstrap 5 theming + JobNext layout
*  Notes:
*    - Variables live under :root
*    - Components are grouped by area
*    - LEFT RAIL sidebar is refactored and de-duplicated
*********************************************/

@import url("animated.css");

/* =========================================
   Root variables & high-level component vars
   ========================================= */
:root,
[data-bs-theme="default-theme"] {
  /* Brand Colors */
  --bs-primary:   #29ABE2;
  --bs-secondary: #2554A0;

  /* Page surfaces */
  --theme-backdrop-bg: #E5E5E5;      /* far background behind site */
  --theme-page-main-bg: #ffffff;     /* main content background   */
  --theme-breadcrumb-bg: var(--theme-page-main-bg);
  --theme-footer-bg: var(--bs-primary);
  --theme-nav-bg: #fff;

  /* Text & link colors */
  --bs-body-bg:    #ffffff;
  --bs-body-color: #555555;
  --bs-link-color: var(--bs-primary);
  --bs-link-hover-color: var(--bs-body-color);

  /* Typography */
  --theme-font: "Manrope", Arial;
  --theme-font-headlines: var(--theme-font);
  --bs-body-font-family: var(--theme-font);
  --bs-body-font-size: 1rem;
  --bs-body-font-weight: 400;
  --bs-body-line-height: 1.5;
  --bs-body-h1-font-size: 2.5rem;

  /* Radii */
  --bs-border-radius:     0.375rem;
  --bs-border-radius-sm:  0.25rem;
  --bs-border-radius-lg:  0.5rem;
  --bs-border-radius-xl:  1rem;
  --bs-border-radius-xxl: 2rem;

  /* Shadows */
  --bs-box-shadow:       0 0.5rem 1rem rgba(0,0,0,.15);
  --bs-box-shadow-sm:    0 0.125rem 0.25rem rgba(0,0,0,.075);
  --bs-box-shadow-lg:    0 1rem 3rem rgba(0,0,0,.175);
  --bs-box-shadow-inset: inset 0 1px 2px rgba(0,0,0,.075);

  /* Component tweaks via variables */
  .breadcrumb { --bs-breadcrumb-font-size: 14px; }
  .table      { --bs-table-bg: var(--bs-body-bg); }

  .navbar-nav{
    --bs-nav-link-color:       var(--bs-body-color);
    --bs-nav-link-hover-color: var(--bs-primary);
    --bs-navbar-active-color:  var(--bs-primary);
  }

  .footer{
    --bs-link-color:       #fff;
    --bs-link-hover-color: var(--bs-body-color);
  }

  /* Buttons */
  .btn-primary{
    --bs-btn-color:#fff;
    --bs-btn-bg:var(--bs-primary);
    --bs-btn-border-color:var(--bs-primary);
    --bs-btn-hover-color:#fff;
    --bs-btn-hover-bg:color-mix(in srgb, var(--bs-primary) 15%, #000);
    --bs-btn-hover-border-color:color-mix(in srgb, var(--bs-primary) 15%, #000);
    --bs-btn-active-color:#fff;
    --bs-btn-active-bg:color-mix(in srgb, var(--bs-primary) 15%, #000);
    --bs-btn-active-border-color:color-mix(in srgb, var(--bs-primary) 15%, #000);
    --bs-btn-disabled-color:#fff;
    --bs-btn-disabled-bg:var(--bs-primary);
    --bs-btn-disabled-border-color:var(--bs-primary);
  }
  .btn-outline-primary{
    --bs-btn-color:var(--bs-primary);
    --bs-btn-bg:#fff;
    --bs-btn-border-color:var(--bs-primary);
    --bs-btn-hover-color:#fff;
    --bs-btn-hover-bg:var(--bs-primary);
    --bs-btn-hover-border-color:var(--bs-primary);
    --bs-btn-active-color:#fff;
    --bs-btn-active-bg:var(--bs-primary);
    --bs-btn-active-border-color:var(--bs-primary);
    --bs-btn-disabled-color:var(--bs-primary);
    --bs-btn-disabled-bg:transparent;
    --bs-btn-disabled-border-color:var(--bs-primary);
  }
  .btn-secondary{
    --bs-btn-color:#fff;
    --bs-btn-bg:var(--bs-secondary);
    --bs-btn-border-color:var(--bs-secondary);
    --bs-btn-hover-color:#fff;
    --bs-btn-hover-bg:color-mix(in srgb, var(--bs-secondary) 15%, #000);
    --bs-btn-hover-border-color:color-mix(in srgb, var(--bs-secondary) 15%, #000);
    --bs-btn-active-color:#fff;
    --bs-btn-active-bg:color-mix(in srgb, var(--bs-secondary) 15%, #000);
    --bs-btn-active-border-color:color-mix(in srgb, var(--bs-secondary) 15%, #000);
    --bs-btn-disabled-color:#fff;
    --bs-btn-disabled-bg:var(--bs-secondary);
    --bs-btn-disabled-border-color:var(--bs-secondary);
  }
  .btn-outline-secondary{
    --bs-btn-color:var(--bs-secondary);
    --bs-btn-border-color:var(--bs-secondary);
    --bs-btn-hover-color:#fff;
    --bs-btn-hover-bg:var(--bs-secondary);
    --bs-btn-hover-border-color:var(--bs-secondary);
    --bs-btn-focus-shadow-rgb:13,110,253;
    --bs-btn-active-color:#fff;
    --bs-btn-active-bg:var(--bs-secondary);
    --bs-btn-active-border-color:var(--bs-secondary);
    --bs-btn-active-shadow:inset 0 3px 5px rgba(0,0,0,.125);
    --bs-btn-disabled-color:var(--bs-secondary);
    --bs-btn-disabled-bg:transparent;
    --bs-btn-disabled-border-color:var(--bs-secondary);
    --bs-gradient:none;
  }
}

/* Make sticky navs sit over submenus but below offcanvas etc. */
.sticky-top{ z-index:900 !important; }

/* =========================================
   LEFT RAIL SIDEBAR (DESKTOP ≥992px)
   - 56px rail by default
   - Click hamburger to pin open (.is-open)
   - Fly-out submenus at all depths
   - Icons fixed position in both states
   - No highlight bleed into content
   ========================================= */
@media (min-width: 992px){
  /* Sizing tokens */
  #siteSidebar{
    --sb-rail:65px;
    --sb-expanded:250px;
    --sb-label-w:150px;   /* width of the text column next to icons at level-0 */
  }

  /* Base rail */
  #siteSidebar.sidebar{
    width:var(--sb-rail);
    background:#fff;
    border-right:1px solid var(--bs-border-color);
    transition:width .22s ease;
    z-index:1050;
    padding:0;
    position:relative;
  }

  /* Sidebar header + icon-only toggle */
  #siteSidebar .sidebar-header{
    display:flex;
    align-items:center;
    gap: .5rem;
    padding: 0 .5rem 0 .75rem;            /* L/R padding keeps things off the edges */
    height:var(--sb-rail);
    border-bottom:1px solid var(--bs-border-color);
	overflow: hidden;
  }
  
/* Default (collapsed): the logo occupies no space and is invisible */
  #siteSidebar .sidebar-logo{
    display:block;                 /* keep it in the flow for transitions */
    height:32px;
    opacity:0;
    flex:0 0 0;                    /* <-- no flex basis, no space */
    width:auto;
    max-width:0;
    margin:0;
    transition: flex-basis .22s ease, width .22s ease, max-width .22s ease, opacity .15s ease;
  }

  /* Show the logo ONLY when expanded / open */
  #siteSidebar.is-open .sidebar-logo,
  #siteSidebar:not(.collapsed) .sidebar-logo{
    opacity:1;
    flex:0 0 180px;                /* allocate the space when open */
    width:180px;
    max-width:180px;
    margin-right:.25rem;
  }
  

  /* Alignments for header contents */
  #siteSidebar.is-open .sidebar-header,
  #siteSidebar:not(.collapsed) .sidebar-header{
    justify-content: space-between;        /* logo left, toggle right */
  }
  /*#siteSidebar.collapsed .sidebar-header,
  #siteSidebar:not(.is-open) .sidebar-header{
    justify-content: center;               
	
  }*/
  
  
  
  #siteSidebar .btn-icon{
    --size:36px;
    width:var(--size); height:var(--size);
    display:inline-flex; align-items:center; justify-content:center;
    padding:0; border:0; background:transparent; box-shadow:none; border-radius:.5rem;
    color:var(--bs-secondary);
  }
  #siteSidebar .btn-icon i{ font-size:1.125rem; line-height:1; }
  #siteSidebar .btn-icon:hover{ background:rgba(0,0,0,.06); color:var(--bs-primary); }
  #siteSidebar .btn-icon:focus{ outline:none; box-shadow:none; }
  #siteSidebar .btn-icon:focus-visible{ outline:2px solid var(--bs-primary); outline-offset:2px; }

  /* Align toggle: right when open, centered when collapsed */
  #siteSidebar:not(.collapsed) .sidebar-header{ justify-content:flex-end; padding-right:.5rem; }
  #siteSidebar.collapsed       .sidebar-header{ justify-content:center;  padding-right:0; }

  /* Top-level list reset */
  #siteSidebar .sidebar-menu.level-0{ margin:0; padding:.5rem 0; list-style:none; }
  #siteSidebar .sidebar-menu.level-0 > li{ margin:0; }

  /* Links (all levels) */
  #siteSidebar .nav-link{
    box-sizing:border-box;
    display:flex; align-items:center; gap:.5rem;
    line-height:1.25;
    color: var(--bs-nav-link-color, var(--bs-body-color));
    text-decoration:none;
    border-radius:.5rem;
    /* keep the “pill” fully inside the rail (no bleed) */
    margin:.125rem .375rem;      /* horizontal inset on both sides */
	width:calc(100% - .75rem);   /* .375rem + .375rem = .75rem */
    padding:.5rem .5rem;         /* stable padding in both states */
    padding-left:14px;           /* fixed icon left offset */
    justify-content:flex-start;  /* icons don’t jump */
    background:transparent;
  }
  /* Remove any legacy pseudo-highlights */
  #siteSidebar .nav-link::before,
  #siteSidebar .nav-link::after{ content:none !important; }

  /* Icons: fixed size & position */
  #siteSidebar .nav-link .icon{
    width:24px; height:24px; object-fit:contain; display:block; flex:0 0 24px;
  }

  /* Only hide/show the text for TOP-LEVEL items */
#siteSidebar .sidebar-menu.level-0 > li > a > .sidebar-text{
  flex:0 0 0;
  width:0; max-width:0; overflow:hidden;
  opacity:0; visibility:hidden;
  white-space:nowrap;
  transition:opacity .15s ease, visibility .15s ease, width .22s ease, flex-basis .22s ease;
}

  /* Submenu text – ALWAYS visible (collapsed or expanded) */
  #siteSidebar .sidebar-submenu .sidebar-text{
    flex:1 1 auto;
    width:auto; max-width:none;
    opacity:1 !important; visibility:visible !important;
    white-space:nowrap;
  }

  /* Level-0 hover/active */
  #siteSidebar .sidebar-menu.level-0 .nav-link:hover,
  #siteSidebar .sidebar-menu.level-0 .nav-link.active{
    background:rgba(41,171,226,.12);
    color:var(--bs-primary);
  }

  /* Submenus (fly-outs) */
  #siteSidebar .nav-item{ position:relative; }
  #siteSidebar .sidebar-submenu{
    position:absolute; top:0; left:var(--sb-rail);   /* when rail is collapsed */
    width:var(--sb-expanded);
    list-style:none; margin:0; padding:.5rem 0;
    background:var(--theme-nav-bg);
    border:1px solid var(--bs-border-color);
    box-shadow:var(--bs-box-shadow);
    opacity:0; visibility:hidden; pointer-events:none;
    transition:opacity .15s ease, visibility .15s ease, left .22s ease;
    z-index:1100;
  }
  /* Submenu links: normal paddings and colors */
  #siteSidebar .sidebar-submenu .nav-link{
    margin:.125rem .5rem;
    padding:.5rem .75rem;              /* room for text */
    color:var(--bs-body-color);
    background:transparent;
  }
  #siteSidebar .sidebar-submenu .nav-link:hover{
    background:rgba(0,0,0,.04);
    color:var(--bs-primary);
  }

  /* Show submenu on hover (any depth) */
  #siteSidebar .has-children:hover > .sidebar-submenu{
    opacity:1; visibility:visible; pointer-events:auto;
  }

  /* Chevron shows only when pinned open; rotates on hover */
  #siteSidebar .has-children .submenu-toggle{ display:none; margin-left:auto; transition:transform .2s ease; }
  #siteSidebar.is-open .has-children .submenu-toggle{ display:inline-block; }
  #siteSidebar.is-open .has-children:hover > a .submenu-toggle{ transform:rotate(90deg); }

  /* -------- Pinned-open (click hamburger) -------- */
  #siteSidebar.is-open{ width:var(--sb-expanded); }
  #siteSidebar.is-open .sidebar-menu.level-0 > li > a > .sidebar-text{
	  flex:0 0 var(--sb-label-w);
	  width:var(--sb-label-w);
	  max-width:var(--sb-label-w);
	  opacity:1; visibility:visible;
	}
  #siteSidebar.is-open .sidebar-submenu{ left:100%; } /* pop to the right of expanded rail */

  /* Disabled anchors look/behave like Bootstrap’s */
  #siteSidebar .nav-link.disabled{
    pointer-events:none; opacity:.65;
  }
}

/* =========================================
   JobNext "sidebar_stats" widget (unchanged)
   ========================================= */
.sidebar_stats{
  --jn-item-bg: var(--bs-gray-100);
  --jn-item-hover-bg: var(--bs-gray-200);
  --jn-border: var(--bs-gray-300);
  --jn-icon-bg:#343a40;
  --jn-icon-color:#fff;
  font-size:16px;
}
.sidebar_stats ul{ margin:0; padding:0; list-style:none; }
.sidebar_stats li{ margin:0 0 .5rem 0; }
.sidebar_stats li p{
  margin:0; display:grid; grid-template-columns:32px 1fr; align-items:center; gap:.5rem;
  background:var(--jn-item-bg); border:1px solid var(--jn-border); border-radius:.5rem;
  padding:.7rem .9rem;
}
.sidebar_stats li p:hover{ background:var(--jn-item-hover-bg); }
.sidebar_stats li p .fa{
  display:inline-flex; align-items:center; justify-content:center;
  width:30px; height:30px; border-radius:.25rem;
  background:var(--jn-icon-bg); color:var(--jn-icon-color); font-size:15px;
}
.sidebar_stats li p a{
  display:flex; align-items:center; justify-content:space-between; gap:.5rem;
  color:var(--bs-primary); text-decoration:none; font-weight:500;
}
.sidebar_stats li p a:hover{ text-decoration:underline; }
.sidebar_stats .badge{
  margin-left:auto; display:inline-block; border-radius:10rem;
  background-color:var(--bs-secondary); color:#fff;
  font-weight:600; font-size:.8rem; line-height:1; padding:.28rem .6rem;
}
@media (max-width:420px){
  .sidebar_stats li p{ grid-template-columns:26px 1fr; padding:.5rem .6rem; }
  .sidebar_stats li p .fa{ width:24px; height:24px; font-size:12px; }
}
.sidebar_stats .badge:where(:not([data-badge])){ opacity:.85; }

/* =========================================
   NAVXP vertical tiles (BS5-safe)
   ========================================= */
.navxp-menu-simple{
  background:var(--bs-body-bg);
  border:1px solid var(--bs-border-color);
  border-radius:.75rem;
  padding:.5rem;
}
.navxp-menu-simple > .navbar-brand{ display:none; }
.navxp-menu-simple .navxp-level{ margin:0; padding:0; list-style:none; display:block; }
.navxp-menu-simple .navxp-level > li{ display:block; margin:.5rem .25rem; }
.navxp-menu-simple .navxp-level > li > a{
  display:block; width:100%;
  background:var(--bs-gray-100);
  border:1px solid var(--bs-gray-300);
  border-radius:.75rem;
  padding:.72rem 1rem;
  color:var(--bs-primary);
  text-decoration:none;
  font-weight:500;
  line-height:1.25;
  font-size:16px;
}
.navxp-menu-simple .navxp-level > li > a:hover{
  background:var(--bs-gray-200);
  text-decoration:underline;
}
.navxp-menu-simple .navxp-level > li.active > a,
.navxp-menu-simple .navxp-level > li > a[aria-current="page"]{
  background:var(--bs-primary); color:#fff;
}
.navxp-menu-simple .navxp-level > li > a::before{ content:none !important; }

/* =========================================
   Footer / branding minor tweaks
   ========================================= */
#theme-page-footer #omniHelp{
  display:inline-flex; align-items:center;
  color:var(--bs-secondary);
  text-decoration:none;
  line-height:1;
  font-size:1.25rem;
}
#theme-page-footer #omniHelp:hover{ color:var(--bs-primary); }

.company-brand .company-name{ font-size:1rem; line-height:1; }

/* =========================================
   Layout overflow safety & scrolling
   ========================================= */
.d-flex > .flex-grow-1{ min-width:0; }       /* let main column shrink */
html, body{ overflow-x:hidden; }              /* never scroll page horizontally */
#theme-page-main{ overflow-x:visible; }       /* modules manage overflow themselves */

/* Modules that may overflow horizontally can scroll within themselves */
#theme-page-main .table-responsive,
#theme-page-main .action-grid,
#theme-page-main .jqx-grid,
#theme-page-main .jqx-widget{
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
}

/* Never force scroll on generic containers */
#theme-page-main .actionForm,
#theme-page-main .DnnModule{
  overflow-x:visible !important;
}

/* Defensive: avoid sub-pixel overflow from rows in narrow panes */
#theme-page-main .row{ min-width:0; }

/* =========================================
   Responsive Compact Modes
   ========================================= */
@media (max-width:1600px){
  #theme-page-main{ font-size:.95rem; } /* ~15.2px */
  #theme-page-main .row{ --bs-gutter-x:.75rem; --bs-gutter-y:.75rem; }
}

@media (max-width:1366px){
  #theme-page-main{ font-size:.9rem; }  /* ~14.4px */
  #theme-page-main .row{ --bs-gutter-x:.5rem; --bs-gutter-y:.5rem; }

  /* cards / panels */
  #theme-page-main .card, #theme-page-main .panel{ margin-bottom:.75rem; }
  #theme-page-main .card-body, #theme-page-main .panel-body{ padding:.75rem; }

  /* forms */
  #theme-page-main .form-control, #theme-page-main .form-select{ padding:.25rem .5rem; }
  #theme-page-main .form-label, #theme-page-main .control-label{ margin-bottom:.25rem; }
  #theme-page-main .input-group-text{ padding:.25rem .5rem; }

  /* buttons */
  #theme-page-main .btn{ padding:.25rem .5rem; font-size:.9em; border-radius:.4rem; }

  /* tables */
  #theme-page-main table.table > :not(caption) > * > *{ padding:.35rem .5rem; }
  #theme-page-main .table{ font-size:.95em; }

  /* wrap long tokens/codes */
  #theme-page-main .table td,
  #theme-page-main .table th,
  #theme-page-main .jqx-grid-cell{
    overflow-wrap:anywhere; word-break:break-word;
  }

  /* jqxGrid sizing */
  #theme-page-main .jqx-grid-header,
  #theme-page-main .jqx-grid-column-header{ height:34px !important; }
  #theme-page-main .jqx-grid-header *,
  #theme-page-main .jqx-grid-column-header *,
  #theme-page-main .jqx-grid-cell{ font-size:.95em; }
}

@media (max-width:1280px){
  #theme-page-main{ font-size:.875rem; } /* ~14px */
  #theme-page-main .row{ --bs-gutter-x:.4rem; --bs-gutter-y:.4rem; }
  #theme-page-main .btn{ padding:.22rem .45rem; }
  #theme-page-main .card-body, #theme-page-main .panel-body{ padding:.6rem; }
}

/* Keep rows inside px-1 fluid containers from sticking out */
.container-fluid.px-1 .row,
#theme-page-header-pane.container-fluid.px-1 .row{
  --bs-gutter-x:.5rem;
}


/* Anonymous pages: force the rail collapsed regardless of saved state */
body.is-anon #siteSidebar{ width:var(--sb-rail) !important; }
body.is-anon #siteSidebar.is-open{ width:var(--sb-rail) !important; }   /* hard stop */
body.is-anon #siteSidebar .sidebar-menu.level-0 .sidebar-text{
  width:0; max-width:0; opacity:0; visibility:hidden;
}
body.is-anon #siteSidebar .submenu-toggle{ display:none; } /* no chevrons when collapsed */

/* turn the alert into a clean bordered card */
.af-login-info.alert-info{
  background:#fbfbfb !important;                   /* remove blue */
  border:1px solid var(--bs-border-color,#dfe3e8);
  border-radius:.75rem;
  box-shadow:0 1px 3px rgba(0,0,0,.03);
  padding:1rem 1.25rem;
  /* layout: copy on the left, logo on the right, equal height */
  display:grid;
  grid-template-columns: 1fr minmax(200px, 340px);
  align-items:stretch;                           /* make children same height */
  gap:1rem;
}

/* Login header box */
.af-login-hero{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  padding:1rem 1.25rem;
  border:1px solid var(--bs-border-color, #dde2e6);
  border-radius:14px;
  background:#fbfbfb !important;  
}

/* Keep the text block at a readable width; don't let it shrink */
.af-login-copy{
  flex:1 1 420px;         /* grows, but won't go below ~420px */
  min-width:360px;        /* keep labels/text from squeezing */
}

/* Logo area shrinks when space gets tight */
.af-login-brand{
  flex:0 1 420px;         /* preferred width but allowed to shrink */
  min-width:160px;        /* don't get microscopic */
}

/* Make the logo itself responsive */
.af-login-logo{
  display:block;
  width:clamp(180px, 35vw, 390px); /* scales with viewport */
  height:auto;                     /* keep aspect ratio */
  max-height:110px;                /* keeps the box neat */
  object-fit:contain;
}

/* If the screen is really narrow, allow the logo to drop below */
@media (max-width: 640px){
  .af-login-hero{ flex-wrap:wrap; }
  .af-login-brand{
    flex-basis:100%;
    display:flex;
    justify-content:flex-end;      /* or center, if you prefer */
  }
  .af-login-logo{
    width:min(70vw, 380px);
    max-height:96px;
  }
}