/* Minification failed. Returning unminified contents.
(4,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(5,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(8,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(9,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(10,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(11,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(12,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(13,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(14,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(15,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(39,17): run-time error CSS1039: Token not allowed after unary operator: '-tertiary-color'
(43,17): run-time error CSS1039: Token not allowed after unary operator: '-tertiary-color'
(61,28): run-time error CSS1039: Token not allowed after unary operator: '-background-color'
(65,28): run-time error CSS1039: Token not allowed after unary operator: '-warning-color'
(66,24): run-time error CSS1039: Token not allowed after unary operator: '-warning-color'
(81,15): run-time error CSS1039: Token not allowed after unary operator: '-sj-banner-h'
(102,28): run-time error CSS1039: Token not allowed after unary operator: '-sj-topbar-h'
(102,49): run-time error CSS1039: Token not allowed after unary operator: '-sj-banner-h'
(385,35): run-time error CSS1039: Token not allowed after unary operator: '-sj-topbar-h'
(385,56): run-time error CSS1039: Token not allowed after unary operator: '-sj-banner-h'
(401,20): run-time error CSS1039: Token not allowed after unary operator: '-sj-topbar-h'
(401,41): run-time error CSS1039: Token not allowed after unary operator: '-sj-banner-h'
(402,31): run-time error CSS1039: Token not allowed after unary operator: '-sj-topbar-h'
(402,52): run-time error CSS1039: Token not allowed after unary operator: '-sj-banner-h'
 */
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');

:root {
    --background-color: #fbf9fa;
    --sj-topbar-h: 62px;
    /* Height of the test-site banner when it's showing (QA/local). A script in
       the shell measures the banner and sets this; it stays 0 in production. */
    --sj-banner-h: 0px;
    --primary-color: #007afe;
    --primary-active: #e0efff;
    --surface-color: #FFFFFF;
    --secondary-color: #002d5a;
    --secondary-active-color: #002d5a33;
    --tertiary-color: #39393c;
    --warning-color: #da6612;
}

.navbar-static-side {
    font-family: "Roboto", sans-serif;
}

.nav > li > a {
    color: black !important;
}

.sendjim-svg-logo {
    color:black;
}

#login-page .sendjim-svg-logo {
    color: black !important;
}

#userNameTitle {
    color: black !important;
}

#companyNameTitle {
    color: var(--tertiary-color) !important;
}

.sidebar-counter {
    color: var(--tertiary-color) !important;
}

.navbar-static-side {
    border-right: rgba(0,0,0, 0.12) solid 1px;
}

.sidebar-items.active a {
    color: #333 !important;
    background-color: #33333333 !important;
}

#side-menu li.sidebar-items.active a i {
    opacity:1;
    color:black !important;
}

.gray-bg, .navbar-fixed-top, .navbar-static-top {
    background-color: var(--background-color) !important;
}

.btn-warning {
    background-color: var(--warning-color) !important;
    border-color: var(--warning-color) !important;
}

/* =========================================================================
   SJ-3140 - Global navigation redesign (matches the Nuxt app shell)
   ========================================================================= */

/* ----- Top bar: full width, above the sidebar -----
   Fixed rather than sticky: the legacy shell sets html,body { height: 100% },
   which caps this host's sticky containing block at one viewport, so on long
   pages the bar scrolled out of view. The sidebar avoids this only because it
   lives inside the tall #wrapper. body's padding-top (below) reserves room for
   the bar (and the test-site banner above it) so nothing hides underneath. */
.sj-topbar-host {
    position: fixed;
    top: var(--sj-banner-h);
    left: 0;
    right: 0;
    z-index: 1030;
}

/* The QA/local test-site banner rides above the fixed app bar at the very top.
   Scoped to the app shell so the login page (same partial, no data-nav-state)
   keeps the banner in its normal in-flow spot. */
body[data-nav-state] .notice-banner {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1035;
}

/* Reserve room for the fixed bar plus the banner above it. Scoped to the app
   shell via data-nav-state so login/guest pages, which load this stylesheet
   but have no top bar, keep their normal top. */
