/* ============================================================
   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; }
/* Account button: show the user's initials centered in the avatar circle.
   Force pure white (the userbox <a> sets a muted color !important that would
   otherwise wash these out) and add a faint shadow for crispness. */
.header .header-right .userbox a .userbox-initials,
.userbox-initials {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .02em;
  line-height: 1;
  color: #ffffff !important;
  text-shadow: 0 1px 2px rgba(0,0,0,.25);
}
/* 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: 0 !important;    /* page-header is not fixed on mobile — no offset needed */
    width: 100% !important;
  }

  /* ── Mobile header: 3-part flex layout ─────────────────────────
     [logo + hamburger | notifications (centered) | userbox]
     header-right moves from position:absolute to a normal flex child
     so the notifications can be genuinely centered in the available space. */
  .header {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 1020 !important;
    height: 61px !important;
    overflow: visible !important;
    display: flex !important;
    align-items: center !important;
    padding: 0 !important;
  }

  /* Logo: left side, width constrained so icons get real estate */
  .header .logo-container {
    flex: 0 0 auto !important;
    background: transparent !important;
    background-image: none !important;
    border-top: none !important;
    border-bottom: none !important;
    height: 61px !important;
    display: flex !important;
    align-items: center !important;
    padding-right: 8px !important;
  }

  /* Header-right: flows normally in the flex row (not position:absolute) */
  .header .header-right {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    flex: 1 1 auto !important;
    height: 61px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    padding-right: 8px !important;
  }

  /* Notifications ul: sit at the right next to the userbox, with clear gaps
     between each 48px tap target so their circular hit areas never overlap. */
  .header .header-right .notifications {
    flex: 0 0 auto !important;
    justify-content: flex-end !important;
    gap: 10px !important;
    margin-right: 10px !important;
  }
  /* Spacing between adjacent notification <li> tap targets (gap covers flex,
     margin is a fallback for any non-gap layout). */
  .header .header-right .notifications > li { margin: 0 !important; }

  /* Page header: un-fixed on mobile — let it scroll with content.
     A fixed title bar eats ~40px of already-scarce mobile viewport.
     Porto's html.fixed left:300px offset is reset to full-width flow. */
  html.fixed .page-header {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    z-index: auto !important;
    padding: 10px 16px !important;
    margin: 0 !important;
    background: #f8f9fa !important;
    border-bottom: 1px solid #e9ecef !important;
    box-shadow: none !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; }

  /* Calendar sidebar button: hide on mobile — the centered notification
     icons are already the primary action area; this just adds clutter */
  .bpc-sidebar-right-btn { display: none !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; }

  /* Logo sub-text ("Human Resources") is too long for mobile — hide it.
     Also hide Porto's mobile logo line-height override that only works for
     single-line logos; our flex logo-container handles centering. */
  .porto-logo-sub { display: none !important; }
  .header .logo-container .logo { line-height: 1 !important; }

  /* ── Notification icon touch targets ────────────────────────────
     Make every header icon a 48×48px tap target. The key is display:flex
     on the <a> — inline anchors ignore explicit width/height otherwise.
     position:static on li removes it as an offset parent so the dropdown
     anchors to .header (full-width) instead of the tiny li box.          */
  .header .header-right .notifications > li {
    display: flex !important;
    align-items: center !important;
    position: static !important;
  }
  .header .header-right .notifications {
    position: static !important;
  }
  .header .header-right .notifications .notification-icon {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 44px !important;
    height: 44px !important;
    font-size: 24px !important;
    color: rgba(255,255,255,.9) !important;
    position: relative !important;
    /* Subtle filled circle so each icon clearly reads as a tappable button.
       Porto's default box-shadow drew a grey shadow disc that, with a
       transparent fill, looked like overlapping smudges — remove it. */
    background: rgba(255,255,255,.12) !important;
    box-shadow: none !important;
    border-radius: 50% !important;
  }
  .header .header-right .notifications .notification-icon:active {
    color: #fff !important;
    background: rgba(255,255,255,.30) !important;
  }
  /* Porto colors the glyph itself #777 (.notification-icon i) which is far too
     faint on our dark header. Force the icon bright white. */
  .header .header-right .notifications .notification-icon i {
    color: #fff !important;
  }
  .header .header-right .notifications .notification-icon:active i {
    color: #fff !important;
  }
  .header .header-right .notifications .notification-icon .badge {
    position: absolute !important;
    top: 6px !important; right: 6px !important;
    font-size: 10px !important;
    min-width: 16px !important; height: 16px !important;
    line-height: 16px !important; padding: 0 4px !important;
  }
  /* Userbox: position:static so its dropdown also anchors to .header */
  #userbox {
    position: static !important;
  }
  #userbox > a {
    width: 44px !important; height: 44px !important;
    display: flex !important;
    align-items: center !important; justify-content: center !important;
    padding: 0 !important; gap: 0 !important;
    background: rgba(255,255,255,.12) !important;
    border-radius: 50% !important;
  }
  #userbox > a:active { background: rgba(255,255,255,.30) !important; }
  #userbox > a .bx-user-circle { color: rgba(255,255,255,.9) !important; font-size: 28px !important; }
  /* Porto hides .userbox .profile-picture at ≤767px (it expects a desktop-only
     avatar). We use it to hold the initials/icon, so force it visible and
     centered in the 44px circle. */
  .header #userbox .profile-picture {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    margin: 0 !important;
  }

  /* ── Reserve space for the left-sidebar toggle (☰) in PORTRAIT ──────
     Porto absolutely-positions .toggle-sidebar-left at right:15px in the
     fixed header. Without reserving room, the userbox/notification icons
     in header-right flow to the same corner and overlap it — so a tap there
     is ambiguous (you see ☰ but may trigger the userbox menu). The landscape
     (768–991px) fix already does this; portrait (≤767px) was missing it.
     30px button + 15px right offset + 11px breathing room = 56px.          */
  .header .header-right { padding-right: 56px !important; }
  .header .toggle-sidebar-left { z-index: 2 !important; }

  /* ── Full-width dropdown drawer ─────────────────────────────────
     With all intermediate ancestors position:static, position:absolute
     on the dropdown anchors to .header (position:fixed, full viewport
     width). top:100% = just below the 61px header. This is more
     reliable than position:fixed inside a position:fixed container.  */
  .header .dropdown-menu {
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    min-width: 0 !important;
    max-height: 70vh !important;
    overflow-y: auto !important;
    border-radius: 0 0 8px 8px !important;
    box-shadow: 0 8px 24px rgba(0,0,0,.3) !important;
    z-index: 10000 !important;
    font-size: 17px !important;
  }
  /* Large, finger-friendly rows */
  .header .dropdown-menu li a,
  .header .dropdown-menu .content ul li a {
    font-size: 17px !important;
    padding: 16px 22px !important;
    line-height: 1.4 !important;
    display: block !important;
    color: #222 !important;
  }
  .header .dropdown-menu .divider,
  .header .dropdown-menu hr { margin: 4px 0 !important; }

  /* Notification panel title bar */
  .header .dropdown-menu .notification-title {
    font-size: 16px !important;
    font-weight: 700 !important;
    padding: 14px 22px !important;
    border-bottom: 2px solid #eee !important;
    color: #111 !important;
    letter-spacing: .03em !important;
    text-transform: uppercase !important;
  }

  /* Empty-state messages ("No open tasks", "No new notifications").
     These have inline style="color:#aaa" in the HTML — !important overrides. */
  .header .dropdown-menu .content ul li .message,
  .header .dropdown-menu .content ul li span.message {
    color: #555 !important;
    font-size: 16px !important;
    padding: 18px 22px !important;
    display: block !important;
    font-style: italic !important;
  }

  /* Notification item title + body text */
  .header .dropdown-menu .content ul li a .title {
    font-size: 16px !important;
    font-weight: 600 !important;
    color: #111 !important;
    display: block !important;
    margin-bottom: 4px !important;
  }
  .header .dropdown-menu .content ul li a .message {
    font-size: 14px !important;
    color: #555 !important;
  }

  /* "View All" footer — prominent call-to-action */
  .header .dropdown-menu .text-end,
  .header .dropdown-menu .text-right {
    padding: 12px 22px !important;
    border-top: 1px solid #eee !important;
    background: #f8f9fa !important;
  }
  .header .dropdown-menu .view-more {
    font-size: 16px !important;
    font-weight: 600 !important;
    color: #1565c0 !important;
    text-decoration: none !important;
  }

  /* Notification item image icon */
  .header .dropdown-menu .content ul li a .image {
    width: 42px !important; height: 42px !important;
    line-height: 42px !important; font-size: 20px !important;
  }

  /* 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 ───────────────────────────────────── */
