/* =====================================================================
   AquaBest Work Portal  -  SHARED KANAKKU SIDEBAR  (version 1, build 1)
   Measured on the purchased Kanakku index.html at 1920:
     rail 60 px  |  menu column 216 px, padding 16 px, border-right #E2E4E6
     logo row 56 px  |  section title 12 px/600 #45505C, 8 px below
     parent / single row: 29 px tall, padding 4 px 8 px, 14 px/500 #051321,
       icon 14 px #5D6772, chevron 16 px at the right
     active: white, 2 px purple bar on the left, radius 5, purple text
     submenu row: 36 px, 13 px, padding 8 px 4 px 8 px 32 px, thin grey line
       at 20 px, active purple
     Mini: 72 px icon column, rail hidden, hover expands to 216 px
   Applies only once the sidebar is built (body.k-sidebar-ready).
   ===================================================================== */
:root { --k-mini: 72px; }

/* ---------- the column ---------- */
body.kanakku-skin #sidebar { display: flex; }
body.kanakku-skin .sidebar {
  left: var(--k-rail); width: var(--k-menu); top: 0; bottom: 0; position: fixed; display: flex; flex-direction: column;
  background: var(--k-panel); border-right: 1px solid var(--k-line); box-shadow: none; transform: none; z-index: 99; padding: 0;
  transition: width .2s ease, transform .3s ease;
}
body.kanakku-skin:not(.k-sidebar-ready) .sidebar { transition: none; }
/* logo row (Kanakku: 56 px, logo left, collapse button right) */
body.kanakku-skin .sidebar .sidebar-header {
  display: flex; align-items: center; gap: 10px; height: 56px; min-height: 56px; padding: 0 12px 0 16px; border: 0; margin: 0;
}
body.kanakku-skin .sidebar .sidebar-header picture, body.kanakku-skin .sidebar .sidebar-header img { width: 28px; height: 28px; border-radius: 7px; display: block; flex: 0 0 auto; }
body.kanakku-skin .sidebar .sidebar-header > div { flex: 1 1 auto; min-width: 0; }
body.kanakku-skin .sidebar .sidebar-header h1 { font-size: 18px; font-weight: 700; color: var(--k-ink); margin: 0; line-height: 24px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.kanakku-skin .sidebar .sidebar-header h1::after { content: none; display: none; }
body.kanakku-skin .k-mini-btn {
  flex: 0 0 auto; width: 28px; height: 28px; border: 0; background: transparent; color: var(--k-muted); border-radius: 6px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; font-size: 16px; padding: 0;
}
body.kanakku-skin .k-mini-btn:hover { background: var(--k-white); color: var(--k-ink); }
/* Aqua Best's own session timer + privacy switch: one compact line */
body.kanakku-skin .sidebar .security-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 16px 8px; margin: 0; border: 0; background: transparent;
}
body.kanakku-skin .sidebar .security-bar .session-timer { font-size: 11px; color: var(--k-muted); white-space: nowrap; }
body.kanakku-skin .sidebar .security-bar .privacy-toggle {
  font-size: 11px; height: 24px; padding: 0 8px; border-radius: 5px; border: 1px solid var(--k-line); background: var(--k-white); color: var(--k-ink); cursor: pointer; white-space: nowrap;
}
/* the menu search (Aqua Best) */
body.kanakku-skin .nav-menu .portal-menu-tools { padding: 0 16px 10px; margin: 0; }
body.kanakku-skin .nav-menu .portal-menu-search {
  width: 100%; height: 34px; border: 1px solid var(--k-line); border-radius: 5px; background: var(--k-white); color: var(--k-ink); font-size: 13px; padding: 0 10px 0 30px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%235D6772' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: 10px center;
}
body.kanakku-skin .nav-menu .portal-menu-search:focus { outline: 0; border-color: var(--k-purple); }