body[data-nav-state] {
    padding-top: calc(var(--sj-topbar-h) + var(--sj-banner-h));
}

.sj-topbar {
    background: #fff;
    border-bottom: 1px solid rgba(0, 17, 45, 0.08);
    font-family: "Roboto", sans-serif;
}

.sj-topbar-row {
    display: flex;
    align-items: center;
    height: 62px;
    padding: 0 20px 0 16px;
    gap: 16px;
}

.sj-topbar-left {
    display: flex;
    align-items: center;
    gap: 10px;
}

.sj-hamburger {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    color: #39393c;
    cursor: pointer;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
}

/* Bootstrap's a:focus adds a 5px "-webkit-focus-ring-color" outline, which on
   this round 38px link reads as a blue circle stuck around the icon after a
   click. Drop it; the hover/focus-visible background is the affordance. */
.sj-hamburger:focus {
    outline: none;
}

/* :focus-visible (not :focus) so a mouse click doesn't leave the round hover
   background stuck on after the menu toggles - keyboard focus still shows it. */
.sj-hamburger:hover,
.sj-hamburger:focus-visible {
    background: rgba(0, 17, 45, 0.05);
    color: #39393c;
}

.sj-topbar-logo {
    height: 40px;
    width: auto;
    display: block;
}

.sj-topbar-logo-link {
    display: flex;
    align-items: center;
}

/* Small "Sandbox" indicator next to the logo - replaces the old full-width
   banner (SJ-3233). Kept legible at any sidebar/topbar width since it never
   shrinks along with the collapsible nav. */
.sj-sandbox-badge {
    display: inline-flex;
    align-items: center;
    height: 20px;
    padding: 0 8px;
    border-radius: 10px;
    background: #fff3cd;
    color: #8a6d1d;
    border: 1px solid #f0dfa1;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    white-space: nowrap;
    cursor: default;
}

.sj-topbar-right {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-left: auto;
}

.sj-credits {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 13px;
}

.sj-credits-icon {
    color: #0064d6;
}

.sj-credits .credit-balance {
    color: #39393c;
    font-weight: 700;
}

.sj-credits-label {
    color: #8a9099;
    font-weight: 500;
}

.sj-buy-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: "Roboto", sans-serif;
    font-size: 12.5px;
    font-weight: 600;
    color: #fff;
    background: #007afe;
    border: none;
    padding: 8px 14px;
    border-radius: 20px;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 122, 254, 0.3);
}

.sj-buy-btn:hover {
    background: #0068d6;
}

.sj-trial-label {
    margin: 0;
    font-size: 13px;
    color: #8a9099;
    cursor: default;
    font-weight: 500;
}

.sj-topbar-divider {
    width: 1px;
    height: 26px;
    background: rgba(0, 17, 45, 0.1);
}

.sj-bell {
    position: relative;
    display: flex;
    align-items: center;
    color: #6b7785;
    text-decoration: none;
    padding: 0 2px;
}

.sj-bell:hover {
    color: #39393c;
}

.sj-bell .notification-circle {
    position: absolute;
    top: -4px;
    right: -6px;
}

.sj-avatar-wrap {
    position: relative;
}

.sj-avatar-trigger {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
}

.user-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #002d5a;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    text-transform: uppercase;
}

.sj-avatar-text {
    line-height: 1.2;
    white-space: nowrap;
}

.sj-avatar-name {
    font-size: 13px;
    font-weight: 600;
    color: #39393c;
}

.sj-avatar-account {
    font-size: 11px;
    color: #8a9099;
}

/* Account / credit messages relocated into the top of the page body */
/* Full-bleed past the page-wrapper's 15px horizontal gutter so the bars span edge to edge */
.sj-header-messages {
    margin: 0 -15px;
}