/* At narrow widths, strip text-only elements from the header so icons
   and the hamburger button remain usable without crowding. */
@media (max-width: 480px) {
  /* Nav text links (My HR / ← Site) already hidden via absolute position flow */
  .topbar-nav-links { display: none !important; }
  /* Userbox: hide name + role text; keep the avatar icon only */
  #userbox .profile-info { display: none !important; }
}

/* ── Userbox caret: portrait mobile ──────────────────────────
   Without the name/role text the caret has no visual anchor and
   just floats beside the avatar icon. Hide it on phones in portrait
   (≤767 px); landscape is wider and renders the full userbox row. */
@media (max-width: 767px) {
  .header #userbox .custom-caret {
    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;
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  height: auto !important;
  float: none !important;
}

/* Separator: height:100% resolves to 0 in flex without stretch.
   Porto's default gradient (#F6F6F6→#EDEDED) is invisible on the dark header;
   override to a visible semi-transparent white line. */
.header .header-right > .separator {
  align-self: stretch;
  height: auto !important;
  background: rgba(255,255,255,0.15) !important;
  background-image: none !important;
}

/* ── Notification icons in header-right ───────────────────────
   Porto base: .notifications is inline-block with margin-top:4px and
   float:left children. In our flex header-right the 4px top margin
   shifts the icons below center; float children inside a flex item
   can collapse the ul height. Convert to a flex row to fix both.  ── */
