:root {
   --sidebar-w: 252px;
   --topbar-h: 70px;
}


.navbar-custom {
   position: fixed;
   top: 0; left: 0; right: 0;
   height: var(--topbar-h);
   background: var(--topbar-bg);
   color: var(--topbar-fg);
   border-bottom: 1px solid var(--line-300);
   box-shadow: 0 2px 12px rgba(13, 30, 40, .08);
   z-index: 1010;
}
.navbar-custom .topbar {
   height: 100%;
   display: flex;
   align-items: center;
   gap: 16px;
   padding: 0 22px;
}
.button-toggle-menu {
   background: none; border: none;
   font-size: 22px;
   color: var(--ink-600);
   display: grid; place-items: center;
}
.logo-topbar img { max-height: 34px; width: auto; }


.navbar-custom .topbar-menu { margin-left: auto; }


.navbar-custom .nav-user a { color: var(--topbar-fg); text-decoration: none; }
.navbar-custom .nav-user .tb-name { color: var(--ink-900); font-weight: 700; font-size: 13px; line-height: 1.2; }
.navbar-custom .nav-user .tb-name:hover { color: var(--brand-strong); }
.navbar-custom .topbar-icon { color: var(--ink-500); font-size: 20px; display: inline-grid; place-items: center; }
.navbar-custom .topbar-icon:hover { color: var(--brand-600); }


.topbar-actions {
   display: flex;
   align-items: stretch;
   background: var(--surface-2);
   border: 1px solid var(--line-200);
   border-radius: var(--r-md);
   overflow: hidden;
}
.topbar-action {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   gap: 3px;
   min-width: 64px;
   padding: 7px 12px;
   color: var(--ink-500);
   text-decoration: none;
   transition: background .15s, color .15s;
}
.topbar-action + .topbar-action { border-left: 1px solid var(--line-200); }
.topbar-action:hover { background: rgba(var(--brand-rgb), .10); color: var(--brand-600); }
.topbar-action > i,
.topbar-action .topbar-action-icon > i { font-size: 19px; line-height: 1; }
.topbar-action-icon { position: relative; display: inline-grid; place-items: center; }
.topbar-action-label {
   font-size: 10px;
   font-weight: 600;
   letter-spacing: .02em;
   line-height: 1;
   white-space: nowrap;
}

.topbar-action .noti-icon-badge {
   position: absolute;
   top: -6px;
   right: -9px;
   margin: 0;
}


.leftside-menu {
   position: fixed;
   top: 0; left: 0; bottom: 0;
   width: var(--sidebar-w);
   background: var(--nav-bg);
   border-right: 1px solid rgba(13, 30, 40, .08);
   padding-top: 14px;
   overflow-y: auto;
   overflow-x: hidden;
   scrollbar-width: thin;
   z-index: 1020;
}
.simplebar-offset, .simplebar-content-wrapper { height: 100%; }

.side-nav { list-style: none; margin: 0; padding: 6px 10px 24px; }
.side-nav li { list-style: none; }


.side-nav-title {
   list-style: none;
   padding: 16px 14px 6px;
   font-size: 10.5px;
   font-weight: 700;
   letter-spacing: .09em;
   text-transform: uppercase;
   color: color-mix(in srgb, var(--sidebar-fg) 55%, transparent);
}

.side-nav-link {
   display: flex;
   align-items: center;
   gap: 11px;
   padding: 10px 12px;
   margin: 2px 0;
   border-radius: 9px;
   color: var(--nav-link);
   font-size: 13.5px;
   font-weight: 500;
   text-decoration: none;
   transition: background .15s, color .15s;
}
.side-nav-link > i { font-size: 18px; width: 20px; text-align: center; }
.side-nav-link:hover { background: rgba(var(--brand-rgb), .16); color: var(--sidebar-fg); }
.side-nav-link.active,
.side-nav-link.admin { background: var(--nav-active-bg); color: var(--nav-active-fg); box-shadow: 0 6px 16px rgba(var(--brand-rgb), .30); }


.menu-arrow { margin-left: auto; font-size: 18px; line-height: 1; opacity: .55; transition: transform .2s; }
.side-nav-link:not(.collapsed) .menu-arrow { transform: rotate(180deg); }
.side-nav-second-level { list-style: none; margin: 2px 0 4px; padding: 0 0 0 16px; }
.side-nav-second-level .side-nav-link { padding: 8px 12px; font-size: 13px; }

.side-nav li.border-top { border-top: 1px solid color-mix(in srgb, var(--sidebar-fg) 10%, transparent); margin-top: 8px; padding-top: 4px; }


.leftside-menu .logo-topbar { border-bottom: 1px solid color-mix(in srgb, var(--sidebar-fg) 8%, transparent); padding-bottom: 10px; margin-bottom: 4px; }