.sj-body-message {
    padding: 8px 20px;
    font-size: 14px;
    margin: 0 0 1px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.sj-body-message .sj-msg-icon {
    font-size: 20px;
    flex: none;
    color: inherit;
}

/* Solid bars that match the Nuxt Vuetify v-alert theme (see plugins/vuetify.ts) */
.sj-body-message-error {
    background: #EF5350;
    color: #fff;
}

.sj-body-message-warning {
    background: #FF9800;
    color: rgba(0, 0, 0, 0.87);
}

.sj-body-message-info {
    background: #10B981;
    color: #fff;
}

/* White action button on the colored bar, like the new UI's flat white v-btn */
.sj-body-message-btn {
    background: #fff;
    color: #333;
    border: none;
    border-radius: 4px;
    padding: 5px 16px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

.sj-body-message-btn:hover {
    background: #f0f0f0;
    color: #333;
}

/* Agency banner: white bar with a purple left accent + info icon, matching the
   new UI's v-alert (border="start", deep-purple-accent-4). */
.purple-header {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #fff;
    color: #4A5056;
    border-left: 4px solid #6200EA;
    padding: 8px 20px;
    font-size: 14px;
    margin-bottom: 1px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}

.purple-header .sj-msg-icon {
    font-size: 20px;
    flex: none;
    color: #6200EA;
}

/* ----- Wrapper + sidebar layout ----- */
#wrapper {
    display: flex;
    align-items: stretch;
    min-height: calc(100vh - var(--sj-topbar-h) - var(--sj-banner-h));
}

#page-wrapper {
    margin-left: 0 !important;
    flex: 1;
    min-width: 0;
}

.sj-sidebar {
    flex: none;
    width: 218px;
    background: #002d5a;
    overflow-x: hidden;
    overflow-y: auto;
    position: sticky;
    top: calc(var(--sj-topbar-h) + var(--sj-banner-h));
    height: calc(100vh - var(--sj-topbar-h) - var(--sj-banner-h));
    transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1), margin-left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Subtle scrollbar to match the Nuxt sidebar instead of the system one.
   I intentionally skip the standard scrollbar-width/scrollbar-color: in
   Chrome 121+ those turn off the ::-webkit-scrollbar rules below and you get
   a native hairline bar. Firefox falls back to its default bar. */
.sj-sidebar::-webkit-scrollbar {
    width: 8px;
}

.sj-sidebar::-webkit-scrollbar-track {
    background: transparent;
}

.sj-sidebar::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.18);
    border-radius: 8px;
}

.sj-sidebar::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.3);
}

.sj-nav-inner {
    display: flex;
    flex-direction: column;
    min-height: 100%;
    padding: 14px 12px;
    white-space: nowrap;
}

.sj-nav-item {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 9px 12px;
    border-radius: 9px;
    cursor: pointer;
    /* Match the new UI: its html base is 15px, but Inspinia's is 13px, so the
       inherited nav labels were coming out smaller here. */
    font-size: 15px;
    font-weight: 500;
    color: #bcd2ec !important;
    text-decoration: none;
    transition: background 0.15s ease;
    position: relative;
}

.sj-nav-item:hover,
.sj-nav-item:focus {
    background: rgba(255, 255, 255, 0.07);
    color: #bcd2ec !important;
}

.sj-nav-item.active {
    background: rgba(77, 163, 255, 0.24);
    box-shadow: inset 4px 0 0 #4da3ff;
    color: #fff !important;
    font-weight: 600;
}

.sj-nav-item svg {
    flex: none;
}

.sj-nav-label {
    flex: 1;
}

.sj-nav-trail {
    margin-left: auto;
    color: #5d83ad;
    display: flex;
}

.sj-nav-item .notification-circle {
    position: absolute;
    top: 7px;
    right: 12px;
}

.sj-nav-group {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.12em;
    color: #5d83ad;
    padding: 14px 12px 6px;
}

.sj-admin-wrap {
    margin-top: 8px;
    padding-top: 10px;
}

.sj-admin-divider {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 10px;
}

.sj-admin-link {
    color: #b59bff !important;
    font-weight: 600;
}

.sj-admin-link:hover {
    background: rgba(106, 61, 240, 0.2);
    color: #b59bff !important;
}

