/* ============================================================
   BPC HRIS — Porto theme overrides
   Bridges Bootstrap 3 views with Porto's Bootstrap-5-based
   layout chrome. Also applies BPC brand colours.
   ============================================================ */

/* ── Bootstrap 5 display-utility shim (Porto layout uses these) ── */
.d-none { display: none !important; }
.d-md-block { display: none !important; }
@media (min-width: 992px) {
  .d-md-none  { display: none !important; }
  .d-md-block { display: block !important; }
}
.float-end { float: right !important; }

/* ── BPC brand colour overrides ──────────────────────────── */
/* Sidebar background */
.sidebar-left { background: var(--hris-sidebar-bg) !important; }
.sidebar-left .sidebar-header { background: var(--hris-sidebar-header-bg) !important; border-bottom: 1px solid var(--hris-sidebar-border); }
.sidebar-left .sidebar-title  { color: var(--hris-sidebar-muted) !important; font-size: 12px !important; text-transform: uppercase; letter-spacing: .07em; }

/* Top header */
.header { background: var(--hris-sidebar-bg) !important; border-bottom: none !important; box-shadow: 0 2px 6px rgba(0,0,0,.3) !important; }
.header .logo { color: #fff !important; text-decoration: none; }
.header .logo:hover { color: var(--hris-sidebar-muted) !important; }

/* Sidebar nav links */
.sidebar-left .nav-main li > a {
  color: var(--hris-sidebar-link) !important;
  border-left: 3px solid transparent;
  font-size: 13px;
}
.sidebar-left .nav-main li > a:hover,
.sidebar-left .nav-main li > a:focus {
  color: #fff !important;
  background: rgba(255,255,255,.08) !important;
}
.sidebar-left .nav-main li.nav-active > a,
.sidebar-left .nav-main > li.nav-active > a {
  color: #fff !important;
  background: rgba(255,255,255,.12) !important;
  border-left-color: var(--hris-sidebar-active) !important;
}
/* Section parent labels */
.sidebar-left .nav-main > li.nav-parent > a {
  color: var(--hris-sidebar-muted) !important;
  font-weight: 600;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .05em;
}
.sidebar-left .nav-main > li.nav-parent > a:hover { color: #fff !important; }
.sidebar-left .nav-main > li.nav-parent.nav-active > a { color: #fff !important; }

/* Children nav */
.sidebar-left .nav-main .nav-children { background: rgba(0,0,0,.15) !important; }
.sidebar-left .nav-main .nav-children li > a { color: var(--hris-sidebar-link-child) !important; font-size: 13px; padding-left: 32px !important; }
.sidebar-left .nav-main .nav-children li > a:hover { color: #fff !important; background: rgba(255,255,255,.07) !important; }
.sidebar-left .nav-main .nav-children li.nav-active > a { color: #fff !important; border-left-color: var(--hris-sidebar-active) !important; background: rgba(255,255,255,.1) !important; }

/* Sidebar toggle icon */
.sidebar-left .sidebar-toggle i { color: var(--hris-sidebar-muted) !important; }
.sidebar-left .sidebar-toggle:hover i { color: #fff !important; }

/* Header right area */
.header .header-right .userbox .name { color: #fff !important; }
.header .header-right .userbox .role { color: var(--hris-sidebar-muted) !important; }
.header .header-right .userbox a { color: var(--hris-sidebar-muted) !important; }
.header .header-right .userbox a:hover { color: #fff !important; }
.header .header-right .userbox .custom-caret { color: var(--hris-sidebar-muted) !important; }
/* Porto's custom-caret::before uses \f107 (FA chevron-down) but sets no font-family.
   Without this, the glyph renders in the body font and shows as a box. */
.userbox .custom-caret::before { font-family: 'Font Awesome 6 Free' !important; font-weight: 900 !important; }
.header .header-right a { color: var(--hris-sidebar-muted) !important; font-size: 13px; }
.header .header-right a:hover { color: #fff !important; }

/* Breadcrumb */
.breadcrumbs > li + li:before { color: #999; }
.page-header h2 { color: var(--hris-heading-color); }

/* ── .boxes → Porto card look ─────────────────────────────── */
/* All existing HRIS views use .boxes for their card containers.
   Override to match Porto's card style. */
.boxes {
  background: #fff;
  border: 0;
  border-radius: 5px;
  box-shadow: 0 1px 3px rgba(0,0,0,.08);
  padding: 20px;
  margin-bottom: 18px;
}

/* ── Content area adjustments ─────────────────────────────── */
.content-body { background: var(--hris-content-bg) !important; }

/* Bootstrap 3 .container max-width constraint removed inside Porto content-body.
   Keeps the 15px side padding (needed for grid column gutters). */
.content-body .container { width: 100%; max-width: none; }
.content-body .container-fluid { padding-left: 0; padding-right: 0; }

/* Page header spacing */
.page-header {
  border-bottom: 1px solid #e9ecef;
  margin-bottom: 20px;
  padding-bottom: 10px;
}
.page-header h2 {
  font-size: 22px;
  font-weight: 600;
  margin: 0 0 4px;
}

/* ── Flash alerts ─────────────────────────────────────────── */
.hris-flash-area { margin-bottom: 16px; }

/* ── Collapsed sidebar — icon only ───────────────────────── */
html.sidebar-left-collapsed .sidebar-left .sidebar-title { display: none; }

/* Expand content-body when sidebar collapses to icon-only strip */
@media (min-width: 992px) {
  html.sidebar-left-collapsed .content-body { margin-left: 65px !important; }
}

/* ── Collapsed sidebar hover expansion (Fix 5) ────────────────────────
   Porto's built-in mechanism uses CSS :hover on .nano (unreliable in
   position:fixed context) and a Chrome-only JS "hovered" class. We add
   .bpc-hovered via mouseenter/mouseleave so all browsers get the same
   behaviour without depending on Skeleton initialisation.              ── */
@media (min-width: 992px) {
  html.sidebar-left-collapsed .sidebar-left .nano.bpc-hovered {
    width: 300px !important;
    z-index: 1015;
  }
  html.sidebar-left-collapsed .sidebar-left .nano.bpc-hovered .nav-main li a span {
    visibility: visible !important;
  }
  html.sidebar-left-collapsed .sidebar-left .nano.bpc-hovered .nav-main .nav-expanded > ul.nav-children {
    display: block !important;
  }
  html.sidebar-left-collapsed .sidebar-left .nano.bpc-hovered .nav-main li.nav-parent a:after {
    display: inline-block !important;
  }
  html.sidebar-left-collapsed .sidebar-left .nano.bpc-hovered .sidebar-widget,
  html.sidebar-left-collapsed .sidebar-left .nano.bpc-hovered .separator {
    display: block !important;
  }
}

/* ── Nano-scroll pane colour ──────────────────────────────── */
.nano > .nano-pane   { background: rgba(255,255,255,.08); }
.nano > .nano-pane > .nano-slider { background: rgba(255,255,255,.3); }

/* ── Sidebar scroll — bypass nanoScroller ─────────────────────────────
   Porto's .nano CSS sets overflow:hidden and makes .nano-content
   position:absolute with overflow:scroll. nanoScroller JS normally manages
   this, but we disable it (Modernizr.overflowscrolling:true) to prevent
   it capturing wheel events (preventPageScrolling:true) and scrolling nav
   items off-screen. Override to a plain overflow-y:auto flow layout.    ── */
#sidebar-left .nano,
#sidebar-right .nano         { overflow-y: auto !important; overflow-x: hidden !important; }
#sidebar-left .nano-content,
#sidebar-right .nano-content { position: relative !important; overflow: visible !important;
                                top: auto !important; right: auto !important;
                                bottom: auto !important; left: auto !important; }

/* ── Mobile sidebar ───────────────────────────────────────── */
@media (max-width: 991px) {
  /* Break Porto's display:table layout so content fills the viewport */
  .inner-wrapper {
    display: block !important;
    padding-top: 61px !important;
    padding-left: 0 !important;
  }
  .content-body {
    display: block !important;
    margin-left: 0 !important;
    padding-left: 0 !important;
    padding-top: 50px !important;
    width: 100% !important;
  }

  /* Keep header fixed at the top */
  .header {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 1020 !important;
  }

  /* Page header: Porto's html.fixed positions it at left:300px (sidebar width).
     On mobile there's no sidebar, so reset it to full width below the fixed nav. */
  html.fixed .page-header {
    position: fixed !important;
    top: 61px !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 1010 !important;
    padding: 8px 16px !important;
    margin: 0 !important;
    background: #fff !important;
    box-shadow: 0 1px 4px rgba(0,0,0,.1) !important;
  }


  /* Sidebar: off-screen drawer. Override ALL Porto properties that conflict:
     Porto uses min-width, padding-top, margin-left (not left) for positioning. */
  #sidebar-left.sidebar-left {
    position: fixed !important;
    top: 61px !important;
    left: -280px !important;
    width: 270px !important;
    min-width: 0 !important;
    min-height: 0 !important;
    bottom: 0 !important;
    height: auto !important;
    margin-left: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    z-index: 1100 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    transition: left .25s ease !important;
    transform: none !important;
    box-shadow: 3px 0 14px rgba(0,0,0,.2);
  }
  html.sidebar-left-opened #sidebar-left.sidebar-left {
    left: 0 !important;
    margin-left: 0 !important;
  }

  /* Backdrop overlay — dims content when sidebar is open */
  .content-body::before {
    content: '';
    display: none;
    position: fixed;
    top: 61px;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,.48);
    z-index: 1080;
    -webkit-tap-highlight-color: transparent;
  }
  html.sidebar-left-opened .content-body::before { display: block; }

  /* ── Mobile right sidebar ─────────────────────────────────── */
  #sidebar-right.sidebar-right {
    position: fixed !important;
    top: 61px !important;
    right: -300px !important;
    bottom: 0 !important;
    width: 280px !important;
    min-width: 0 !important;
    min-height: 0 !important;
    height: auto !important;
    margin-right: 0 !important;
    padding: 0 !important;
    z-index: 1100 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    transition: right .25s ease !important;
    box-shadow: -3px 0 14px rgba(0,0,0,.2);
  }
  html.sidebar-right-opened #sidebar-right.sidebar-right {
    right: 0 !important;
  }
  html.sidebar-right-opened .content-body::before { display: block; }

  /* Prevent Porto's desktop layout-shift (margin-left: -300px on inner-wrapper)
     from firing on mobile when right sidebar opens */
  html.sidebar-right-opened .inner-wrapper  { margin-left: 0 !important; }
  html.sidebar-right-opened .header         { margin-left: 0 !important; margin-right: 0 !important; }

  /* Fixed-header calendar button — shown only on mobile */
  .bpc-sidebar-right-btn { display: flex !important; }

  .sidebar-right .mobile-close {
    display: block !important;
    padding: 10px 16px;
    color: #aaa;
    font-size: 13px;
    text-align: right;
    text-decoration: none;
    border-bottom: 1px solid rgba(255,255,255,.07);
  }
  .sidebar-right .mobile-close:hover { color: #fff; }
}

/* ── Mobile content ───────────────────────────────────────── */
@media (max-width: 767px) {
  /* Reduce card padding on phones to reclaim horizontal space */
  .content-body .boxes { padding: 14px 12px; }

  /* Page title smaller on phones */
  .page-header h2 { font-size: 18px !important; }

  /* Wide HRIS tables scroll horizontally instead of overflowing */
  .content-body .boxes { overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* Prevent iOS Safari from zooming in when tapping form inputs.
     iOS zooms when focused font-size < 16px; our default is 14px. */
  .content-body .form-control,
  .content-body input[type="text"],
  .content-body input[type="email"],
  .content-body input[type="number"],
  .content-body input[type="date"],
  .content-body input[type="tel"],
  .content-body input[type="password"],
  .content-body input[type="search"],
  .content-body select,
  .content-body textarea { font-size: 16px !important; }
}

/* ── Phone-width header ───────────────────────────────────── */
/* Hide "My HR" / "← Site" text links at very small widths
   so they don't crowd the userbox; everything is reachable via sidebar */
@media (max-width: 480px) {
  .topbar-nav-links { display: none !important; }
}

/* ── Porto brand name in logo ─────────────────────────────── */
.porto-logo-text {
  font-size: 18px;
  font-weight: 700;
  color: #fff;
  letter-spacing: .02em;
  line-height: 1;
}
.porto-logo-sub {
  font-size: 10px;
  color: var(--hris-sidebar-muted);
  letter-spacing: .05em;
  text-transform: uppercase;
  display: block;
  line-height: 1.2;
}

/* ── Button colours
   Porto (BS5) changes btn-primary hover to an unexpected colour.
   Pin primary to BPC blue so hover is a clean darker shade.          ── */
.content-body .btn-primary                        { background-color: var(--hris-btn-primary) !important; border-color: var(--hris-btn-primary) !important; color: #fff !important; }
.content-body .btn-primary:hover,
.content-body .btn-primary:focus,
.content-body .btn-primary:active                 { background-color: var(--hris-btn-primary-hover) !important; border-color: var(--hris-btn-primary-border) !important; color: #fff !important; }

/* ── Button sizing
   Porto uses .btn.btn-sm (specificity 0,2,0) with rem values that resolve
   to ~10px at its 13px body base. !important is needed to win reliably.
   Scoped to .content-body so the catalog layout is unaffected.         ── */
.content-body .btn {
  padding: 8px 18px !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 1.42857 !important;
  border-radius: 4px !important;
  letter-spacing: .01em;
}
.content-body .btn-sm,
.content-body .btn-group-sm > .btn {
  padding: 5px 12px !important;
  font-size: 13px !important;
  border-radius: 3px !important;
}
.content-body .btn-xs,
.content-body .btn-group-xs > .btn {
  padding: 3px 8px !important;
  font-size: 12px !important;
  border-radius: 3px !important;
}
.content-body .btn-lg,
.content-body .btn-group-lg > .btn {
  padding: 10px 22px !important;
  font-size: 15px !important;
  border-radius: 5px !important;
}
/* input[type=submit] height reset */
.content-body input[type="submit"].btn,
.content-body input[type="button"].btn {
  height: auto !important;
}

/* ── Base font reset for content area
   Porto sets body{font-size:13px} globally. Reset the content area so
   rem-based rules and inherited text resolve to something readable.   ── */
.content-body {
  font-size: 14px !important;
}
.content-body p,
.content-body td,
.content-body th,
.content-body li,
.content-body span:not(.badge):not(.label):not(.bx) {
  font-size: 14px;
}

/* ── Form control sizing
   Porto's .form-control:not(.form-control-sm):not(.form-control-lg)
   has specificity (0,3,0) and resolves to ~11px at Porto's 13px base.
   !important is required to win that specificity battle.               ── */
.content-body .form-control {
  font-size: 14px !important;
  padding: 7px 12px !important;
  height: 36px !important;
  min-height: 36px !important;
  line-height: 1.42857 !important;
  border-radius: 4px;
}
.content-body select.form-control {
  height: 36px !important;
  min-height: 36px !important;
}
.content-body textarea.form-control {
  height: auto !important;
  min-height: 80px !important;
}
.content-body .input-sm,
.content-body .form-control.input-sm,
.content-body .input-group-sm > .form-control,
.content-body .input-group-sm > .input-group-addon,
.content-body .input-group-sm > .input-group-btn > .btn {
  font-size: 13px !important;
  padding: 5px 10px !important;
  height: 32px !important;
  min-height: 32px !important;
}
.content-body select.input-sm,
.content-body select.form-control.input-sm {
  height: 32px !important;
}
.content-body .input-lg,
.content-body .form-control.input-lg {
  font-size: 16px !important;
  padding: 10px 16px !important;
  height: 46px !important;
  min-height: 46px !important;
}
/* Labels */
.content-body label {
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 4px;
}

/* ── Header-right flex layout ─────────────────────────────
   Porto's .header-right defaults to float:right with inline-block
   children. .topbar-nav-links (display:flex) creates a block-level
   element inside it, pushing the separator and userbox to a second
   line and causing a reflow when the dropdown opens.
   Switching header-right to flexbox keeps all three items in one
   stable row regardless of dropdown state.                        ── */
.header .header-right {
  display: flex !important;
  align-items: center;
  height: 60px;
}

/* Separator: height:100% resolves to 0 in flex without stretch */
.header .header-right > .separator {
  align-self: stretch;
  height: auto !important;
}

/* ── Topbar nav links (My HR, ← Site, etc.) ──────────────── */
/* No margin-left:auto — header-right is already float:right */
.topbar-nav-links { display: flex; align-items: center; gap: 16px; }
.topbar-nav-links a { color: var(--hris-sidebar-muted); font-size: 13px; text-decoration: none; }
.topbar-nav-links a:hover { color: #fff; }

/* ── Userbox dropdown (Bootstrap 3 compatible) ───────────── */
/* Reset Porto's inline-block margin/alignment — handled by flex parent */
#userbox { position: relative; flex-shrink: 0; margin: 0 17px 0 0; vertical-align: unset; }
#userbox > a { display: flex; align-items: center; gap: 8px; padding: 0 10px; }
#userbox .profile-info { display: flex; flex-direction: column; line-height: 1.3; }
/* Porto's default .userbox .dropdown-menu uses a BS5-only overlay pattern:
   top:-10px / padding-top:45px positions the menu so it visually slides OVER
   the trigger. Without BS5's .show z-index on the anchor, the overlay covers
   the trigger (making it appear to vanish). Override to a plain below-trigger
   dropdown compatible with Bootstrap 3's .open > .dropdown-menu. */
#userbox .dropdown-menu {
  top: 100% !important;
  left: auto !important;
  right: 0 !important;
  padding: 5px 0 !important;
  width: auto !important;
  min-width: 160px !important;
  margin-top: 4px;
  z-index: 1030 !important;
}
#userbox .dropdown-menu li a { color: #333; font-size: 13px; padding: 6px 16px; display: block; }
#userbox .dropdown-menu li a i { margin-right: 5px; font-size: 14px; opacity: 0.7; }
#userbox .dropdown-menu li a:hover { background: #f5f5f5; color: #333; }
#userbox .dropdown-menu .divider { height: 1px; background: #e5e5e5; margin: 4px 0; }
/* Porto uses div.dropdown-menu > ul.list-unstyled — remove UL margin/padding */
#userbox .dropdown-menu ul.list-unstyled { margin: 0; padding: 5px 0; }

/* ── Right sidebar ─────────────────────────────────────────────
   Porto's theme.css already handles sidebar-right positioning and
   the sidebar-right-opened class on <html>. These rules fill gaps
   for the fixed layout and adapt the sidebar-right-wrapper colours. ── */

/* Upcoming tasks list in the right sidebar widget-calendar */
.sidebar-right .sidebar-widget.widget-calendar ul li {
  padding: 6px 0;
  border-bottom: 1px solid rgba(255,255,255,.07);
}
.sidebar-right .sidebar-widget.widget-calendar ul li:last-child { border-bottom: none; }
.sidebar-right .sidebar-widget.widget-calendar ul time {
  display: block;
  font-size: 11px;
  color: var(--hris-sidebar-muted);
}
.sidebar-right .sidebar-widget.widget-calendar ul span {
  font-size: 12px;
  color: #ccc;
}

/* Sidebar-right toggle button in page-header */
.sidebar-right-toggle { cursor: pointer; }

/* ── Page-header right-wrapper alignment ────────────────────────
   Porto's page-header uses float:left on h2; the right-wrapper must
   float:right to fill the remaining space. Porto BS5 gets this via
   flexbox utilities; we need an explicit rule for our BS3 context. ── */
.page-header .right-wrapper {
  float: right;
  display: flex;
  align-items: center;
  height: 50px;
  padding-right: 6px;
}

/* ── Sidebar left — bottom widgets ─────────────────────────────
   Porto's widget-tasks list uses colored bullets from theme.css.
   These supplement for the collapsed-sidebar hide and link colour. ── */
.sidebar-left .sidebar-widget .widget-content { display: block; }
.sidebar-left .sidebar-widget.widget-tasks ul li a { color: var(--hris-sidebar-muted); font-size: 12px; }

/* ── Summernote toolbar: dropdown positioning fixes ────────────────
   Porto's .inner-wrapper has overflow:hidden and note-btn-group uses
   float:none, which can cause dropdown menus to clip or appear under
   fixed elements. These overrides ensure correct stacking and close
   the 1px gap between the trigger button and the dropdown panel that
   causes premature close when the mouse traverses the gap.           */
.note-editor .note-toolbar .note-btn-group {
  position: relative;
  display: inline-block;
}
.note-editor .note-toolbar .note-dropdown-menu {
  z-index: 9999 !important;
  margin-top: -1px;
}
.note-popover.popover {
  z-index: 9999 !important;
}
/* Summernote toolbar tooltips are moved to body (see hris.html.erb bpcFixSummernoteTooltips).
   Porto has fixed elements up to z-index 1100; this ensures tooltips always render on top. */
body > .tooltip {
  z-index: 99999 !important;
}
.sidebar-left .sidebar-widget.widget-tasks ul li a:hover { color: #fff; }