/* Hakika Custom Styles */

/* Custom Badge - Verified */
.hakika-badge-verified {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--color-green-600, #16a34a);
    border: 1px solid var(--color-green-500, #22c55e);
    border-radius: 0.375rem;
    padding: 0.25rem 0.5rem;
}

/* ---- Searchable user picker (admin change-password / manage-account) ---- */
.user-search { position: relative; }
.user-search-field { position: relative; }
.user-search-icon {
    position: absolute;
    left: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1rem;
    color: var(--muted-foreground);
    pointer-events: none;
}
/* leave room for the leading icon; height comes from .kt-input */
.user-search-input { padding-left: 2.25rem; width: 100%; }

/* Results menu — an overlay, so it gets elevation (one soft shadow), not just a border. */
.user-search-menu {
    position: absolute;
    z-index: 30;
    top: calc(100% + 0.25rem);
    left: 0;
    right: 0;
    max-height: 17rem;
    overflow-y: auto;
    padding: 0.25rem;
    background: var(--popover, var(--background));
    border: 1px solid var(--border);
    border-radius: var(--radius, 0.5rem);
    box-shadow: 0 10px 24px -8px rgb(0 0 0 / 0.14), 0 2px 6px -2px rgb(0 0 0 / 0.08);
}
.user-search-menu[hidden] { display: none; }

.user-search-status,
.user-search-empty {
    padding: 0.625rem 0.75rem;
    font-size: 0.8125rem;
    color: var(--muted-foreground);
}

.user-search-item {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    width: 100%;
    text-align: left;
    padding: 0.5rem 0.625rem;
    border-radius: calc(var(--radius, 0.5rem) - 0.25rem);
    background: transparent;
    cursor: pointer;
    border: 0;
}
.user-search-item:hover,
.user-search-item.is-active {
    background: var(--muted);
}
.user-search-item-avatar,
.user-search-chip-avatar {
    flex-shrink: 0;
    width: 2rem;
    height: 2rem;
    border-radius: 9999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    background: color-mix(in oklab, var(--primary) 12%, var(--background));
    color: var(--primary);
}
.user-search-item-text,
.user-search-chip-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.3;
}
.user-search-item-name,
.user-search-chip-name {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--foreground);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.user-search-item-sub,
.user-search-chip-sub {
    font-size: 0.75rem;
    color: var(--muted-foreground);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Chosen-user chip (replaces the input once a user is picked) */
.user-search-chip {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.5rem 0.625rem;
    border: 1px solid var(--border);
    border-radius: var(--radius, 0.5rem);
    background: var(--background);
}
.user-search-chip[hidden] { display: none; }
.user-search-chip-text { flex: 1; }
.user-search-chip-clear {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 9999px;
    border: 0;
    background: transparent;
    color: var(--muted-foreground);
    cursor: pointer;
}
.user-search-chip-clear:hover { background: var(--muted); color: var(--foreground); }

/* ---------------------------------------------------------------------------
   Sidebar rail: make the overflow visible.

   The rail is 90px wide with ~70px per item, so it overflows once a role has
   more than ~6-10 destinations (an Owner has 13). It has always scrolled; what
   it lacked was any sign that it does. The markup now uses `kt-scrollable-y`
   rather than `kt-scrollable-y-hover` so the thumb is not transparent until
   hovered — see the note in fragments/sidebar_menu.html.

   The theme's default thumb is 0.35rem of --color-input, which is a border
   tint and effectively invisible against the rail. --scrollbar-thumb-color is
   the theme's own hook for overriding it, so this is a token change rather
   than a fight with the component's own rules.
   --------------------------------------------------------------------------- */
#sidebar_menu_wrapper {
    --scrollbar-thumb-color: var(--muted-foreground);
}

/* Bottom fade on the rail: the "there is more below" cue.

   Only rendered when `.has-more` is present, which the script in
   fragments/sidebar_menu.html toggles — a permanent fade would wash out the last
   icon for a worker (6 items), whose rail does not overflow at all.

   Mechanics worth knowing before editing:
   - it is an ::after on the SCROLL CONTAINER, so `position: sticky; bottom: 0`
     pins it to the visible bottom edge while the content scrolls underneath;
   - the container is `flex-col` with `align-items: center`, so it needs
     `align-self: stretch` or it collapses to zero width;
   - the container also has `gap-2.5` (0.625rem), which applies to pseudo-elements
     too — the negative margin cancels both the gap and its own height so the fade
     OVERLAYS the last item instead of adding 32px to the scroll length (which
     would make it permanently scrollable and the cue self-fulfilling).
   - it fades to --muted because the sidebar is `bg-muted`; this tracks dark mode
     automatically, so do not hard-code a colour here. */
#sidebar_menu_wrapper.has-more::after {
    content: '';
    align-self: stretch;
    flex: 0 0 auto;
    position: sticky;
    bottom: 0;
    height: 2rem;
    margin-top: calc(-2rem - 0.625rem);
    pointer-events: none;
    background: linear-gradient(to top, var(--muted) 35%, transparent);
}

/* ---------------------------------------------------------------------------
   Sidebar rail: current-page highlight.

   The rail never highlighted anything. Two independent reasons, both worth
   knowing before "restoring" the theme's own mechanism:

   1. Nothing ever added the state class. Not KTUI's JS, not core.bundle.js, not
      Thymeleaf — `grep` finds zero writers of `kt-menu-item-active` / `-here`.

   2. Even with the class added, the theme's variants could not have matched.
      They compile to a SINGLE-ELEMENT selector:

          .kt-menu-item-active\:text-primary.kt-menu-item.active { ... }

      i.e. all three classes on the same element. In this fragment the variant
      classes sit on the <a> and <span>, while `kt-menu-item` is on the parent
      <div>, so the selector can never apply. The variant classes left in the
      markup are inert; they are kept only to avoid a churny diff.

   Hence explicit rules here, driven by `active` which the template adds from
   `currentPath` (exposed by WebControllerAdvice). Styling mirrors what the
   theme's variant names intended: the link gets the raised background + border,
   the icon and label take the primary colour.

   Matching is `contains`, so a detail page highlights its parent item
   (/bureau/workers/5 lights up Workers). That is deliberate — the alternative
   leaves you with no highlight at all on every detail page.
   --------------------------------------------------------------------------- */
.kt-menu-item.active > .kt-menu-link {
    background-color: var(--background);
    border-color: var(--border);
}

.kt-menu-item.active .kt-menu-icon,
.kt-menu-item.active .kt-menu-title {
    color: var(--primary);
}