/* ----- Three-state collapse (desktop) ----- */
body[data-nav-state="rail"] .sj-sidebar {
    width: 74px;
}

body[data-nav-state="rail"] .sj-nav-item {
    justify-content: center;
}

body[data-nav-state="rail"] .sj-nav-label,
body[data-nav-state="rail"] .sj-nav-trail {
    display: none;
}

body[data-nav-state="rail"] .sj-nav-group {
    visibility: hidden;
}

body[data-nav-state="hidden"] .sj-sidebar {
    width: 0;
    border: none;
}

body[data-nav-state="hidden"] .sj-nav-inner {
    display: none;
}

/* ----- Mobile drawer header (hidden on desktop) ----- */
.sj-mobile-header {
    display: none;
    padding: 4px 4px 12px;
    margin-bottom: 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.sj-mobile-profile {
    display: flex;
    align-items: center;
    gap: 11px;
    margin-bottom: 16px;
}

.sj-mobile-avatar {
    width: 40px;
    height: 40px;
    flex: none;
    border-radius: 50%;
    background: #1c3f66;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    text-transform: uppercase;
}

.sj-mobile-profile-text {
    flex: 1;
    min-width: 0;
    line-height: 1.25;
}

.sj-mobile-name {
    font-size: 15px;
    font-weight: 700;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sj-mobile-account {
    font-size: 13px;
    color: #bcd2ec;
}

.sj-mobile-close {
    background: none;
    border: none;
    color: #bcd2ec;
    font-size: 18px;
    cursor: pointer;
    padding: 4px 8px;
}

.sj-mobile-credits {
    display: flex;
    align-items: center;
    gap: 7px;
    color: #4da3ff;
    margin-bottom: 12px;
    padding: 0 4px;
}

.sj-mobile-credits-count {
    font-size: 15px;
    font-weight: 700;
    color: #fff;
}

.sj-mobile-credits-label {
    font-size: 14px;
    color: #8aa0bd;
}

.sj-mobile-buy {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    font-size: 13px;
    font-weight: 600;
    color: #fff;
    background: #007afe;
    border: none;
    padding: 10px;
    border-radius: 22px;
    cursor: pointer;
    margin-bottom: 4px;
}

/* ----- Scrim behind the mobile slide-in menu ----- */
#sj-nav-scrim {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 1040;
}

/* ----- Mobile ----- */
@media (max-width: 768px) {
    .sj-sidebar {
        position: fixed;
        top: 0;
        left: 0;
        height: 100vh;
        width: 280px;
        z-index: 1050;
    }

    /* No icon-rail on a phone - rail behaves like open. */
    body[data-nav-state="open"] .sj-sidebar,
    body[data-nav-state="rail"] .sj-sidebar {
        margin-left: 0;
        width: 280px;
    }

    body[data-nav-state="rail"] .sj-nav-item {
        justify-content: flex-start;
    }

    body[data-nav-state="rail"] .sj-nav-label,
    body[data-nav-state="rail"] .sj-nav-trail {
        display: flex;
    }

    body[data-nav-state="rail"] .sj-nav-group {
        visibility: visible;
    }

    body[data-nav-state="hidden"] .sj-sidebar {
        margin-left: -300px;
        width: 280px;
    }

    body[data-nav-state="hidden"] .sj-nav-inner {
        display: flex;
    }

    .sj-mobile-header {
        display: block;
    }

    .sj-topbar-right .sj-credits,
    .sj-topbar-right .sj-buy-btn,
    .sj-topbar-right .sj-trial-label,
    .sj-topbar-right .sj-topbar-divider,
    .sj-avatar-text {
        display: none;
    }

    body[data-nav-state="open"] #sj-nav-scrim {
        display: block;
    }
    
    .sj-sidebar::-webkit-scrollbar {
        width: 12px;
    }

    .sj-sidebar::-webkit-scrollbar-thumb {
        background: rgba(255, 255, 255, 0.35);
        border-radius: 7px;
    }
}