/* ---------- the scrolling menu ---------- */
body.kanakku-skin .sidebar .nav-menu { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; padding: 0 0 12px; margin: 0; scrollbar-width: thin; }
body.kanakku-skin .sidebar .nav-menu::-webkit-scrollbar { width: 6px; }
body.kanakku-skin .sidebar .nav-menu::-webkit-scrollbar-thumb { background: #D5DAE0; border-radius: 3px; }
body.kanakku-skin .nav-menu > .portal-menu-group { display: block; padding: 0 16px; margin: 0; border: 0; background: transparent; }
body.kanakku-skin .nav-menu > .portal-menu-group + .portal-menu-group { margin-top: 12px; padding-top: 14px; border-top: 1px solid var(--k-line); }
body.kanakku-skin .nav-menu > .portal-menu-group[hidden] { display: none; }
body.kanakku-skin .nav-menu .portal-menu-group-button {
  display: block; width: auto; margin: 0 0 8px; padding: 0; border: 0; background: transparent; box-shadow: none; text-align: left; pointer-events: none; cursor: default;
  font-size: 12px; font-weight: 600; color: var(--k-ink-2); line-height: 18px; text-transform: none; letter-spacing: 0;
}
body.kanakku-skin .nav-menu .portal-menu-group-button > span + span, body.kanakku-skin .nav-menu .portal-menu-group-button .portal-group-arrow { display: none; }
body.kanakku-skin .nav-menu .portal-menu-group-items { display: block; padding: 0; margin: 0; }
body.kanakku-skin .nav-menu .portal-menu-group.collapsed .portal-menu-group-items { display: block; }

/* rows (parent button and single rows share the look); .k-row = any menu row */
body.kanakku-skin .nav-menu .nav-item[data-page], body.kanakku-skin .nav-menu .k-parent-btn, body.kanakku-skin .nav-menu .k-planned-row {
  display: flex !important; align-items: center; gap: 8px; width: 100%; min-height: 29px !important; padding: 4px 8px !important; margin: 0 0 2px !important;
  border: 0 !important; border-left: 2px solid transparent !important; border-radius: 5px !important; background: transparent !important; box-shadow: none !important; text-align: left;
  font-family: inherit; font-size: 14px !important; font-weight: 500 !important; line-height: 18px; color: var(--k-ink) !important; cursor: pointer; position: relative; outline: 0;
}
body.kanakku-skin .nav-menu .nav-item.portal-menu-search-hidden, body.kanakku-skin .nav-menu .nav-item[style*="display: none"], body.kanakku-skin .nav-menu .nav-item[style*="display:none"] { display: none !important; }
body.kanakku-skin .nav-menu .nav-item > span:not(.nav-icon):not(.nav-badge):not(.k-soon), body.kanakku-skin .k-plabel {
  flex: 1 1 auto; min-width: 0; display: block !important; -webkit-line-clamp: unset !important; font-size: 14px; font-weight: 500; color: inherit !important; line-height: 18px !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
body.kanakku-skin .nav-menu .nav-item .nav-icon, body.kanakku-skin .k-picon {
  flex: 0 0 16px; width: 16px; height: 16px; display: inline-flex !important; align-items: center; justify-content: center; font-size: 15px; line-height: 1; color: var(--k-muted); margin: 0;
}
body.kanakku-skin .nav-menu .nav-item .nav-icon i, body.kanakku-skin .k-picon i { font-size: 15px; line-height: 1; }
body.kanakku-skin .nav-menu .nav-item[data-page]:hover, body.kanakku-skin .nav-menu .k-parent-btn:hover { background: var(--k-white) !important; color: var(--k-ink) !important; }
body.kanakku-skin .nav-menu .nav-item[data-page].active, body.kanakku-skin .k-parent.k-active > .k-parent-btn, body.kanakku-skin .k-parent.k-open > .k-parent-btn {
  background: var(--k-white) !important; color: var(--k-purple) !important; border-left-color: var(--k-purple) !important; font-weight: 500;
}
body.kanakku-skin .nav-menu .nav-item[data-page].active .nav-icon, body.kanakku-skin .k-parent.k-active > .k-parent-btn .k-picon, body.kanakku-skin .k-parent.k-open > .k-parent-btn .k-picon { color: var(--k-purple); }
body.kanakku-skin .nav-menu .nav-item[data-page].active > span:not(.nav-icon):not(.nav-badge) { color: var(--k-purple) !important; }
/* counters */
body.kanakku-skin .nav-menu .nav-badge, body.kanakku-skin .k-pbadge {
  flex: 0 0 auto; margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 600; line-height: 20px; background: #F1EBFF; color: var(--k-purple);
}
body.kanakku-skin .k-pbadge[hidden] { display: none; }
body.kanakku-skin .k-parent.k-open > .k-parent-btn .k-pbadge { display: none; }
/* chevron */
body.kanakku-skin .k-chev { flex: 0 0 16px; width: 16px; height: 16px; position: relative; margin-left: 4px; }
body.kanakku-skin .k-chev::before { content: ''; position: absolute; left: 4px; top: 3px; width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); transition: transform .15s; }
body.kanakku-skin .k-parent.k-open > .k-parent-btn .k-chev::before { transform: rotate(-135deg); top: 6px; }
/* submenu */
body.kanakku-skin .k-sub { display: none; margin: 4px 0 8px; padding: 0; position: relative; }
body.kanakku-skin .k-parent.k-open > .k-sub, body.kanakku-skin .nav-menu.k-searching .k-sub { display: block; }
body.kanakku-skin .k-sub::before { content: ''; position: absolute; left: 20px; top: 0; bottom: 0; width: 1.5px; background: var(--k-line); }
body.kanakku-skin .nav-menu .k-sub > .nav-item {
  min-height: 34px !important; padding: 7px 4px 7px 32px !important; margin: 0 !important; border-left: 0 !important; border-radius: 0 !important; background: transparent !important; font-size: 13px !important; font-weight: 400 !important; color: var(--k-ink-2) !important;
}
body.kanakku-skin .nav-menu .k-sub > .nav-item > span:not(.nav-icon):not(.nav-badge) { font-size: 13px; font-weight: 400; }
body.kanakku-skin .nav-menu .k-sub > .nav-item .nav-icon { display: none; }
body.kanakku-skin .nav-menu .k-sub > .nav-item:hover { color: var(--k-ink) !important; background: transparent !important; }
body.kanakku-skin .nav-menu .k-sub > .nav-item.active, body.kanakku-skin .nav-menu .k-sub > .nav-item.active > span { color: var(--k-purple) !important; font-weight: 500 !important; background: transparent !important; border-left: 0 !important; }
/* a planned row (Branches): shown, not clickable */
body.kanakku-skin .k-planned-row { opacity: .55; cursor: default; }
body.kanakku-skin .k-planned-row:hover { background: transparent; }
body.kanakku-skin .k-soon { margin-left: auto; font-size: 10px; font-weight: 600; color: var(--k-muted); border: 1px solid var(--k-line); border-radius: 9px; padding: 0 6px; line-height: 16px; }
/* sign out row */
body.kanakku-skin .nav-menu > .portal-logout-item {
  display: flex; align-items: center; gap: 8px; margin: 14px 16px 0; padding: 6px 8px; min-height: 32px; border-radius: 5px; border: 1px solid var(--k-line); background: var(--k-white); color: var(--k-red); font-size: 13px; font-weight: 500; cursor: pointer; position: static;
}
body.kanakku-skin .nav-menu > .portal-logout-item .nav-icon { width: 16px; color: var(--k-red); }
/* the rows the menu search hides */
body.kanakku-skin .nav-menu .nav-item.portal-menu-search-hidden { display: none !important; }
body.kanakku-skin .nav-menu.k-searching .k-parent:not(:has(.nav-item:not(.portal-menu-search-hidden))) { display: none; }

/* ---------- Mini (Kanakku "mini-sidebar"): 72 px icons, hover expands ---------- */
@media (min-width: 992px) {
  body.kanakku-skin.k-mini .k-rail { display: none; }
  body.kanakku-skin.k-mini .sidebar { left: 0 !important; width: var(--k-mini); z-index: 1030; }
  body.kanakku-skin.k-mini .main-content { margin-left: var(--k-mini) !important; }
  body.kanakku-skin.k-mini .header { left: var(--k-mini); }
  body.kanakku-skin.k-mini .sidebar:not(:hover) .sidebar-header > div,
  body.kanakku-skin.k-mini .sidebar:not(:hover) .k-mini-btn,
  body.kanakku-skin.k-mini .sidebar:not(:hover) .security-bar,
  body.kanakku-skin.k-mini .sidebar:not(:hover) .portal-menu-tools,
  body.kanakku-skin.k-mini .sidebar:not(:hover) .k-plabel,
  body.kanakku-skin.k-mini .sidebar:not(:hover) .k-chev,
  body.kanakku-skin.k-mini .sidebar:not(:hover) .k-pbadge,
  body.kanakku-skin.k-mini .sidebar:not(:hover) .nav-badge,
  body.kanakku-skin.k-mini .sidebar:not(:hover) .k-soon,
  body.kanakku-skin.k-mini .sidebar:not(:hover) .k-sub,
  body.kanakku-skin.k-mini .sidebar:not(:hover) .portal-menu-group-button,
  body.kanakku-skin.k-mini .sidebar:not(:hover) .nav-item > span:not(.nav-icon) { display: none !important; }
  body.kanakku-skin.k-mini .sidebar:not(:hover) .sidebar-header { justify-content: center; padding: 0; }
  body.kanakku-skin.k-mini .sidebar:not(:hover) .sidebar-header img, body.kanakku-skin.k-mini .sidebar:not(:hover) .sidebar-header picture { width: 34px; height: 34px; }
  body.kanakku-skin.k-mini .sidebar:not(:hover) .nav-menu > .portal-menu-group { padding: 0 16px; }
  body.kanakku-skin.k-mini .sidebar:not(:hover) .nav-menu > .portal-menu-group + .portal-menu-group { margin-top: 8px; padding-top: 8px; }
  body.kanakku-skin.k-mini .sidebar:not(:hover) .nav-item, body.kanakku-skin.k-mini .sidebar:not(:hover) .k-parent-btn {
    width: 40px; min-height: 36px !important; padding: 0 !important; margin: 0 auto 4px !important; justify-content: center; border-left: 0 !important;
  }
  body.kanakku-skin.k-mini .sidebar:not(:hover) .nav-icon, body.kanakku-skin.k-mini .sidebar:not(:hover) .k-picon { font-size: 18px; }
  body.kanakku-skin.k-mini .sidebar:not(:hover) .nav-icon i, body.kanakku-skin.k-mini .sidebar:not(:hover) .k-picon i { font-size: 18px; }
  body.kanakku-skin.k-mini .sidebar:not(:hover) .portal-logout-item { width: 40px; margin: 10px auto 0; padding: 0; justify-content: center; font-size: 0; }
  body.kanakku-skin.k-mini .sidebar:not(:hover) .portal-logout-item .nav-icon { display: inline-flex; font-size: 16px; }
  /* hover: the full menu slides over the page, exactly like Kanakku */
  body.kanakku-skin.k-mini .sidebar:hover { width: var(--k-menu) !important; box-shadow: 8px 0 24px rgba(5, 19, 33, .08); }
  body.kanakku-skin.k-mini .sidebar:hover .k-sub { display: none; }
  body.kanakku-skin.k-mini .sidebar:hover .k-parent.k-open > .k-sub, body.kanakku-skin.k-mini .sidebar:hover .nav-menu.k-searching .k-sub { display: block; }
}

/* ---------- tablets and phones: slide in over the page with a dark overlay ---------- */
@media (max-width: 991.98px) {
  body.kanakku-skin .k-rail { display: none; }
  html body.kanakku-skin .sidebar {
    left: 0 !important; width: min(86vw, 300px) !important; margin: 0 !important; top: 0 !important; z-index: 1041 !important; transform: translateX(-100%) !important; box-shadow: none !important;
  }
  html body.kanakku-skin .sidebar.open { transform: translateX(0) !important; box-shadow: 12px 0 30px rgba(5, 19, 33, .18) !important; }
  html body.kanakku-skin .main-content { margin-left: 0 !important; }
  body.kanakku-skin .k-overlay { position: fixed; inset: 0; background: rgba(5, 19, 33, .45); z-index: 1040; opacity: 0; pointer-events: none; transition: opacity .25s; }
  body.kanakku-skin:has(.sidebar.open) .k-overlay { opacity: 1; pointer-events: auto; }
  body.kanakku-skin .k-mini-btn { display: none; }
}

/* ---------- Dark: same shapes, dark colours ---------- */
html body.kanakku-skin.kanakku-dark .sidebar { background: var(--k-panel) !important; border-right-color: var(--k-line) !important; }
html body.kanakku-skin.kanakku-dark .nav-menu .nav-item[data-page], html body.kanakku-skin.kanakku-dark .nav-menu .k-parent-btn, html body.kanakku-skin.kanakku-dark .k-plabel { color: var(--k-ink) !important; background: transparent !important; }
html body.kanakku-skin.kanakku-dark .nav-menu .nav-item[data-page] > span:not(.nav-icon):not(.nav-badge) { color: var(--k-ink) !important; }
html body.kanakku-skin.kanakku-dark .nav-menu .nav-item .nav-icon, html body.kanakku-skin.kanakku-dark .k-picon { color: var(--k-muted) !important; }
html body.kanakku-skin.kanakku-dark .nav-menu .nav-item[data-page]:hover, html body.kanakku-skin.kanakku-dark .nav-menu .k-parent-btn:hover { background: rgba(255, 255, 255, .05) !important; }
html body.kanakku-skin.kanakku-dark .nav-menu .nav-item[data-page].active, html body.kanakku-skin.kanakku-dark .k-parent.k-active > .k-parent-btn, html body.kanakku-skin.kanakku-dark .k-parent.k-open > .k-parent-btn { background: rgba(117, 57, 255, .16) !important; color: #A98BFF !important; border-left-color: #A98BFF !important; }
html body.kanakku-skin.kanakku-dark .nav-menu .nav-item[data-page].active > span:not(.nav-icon):not(.nav-badge), html body.kanakku-skin.kanakku-dark .nav-menu .nav-item[data-page].active .nav-icon, html body.kanakku-skin.kanakku-dark .k-parent.k-active > .k-parent-btn .k-picon, html body.kanakku-skin.kanakku-dark .k-parent.k-open > .k-parent-btn .k-picon, html body.kanakku-skin.kanakku-dark .k-parent.k-active > .k-parent-btn .k-plabel, html body.kanakku-skin.kanakku-dark .k-parent.k-open > .k-parent-btn .k-plabel { color: #A98BFF !important; }
html body.kanakku-skin.kanakku-dark .nav-menu .k-sub > .nav-item, html body.kanakku-skin.kanakku-dark .nav-menu .k-sub > .nav-item > span { color: var(--k-muted) !important; background: transparent !important; }
html body.kanakku-skin.kanakku-dark .nav-menu .k-sub > .nav-item.active, html body.kanakku-skin.kanakku-dark .nav-menu .k-sub > .nav-item.active > span { color: #A98BFF !important; }
html body.kanakku-skin.kanakku-dark .nav-menu .portal-menu-group-button, html body.kanakku-skin.kanakku-dark .nav-menu .portal-menu-group-button span { color: var(--k-muted) !important; }
html body.kanakku-skin.kanakku-dark .nav-menu .nav-badge, html body.kanakku-skin.kanakku-dark .k-pbadge { background: rgba(117, 57, 255, .22); color: #C9B8FF; }
html body.kanakku-skin.kanakku-dark .sidebar .sidebar-header h1, html body.kanakku-skin.kanakku-dark .sidebar .sidebar-header h1::after { color: var(--k-ink); }
html body.kanakku-skin.kanakku-dark .sidebar .security-bar .privacy-toggle, html body.kanakku-skin.kanakku-dark .nav-menu .portal-menu-search { background: var(--k-white); color: var(--k-ink); border-color: var(--k-line); }
html body.kanakku-skin.kanakku-dark .nav-menu > .portal-logout-item { background: transparent; border-color: var(--k-line); }
html body.kanakku-skin.kanakku-dark .sidebar .nav-menu::-webkit-scrollbar-thumb { background: #2C3A52; }
html body.kanakku-skin.kanakku-dark .k-mini-btn:hover { background: rgba(255, 255, 255, .06); }

/* Locked to the Kanakku demo: one #F7F8F9 block, 60px rail + 216px menu.
   These beat the old dark portal rules (portal-design-v286). */
html body.kanakku-skin:not(.kanakku-dark) .k-rail { background: #F7F8F9 !important; border-right: 0 !important; }
html body.kanakku-skin:not(.kanakku-dark) #sidebar,
html body.kanakku-skin:not(.kanakku-dark).portal-design-v286 .sidebar {
  left: 60px !important; width: 216px !important; background: #F7F8F9 !important;
  border-right: 1px solid #E2E4E6 !important; color: #051321 !important;
}
html body.kanakku-skin:not(.kanakku-dark).portal-design-v286 .main-content { margin-left: 276px !important; background: #ffffff !important; }
html body.kanakku-skin:not(.kanakku-dark) .sidebar-header,
html body.kanakku-skin:not(.kanakku-dark).portal-design-v286 .sidebar-header {
  min-height: 56px !important; height: 56px !important; padding: 16px 16px 0 !important; background: transparent !important; border-bottom: 0 !important;
}
html body.kanakku-skin:not(.kanakku-dark) .nav-menu,
html body.kanakku-skin:not(.kanakku-dark).portal-design-v286 .nav-menu { padding: 0 0 12px !important; }
html body.kanakku-skin:not(.kanakku-dark) .portal-menu-group-button {
  min-height: 0 !important; padding: 8px 16px 4px !important; color: #45505C !important; background: transparent !important;
  font-size: 12px !important; font-weight: 600 !important; letter-spacing: 0 !important; text-transform: none !important;
}
html body.kanakku-skin:not(.kanakku-dark) .nav-menu .nav-item[data-page],
html body.kanakku-skin:not(.kanakku-dark) .portal-menu-group-items .nav-item {
  min-height: 29px !important; margin: 0 !important; padding: 4px 8px !important; border-radius: 5px !important;
  color: #051321 !important; background: transparent !important; font-size: 12px !important; font-weight: 400 !important; box-shadow: none !important;
}
html body.kanakku-skin:not(.kanakku-dark) .nav-menu .nav-item[data-page].active,
html body.kanakku-skin:not(.kanakku-dark) .portal-menu-group-items .nav-item.active {
  color: #7539FF !important; background: #ffffff !important; border-left: 2px solid #7539FF !important; box-shadow: none !important;
}
html body.kanakku-skin:not(.kanakku-dark) .nav-menu .k-sub .nav-item[data-page] {
  min-height: 36px !important; padding: 8px 4px 8px 32px !important; color: #5D6772 !important; font-size: 13px !important; background: transparent !important; border-left: 0 !important;
}
html body.kanakku-skin:not(.kanakku-dark) .nav-menu .k-sub .nav-item[data-page].active { color: #7539FF !important; background: transparent !important; }
@media (max-width: 991.98px) {
  html body.kanakku-skin:not(.kanakku-dark) #sidebar,
  html body.kanakku-skin:not(.kanakku-dark).portal-design-v286 .sidebar { left: 0 !important; width: min(86vw, 300px) !important; }
  html body.kanakku-skin:not(.kanakku-dark).portal-design-v286 .main-content { margin-left: 0 !important; }
}