:root {
    --green: #0080ff;
    --purple: #0080ff;
    --white: #ffffff;
    --bs-text-primary: var(--green);
    --bs-component-active-bg: var(--green);
    --bs-component-hover-color: var(--green);
    --bs-primary: var(--green);
    --bs-primary-light: rgba(6, 13, 13, 0.05);
    --bs-primary-active: var(--green);
}

/* Draft status: keep the neutral gray badge/dot (identical to badge-light-secondary)
   but use warning text so "Draft" is readable — was gray text on a gray badge.
   Theme token comes from CaseStatusHelper.GetCaseStatusTheme(0) => "draft". */
.badge-light-draft {
    color: var(--bs-warning);
    background-color: var(--bs-secondary-light);
}
.bg-draft {
    background-color: var(--bs-secondary) !important;
}


.primary-green-bg, .primary-green-bg:hover, .primary-green-bg:hover:not(.btn-active) {
    background-color: var(--green) !important;
    color: white !important;
}

.primary-green-color {
    color: var(--green) !important;
}

.primary-purple-bg, .primary-purple-bg:hover, .primary-purple-bg:hover:not(.btn-active) {
    background-color: var(--purple) !important;
    color: white !important;
}

.primary-purple-color {
    color: var(--purple) !important;
}

.text-purple {
    color: var(--purple) !important;
}

.btn.btn-primary {
    background-color: var(--green) !important;
}

    .btn-check:active + .btn.btn-primary, .btn-check:checked + .btn.btn-primary, .btn.btn-primary.active, .btn.btn-primary.show, .btn.btn-primary:active:not(.btn-active), .btn.btn-primary:focus:not(.btn-active), .btn.btn-primary:hover:not(.btn-active), .show > .btn.btn-primary {
        background-color: var(--green) !important;
    }

.text-green {
    color: var(--green) !important;
}

.text-active-primary.active i {
    color: var(--green) !important;
}

.nav-line-tabs .nav-item .nav-link.active, .nav-line-tabs .nav-item .nav-link:hover:not(.disabled), .nav-line-tabs .nav-item.show .nav-link {
    color: var(--green) !important;
    border-bottom: 1px solid var(--green) !important;
}

.avatar-initals {
    width: 4rem;
    border-radius: 20%;
    text-align: center;
    background-color: var(--green);
}

.avatar-initals span {
    line-height: 4rem;
    color: var(--white);
}

#loader {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #ffffff;
    z-index: 9999; /* Ensure it is above other elements */
    align-items: center;
    justify-content: center;
}

div.dataTables_wrapper .table-responsive {
    min-height: 250px;
}


.menu-accordion > .menu-link.active {
    background-color: var(--green) !important;
}

.menu-accordion > .menu-link.active > .menu-title,
.menu-accordion > .menu-link.active > .menu-icon i {
    color: white !important;
}

.app-sidebar .menu > .menu-item > .menu-link.active {
    background-color: var(--green) !important;
}

.app-sidebar .menu > .menu-item > .menu-link.active > .menu-title,
.app-sidebar .menu > .menu-item > .menu-link.active > .menu-icon i {
    color: white !important;
}

/* Mobile-only logo block inside the sidebar drawer. The desktop logo above
   is hidden below md (`d-none d-md-flex`), so without this the drawer opens
   straight onto the menu list with no brand mark. */
.app-sidebar-mobile-logo {
    padding: 1rem 1.5rem .75rem 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: 1px solid var(--bs-border-color-translucent, rgba(0, 0, 0, 0.075));
}

.app-sidebar-mobile-logo img {
    max-width: 180px;
    height: auto;
}

.image-input-placeholder,
.image-input-empty {
    background-image: url('/img/blank.svg');
}

[data-bs-theme="dark"] .image-input-placeholder {
    background-image: url('/img/blank.svg');
}

.fc-event-light-warning{
    background-color: var(--purple)!important;
}

iti__flag {
    background-image: url("/lib/custom/phoneIntl/img/flags.png") !important;
}

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .iti__flag {
        background-image: url("/lib/custom/phoneIntl/img/flags@2x.png") !important;
    }
}

.fix-size-input{
    padding:0px;
}



/*JSTREE CATEGORIES*/

.custom-node {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    border: 1px groove !important;
    border-radius: 10px !important;
}

    .custom-node .d-flex {
        flex-grow: 1;
    }

    .custom-node .text-end {
        flex-shrink: 0;
    }

.jstree-default .jstree-anchor {
    height: 100% !important;
}

.jstree-anchor.custom-applied {
    width: 100%;
}

.form-control-solid{
    border-color: #0080ff !important;
}

/* Auth layout (login/register/verify) */
.auth-aside-flags {
    max-width: 420px;
}

.auth-aside-flags .auth-flag-item {
    border: 1px solid rgba(0, 128, 255, 0.25);
    background: rgba(255, 255, 255, 0.85);
    color: #0080ff;
    font-weight: 600;
    font-size: 13px;
    user-select: none;
}

/* ----- Header: user menu trigger + dropdown ----- */
.app-user-item {
    min-width: 0;
}

.app-user-trigger {
    min-width: 0;
}

.app-user-info {
    min-width: 0;
    max-width: 220px;
}

