/* =========================================================================
   STAGENT theme
   =========================================================================

   A presentation-only layer over Falcon/Bootstrap. It is loaded last and
   restyles existing components through their existing classes — no markup
   changes, no logic changes, nothing for a page to opt into. Deleting this
   file returns the app to how it looked before.

   The palette is taken from the logo rather than invented: the mark runs
   #9BDDFF -> #38435C, and those two ends give the accent and the ink. That is
   also what the supplied mockups are built on.

   Structure below:
     1. tokens
     2. page canvas
     3. cards and surfaces
     4. sidebar
     5. buttons
     6. form controls
     7. pills and badges
     8. tables
     9. tabs, steppers, misc
   ========================================================================= */

/* ---------- 1. tokens ---------- */
:root {
    --sg-ink: #38435C; /* headings, primary text — the logo's dark stop */
    --sg-ink-soft: #64748B; /* secondary text, labels */
    --sg-ink-faint: #94A3B8; /* hints, placeholders */
    --sg-accent: #2F6BFF; /* primary action */
    --sg-accent-hover: #1E56E0;
    --sg-accent-soft: #E8F0FF; /* accent tint for chips, active nav */
    --sg-sky: #9BDDFF; /* the logo's light stop */
    --sg-canvas: #EEF3FB; /* page background */
    --sg-surface: #FFFFFF; /* cards */
    --sg-line: #E3E9F4; /* hairlines */
    --sg-ok: #12B76A;
    --sg-ok-soft: #E7F8F0;
    --sg-warn: #F79009;
    --sg-warn-soft: #FEF3E2;
    --sg-danger: #F04438;
    --sg-danger-soft: #FEECEB;
    --sg-radius: 14px;
    --sg-radius-sm: 10px;
    --sg-radius-pill: 999px;
    /* One soft shadow, used everywhere. Consistency reads as intentional;
       a different elevation per component reads as accident. */
    --sg-shadow: 0 1px 2px rgba(56,67,92,.04), 0 8px 24px rgba(56,67,92,.06);
    --sg-shadow-lift: 0 2px 4px rgba(56,67,92,.06), 0 12px 32px rgba(56,67,92,.10);
}

/* ---------- 2. page canvas ---------- */
body {
    background-color: var(--sg-canvas) !important;
    color: var(--sg-ink);
    -webkit-font-smoothing: antialiased;
}

main.main, .content {
    background-color: transparent !important;
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    color: var(--sg-ink);
    font-weight: 600;
    letter-spacing: -0.01em;
}

/* ---------- 3. cards and surfaces ---------- */
.card {
    background-color: var(--sg-surface);
    border: 1px solid var(--sg-line);
    border-radius: var(--sg-radius) !important;
    box-shadow: var(--sg-shadow) !important;
    transition: box-shadow .18s ease;
}

    .card:hover {
        box-shadow: var(--sg-shadow-lift) !important;
    }

.card-header {
    background-color: transparent !important;
    border-bottom: 1px solid var(--sg-line) !important;
    padding: 1rem 1.25rem !important;
    font-weight: 600;
    color: var(--sg-ink);
    border-radius: var(--sg-radius) var(--sg-radius) 0 0 !important;
}

.card-body {
    padding: 1.25rem;
}

.modal-content {
    border: none;
    border-radius: var(--sg-radius);
    box-shadow: var(--sg-shadow-lift);
}

.dropdown-menu {
    border: 1px solid var(--sg-line);
    border-radius: var(--sg-radius-sm);
    box-shadow: var(--sg-shadow-lift);
}

/* ---------- 5. buttons ---------- */
.btn {
    border-radius: var(--sg-radius-sm);
    font-weight: 500;
    padding: .5rem 1.1rem;
    transition: background-color .15s ease, box-shadow .15s ease, transform .06s ease;
}

    .btn:active {
        transform: translateY(1px);
    }

.btn-primary {
    background-color: var(--sg-accent);
    border-color: var(--sg-accent);
    box-shadow: 0 1px 2px rgba(47,107,255,.24);
}

    .btn-primary:hover, .btn-primary:focus {
        background-color: var(--sg-accent-hover);
        border-color: var(--sg-accent-hover);
    }

