/* -----------------------------------------
   Custom.css - put your own changes here 
----------------------------------------- */

/* Restore template font stack */
body,
.page-navbar,
.page-sidebar,
.page-content {
  font-family: "Quattrocento Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
}

/* Bootstrap 5 nav alignment fixes for the legacy header markup */
.page-navbar.navbar .navbar-nav {
  flex-direction: row;
  align-items: center;
}

.page-navbar.navbar .navbar-nav .nav-item {
  display: flex;
  align-items: center;
}

.page-navbar.navbar .navbar-nav .nav-link {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  font-size: 15px;
}

/* Fix header height and content offset after BS5 migration */
.page-navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 50px;
}

.page-navbar .navbar-brand {
  height: 50px;
  display: inline-flex;
  align-items: center;
  width: 210px;
  min-width: 210px;
  padding: 0;
  justify-content: center;
}

/* Ensure logo swap works when sidebar collapses */
.page-navbar .navbar-brand .logo-sm {
  display: none;
}

.page-navbar .navbar-brand .logo {
  max-width: 200px;
  max-height: 40px;
  width: 200px;
  height: 40px;
  object-fit: contain;
  margin-left: 0;
}

.page-navbar .navbar-brand .logo-sm {
  max-width: 38px;
  max-height: 38px;
  width: 38px;
  height: 38px;
  object-fit: contain;
  margin-top: 3px;
}

.page-navbar .navbar-brand.collapse-sidebar .logo {
  display: none !important;
}

.page-navbar .navbar-brand.collapse-sidebar .logo-sm {
  display: inline-block !important;
}

.page-navbar .navbar-brand.collapse-sidebar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  min-width: 60px;
  padding-left: 0;
  padding-right: 0;
}


@media (max-width: 767.98px) {
  .page-navbar .navbar-brand .logo {
    display: none !important;
  }
  .page-navbar .navbar-brand .logo-sm {
    display: inline-block !important;
  }
}

.page-navbar .navbar-no-collapse {
  height: 50px;
}

.page-navbar .navbar-nav > li > a,
.page-navbar .navbar-nav > li > a.nav-link {
  height: 50px;
  line-height: 50px;
  padding: 0 12px;
}

.page-navbar .navbar-nav > li > a i {
  float: none;
}

.page-content {
  padding-top: 50px;
  margin-top: 0;
}

/* Align sidebar submenu arrows to the far right */
.page-sidebar .side-nav .nav > li {
  display: block;
  width: 100%;
}

.page-sidebar .side-nav .nav > li > a {
  display: flex;
  align-items: center;
  width: 100%;
  position: relative !important;
  padding-right: 32px !important;
}

.page-sidebar .side-nav .nav > li > a i:not(.sideNav-arrow) {
  order: 1;
}

.page-sidebar .side-nav .nav > li > a .txt {
  order: 2;
  flex: 1 1 auto;
}

.page-sidebar .side-nav .nav > li > a i.sideNav-arrow {
  position: absolute !important;
  right: 12px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  margin: 0 !important;
  float: none !important;
}

.page-sidebar .side-nav a {
  text-decoration: none;
}

/* Align collapsed sidebar hover submenu under the hover title */
.page-sidebar.collapse-sidebar .nav li.hover-li {
  position: relative !important;
}

.page-sidebar.collapse-sidebar .nav li.hover-li > ul.sub {
  top: 100% !important;
  left: 60px !important;
  margin-top: 0 !important;
}

/* Sidebar settings dropdown font + logout separator */
.page-sidebar .dropdown-menu,
.page-sidebar .dropdown-menu a {
  font-family: "Quattrocento Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
}

.page-sidebar .dropdown-menu li > a {
  color: #333333;
  text-decoration: none;
  padding: 3px 10px;
  display: flex;
  align-items: center;
  column-gap: 10px;
}

.page-sidebar .dropdown-menu li > a:hover,
.page-sidebar .dropdown-menu li > a:focus {
  color: #333333;
  text-decoration: none;
  background-color: #f2f4f7;
}

.page-sidebar .dropdown-menu li > a i {
  margin-right: 0;
  flex: 0 0 auto;
  margin-right: 8px;
}

.page-sidebar .dropdown-menu .divider {
  height: 0;
  margin: 6px 0;
  border-top: 1px solid #d5d9df;
}

/* Slightly wider report modal (+20%) */
.modal-report-wide {
  --bs-modal-width: 700px;
  max-width: 700px;
}

/* Wider modal for ExpenseItems only */
.modal-expenseitems-wide {
  --bs-modal-width: 1100px;
  max-width: 1100px;
}

/* Wider modal for advance approvals */
.modal-advance-approvals-wide {
  --bs-modal-width: 1100px;
  max-width: 1100px;
}

/* Wider modal for advance details */
.modal-advance-details-wide {
  --bs-modal-width: 1100px;
  max-width: 1100px;
}

/* Wider modal for report details */
.modal-report-details-wide {
  --bs-modal-width: 1100px;
  max-width: 1100px;
}

/* Wider modal for users */
.modal-user-wide {
  --bs-modal-width: 1100px;
  max-width: 1100px;
}

/* Dashboard card row should use full content width */
.dashboard-content {
  padding-left: 0;
  padding-right: 0;
}

.dashboard-content .row {
  margin-left: 0;
  margin-right: 0;
}

.dashboard-content .row > [class*="col-"] {
  padding-left: 10px;
  padding-right: 10px;
}

/* Override BS5 g-4 spacing on dashboard only */
.dashboard-content .g-4 {
  --bs-gutter-y: 0;
}

/* Dashboard cards fixed height */
.dashboard-content .card {
  height: 166px;
}
/* Keep footer visible without forcing extra scroll space */
body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
#wrapper {
  flex: 1 0 auto;
  min-height: 0;
}
#footer {
  margin-top: auto;
  position: static !important;
}
/* Reports page needs explicit min-height to keep footer at viewport bottom */
.reports-page {
  min-height: calc(100vh - 101px);
}
/* Override template min-height that pushes footer below viewport on short pages */
.page-content {
  min-height: auto;
}