.nav-tile {
   margin-bottom: 14px;
   background-color: var(--surface) !important;
   border: 1px solid var(--line-200);
   border-radius: var(--r-md);
   transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.nav-tile:hover {
   transform: translateY(-2px);
   box-shadow: 0 10px 22px rgba(var(--brand-rgb), .14);
   border-color: rgba(var(--brand-rgb), .45);
}
.nav-tile .card-header {
   display: flex;
   align-items: center;
   gap: 12px;
   padding: 14px 16px;
   background: transparent;
   border: 0;
   font-weight: 600;
   color: var(--ink-800);
}
.nav-tile .card-header > i {
   display: inline-grid;
   place-items: center;
   width: 36px;
   height: 36px;
   flex-shrink: 0;
   margin: 0;
   border-radius: 10px;
   background: var(--brand-50);
   color: var(--brand-600);
   font-size: 19px;
   transition: background .12s ease;
}
.nav-tile:hover .card-header { color: var(--brand-700); }
.nav-tile:hover .card-header > i { background: var(--brand-100); }


.pager-bar {
   --bs-gutter-x: 0;
   align-items: center;
   background: var(--surface-2);
   border: 1px solid var(--line-200);
   border-radius: var(--r-lg);
   padding: 9px 14px;
   margin-bottom: 14px;
}

.pager-bar .btn-primary.dropdown-toggle {
   --bs-btn-bg: var(--surface);
   --bs-btn-border-color: var(--line-300);
   --bs-btn-hover-bg: var(--surface);
   --bs-btn-hover-border-color: var(--brand);
   --bs-btn-active-bg: var(--surface);
   --bs-btn-active-border-color: var(--brand);
   box-shadow: var(--shadow-sm);
}


.leftside-menu .nav-user .tb-name,
.leftside-menu .nav-user .tb-name:hover { color: var(--sidebar-fg); }
.leftside-menu .nav-user .sub-text { color: color-mix(in srgb, var(--sidebar-fg) 55%, transparent); }
.leftside-menu .topbar-icon { color: color-mix(in srgb, var(--sidebar-fg) 75%, transparent); }
.leftside-menu .topbar-icon:hover { color: var(--sidebar-fg); }


.content-page {
   margin-left: var(--sidebar-w);
   padding-top: var(--topbar-h);
   min-height: 100vh;
   background: var(--page-bg);
   display: flex;
   flex-direction: column;
}
.content.content-body { flex: 1; padding: 22px 0; }
.footer { border-top: 1px solid var(--line-200); color: var(--ink-400); }

.footer-alt { text-align: center; border-top: 0; }



@media (max-width: 1399.98px) {
   .leftside-menu {
      transform: translateX(-100%);
      transition: transform .25s ease;
      box-shadow: var(--shadow-md);
   }
   .leftside-menu.open { transform: translateX(0); }
   .content-page { margin-left: 0; }

   /* Drawer mode (hamburger shown): the logo lives in the sidebar, so hide the topbar copy. */
   .navbar-custom .logo-topbar img { display: none; }

   
   .nav-backdrop.open {
      display: block;
      position: fixed;
      inset: 0;
      background: rgba(13, 30, 40, .45);
      z-index: 1015;
   }
}


.nav-backdrop { display: none; }


@media (max-width: 991.98px) {
   .navbar-custom .topbar-menu { flex: 1; min-width: 0; margin-left: 0; }
   .navbar-custom .global-search { flex: 1; min-width: 0; }
   .navbar-custom .global-search-input,
   .navbar-custom .global-search-input:focus { flex: 1; min-width: 0; width: auto; }
   .navbar-custom .global-search-panel {
      position: fixed;
      top: calc(var(--topbar-h) - 6px);
      left: 10px;
      right: 10px;
      width: auto;
      max-height: 76vh;
   }

   
}

/* Phones: dark topbar to match the nav rail (the logo is already hidden from xxl down). */
@media (max-width: 767.98px) {
   .navbar-custom { background: var(--nav-bg); border-bottom-color: color-mix(in srgb, var(--sidebar-fg) 8%, transparent); }
   .navbar-custom .button-toggle-menu { color: color-mix(in srgb, var(--sidebar-fg) 85%, transparent); }
}


.avatar-xs { width: 24px; height: 24px; }
.avatar-sm { width: 36px; height: 36px; object-fit: cover; }
.avatar-md { width: 48px; height: 48px; object-fit: cover; }
.avatar-lg { width: 88px; height: 88px; object-fit: cover; }

.header-title { color: var(--ink-900); letter-spacing: .3px; font-weight: 700; }

.page-title-box .header-title {
   font-size: 21px; font-weight: 800; letter-spacing: -.01em;
   display: flex; align-items: center; gap: 9px; margin: 0;
}
.page-title-box .header-title i,
.page-title-box .header-title .mdi { color: var(--brand-600); font-weight: 400; }
.sub-text { font-size: 12px; color: var(--ink-400); }


.bg-primary-lighten { background-color: var(--bs-primary-bg-subtle) !important; color: var(--brand-700) !important; }
.bg-success-lighten { background-color: var(--bs-success-bg-subtle) !important; color: var(--bs-success-text-emphasis) !important; }
.bg-warning-lighten { background-color: var(--bs-warning-bg-subtle) !important; color: var(--bs-warning-text-emphasis) !important; }
.bg-danger-lighten  { background-color: var(--bs-danger-bg-subtle)  !important; color: var(--bs-danger-text-emphasis)  !important; }
.bg-info-lighten    { background-color: var(--bs-info-bg-subtle)    !important; color: var(--bs-info-text-emphasis)    !important; }
.bg-light-subtle    { background-color: var(--surface-2) !important; }


.ribbon-box { position: relative; }
.ribbon {
   display: inline-flex; align-items: center; gap: 6px;
   font-size: 12px; font-weight: 600;
   padding: 4px 12px; border-radius: 6px;
   background: var(--bs-warning-bg-subtle, #FBF1DD);
   color: var(--bs-warning-text-emphasis, #8a6212);
}


.card {
   --bs-card-border-radius: var(--r-lg);
   border: 1px solid var(--line-300);
   border-radius: var(--r-lg);
   box-shadow: var(--shadow-sm);
}

.card .card:not(.nav-tile),
.card .acc-item,
.acc-body .card:not(.nav-tile),
.acc-body .acc-item {
   border: 0;
   border-radius: 0;
   box-shadow: none;
}

/* Clickable cards (grid tiles + full-width list rows) get the nav-tile lift + brand ring on hover */
.card.hand-cursor { transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease; }
.card.hand-cursor:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(var(--brand-rgb), .14); border-color: rgba(var(--brand-rgb), .45); }

.card-header { font-weight: 600; font-size: 1rem; }
.card-header.h1, .card-header.h2, .card-header.h3,
.card-header.h4, .card-header.h5, .card-header.h6,
.card-header h1, .card-header h2, .card-header h3,
.card-header h4, .card-header h5, .card-header h6 {
   font-size: 1rem;
   font-weight: 600;
   line-height: 1.4;
   margin: 0;
}


.btn.h1, .btn.h2, .btn.h3, .btn.h4, .btn.h5, .btn.h6 {
   font-size: 1rem;
   font-weight: 400;
   line-height: 1.5;
   margin: 0;
}

.arrow-none::after { display: none; }


.input-group > .btn:has(+ .input-control) {
   border-top-right-radius: var(--bs-border-radius) !important;
   border-bottom-right-radius: var(--bs-border-radius) !important;
}




.font-10 { font-size: 10px !important; }
.font-11 { font-size: 11px !important; }
.font-12 { font-size: 12px !important; }
.font-13 { font-size: 13px !important; }
.font-14 { font-size: 14px !important; }
.font-15 { font-size: 15px !important; }
.font-16 { font-size: 16px !important; }
.font-18 { font-size: 18px !important; }
.font-20 { font-size: 20px !important; }
.font-22 { font-size: 22px !important; }
.font-24 { font-size: 24px !important; }


.noti-icon-badge {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   min-width: 18px;
   height: 18px;
   padding: 0 5px;
   margin-left: -6px;
   vertical-align: top;
   font-size: 11px;
   font-weight: 600;
   line-height: 1;
   color: var(--brand-on);
   background-color: var(--brand);
   border-radius: 9px;
}
.noti-icon-badge:empty { display: none; }

.noti-close-btn { color: var(--ink-400); font-size: 16px; line-height: 1; }
.noti-close-btn:hover { color: var(--ink-700); }


.global-search { position: relative; display: flex; align-items: center; }
.global-search-btn {
   display: inline-grid;
   place-items: center;
   position: relative;
   z-index: 2;
   width: 40px;
   height: 38px;
   flex-shrink: 0;
   border: 0;
   border-radius: 0 var(--r-md) var(--r-md) 0;
   background: var(--brand);
   color: #FFFFFF;
   font-size: 18px;
   transition: background .15s ease;
}
.global-search-btn:hover { background: var(--brand-600); }
.global-search-input {
   position: relative;
   z-index: 2;
   width: 240px;
   height: 38px;
   padding: 0 12px;
   font-size: 13px;
   color: var(--ink-800);
   background: var(--surface-2);
   border: 1px solid var(--line-200);
   border-right: 0;
   border-radius: var(--r-md) 0 0 var(--r-md);
   outline: none;
   transition: width .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.global-search-input::placeholder { color: var(--ink-400); }
.global-search-input:focus {
   width: 300px;
   background: var(--surface);
   border-color: rgba(var(--brand-rgb), .45);
   box-shadow: 0 0 0 3px rgba(var(--brand-rgb), .12);
}


.gs-backdrop { position: fixed; inset: 0; z-index: 1; background: transparent; }

.global-search-panel {
   position: absolute;
   top: calc(100% + 8px);
   right: 0;
   width: 360px;
   max-height: 70vh;
   overflow-y: auto;
   background: var(--surface);
   border: 1px solid var(--line-200);
   border-radius: var(--r-lg);
   box-shadow: var(--shadow-lg);
   z-index: 1011;
   padding: 6px;
}

.gs-panel-head { display: flex; justify-content: flex-end; padding: 0 0 2px; }
.gs-close {
   display: inline-grid;
   place-items: center;
   width: 26px;
   height: 26px;
   background: none;
   border: none;
   color: var(--ink-400);
   border-radius: var(--r-sm);
   font-size: 16px;
}
.gs-close:hover { color: var(--ink-700); background: var(--surface-2); }

.gs-group { padding: 4px 0; }

.gs-group-empty { opacity: .42; }
.gs-group + .gs-group { border-top: 1px solid var(--line-200); }
.gs-group-head {
   display: flex;
   align-items: center;
   gap: 8px;
   padding: 8px 10px 4px;
   font-size: 10.5px;
   font-weight: 700;
   letter-spacing: .07em;
   text-transform: uppercase;
   color: var(--ink-400);
}
.gs-group-head > i { font-size: 15px; color: var(--brand-600); }
.gs-group-name { flex: 1; }
.gs-group-count {
   font-weight: 600;
   color: var(--ink-500);
   background: var(--surface-2);
   border-radius: 9px;
   padding: 0 7px;
   font-size: 10px;
}
.gs-spinner { color: var(--ink-400); font-size: 14px; }


.gs-pending {
   display: flex;
   align-items: center;
   justify-content: center;
   padding: 26px 0;
   color: var(--ink-400);
   font-size: 22px;
}


.user-search { position: relative; }
.user-search-toggle { cursor: pointer; }
.user-search-backdrop { position: fixed; inset: 0; z-index: 1040; }
.user-search-panel {
   position: absolute;
   z-index: 1050;
   top: calc(100% + 4px);
   left: 0;
   right: 0;
   max-height: 380px;
   overflow-y: auto;
   background: var(--surface);
   border: 1px solid var(--line-300);
   border-radius: var(--r-md);
   box-shadow: var(--shadow-lg);
   padding: 8px;
}
.user-search-result {
   display: flex;
   align-items: center;
   gap: 11px;
   width: 100%;
   text-align: left;
   border: 0;
   background: transparent;
   border-radius: var(--r-sm);
   padding: 8px 10px;
   cursor: pointer;
}
.user-search-result:hover { background: var(--brand-50); }
.user-search-result.is-selected { background: var(--brand-50); color: var(--brand-700); }


.noti-tabs {
   display: inline-flex;
   gap: 4px;
   padding: 3px;
   background: var(--surface-2);
   border: 1px solid var(--line-200);
   border-radius: 999px;
}
.noti-tab {
   display: inline-flex;
   align-items: center;
   gap: 7px;
   padding: 5px 15px;
   border: 0;
   border-radius: 999px;
   background: transparent;
   color: var(--ink-500);
   font-weight: 600;
   font-size: 13px;
   cursor: pointer;
   transition: background .15s ease, color .15s ease;
}
.noti-tab:hover { color: var(--ink-800); }
.noti-tab.is-active {
   background: var(--surface);
   color: var(--brand-700);
   box-shadow: var(--shadow-sm);
}
.noti-tab-count {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   min-width: 20px;
   height: 18px;
   padding: 0 6px;
   border-radius: 999px;
   background: var(--brand-100);
   color: var(--brand-700);
   font-size: 11px;
   font-weight: 700;
}
.noti-tab.is-active .noti-tab-count { background: var(--brand-600); color: #FFFFFF; }

.gs-row {
   display: flex;
   flex-direction: column;
   gap: 1px;
   padding: 7px 10px;
   border-radius: var(--r-sm);
}
.gs-row:hover { background: rgba(var(--brand-rgb), .10); }
.gs-primary { font-weight: 600; font-size: 13px; color: var(--ink-900); }
.gs-secondary { font-size: 11.5px; color: var(--ink-400); }

.gs-see-all {
   display: flex;
   align-items: center;
   justify-content: flex-end;
   gap: 4px;
   padding: 6px 10px;
   font-size: 12px;
   font-weight: 600;
   color: var(--brand-600);
}
.gs-see-all:hover { color: var(--brand-700); }