/**
 * HRWorx — Custom Application Styles
 */

@import url('https://rsms.me/inter/inter.css');
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;600;700&family=IBM+Plex+Sans:wght@300;400;500;600;700&family=Open+Sans:wght@300;400;500;600;700&family=Source+Sans+3:wght@300;400;500;600;700&display=swap');

:root { font-family: 'Inter', sans-serif; }


/* ══════════════════════════════════════════════════════════════════════════════
   Background Gradient (set via --app-bg-gradient custom property)
══════════════════════════════════════════════════════════════════════════════ */
body {
  background: var(--app-bg-gradient, none);
  background-attachment: fixed;
}
.page-wrapper {
  background: var(--app-bg-gradient, none);
  background-attachment: fixed;
}

/* Dark mode: the admin background gradient is a light-mode decoration only.
   Suppress it so the dark theme's own body background shows through — matches
   Pro360 / ProTime, which don't paint the light gradient in dark mode. */
[data-bs-theme="dark"] body,
[data-bs-theme="dark"] .page-wrapper {
  background: var(--tblr-body-bg);
}

/* ══════════════════════════════════════════════════════════════════════════════
   Vertical Hover Sidebar
══════════════════════════════════════════════════════════════════════════════ */
@media (min-width: 992px) {
  body.sidebar-hover .navbar-vertical {
    position: fixed !important;
    top: 0; left: 0; bottom: 0;
    z-index: 1030;
    width: 70px !important;
    min-width: 70px !important;
    overflow: hidden;
    transition: width .2s ease;
  }
  body.sidebar-hover .navbar-vertical .navbar-collapse { display: flex !important; }

  /* Collapsed: hide text, center icons */
  body.sidebar-hover .navbar-vertical .navbar-brand span { display: none; }
  body.sidebar-hover .navbar-vertical .navbar-brand { justify-content: center; padding: .5rem 0; width: 100%; text-align: center; padding: .75rem 0; }
  body.sidebar-hover .navbar-vertical .sidebar-logo { display: none; }
  body.sidebar-hover .navbar-vertical .sidebar-favicon { display: inline-block; }
  body.sidebar-hover .navbar-vertical .nav-link-title,
  body.sidebar-hover .navbar-vertical .nav-link .badge,
  body.sidebar-hover .navbar-vertical .dropdown-toggle::after,
  body.sidebar-hover .navbar-vertical .dropdown-menu,
  body.sidebar-hover .navbar-vertical .dropdown-submenu,
  body.sidebar-hover .navbar-vertical .nav-subtitle,
  body.sidebar-hover .navbar-vertical .navbar-toggler { display: none !important; }
  body.sidebar-hover .navbar-vertical .nav-item-heading { padding: 0; margin: 0; height: 0; overflow: hidden; }
  body.sidebar-hover .navbar-vertical .nav-link { justify-content: center; padding: .5rem 0; white-space: nowrap; width: 100%; text-align: center; }
  body.sidebar-hover .navbar-vertical .nav-link-icon { margin: 0; }
  body.sidebar-hover .navbar-vertical .navbar-nav { align-items: center; }

  /* Hover: expand as overlay */
  body.sidebar-hover .navbar-vertical:hover { width: 260px !important; box-shadow: 4px 0 20px rgba(0,0,0,.2); }
  body.sidebar-hover .navbar-vertical:hover .navbar-brand span { display: inline; }
  body.sidebar-hover .navbar-vertical:hover .sidebar-logo { display: inline !important; }
  body.sidebar-hover .navbar-vertical:hover .sidebar-favicon { display: none !important; }
  body.sidebar-hover .navbar-vertical:hover .nav-link-title,
  body.sidebar-hover .navbar-vertical:hover .dropdown-toggle::after { display: inline !important; }
  body.sidebar-hover .navbar-vertical:hover .dropdown-menu.show,
  body.sidebar-hover .navbar-vertical:hover .dropdown-submenu.show { display: block !important; }
  body.sidebar-hover .navbar-vertical:hover .nav-subtitle { display: block !important; }
  body.sidebar-hover .navbar-vertical:hover .nav-item-heading { height: auto; overflow: visible; }
  body.sidebar-hover .navbar-vertical:hover .nav-link { justify-content: flex-start; padding: .5rem 1rem; text-align: left; }
  body.sidebar-hover .navbar-vertical:hover .nav-link-icon { margin-right: .5rem; }
  body.sidebar-hover .navbar-vertical:hover .navbar-brand { text-align: left; padding: .75rem 1rem; }
  body.sidebar-hover .navbar-vertical:hover .navbar-nav { align-items: stretch; }
  body.sidebar-hover .navbar-vertical:hover .sidebar-toggle-btn { display: inline-flex !important; }

  /* Content: fluid */
  body.sidebar-hover .page { display: flex !important; min-height: 100vh; }
  body.sidebar-hover .page > .page-wrapper,
  body.sidebar-hover .page > header.navbar:not(.navbar-vertical) {
    margin-left: 70px !important;
    width: calc(100vw - 70px) !important;
    max-width: none !important;
    transition: margin-left .2s ease, width .2s ease;
  }
  body.sidebar-hover .container-xl,
  body.sidebar-hover .container-lg,
  body.sidebar-hover .container-md { max-width: 100% !important; }

  /* Pinned dot */
  body.sidebar-hover.sidebar-pinned #pinDot { background: #fff; border-color: #fff; box-shadow: 0 0 0 2px rgba(255,255,255,.3); }

  /* Pinned state */
  body.sidebar-hover.sidebar-pinned .navbar-vertical { width: 260px !important; box-shadow: none; }
  body.sidebar-hover.sidebar-pinned .navbar-vertical .navbar-brand span { display: inline !important; }
  body.sidebar-hover.sidebar-pinned .navbar-vertical .sidebar-logo { display: inline !important; }
  body.sidebar-hover.sidebar-pinned .navbar-vertical .sidebar-favicon { display: none !important; }
  body.sidebar-hover.sidebar-pinned .navbar-vertical .nav-link-title,
  body.sidebar-hover.sidebar-pinned .navbar-vertical .dropdown-toggle::after { display: inline !important; }
  body.sidebar-hover.sidebar-pinned .navbar-vertical .dropdown-menu.show,
  body.sidebar-hover.sidebar-pinned .navbar-vertical .dropdown-submenu.show { display: block !important; }
  body.sidebar-hover.sidebar-pinned .navbar-vertical .nav-subtitle { display: block !important; }
  body.sidebar-hover.sidebar-pinned .navbar-vertical .nav-item-heading { height: auto; overflow: visible; }
  body.sidebar-hover.sidebar-pinned .navbar-vertical .nav-link { justify-content: flex-start; padding: .5rem 1rem; }
  body.sidebar-hover.sidebar-pinned .navbar-vertical .nav-link-icon { margin-right: .5rem; }
  body.sidebar-hover.sidebar-pinned .sidebar-toggle-btn { display: inline-flex !important; }
  body.sidebar-hover.sidebar-pinned .page > .page-wrapper,
  body.sidebar-hover.sidebar-pinned .page > header.navbar:not(.navbar-vertical) {
    margin-left: 260px !important;
    width: calc(100vw - 260px) !important;
  }
  /* Pinned: left-aligned (must come LAST) */
  body.sidebar-hover.sidebar-pinned .navbar-vertical .nav-link { justify-content: flex-start !important; padding: .5rem 1rem !important; text-align: left !important; width: auto !important; }
  body.sidebar-hover.sidebar-pinned .navbar-vertical .nav-link-icon { margin-right: .5rem !important; }
  body.sidebar-hover.sidebar-pinned .navbar-vertical .navbar-brand { justify-content: flex-start !important; text-align: left !important; padding: .75rem 1rem !important; width: auto !important; }
  body.sidebar-hover.sidebar-pinned .navbar-vertical .navbar-nav { align-items: stretch !important; }
}