.btn-outline-primary {
    color: var(--sg-accent);
    border-color: #C7D9FF;
}

    .btn-outline-primary:hover {
        background-color: var(--sg-accent);
        border-color: var(--sg-accent);
    }

.btn-success {
    background-color: var(--sg-ok);
    border-color: var(--sg-ok);
}

.btn-danger {
    background-color: var(--sg-danger);
    border-color: var(--sg-danger);
}

/* btn-info is the app's second action colour (41 uses), so it follows the
   accent rather than Falcon's cyan. btn-warning keeps a warning meaning. */
.btn-info, .btn-falcon-info {
    background-color: var(--sg-accent-soft);
    border-color: transparent;
    color: var(--sg-accent);
}

    .btn-info:hover, .btn-falcon-info:hover,
    .btn-info:focus, .btn-falcon-info:focus {
        background-color: var(--sg-accent);
        border-color: transparent;
        color: #fff;
    }

.btn-warning {
    background-color: var(--sg-warn);
    border-color: transparent;
    color: #fff;
}

    .btn-warning:hover, .btn-warning:focus {
        background-color: #DC7F06;
        border-color: transparent;
        color: #fff;
    }

.btn-falcon-success {
    background-color: var(--sg-ok-soft);
    border-color: transparent;
    color: var(--sg-ok);
}

    .btn-falcon-success:hover, .btn-falcon-success:focus {
        background-color: var(--sg-ok);
        border-color: transparent;
        color: #fff;
    }

/* Accessibility widget: required by law, so it is restyled to fit rather than
   hidden. */
#accessiblityIcon {
    border: 1px solid var(--sg-line) !important;
    box-shadow: var(--sg-shadow) !important;
}

.btn-secondary {
    background-color: #fff;
    border-color: var(--sg-line);
    color: var(--sg-ink);
}

    .btn-secondary:hover {
        background-color: var(--sg-canvas);
        border-color: #CBD5E1;
        color: var(--sg-ink);
    }

/* ---------- 6. form controls ---------- */
.form-control, .form-select, .choices__inner {
    border-radius: var(--sg-radius-sm) !important;
    border: 1px solid var(--sg-line) !important;
    color: var(--sg-ink);
    background-color: #fff;
    padding: .5rem .75rem;
    transition: border-color .15s ease, box-shadow .15s ease;
}

    .form-control:focus, .form-select:focus, .choices__inner:focus-within {
        border-color: var(--sg-accent) !important;
        /* Visible focus ring — needed for keyboard users, and the mockups show
           a clear focused state too. */
        box-shadow: 0 0 0 3px rgba(47,107,255,.15) !important;
    }

    .form-control::placeholder {
        color: var(--sg-ink-faint);
    }

label, .form-label, .control-label {
    color: var(--sg-ink-soft);
    font-weight: 500;
    font-size: .875rem;
    margin-bottom: .35rem;
}

.form-check-input:checked {
    background-color: var(--sg-accent);
    border-color: var(--sg-accent);
}

.form-check-input:focus {
    box-shadow: 0 0 0 3px rgba(47,107,255,.15);
}

.input-group-text {
    background-color: var(--sg-canvas);
    border-color: var(--sg-line);
    color: var(--sg-ink-soft);
    border-radius: var(--sg-radius-sm);
}

/* ---------- 7. pills and badges ---------- */
.badge {
    border-radius: var(--sg-radius-pill);
    font-weight: 600;
    padding: .35em .75em;
    font-size: .75rem;
}

.badge.bg-success, .badge-success {
    background-color: var(--sg-ok-soft) !important;
    color: #067647 !important;
}

.badge.bg-warning, .badge-warning {
    background-color: var(--sg-warn-soft) !important;
    color: #B54708 !important;
}

.badge.bg-danger, .badge-danger {
    background-color: var(--sg-danger-soft) !important;
    color: #B42318 !important;
}

.badge.bg-primary, .badge-primary {
    background-color: var(--sg-accent-soft) !important;
    color: var(--sg-accent) !important;
}

