/* ===== Base ===== */
html {
    font-size: 14px;
    position: relative;
    min-height: 100%
}

body {
    margin-bottom: 60px
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 .1rem #fff,0 0 0 .25rem #258cfb
}

/* ===== Vars ===== */
:root {
    --ts-header-h: 56px; /* sidebar.js updates this to real header height */
    --ts-sb-w: 260px; /* expanded width */
    --ts-sb-w-c: 76px; /* collapsed width */

    --ts-sb-bg: #eaf2ff;
    --ts-sb-bg-2: #f6f9ff;
    --ts-sb-br: #d7e5ff;
    --ts-sb-ac: #cfe2ff;
    --ts-sb-icon: #0b3d91;
    --ts-sb-text: #0b2451;
}

/* ===== Shell BELOW header — FLEX (sidebar on the RIGHT) =====
   row-reverse guarantees: [content | sidebar] visually becomes [sidebar | content],
   so the sidebar sits on the RIGHT edge in both RTL and LTR. */
.ts-shell {
    display: flex;
    flex-direction: row-reverse; /* <<< key line */
    min-height: calc(100vh - var(--ts-header-h));
}

/* ===== Sidebar (RIGHT), sticky under header — no overlay ===== */
.ts-sidebar {
    position: sticky !important;
    top: var(--ts-header-h) !important;
    align-self: flex-start;
    height: calc(100vh - var(--ts-header-h));
    overflow: auto;
    /* Fixed column width */
    flex: 0 0 var(--ts-sb-w);
    width: var(--ts-sb-w);
    transition: flex-basis .18s ease, width .18s ease;
    background: linear-gradient(180deg, var(--ts-sb-bg) 0%, var(--ts-sb-bg-2) 100%);
    border-left: 1px solid var(--ts-sb-br); /* divider between content & sidebar */
    display: flex;
    flex-direction: column;
    z-index: 1; /* header sits above */
}

.ts-body.sb-collapsed .ts-sidebar {
    flex-basis: var(--ts-sb-w-c);
    width: var(--ts-sb-w-c);
}

/* ===== Content (LEFT) ===== */
.ts-content {
    min-width: 0; /* allows shrinking next to sidebar */
    flex: 1 1 auto;
    overflow: auto;
    padding: 16px;
    margin: 0 !important; /* kill any legacy margin reservations */
}

/* ===== Sidebar inner UI ===== */
.ts-brand {
    height: var(--ts-header-h);
    padding: 0 .5rem;
    border-bottom: 1px solid var(--ts-sb-br)
}

.ts-logo {
    font-size: 1.05rem
}

.ts-nav {
    display: flex;
    flex-direction: column;
    padding: .5rem;
    gap: .25rem
}

.ts-item {
    display: flex;
    align-items: center;
    gap: .8rem;
    padding: .6rem .7rem;
    border-radius: .65rem;
    color: var(--ts-sb-text);
    text-decoration: none;
    background: transparent;
    border: none;
    width: 100%;
    transition: background .12s ease,transform .06s ease;
}

    .ts-item i {
        width: 24px;
        text-align: center;
        color: var(--ts-sb-icon);
        font-size: 1.1rem
    }

    .ts-item:hover {
        background: #e3eeff;
        text-decoration: none
    }

    .ts-item:active {
        transform: translateY(1px)
    }

    .ts-item.active {
        background: var(--ts-sb-ac);
        position: relative
    }

        .ts-item.active::after {
            content: "";
            position: absolute;
            inset-inline-end: 6px;
            inset-block: 20% 20%;
            width: 3px;
            border-radius: 3px;
            background: #0a66d9
        }

/* Collapsed visuals */
.ts-body.sb-collapsed .ts-item .txt {
    display: none
}

.ts-body.sb-collapsed .ts-item {
    justify-content: center
}

/* Loader overlay */
.ts-page-loader {
    position: fixed;
    inset: 0;
    z-index: 2050;
    background: rgba(255,255,255,.65);
    backdrop-filter: blur(2px);
    display: flex;
    align-items: center;
    justify-content: center
}

/* Utilities */
.break-anywhere {
    overflow-wrap: anywhere;
    word-break: break-word
}

.truncate-1 {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.mail-col {
    position: relative
}

.mail-card, .mail-card .card-header, .mail-card .list-group-item {
    overflow: hidden
}

.mail-scroll {
    max-height: calc(100vh - 220px);
    overflow: auto
}

/* Zebra: subtle alternating colors */
.table.zebra tbody tr:nth-child(odd) {
    background-color: #fafbfc;
}

.table.zebra tbody tr:nth-child(even) {
    background-color: #f3f5f7;
}

/* Keep Bootstrap hover color priority */
.table.zebra.table-hover tbody tr:hover {
    background-color: #e9ecef;
}

/* Phones (still no overlay; you can add an overlay pattern later if you want) */
@media (max-width:740px) {
    :root {
        --ts-sb-w: 220px;
        --ts-sb-w-c: 64px
    }

    .ts-content {
        padding: 12px
    }
}