/* ══════════════════════════════════════════════════════════════════════════════
   Top Bar
══════════════════════════════════════════════════════════════════════════════ */
.page > header.navbar:not(.navbar-vertical) {
  background: rgba(var(--tblr-body-bg-rgb, 255,255,255), .5);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: none !important;
  border-bottom: 1px solid var(--tblr-border-color);
  position: sticky;
  top: 0;
  z-index: 1020;
}

/* Top bar right icons — uniform round */
#app-topbar .navbar-nav .btn-icon,
.page > header.navbar:not(.navbar-vertical) .navbar-nav .btn-icon {
  width: 2rem !important; height: 2rem !important;
  min-height: 2rem !important; padding: 0 !important;
}
#app-topbar .navbar-nav .avatar,
.page > header.navbar:not(.navbar-vertical) .navbar-nav .avatar {
  width: 2rem !important; height: 2rem !important;
  font-size: .75rem;
  border-radius: 50% !important;
}

/* Notification badge */
.badge-notification {
  position: absolute !important;
  top: -4px; right: -4px;
  font-size: .6rem !important;
  min-width: 1.15rem; height: 1.15rem;
  width: auto;
  padding: 0 .3rem !important;
  line-height: 1.15rem;
  text-align: center;
  border-radius: 50% !important;
  pointer-events: none;
}