.badge.bg-secondary, .badge-secondary {
    background-color: var(--sg-canvas) !important;
    color: var(--sg-ink-soft) !important;
}

/* ---------- 8. tables ---------- */
.table {
    color: var(--sg-ink);
    border-color: var(--sg-line);
}

    .table > thead th, .table th {
        background-color: var(--sg-canvas);
        color: var(--sg-ink-soft);
        font-weight: 600;
        font-size: .8125rem;
        letter-spacing: .02em;
        border-bottom: 1px solid var(--sg-line);
    }

    .table > tbody > tr:hover > td {
        background-color: #F8FAFF;
    }

    .table td {
        border-color: var(--sg-line);
        vertical-align: middle;
    }

/* The commission grids are hand-built <table border="1"> rather than .table,
   with inline background colours. Soften the 90s chrome without touching the
   markup or the rowspan striping those pages rely on. */
.commission-table, table[border="1"] {
    border-collapse: separate;
    border-spacing: 0;
    border: 1px solid var(--sg-line) !important;
    border-radius: var(--sg-radius-sm);
    overflow: hidden;
    background-color: var(--sg-surface) !important;
}

    .commission-table th, table[border="1"] th {
        background-color: var(--sg-accent-soft) !important;
        color: var(--sg-ink) !important;
        border: none !important;
        border-bottom: 1px solid var(--sg-line) !important;
        padding: .6rem .75rem;
    }

    .commission-table td, table[border="1"] td {
        border: none !important;
        border-bottom: 1px solid var(--sg-line) !important;
        padding: .45rem .75rem;
    }

/* ---------- 9. tabs, steppers, misc ---------- */
.nav-pills .nav-link {
    border-radius: var(--sg-radius-pill);
    color: var(--sg-ink-soft);
    font-weight: 500;
    padding: .45rem 1.1rem;
}

    .nav-pills .nav-link.active {
        background-color: var(--sg-accent);
        color: #fff;
        box-shadow: 0 1px 2px rgba(47,107,255,.24);
    }

.nav-tabs {
    border-bottom: 1px solid var(--sg-line);
}

    .nav-tabs .nav-link {
        border: none;
        color: var(--sg-ink-soft);
        font-weight: 500;
    }

        .nav-tabs .nav-link.active {
            color: var(--sg-accent);
            border-bottom: 2px solid var(--sg-accent);
            background: transparent;
        }

hr {
    border-color: var(--sg-line);
    opacity: 1;
}

a {
    color: var(--sg-accent);
}

    a:hover {
        color: var(--sg-accent-hover);
    }

.alert {
    border-radius: var(--sg-radius-sm);
    border: none;
}

::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-thumb {
    background: #CFD8E8;
    border-radius: var(--sg-radius-pill);
    border: 2px solid transparent;
    background-clip: content-box;
}

    ::-webkit-scrollbar-thumb:hover {
        background: #B6C2D8;
        background-clip: content-box;
    }

/* =========================================================================
   10. pass 2 — component patterns from the mockups
   =========================================================================
   Everything below still works through classes the pages already carry, so it
   reaches all 28 pages at once without touching their markup.
   ========================================================================= */

/* ---------- saturated headers ---------- */
/* Several cards use .bg-primary.text-white for their header, which reads as a
   heavy blue band. The mockups keep headers on the card surface and let the
   type carry the hierarchy. Softened rather than removed, so anything relying
   on the class for meaning still reads as "this is the header". */
.card-header.bg-primary,
.card-header.bg-primary.text-white {
    background-color: var(--sg-accent-soft) !important;
    color: var(--sg-ink) !important;
    border-bottom: 1px solid var(--sg-line) !important;
}

    .card-header.bg-primary h1, .card-header.bg-primary h2,
    .card-header.bg-primary h3, .card-header.bg-primary h4,
    .card-header.bg-primary h5, .card-header.bg-primary h6,
    .card-header.bg-primary .text-white {
        color: var(--sg-ink) !important;
    }

/* Grey utility headers left over from the old palette. */
.card-header[style*="lightgrey"],
.card-header[style*="lightgray"] {
    background-color: var(--sg-canvas) !important;
    border-bottom: 1px solid var(--sg-line) !important;
}