.app-user-name {
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (min-width: 1400px) {
    .app-user-info { max-width: 280px; }
}

/* Dropdown sizing — fixed width with safe wrapping for long values */
.app-user-menu {
    width: 300px;
    max-width: calc(100vw - 24px);
}

.app-user-menu-header {
    overflow: hidden;
}

.app-user-menu-name {
    min-width: 0;
    flex-wrap: nowrap;
}

.app-user-menu-name > span.text-truncate {
    flex: 1 1 auto;
    min-width: 0;
}

.app-user-menu-email {
    display: block;
    word-break: break-all;
    overflow-wrap: anywhere;
    line-height: 1.3;
    margin-top: 2px;
}

/* Align Profile and Sign Out rows identically — anchor vs form/button must match pixel-for-pixel */
.app-user-menu-form {
    display: contents; /* form box doesn't participate in layout — button sits directly under .menu-item */
    margin: 0;
    padding: 0;
}

.app-user-menu .menu-item > a.app-user-menu-action,
.app-user-menu .menu-item button.app-user-menu-action {
    display: flex !important;
    align-items: center;
    width: 100%;
    margin: 0;
    padding: 0.55rem 0.9rem;
    border: 0;
    border-radius: 0.475rem;
    background: transparent;
    color: var(--bs-gray-800);
    text-align: left;
    text-decoration: none;
    line-height: 1.3;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    box-shadow: none;
    appearance: none;
    -webkit-appearance: none;
}

.app-user-menu .menu-item > a.app-user-menu-action:hover,
.app-user-menu .menu-item button.app-user-menu-action:hover,
.app-user-menu .menu-item > a.app-user-menu-action:focus,
.app-user-menu .menu-item button.app-user-menu-action:focus {
    background-color: var(--bs-gray-100);
    color: var(--bs-primary);
    outline: 0;
}

.app-user-menu-action-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    margin-right: 0.75rem;
    flex-shrink: 0;
}

.app-user-menu-action-label {
    flex: 1 1 auto;
    text-align: left;
}

/* Onboarding intro highlight */
.starlynr-intro-pulse {
    position: relative;
    border-radius: .475rem;
    box-shadow: 0 0 0 0 rgba(0, 128, 255, 0.35);
    animation: starlynrIntroPulse 1.4s ease-out infinite;
}

@keyframes starlynrIntroPulse {
    0% { box-shadow: 0 0 0 0 rgba(0, 128, 255, 0.35); }
    70% { box-shadow: 0 0 0 12px rgba(0, 128, 255, 0); }
    100% { box-shadow: 0 0 0 0 rgba(0, 128, 255, 0); }
}


.iti{
    padding: 0 !important;
    border: 0 !important;
}


@media (max-width: 991.98px) {
    #kt_app_sidebar.drawer,
    #kt_app_sidebar[data-kt-drawer="true"] {
        transition: transform 0.3s ease-in-out !important;
        will-change: transform;
    }

    #kt_app_sidebar.drawer-start {
        transform: translateX(-100%);
    }

    #kt_app_sidebar.drawer-on {
        transform: translateX(0) !important;
    }

    .drawer-overlay {
        transition: opacity 0.3s ease-in-out !important;
    }
}

/* -----------------------------------------------------------------------------
   Status History timeline — mobile responsive override.
   Added 2026-06-07 by Phase-3.6 C2-S-1.
   Restructured 2026-06-09 by Phase-3.6 C3-3: extracted from inadvertent nesting
   inside the outer @media (max-width: 991.98px) drawer block (parity with CMS
   site.css line 177 which has always been top-level). Behavior unchanged — a
   nested @media (max-width: 991.98px) > @media (max-width: 767.98px) fires when
   BOTH conditions match (i.e., <768 px), identical to a top-level
   @media (max-width: 767.98px). The restructure eliminates the risk that a
   future edit to the outer drawer block accidentally breaks the timeline rules.

   Metronic's default .timeline-label fixes the inner date label width and draws
   a vertical connector at that offset. Below md (768 px) that fixed width
   crowds out the status content and the date column wraps awkwardly. The
   .case-status-timeline class is applied next to .timeline-label in the partial
   _StatusHistoryTimeline.cshtml; this scoped rule stacks the date above the
   content, hides the connector line + badge dot, and removes the inset.

   This is intentionally NOT a generic .timeline-label override — other places
   in the app use .timeline-label (e.g. notes timelines) and rely on the
   desktop-style fixed-width date column at every breakpoint.
*/

/* Desktop date column width — Metronic default is 50 px which squishes the
   "dd MMM yyyy, h:mm tt" format used by the status history (~19 chars). We
   widen to 150 px and shift the vertical connector line right by the same
   delta so the badge dot stays centered over the line.
   Scoped to .case-status-timeline so unrelated timelines keep the 50 px default. */
.case-status-timeline.timeline-label .timeline-item .timeline-label {
    width: 150px;
}
.case-status-timeline.timeline-label::before {
    left: 151px;
}

@media (max-width: 767.98px) {
    .case-status-timeline.timeline-label::before {
        display: none;
    }
    .case-status-timeline.timeline-label .timeline-item {
        display: block;
        padding-left: 0;
        margin-bottom: 1rem;
    }
    .case-status-timeline.timeline-label .timeline-item .timeline-label {
        position: static;
        width: auto;
        text-align: left;
        margin-bottom: 0.25rem;
    }
    .case-status-timeline.timeline-label .timeline-item .timeline-badge {
        display: none;
    }
    .case-status-timeline.timeline-label .timeline-item .timeline-content {
        padding-left: 0;
    }
}