/* ══════════════════════════════════════════════════════════════════════════════
   Horizontal Nav
══════════════════════════════════════════════════════════════════════════════ */
#app-navmenu .navbar-nav { margin-right: auto; flex-wrap: nowrap; }
#app-navmenu .navbar-nav .nav-link { padding-top: .25rem; padding-bottom: .25rem; font-size: .9rem; white-space: nowrap; }
#app-navmenu .dropdown-menu .dropdown-item { font-size: .875rem; }
#app-navmenu { min-height: auto !important; padding-top: 0; padding-bottom: 0; min-width: 0; max-width: 100%; }
#navbar-menu-h { min-width: 0; }
#app-navmenu > .container-xl {
  overflow-x: auto;
  flex-wrap: nowrap;
  scrollbar-width: thin;
  min-width: 0;
  max-width: 100%;
}
#app-navmenu > .container-xl::-webkit-scrollbar { height: 4px; }
#app-navmenu > .container-xl::-webkit-scrollbar-thumb { background: rgba(128,128,128,.4); border-radius: 4px; }
#app-navmenu > .container-xl::-webkit-scrollbar-track { background: transparent; }

#app-navmenu-wrap {
  position: sticky;
  top: var(--topbar-height, 49px);
  z-index: 1018;
  background: rgba(var(--tblr-body-bg-rgb, 255,255,255), .95);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--tblr-border-color);
}

/* Horizontal dropdown menus inherit nav background */
#app-navmenu .dropdown-menu { background: inherit; border: 1px solid rgba(255,255,255,.1); }
#app-navmenu .dropdown-menu .dropdown-item { color: inherit; }
#app-navmenu .dropdown-menu .dropdown-item:hover { background: rgba(255,255,255,.1); }
#app-navmenu .dropdown-menu .dropdown-item.active { background: rgba(255,255,255,.15); }
#app-navmenu .dropdown-menu .dropdown-divider { border-color: rgba(255,255,255,.1); }
#app-navmenu .dropend .dropdown-menu { background: inherit; }