/* ---------- list rows ---------- */
/* The mockups show documents and recipients as calm rows: soft hover, a hairline
   between, no zebra. Falcon's hover-bg-200 is the hook these pages already use. */
.hover-bg-200:hover {
    background-color: #F5F8FF !important;
}

.notification, .file-list tr {
    border-color: var(--sg-line) !important;
}

.notification {
    border-radius: var(--sg-radius-sm);
    transition: background-color .15s ease;
}

    .notification:hover {
        background-color: #F5F8FF;
    }

/* ---------- toggles ---------- */
/* Kit extras in the mockups are switches. Bootstrap's .form-switch already
   renders one; this just brings it onto the palette and enlarges the target. */
.form-switch .form-check-input {
    width: 2.5rem;
    height: 1.35rem;
    background-color: #D7DEEA;
    border: none;
    cursor: pointer;
}

    .form-switch .form-check-input:checked {
        background-color: var(--sg-accent);
    }

/* ---------- modals ---------- */
.modal-header {
    border-bottom: 1px solid var(--sg-line);
    padding: 1rem 1.25rem;
}

.modal-footer {
    border-top: 1px solid var(--sg-line);
    padding: .875rem 1.25rem;
}

.modal-title {
    color: var(--sg-ink);
    font-weight: 600;
}

/* ---------- accordions ---------- */
.accordion .card {
    margin-bottom: .75rem;
}

.accordion-button:not(.collapsed) {
    background-color: var(--sg-accent-soft);
    color: var(--sg-accent);
    box-shadow: none;
}

.accordion-button:focus {
    box-shadow: 0 0 0 3px rgba(47,107,255,.15);
    border-color: var(--sg-line);
}

/* ---------- drop zones ---------- */
/* Upload targets read as dashed wells in the mockups, matching the
   "+ הוספת טפסים" affordance. */
.drop-zone, .upload-drop, .dropzone {
    border: 2px dashed #C7D5EC !important;
    border-radius: var(--sg-radius) !important;
    background-color: #F8FAFF !important;
    transition: border-color .15s ease, background-color .15s ease;
}

    .drop-zone:hover, .dropzone:hover {
        border-color: var(--sg-accent) !important;
        background-color: var(--sg-accent-soft) !important;
    }

/* ---------- dropdowns ---------- */
.dropdown-item {
    border-radius: var(--sg-radius-sm);
    padding: .45rem .75rem;
    color: var(--sg-ink);
}

    .dropdown-item:hover, .dropdown-item:focus {
        background-color: var(--sg-accent-soft);
        color: var(--sg-accent);
    }

.dropdown-menu {
    padding: .375rem;
}

/* ---------- data tables ---------- */
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select,
.dataTable-input, .dataTable-selector {
    border-radius: var(--sg-radius-sm) !important;
    border: 1px solid var(--sg-line) !important;
    padding: .4rem .7rem;
}

table.dataTable thead th {
    background-color: var(--sg-canvas);
    border-bottom: 1px solid var(--sg-line) !important;
    color: var(--sg-ink-soft);
}

.page-link {
    border-radius: var(--sg-radius-sm) !important;
    margin: 0 2px;
    border-color: var(--sg-line);
    color: var(--sg-ink-soft);
}

.page-item.active .page-link {
    background-color: var(--sg-accent);
    border-color: var(--sg-accent);
}

/* ---------- avatars, misc chrome ---------- */
.avatar .avatar-name, .avatar-name {
    background-color: var(--sg-accent-soft);
    color: var(--sg-accent);
    font-weight: 600;
}

.text-800, .text-900 {
    color: var(--sg-ink) !important;
}

.text-700, .text-600 {
    color: var(--sg-ink-soft) !important;
}

.text-500, .text-400 {
    color: var(--sg-ink-faint) !important;
}

.border, .border-top, .border-bottom, .border-start, .border-end {
    border-color: var(--sg-line) !important;
}

.bg-light, .bg-200, .bg-100 {
    background-color: var(--sg-canvas) !important;
}