.header .header-right .notifications {
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 0;
  padding: 0;
}
.header .header-right .notifications > li {
  float: none;
  margin: 0;
  position: relative;
  display: flex;
  align-items: center;
}

/* ── 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: 180px !important;
  margin-top: 4px;
  z-index: 1030 !important;
  /* Dark navy theme — matches the header/sidebar chrome */
  background: var(--hris-sidebar-bg) !important;
  border: 1px solid var(--hris-sidebar-border) !important;
  box-shadow: 0 6px 20px rgba(0,0,0,.35) !important;
  border-radius: 4px !important;
}
#userbox .dropdown-menu li a {
  color: var(--hris-sidebar-link) !important;
  font-size: 13px;
  padding: 8px 18px;
  display: block;
}
#userbox .dropdown-menu li a i {
  margin-right: 7px;
  font-size: 14px;
  opacity: 0.75;
  color: var(--hris-sidebar-muted);
}
#userbox .dropdown-menu li a:hover {
  background: var(--hris-sidebar-header-bg) !important;
  color: #fff !important;
}
#userbox .dropdown-menu li a:hover i { opacity: 1; color: #fff; }
#userbox .dropdown-menu .divider {
  height: 1px;
  background: var(--hris-sidebar-border) !important;
  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; }

/* ── Sidebar margin: guarantee full-width content on every mobile size ──────
   Porto's html.fixed.sidebar-left-collapsed .content-body has specificity
   (0,2,1) and beats our earlier (0,1,0) rule even at the same !important tier.
   Matching the specificity wins at every mobile size regardless of sidebar state. */