/* ══════════════════════════════════════════════════════════════════════════════
   App Name
══════════════════════════════════════════════════════════════════════════════ */
.app-name-text { color: var(--tblr-primary) !important; }
[data-bs-theme="dark"] .app-name-text { color: #fff !important; }

/* ══════════════════════════════════════════════════════════════════════════════
   Tom Select — opaque controls & dropdowns
   tom-select.bootstrap5.css uses var(--bs-body-bg) which Tabler does not set,
   causing transparent backgrounds. Set it explicitly.
══════════════════════════════════════════════════════════════════════════════ */
:root {
  --bs-body-bg: #fff;
  --bs-secondary-bg: #f8f9fa;
  --bs-tertiary-bg: #f1f3f5;
}
[data-bs-theme="dark"] {
  --bs-body-bg: #1b2434;
  --bs-secondary-bg: #243049;
  --bs-tertiary-bg: #2c3b55;
}

/* ══════════════════════════════════════════════════════════════════════════════
   Page Header / Breadcrumb Bar
══════════════════════════════════════════════════════════════════════════════ */
.page-header-bar {
  padding: .25rem 0;
  margin: 0 !important;
  border-bottom: 1px solid var(--tblr-border-color);
  background: var(--tblr-bg-surface);
}
/* Dark mode: breadcrumb links inherit the default link colour, which resolves
   to the (near-black) primary and vanishes on the dark header bar. Lighten the
   accent so the links stay legible regardless of the configured primary. */
[data-bs-theme="dark"] .page-header-bar .breadcrumb-item a {
  color: color-mix(in srgb, var(--tblr-primary) 45%, #ffffff);
}
.page-wrapper { padding-top: 0 !important; }
.page-wrapper .page-body { padding-top: 0; margin-top: .5rem; }

/* ══════════════════════════════════════════════════════════════════════════════
   Dropdown Section Headers (Me / My Team)
══════════════════════════════════════════════════════════════════════════════ */
.dropdown-menu .dropdown-header {
  padding: .35rem 1.25rem .15rem;
  font-size: .65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--tblr-secondary);
  pointer-events: none;
}
.dropdown-menu .dropdown-header:not(:first-child) {
  margin-top: .25rem;
  border-top: 1px solid var(--tblr-border-color);
  padding-top: .5rem;
}

/* ══════════════════════════════════════════════════════════════════════════════
   Compact Buttons
══════════════════════════════════════════════════════════════════════════════ */
:root { --tblr-btn-min-height: 1.75rem !important; }
.btn { min-height: 1.75rem !important; padding: .2rem .65rem !important; font-size: .8rem !important; }
.btn-sm { min-height: 1.5rem !important; padding: .1rem .4rem !important; font-size: .725rem !important; }
.btn-icon { min-height: 1.5rem !important; padding: .2rem !important; }

/* ══════════════════════════════════════════════════════════════════════════════
   Tab Content
══════════════════════════════════════════════════════════════════════════════ */
.tab-content > .tab-pane > .row { --tblr-gutter-x: 1rem; }

/* Active tab marker — global for all nav-tabs */
.nav-tabs .nav-link.active {
  color: var(--tblr-primary) !important;
  font-weight: 600;
  box-shadow: inset 0 -3px 0 var(--tblr-primary);
}

/* ══════════════════════════════════════════════════════════════════════════════
   Sidebar Brand Area
══════════════════════════════════════════════════════════════════════════════ */
@media (min-width: 992px) {
  .navbar-vertical .navbar-brand {
    border-bottom: 1px solid rgba(255,255,255,.08);
    margin-bottom: .25rem;
  }
}

/* ══════════════════════════════════════════════════════════════════════════════
   Sidebar Scrollable Nav
══════════════════════════════════════════════════════════════════════════════ */

/* Standard vertical layout — make the nav area scroll */
@media (min-width: 992px) {
  .navbar-vertical .navbar-collapse {
    overflow-y: auto;
    overflow-x: hidden;
    /* Full height minus the brand header (~80px) */
    max-height: calc(100vh - 80px);
  }
  /* Thin scrollbar so it's not intrusive */
  .navbar-vertical .navbar-collapse::-webkit-scrollbar { width: 4px; }
  .navbar-vertical .navbar-collapse::-webkit-scrollbar-track { background: transparent; }
  .navbar-vertical .navbar-collapse::-webkit-scrollbar-thumb { background: rgba(255,255,255,.18); border-radius: 2px; }
  .navbar-vertical .navbar-collapse::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.35); }
}

/* Hover sidebar — allow scroll when expanded/pinned */
@media (min-width: 992px) {
  body.sidebar-hover .navbar-vertical:hover .navbar-collapse,
  body.sidebar-hover.sidebar-pinned .navbar-vertical .navbar-collapse {
    overflow-y: auto;
    max-height: calc(100vh - 80px);
  }
}

/* ══════════════════════════════════════════════════════════════════════════════
   Sidebar Sub-menu Indentation
══════════════════════════════════════════════════════════════════════════════ */
/* Vertical sidebar — nudge top-level nav labels and dropdown items up one step */
.navbar-vertical .nav-link-title { font-size: .9rem; }
.navbar-vertical .dropdown-menu .dropdown-item { font-size: .875rem; }

.navbar-vertical .dropdown-menu .dropdown-submenu .dropdown-item {
  padding-left: 2.75rem;
  font-size: .85rem;
}
.navbar-vertical .dropdown-menu .dropdown-submenu .dropdown-item::before {
  content: '';
  display: inline-block;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--tblr-secondary);
  margin-right: .5rem;
  vertical-align: middle;
}
.navbar-vertical .dropdown-menu .dropdown-submenu .dropdown-item.active::before {
  background: var(--tblr-primary);
}

/* ══════════════════════════════════════════════════════════════════════════════
   Sidebar Section Headings (flat nav — My Workspace / Requests / Administration)
   Non-clickable section dividers, replacing the old dropdown-parent groups.
══════════════════════════════════════════════════════════════════════════════ */
.navbar-vertical .nav-subtitle {
  display: block;
  padding: .75rem 1rem .25rem;
  font-size: .8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: rgba(255, 255, 255, .45);
  white-space: nowrap;
  pointer-events: none;
}
.navbar-vertical .nav-item-heading:not(:first-child) .nav-subtitle {
  margin-top: .5rem;
  border-top: 1px solid rgba(255, 255, 255, .08);
  padding-top: .75rem;
}