/* App-specific overrides, kept separate from the theme's compiled app.min.css. */

/* "Hero" header card for a detail page (currently Client Details) - a soft gradient card with two
   low-opacity decorative circles clipped behind its content, a status dot on the avatar, small
   colored icon chips for each contact field, and thin vertical dividers between them. None of this
   existed as a reusable theme component, so it's built from scratch here rather than reusing
   .widget-icon (dashboard-only, single color) or .profile-user-box (unstyled theme leftover). */
.detail-hero-card {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, var(--ct-primary-bg-subtle, #eef1fd) 0%, var(--ct-card-bg, #fff) 65%);
}

.detail-hero-card::before,
.detail-hero-card::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    background-color: var(--ct-primary);
    opacity: 0.06;
    pointer-events: none;
}

.detail-hero-card::before {
    width: 180px;
    height: 180px;
    top: -70px;
    left: -60px;
}

.detail-hero-card::after {
    width: 110px;
    height: 110px;
    bottom: -55px;
    left: 30px;
}

.detail-hero-card .card-body {
    position: relative;
}

.detail-hero-avatar {
    position: relative;
    flex-shrink: 0;
}

.detail-hero-avatar .avatar-status-dot {
    position: absolute;
    right: 2px;
    bottom: 2px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background-color: var(--ct-success);
    border: 2px solid var(--ct-card-bg, #fff);
}

.detail-hero-divider {
    width: 1px;
    align-self: stretch;
    min-height: 2.25rem;
    background-color: var(--ct-border-color);
}

.detail-hero-chip-icon {
    width: 36px;
    height: 36px;
    border-radius: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 1.05rem;
}

/* Every Add/Edit modal (see CLAUDE.md) wraps .modal-body/.modal-footer in a <form>, which breaks
   Bootstrap's modal-dialog-scrollable: Bootstrap expects .modal-body to be a *direct* flex child of
   .modal-content so its flex:1 1 auto + overflow-y:auto can constrain it and keep .modal-footer
   pinned below. With an unstyled <form> in between, the form just grows to its full content height
   and .modal-content's overflow:hidden clips the footer off entirely instead of it scrolling into
   view. Make the form itself a flex column so long forms (e.g. Roles' permission matrix) scroll
   their body while header and footer stay fixed and visible.
*/
#crud-modal .modal-content > form {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}

/* Sticky table header for a plain server-rendered table (see CLAUDE.md - DataTables grids use their
   own scrollY option instead, since they generate their own header/body/pagination layout).
   Bootstrap's .table-responsive already becomes its own scroll container at runtime (overflow-x:auto
   forces overflow-y:auto per spec) even though it never actually scrolls without a bounded height -
   so adding max-height here is what turns that into a real internally-scrolling panel, which is what
   position:sticky needs to stick within. Opt in by adding this class alongside .table-responsive. */
.table-scroll-sticky {
    max-height: 65vh;
}

.table-scroll-sticky table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background-color: var(--ct-card-bg, #fff);
}

/* Bootstrap's .nav-tabs wraps onto multiple rows once there are more tabs than fit the card width.
   Opt a tab strip into a single scrollable row instead (e.g. VisaCase Details, which can have 17+
   tabs) by adding this class alongside .nav-tabs. */
.nav-tabs-scroll {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: thin;
}

.nav-tabs-scroll .nav-item {
    flex: 0 0 auto;
}

.nav-tabs-scroll .nav-link {
    white-space: nowrap;
}

/* A plain overflow:auto scrollbar is easy to miss (especially with OS auto-hide scrollbars), so
   give it a visible track/thumb instead of relying on the browser default - paired with
   nav-tabs-scroll.js, which lets a plain vertical mouse wheel drive the horizontal scroll too. */
.nav-tabs-scroll::-webkit-scrollbar {
    height: 6px;
}

.nav-tabs-scroll::-webkit-scrollbar-track {
    background: transparent;
}

.nav-tabs-scroll::-webkit-scrollbar-thumb {
    background-color: var(--ct-border-color, #ced4da);
    border-radius: 3px;
}

.password-field {
    position: relative;
}

.password-field .form-control {
    padding-right: 2.5rem;
}

.password-toggle-icon {
    position: absolute;
    top: 50%;
    right: 0.75rem;
    transform: translateY(-50%);
    cursor: pointer;
    color: #98a6ad;
}

.password-toggle-icon:hover {
    color: #6c757d;
}

/* Team Chat: message attachments and the horizontal info panel's stacked group-member avatars. */
.chat-attachment-image {
    max-width: 220px;
    max-height: 220px;
    border-radius: 8px;
    display: block;
}

.chat-attachment-file {
    text-decoration: none;
}

.chat-stacked-avatar {
    width: 28px;
    height: 28px;
    margin-left: -8px;
    border: 2px solid var(--ct-card-bg, #fff);
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
}

.chat-stacked-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.chat-stacked-avatar .avatar-title {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

/* Team Chat: below the xxl breakpoint the list/conversation columns stack full-width instead of
   sitting side by side, which used to leave both a full-height chat list AND a full-height
   conversation panel stacked on the page - the compose box ended up far below the fold. Show only
   one pane at a time there instead: the list by default, or the open conversation (toggled via
   .chat-conversation-open on #chat-layout-row from chat.js) with a back button to return. */
@media (max-width: 1399.98px) {
    #chat-panel-col {
        display: none;
    }

    .chat-conversation-open #chat-list-col {
        display: none;
    }

    .chat-conversation-open #chat-panel-col {
        display: block;
    }
}

.dt-cell-truncate {
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Company Management: uploaded logo shown in place of the default theme mark. */
.sarvika-company-logo {
    max-height: 32px;
    max-width: 140px;
    object-fit: contain;
}