@media (max-width: 991px) {
  html.fixed .content-body,
  html.fixed.sidebar-left-collapsed .content-body {
    margin-left: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
}

/* ── Header nav search ──────────────────────────────────────────
   Porto's .header .search uses border-color:#EDEDED which is invisible
   on our dark header. Override colours for the dark context.
   Porto's responsive rule already hides .header .search at ≤767px. */
.header .search.nav-form {
  position: relative;
  flex-shrink: 0;
  padding: 0 4px;
  width: 170px;           /* explicit width — flex-shrink:0 alone doesn't cap growth */
  overflow: visible;      /* allow the absolute-positioned results dropdown to show */
}

/* ── Input-group in the search form: override Bootstrap 3's display:table ──
   BS3's .input-group uses display:table with table-cell children. Inside our
   flex .header-right the table expands to block width and can overflow the
   form's 170 px, with the transparent overflow surface capturing pointer events
   over the notification icons and making them unclickable.
   Switching to flex keeps everything inside the form's explicit 170 px box.   */
.header .search.nav-form .input-group {
  display: flex !important;
}
.header .search.nav-form .input-group .form-control {
  flex: 1 1 auto !important;
  width: auto !important;
  min-width: 0;
}
.header .search.nav-form .input-group-btn {
  flex: 0 0 auto !important;
  width: auto !important;
  display: flex !important;
  align-items: stretch;
}
.header .search .form-control {
  background: rgba(255,255,255,.10) !important;
  border-color: rgba(255,255,255,.18) !important;
  color: #fff !important;
  font-size: 13px !important;
  height: 30px !important;
  min-height: 30px !important;
  padding: 4px 10px !important;
  border-radius: 4px 0 0 4px;
}
.header .search .form-control::-webkit-input-placeholder { color: rgba(255,255,255,.4); }
.header .search .form-control::-moz-placeholder           { color: rgba(255,255,255,.4); }
.header .search .form-control::placeholder                { color: rgba(255,255,255,.4); }
.header .search .form-control:focus {
  background: rgba(255,255,255,.18) !important;
  border-color: rgba(255,255,255,.35) !important;
  outline: none;
  box-shadow: none !important;
}
.header .search .input-group-btn .btn-default {
  background: rgba(255,255,255,.10) !important;
  border-color: rgba(255,255,255,.18) !important;
  color: rgba(255,255,255,.65) !important;
  height: 30px;
  padding: 0 9px;
  line-height: 28px;
}
.header .search .input-group-btn .btn-default:hover {
  background: rgba(255,255,255,.22) !important;
  color: #fff !important;
}
/* Override Porto's top:3px offset — not needed in flex row */
.header .search .btn i { top: 0 !important; font-size: 14px; }

/* ── Search results dropdown ─────────────────────────────────── */
.hris-search-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 3px);
  left: 0;
  min-width: 260px;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 4px;
  box-shadow: 0 4px 18px rgba(0,0,0,.18);
  z-index: 9999;
  max-height: 340px;
  overflow-y: auto;
}
.hris-search-dropdown ul {
  list-style: none;
  margin: 0;
  padding: 4px 0;
}
.hris-search-dropdown ul li a {
  display: flex;
  flex-direction: column;
  padding: 7px 14px;
  color: #333 !important;
  font-size: 13px !important;
  text-decoration: none;
  line-height: 1.3;
  border-bottom: 1px solid #f0f0f0;
}
.hris-search-dropdown ul li:last-child a { border-bottom: none; }
.hris-search-dropdown ul li a:hover,
.hris-search-dropdown ul li.hris-search-active a {
  background: #f0f5ff !important;
  color: #333 !important;
}
.hris-search-section {
  display: block;
  font-size: 10px;
  color: #aaa;
  text-transform: uppercase;
  letter-spacing: .05em;
  margin-bottom: 2px;
}
.hris-search-label {
  display: block;
  font-weight: 600;
  color: #222;
}
.hris-search-no-results {
  padding: 10px 14px;
  color: #999;
  font-size: 13px;
  font-style: italic;
}

/* ══════════════════════════════════════════════════════════════
   MOBILE HEADER + CONTENT OVERRIDES — at end of file so they
   win the cascade over Porto's built-in mobile rules above.
   ══════════════════════════════════════════════════════════════ */

/* ── Dropdown: full-width at all mobile sizes ────────────────── */
@media (max-width: 991px) {
  /* Nav-search results dropdown overflows the header — must be visible */
  .header {
    overflow: visible !important;
  }
  /* position:fixed escapes the flex/positioned ancestor chain so the
     dropdown spans the full viewport width regardless of which ancestor
     is the containing block (header-right, header-left, etc.).
     top:61px = just below our 61 px header. */
  .header .dropdown-menu {
    position: fixed !important;
    top: 61px !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    z-index: 10000 !important;
  }
  /* Specificity fix: #userbox .dropdown-menu { top:100%; left:auto } has
     specificity (1,1,0) — higher than .header .dropdown-menu (0,2,0) —
     so it beats the rule above even with !important on both sides.
     Repeat the override with the same ID specificity inside this media
     block; being later in the file makes it win the cascade tie-break. */
  #userbox .dropdown-menu {
    top: 61px !important;
    left: 0 !important;
  }
}

/* ── Header-right: cancel Porto's mobile push-down ───────────────
   Porto's @media (max-width:767px) sets:
     .header .header-right { margin-top:60px; background:#FFF; width:100% }
   This pushes the notification icons into a white bar below the dark header.
   We're already making .header display:flex at ≤991px (see earlier block),
   so just zero the margin and clear the background here. */