.bg-soft-primary {
    background-color: var(--sg-accent-soft) !important;
}

.rounded, .rounded-2, .rounded-3 {
    border-radius: var(--sg-radius-sm) !important;
}

.rounded-pill {
    border-radius: var(--sg-radius-pill) !important;
}

.shadow, .shadow-sm {
    box-shadow: var(--sg-shadow) !important;
}

/* Falcon's .navBackground from site.css is the old cyan band. */
.navBackground {
    background: var(--sg-surface) !important;
    filter: none !important;
    border-bottom: 1px solid var(--sg-line);
}

/* ---------- focus visibility ---------- */
/* Keyboard users need to see where they are; the default outline disappears
   against the new surfaces. */
:focus-visible {
    outline: 2px solid var(--sg-accent);
    outline-offset: 2px;
}

.btn:focus-visible {
    box-shadow: 0 0 0 3px rgba(47,107,255,.25);
}

/* ---------- print ---------- */
/* Signed documents get printed. Drop the canvas tint and shadows so they do not
   waste ink or grey the page. */
@media print {
    body {
        background: #fff !important;
    }

    .card {
        box-shadow: none !important;
        border: 1px solid #ddd !important;
    }
}

/* =========================================================================
   APP CHROME — sidebar + top bar
   These replace Falcon's .navbar-vertical and .navbar-top. Falcon's own rules
   for those classes no longer match anything in _Layout, so there is nothing
   to fight; everything below is plain layout, not an override war.
   The shell is RTL-first: the rail sits on the right, content is inset from it.
   ========================================================================= */

:root {
    --sg-rail: 264px;
    --sg-topbar-h: 72px;
}

/* ---------- Sidebar ---------- */
.sg-sidebar {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: var(--sg-rail);
    z-index: 1030;
    display: flex;
    flex-direction: column;
    background: var(--sg-surface);
    border-left: 1px solid var(--sg-line);
    overflow-y: auto;
    overscroll-behavior: contain;
}

.sg-sidebar__brand {
    display: block;
    padding: 1.25rem 1rem;
    flex: 0 0 auto;
}

    .sg-sidebar__brand a {
        display: block;
    }

    .sg-sidebar__brand img {
        display: block;
        width: 100%;
        height: auto;
    }

.sg-nav {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: .5rem .75rem 1.5rem;
}

.sg-nav__item {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .625rem .875rem;
    border-radius: var(--sg-radius-sm);
    color: var(--sg-ink-soft);
    font-size: .9375rem;
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color .15s ease, color .15s ease;
}

    .sg-nav__item:hover,
    .sg-nav__item:focus-visible {
        background: var(--sg-canvas);
        color: var(--sg-ink);
        text-decoration: none;
    }

    /* Active item: accent tint plus a bar on the leading (right) edge. */
    .sg-nav__item.is-active {
        background: var(--sg-accent-soft);
        color: var(--sg-accent);
        font-weight: 600;
    }

.sg-nav__icon {
    width: 20px;
    flex: 0 0 20px;
    text-align: center;
    font-size: 1rem;
    opacity: .9;
}

.sg-nav__sep {
    height: 1px;
    background: var(--sg-line);
    margin: .75rem .875rem;
}

/* ---------- Top bar ---------- */
.sg-topbar {
    position: sticky;
    top: 0;
    z-index: 1020;
    display: flex;
    align-items: center;
    gap: 1rem;
    height: var(--sg-topbar-h);
    padding: 0 1.75rem;
    background: rgba(255, 255, 255, .88);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--sg-line);
}

.sg-topbar__burger {
    display: none;
    border: 0;
    background: transparent;
    color: var(--sg-ink);
    font-size: 1.125rem;
    padding: .5rem;
    border-radius: var(--sg-radius-sm);
    cursor: pointer;
}

    .sg-topbar__burger:hover {
        background: var(--sg-canvas);
    }

.sg-search {
    position: relative;
    flex: 0 1 380px;
    min-width: 0;
}

.sg-search__icon {
    position: absolute;
    top: 50%;
    right: .875rem;
    transform: translateY(-50%);
    color: var(--sg-ink-faint);
    font-size: .875rem;
    pointer-events: none;
}