@media (max-width: 767px) {
  .header .header-right {
    margin-top: 0 !important;
    background: transparent !important;
    width: auto !important;
  }
}

/* ── Notification icon visibility on dark mobile header ─────────
   User's earlier rule sets background:transparent (removes Porto's
   white circle). Override with a faint white fill + ring so icons
   read clearly against the dark navy header without a hard outline. */
@media (max-width: 767px) {
  .header .header-right .notifications .notification-icon {
    background: rgba(255,255,255,.14) !important;
    box-shadow: 0 0 0 1.5px rgba(255,255,255,.24) !important;
  }
  .header .header-right .notifications .notification-icon:active {
    background: rgba(255,255,255,.26) !important;
  }
}

/* ── Fix content-body padding ────────────────────────────────── */
@media (max-width: 991px) {
  /* Porto base: .content-body { padding:40px }
     Our earlier rule only zeroed padding-top and padding-left;
     remove all sides so cards sit flush with the viewport.       */
  .content-body {
    padding: 0 !important;
  }
}

/* ── Full-width mobile content ────────────────────────────────── */
@media (max-width: 767px) {
  /* Bootstrap .container still has 15px side-padding — zero it.
     .boxes keeps its own 12px internal padding for readability.  */
  .content-body .container {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  /* First card (greeting/hero): edge-to-edge, no rounded corners */
  .content-body .container > .boxes:first-child {
    border-radius: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}

/* ── Logo-container pointer-events passthrough ───────────────────
   Porto's mobile CSS sets .logo-container to
   position:fixed; left:0; right:0; z-index:99 — it spans the entire
   header width and, because it has a higher z-index than .header-right,
   its invisible right-hand area intercepts taps meant for the notification
   icons and userbox.
   Fix: make the container's surface transparent to pointer events while
   keeping its actual children (logo <a>, hamburger div) fully tappable.  */
@media (max-width: 767px) {
  .header .logo-container {
    pointer-events: none !important;
  }
  .header .logo-container > * {
    pointer-events: all !important;
  }
}

/* ── Landscape mobile: prevent toggle/userbox overlap ────────────
   Porto's .header .toggle-sidebar-left uses position:absolute; right:15px
   globally (no media query), relative to the fixed header — keeping it in
   the top-right corner. At landscape (768–991px) the userbox (last flex
   child of header-right) grows to the same right edge and overlaps it.

   Fix: give header-right a right-side pad equal to the toggle button's
   footprint (30 px button + 15 px gap + 5 px breathing room = 50 px)
   so the userbox stops short of where the toggle button sits.           */
@media (min-width: 768px) and (max-width: 991px) {
  .header .header-right {
    padding-right: 50px !important;
  }
  /* Toggle button sits inside logo-container (first flex child of header).
     header-right (second flex child, position:relative) comes later in the
     DOM so it stacks above logo-container's children in the same stacking
     context — its invisible padding area intercepts clicks on the toggle.
     Raising the toggle to z-index:1 puts it above header-right (z:auto). */
  .header .toggle-sidebar-left {
    z-index: 1 !important;
  }
}

/* ── Hide desktop rail-collapse toggle on mobile ──────────────────
   div.sidebar-toggle (marked d-none d-md-block in the HTML) is for
   desktop only — collapsing the icon rail at ≥992px. Bootstrap 4
   display utilities (d-none / d-md-block) are not included in our
   Bootstrap 3 build so the element is always rendered.
   Hide it explicitly at mobile sizes; the off-screen drawer trigger
   (.toggle-sidebar-left) is the correct control there.             */
@media (max-width: 991px) {
  .header .logo-container .sidebar-toggle {
    display: none !important;
  }
}

/* ── Print styles ────────────────────────────────────────────────
   Chrome paints position:fixed elements on top of page content on
   every page regardless of @page margins — the only reliable fix
   is to take the header out of fixed positioning during print.
   It renders once at the top of page 1; page 2+ content is clean. */
@media print {
  .header {
    position: relative !important;
    box-shadow: none !important;
  }

  table, .table {
    page-break-inside: avoid;
  }

  tr {
    page-break-inside: avoid;
    page-break-after: auto;
  }
}