.sg-search__input {
    width: 100%;
    height: 42px;
    padding: 0 2.5rem 0 1rem;
    border: 1px solid var(--sg-line);
    border-radius: var(--sg-radius-pill);
    background: var(--sg-canvas);
    color: var(--sg-ink);
    font-size: .9375rem;
    outline: none;
    transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}

    .sg-search__input::placeholder {
        color: var(--sg-ink-faint);
    }

    .sg-search__input:focus {
        background: var(--sg-surface);
        border-color: var(--sg-accent);
        box-shadow: 0 0 0 3px var(--sg-accent-soft);
    }

/* Push the action cluster to the far (left) end of the bar. */
.sg-topbar__actions {
    margin-inline-start: auto;
    gap: .25rem;
}

    .sg-topbar__actions .nav-link {
        color: var(--sg-ink-soft);
        padding: .5rem .625rem;
        border-radius: var(--sg-radius-sm);
    }

        .sg-topbar__actions .nav-link:hover {
            color: var(--sg-ink);
            background: var(--sg-canvas);
        }

/* ---------- Content offset ---------- */
/* Falcon's .content used to be positioned by .navbar-vertical; now the rail is
   fixed, so the inset has to come from here. */
.content {
    margin-right: var(--sg-rail);
    padding: 0;
    min-height: 100vh;
}

    .content > *:not(.sg-topbar) {
        padding-inline: 1.75rem;
    }

    /* First visible block under the bar. :not() cannot be used here because the
       page emits stray <link>/<script>/<label> nodes at this level, so the gap
       goes on the bar itself. */
    .sg-topbar {
        margin-bottom: 1.5rem;
    }

/* Tables that sit straight in a card body have no .table-responsive wrapper of
   their own, so they get clipped on narrow screens. Let the body scroll instead
   of the page. */
.card-body:has(> table),
.card-body:has(> form > table) {
    overflow-x: auto;
}

/* ---------- Responsive ---------- */
.sg-topbar__mark {
    display: none;
    height: 30px;
    width: auto;
}

.sg-scrim {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 1029;
    background: rgba(56, 67, 92, .38);
}

    .sg-scrim.is-open {
        display: block;
    }

@media (max-width: 991.98px) {
    /* The closed drawer is parked off-screen to the right, which otherwise
       extends the scrollable area and lets the whole page slide sideways.
       "clip" is preferred over "hidden" because it does not turn the root into
       a scroll container, so the sticky top bar keeps working; "hidden" stays
       as the fallback for browsers without clip. */
    html, body {
        overflow-x: hidden;
        overflow-x: clip;
    }

    .sg-topbar__mark {
        display: block;
    }

    .sg-sidebar {
        transform: translateX(100%);
        transition: transform .2s ease;
        box-shadow: var(--sg-shadow-lift);
    }

        .sg-sidebar.is-open {
            transform: translateX(0);
        }

    .content {
        margin-right: 0;
    }

    .sg-topbar__burger {
        display: inline-flex;
    }

    .sg-search {
        flex: 1 1 auto;
    }
}

/* ---------- Top bar: greeting cluster ---------- */
/* The bar is RTL, so list order bell → document → avatar → greeting lays out
   with the bell furthest right and the greeting at the far left. */
.sg-topbar__icon {
    font-size: 1.0625rem;
}

.sg-avatar-btn {
    padding: 0 .375rem !important;
    cursor: pointer;
}

.sg-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--sg-accent-soft);
    color: var(--sg-accent);
    font-size: .9375rem;
    font-weight: 700;
    line-height: 1;
    user-select: none;
}

.sg-avatar-btn:hover .sg-avatar {
    background: var(--sg-accent);
    color: #fff;
}

.sg-greeting {
    display: flex;
    align-items: center;
    padding-inline-start: .75rem;
    font-size: .9375rem;
    font-weight: 600;
    color: var(--sg-ink);
    white-space: nowrap;
}

@media (max-width: 767.98px) {
    .sg-greeting {
        display: none;
    }
}