:root {
    --tc-accent: #247FBA;
    --tc-bgsvg-url: url('/images/login-bg.svg');
    --tc-bgsvg-opacity: .18;
    --tc-bgsvg-tint: linear-gradient(135deg, rgba(170,235,255,.55) 0%, rgba(36,127,186,.45) 45%, rgba(255,255,255,.18) 100%);
    --tc-topbar-pad-y: 10px;
    --tc-topbar-pad-x: 12px;
    --tc-rail-w: 56px;
    /* When a rail section scrolls, match this width on body.tc-rail--scrollbar (see tc-layout-v2.js). */
    --tc-rail-w-scroll: 76px;
    --tc-side-w: 240px;
    --tc-glass-bg: rgba(10, 18, 30, .52);
    --tc-glass-bg-strong: rgba(10, 18, 30, .68);
    --tc-glass-border: rgba(255,255,255,.10);
    --tc-glass-border-soft: rgba(255,255,255,.07);
    --tc-glass-shadow: 0 18px 45px rgba(0,0,0,.38);
    --tc-glass-blur: 10px;
}

html, body {
    height: 100%;
}

body {
    min-height: 100vh;
    color: #e5f2ff;
    background:
    /* Background SVG overlay is handled by body.tc-app::before (themed) */
    /* diagonal streaks */
    repeating-linear-gradient(-35deg, rgba(56,189,248,.00) 0 22px, rgba(56,189,248,.08) 22px 23px, rgba(56,189,248,.00) 23px 60px),
    /* grid */
    repeating-linear-gradient(0deg, rgba(255,255,255,.06) 0 1px, transparent 1px 28px), repeating-linear-gradient(90deg, rgba(255,255,255,.05) 0 1px, transparent 1px 28px),
    /* glows */
    radial-gradient(1200px circle at 18% 10%, rgba(56,189,248,.35), transparent 55%), radial-gradient(900px circle at 82% 28%, rgba(37,99,235,.28), transparent 60%), radial-gradient(650px circle at 55% 85%, rgba(99,102,241,.18), transparent 62%),
    /* base */
    linear-gradient(135deg, #030712 0%, #04122a 38%, #071f3e 100%);
    background-blend-mode: normal;
    overflow-x: hidden;
}

    /* If legacy shared.css is disabled, we still need a stable shell.
   Apply the same base flex layout to body even without the tc-app class. */
    body,
    body.tc-app {
        margin: 0;
        height: 100vh;
        display: flex;
        flex-direction: column;
        overflow: hidden; /* keep legacy expectation */
    }

/* Hide legacy account/sign-out rows in the old left menu table.
   Account actions live in the top-right header now. */
#accountButton,
#signOut {
    display: none !important;
}


/* Ensure no duplicate Account/Sign Out icons in the collapsed rail */
#tcRail a[title="Account"],
#tcRail a[aria-label="Account"],
#tcRail a[title="Sign Out"],
#tcRail a[aria-label="Sign Out"],
#tcRail a[title="Logout"],
#tcRail a[aria-label="Logout"] {
    display: none !important;
}
/* ---------- App shell ---------- */

.tc-topbar {
    position: relative; /* inside a flex column, it stays at the top */
    z-index: 6200;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    padding: var(--tc-topbar-pad-y) var(--tc-topbar-pad-x);
    background: linear-gradient(90deg, rgba(36,127,181,1) 0%, rgba(36,140,208,1) 28%, rgba(29,98,153,1) 65%, rgba(0,0,0,1) 100%);
    box-shadow: 0 8px 18px rgba(0,0,0,.18);
}

.tc-topbar__btn {
    border: 0;
    background: rgba(0,0,0,.25);
    color: #fff;
    width: 42px;
    height: 38px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.tc-burger {
    position: relative;
    width: 18px;
    height: 12px;
    display: inline-block;
}

    .tc-burger::before,
    .tc-burger::after,
    .tc-burger {
        background: transparent;
    }

        .tc-burger::before,
        .tc-burger::after {
            content: "";
            position: absolute;
            left: 0;
            right: 0;
            height: 2px;
            background: rgba(255,255,255,.95);
            border-radius: 2px;
        }

        .tc-burger::before {
            top: 0;
            box-shadow: 0 5px 0 rgba(255,255,255,.95);
        }

        .tc-burger::after {
            bottom: 0;
        }

.tc-topbar__brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: #fff;
    text-decoration: none;
    min-width: 160px;
}

.tc-brandlogo {
    height: 34px;
    width: auto;
    display: inline-block;
    opacity: .9;
    filter: drop-shadow(0 2px 6px rgba(0,0,0,.35));
}


.tc-brandmark {
    width: 30px;
    height: 30px;
    border-radius: 10px;
    background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.9) 0%, rgba(255,255,255,.35) 30%, rgba(255,255,255,0) 60%), linear-gradient(135deg, rgba(255,168,55,1) 0%, rgba(36,140,208,1) 70%);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.25);
}

.tc-brandtext {
    font-weight: 700;
    letter-spacing: .2px;
    font-size: 16px;
    line-height: 1;
    white-space: nowrap;
}

.tc-topbar__actions {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 0 0 auto;
}

.tc-topbar__user {
    color: rgba(255,255,255,.92);
    max-width: 32vw;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tc-topbar__meta {
    display: block;
    color: rgba(255,255,255,.75);
    font-weight: 600;
    font-size: 11px;
    margin-top: 1px;
}

.tc-topbar__link {
    border: 0;
    background: rgba(0,0,0,.25);
    color: #fff;
    border-radius: 12px;
    padding: 8px 10px;
    cursor: pointer;
    text-decoration: none;
    font-weight: 600;
    line-height: 1;
}

    .tc-topbar__link:hover {
        background: rgba(0,0,0,.35);
        color: #fff;
        text-decoration: none;
    }

/* pinned chips in top bar */
.tc-pinnedbar {
    display: flex;
    align-items: center;
    gap: 8px;
    overflow-x: auto;
    padding: 0 2px;
    min-width: 0;
    flex: 1 1 auto;
}

    .tc-pinnedbar::-webkit-scrollbar {
        height: 6px;
    }

    .tc-pinnedbar::-webkit-scrollbar-thumb {
        background: rgba(255,255,255,.25);
        border-radius: 999px;
    }

.tc-pinnedchip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
    border-radius: 999px;
    background: rgba(0,0,0,.25);
    color: rgba(255,255,255,.95);
    text-decoration: none;
    font-weight: 700;
    font-size: .75rem;
    white-space: nowrap;
}

    .tc-pinnedchip:hover {
        background: rgba(0,0,0,.35);
        color: #fff;
        text-decoration: none;
    }

.tc-pinnedchip__remove {
    border: 0;
    background: transparent;
    color: rgba(255,255,255,.9);
    font-weight: 900;
    line-height: 1;
    padding: 0;
    cursor: pointer;
}

/* Optional page header content injected by views */
.tc-pagebar {
    flex: 0 0 100%;
    display: block;
    padding-top: 6px;
}

/* ---------- Page header / toolbar region (per-page via @section PageHeader) ---------- */

#tcPagebar.tc-pagebar {
    padding-top: 10px;
}

#tcPagebar .tc-pagebar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 8px 10px;
    border-radius: 14px;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.12);
}

#tcPagebar .tc-pagebar-left,
#tcPagebar .tc-pagebar-right {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

#tcPagebar .tc-pagebar-right {
    margin-left: auto;
}

#tcPagebar .tc-btngroup {
    display: inline-flex;
    align-items: stretch;
    gap: 6px;
}

#tcPagebar .tc-pagebtn,
#tcPagebar a.tc-pagebtn,
#tcPagebar button.tc-pagebtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 32px;
    padding: 6px 10px;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,.22);
    background: rgba(0,0,0,.18);
    color: rgba(255,255,255,.94);
    text-decoration: none;
    font-weight: 650;
    font-size: .78rem;
    line-height: 1.1;
    text-align: center;
    user-select: none;
}

    #tcPagebar .tc-pagebtn:hover {
        background: rgba(0,0,0,.28);
        color: #fff;
        text-decoration: none;
    }

    #tcPagebar .tc-pagebtn:focus {
        outline: 2px solid rgba(255,255,255,.45);
        outline-offset: 2px;
    }

#tcPagebar .tc-pagebtnwrap {
    position: relative;
    display: inline-flex;
}

/* Search box in header */
#tcPagebar .tc-search {
    display: inline-flex;
    gap: 6px;
    align-items: center;
}

#tcPagebar .tc-search-input {
    height: 32px;
    padding: 5px 10px;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,.25);
    background: rgba(255,255,255,.12);
    color: rgba(255,255,255,.95);
    min-width: 220px;
    max-width: 45vw;
}

    #tcPagebar .tc-search-input::placeholder {
        color: rgba(255,255,255,.75);
    }

#tcPagebar .tc-search-btn {
    height: 32px;
    padding: 5px 12px;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,.28);
    background: rgba(0,0,0,.25);
    color: rgba(255,255,255,.96);
    font-weight: 750;
    cursor: pointer;
}

    #tcPagebar .tc-search-btn:hover {
        background: rgba(0,0,0,.33);
    }

/* Make legacy "orb" links blend in if used in the page header */
#tcPagebar .orb.tc-pagebtn {
    text-transform: none;
}


.tc-pagebar:empty {
    display: none;
}

.tc-shell {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    align-items: stretch;
}

/* Pinned rail (always visible on mobile; visible on desktop only when sidebar is collapsed) */
.tc-rail {
    width: var(--tc-rail-w);
    min-width: var(--tc-rail-w);
    background: #0b121a;
    border-right: 1px solid rgba(255,255,255,.08);
    display: none;
    flex-direction: column;
    align-items: center;
    padding: 10px 0px;
    gap: 0px; /*10px;*/
    z-index: 6150;
}

.tc-rail__list {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-height: 0;
}

.tc-rail__item {
    display: grid;
    place-items: center;
    width: 100%;
    min-height: 38px;
    height: 38px;
    border-radius: 10px;
    background: rgba(255,255,255,.06);
    color: rgba(255,255,255,.95);
    text-decoration: none;
    font-weight: 900;
    letter-spacing: .02em;
    font-size: 12px;
    user-select: none;
}

    .tc-rail__item:hover {
        background: rgba(255,255,255,.10);
        color: #fff;
        text-decoration: none;
    }

    .tc-rail__item svg {
        width: 20px;
        height: 20px;
        min-width: 20px;
        min-height: 20px;
        display: block;
        overflow: visible;
    }

.tc-rail__divider {
    width: 100%;
    height: 1px;
    background: rgba(255,255,255,.10);
    margin: 2px 0;
    flex: 0 0 auto;
}

.tc-rail__btn {
    width: 100%;
    height: 40px;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,.10);
    background: rgba(255,255,255,.05);
    color: rgba(255,255,255,.95);
    font-weight: 800;
    cursor: pointer;
}

    .tc-rail__btn:hover {
        background: rgba(255,255,255,.08);
    }

/* Desktop: show sidebar by default. When collapsed, hide sidebar and show the rail. */
@media (min-width: 992px) {
    body.tc-nav-collapsed .tc-rail {
        display: flex;
    }

    body.tc-nav-collapsed #sideNavi.tc-sidebar {
        display: none;
    }
}
/* Mobile: keep sidebar in the DOM (off-canvas); collapse just affects default state */

/* ---------- Sidebar ---------- */

/* Higher specificity to override shared.css #sideNavi rules */
#sideNavi.tc-sidebar {
    width: var(--tc-side-w);
    min-width: var(--tc-side-w);
    background: #0f1720;
    color: rgba(255,255,255,.92);
    border-right: 1px solid rgba(255,255,255,.08);
    overflow: hidden;
    position: relative;
    height: 100%;
    z-index: 6100;
}

    #sideNavi.tc-sidebar .tc-sidebar__inner {
        height: 100%;
        display: flex;
        flex-direction: column;
    }

.tc-sidebar__pinned {
    padding: 10px 12px;
    border-bottom: 1px solid rgba(255,255,255,.08);
}

.tc-sidebar__pinnedtitle {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: rgba(255,255,255,.65);
    margin-bottom: 8px;
}

.tc-sidebar__pinnedlist {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

    .tc-sidebar__pinnedlist a {
        color: rgba(255,255,255,.92);
        text-decoration: none;
        font-weight: 700;
        font-size: 12px;
        background: rgba(255,255,255,.06);
        padding: 6px 10px;
        border-radius: 999px;
    }

        .tc-sidebar__pinnedlist a:hover {
            background: rgba(255,255,255,.10);
        }

.tc-nav {
    padding: 10px 8px 14px 8px;
    overflow: auto;
    flex: 1 1 auto;
}

.tc-navsection {
    border-radius: 12px;
    margin: 6px 4px;
    background: rgba(255,255,255,.03);
    border: 1px solid rgba(255,255,255,.05);
}

    .tc-navsection[open] {
        background: rgba(255,255,255,.04);
    }

.tc-navsection__title {
    list-style: none;
    cursor: pointer;
    padding: 10px 12px;
    font-weight: 900;
    color: rgba(255,255,255,.86);
    user-select: none;
}

    .tc-navsection__title::-webkit-details-marker {
        display: none;
    }

.tc-navitems {
    padding: 2px 8px 10px 8px;
}

.tc-navitem {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 2px 2px;
}

.tc-navlink,
.tc-navbtn {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    padding: 7px 10px;
    border-radius: 10px;
    width: 100%;
    color: rgba(255,255,255,.94);
    text-decoration: none;
    font-weight: 650;
    /* rem-based so browser zoom behaves naturally */
    font-size: clamp(.78rem, .25vw + .74rem, .88rem);
    line-height: 1.15;
    background: transparent;
    border: 0;
    cursor: pointer;
}

.tc-navbtn {
    text-align: left;
}

    .tc-navlink:hover,
    .tc-navbtn:hover {
        background: rgba(255,255,255,.07);
        color: #fff;
        text-decoration: none;
    }

.tc-navitem.is-disabled .tc-navitem.is-disabled .tc-navlink,
.tc-navitem.is-disabled .tc-navbtn {
    opacity: .55;
    cursor: not-allowed;
}

.tc-navitem.is-hidden {
    display: none;
}

.tc-pinbtn {
    width: 12px;
    height: 12px;
    border-radius: 4px;
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(255,255,255,.03);
    cursor: pointer;
    flex: 0 0 auto;
    position: relative;
    opacity: .85;
}

    .tc-pinbtn:hover {
        opacity: 1;
    }

    .tc-pinbtn::before {
        content: "📌";
        position: absolute;
        inset: 0;
        display: grid;
        place-items: center;
        font-size: 9px;
        opacity: .70;
        transform: rotate(-20deg);
    }

    .tc-pinbtn:hover {
        background: rgba(255,255,255,.06);
    }

.tc-navitem.is-pinned .tc-pinbtn {
    background: rgba(255,168,55,.22);
    border-color: rgba(255,168,55,.35);
}

    .tc-navitem.is-pinned .tc-pinbtn::before {
        opacity: 1;
    }

.tc-navitem.is-active .tc-navlink,
.tc-navitem.is-active .tc-navbtn {
    background: rgba(36,127,186,.35);
    border: 1px solid rgba(36,127,186,.45);
}

.tc-sidebar__footer {
    padding: 10px 12px;
    border-top: 1px solid rgba(255,255,255,.08);
}

.tc-sidebar__footrow {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}

.tc-small {
    font-size: 11px;
    color: rgba(255,255,255,.65);
}

/* ---------- Main ---------- */

.tc-main {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden; /* views typically handle scrolling inside .mainWrap */
    background: transparent;
    padding: 0;
}

/* Ensure the common app wrapper can actually use space */
body.tc-app section.contentbody {
    height: 100% !important;
    width: 100% !important;
    padding-left: 0 !important; /* shared.css forces 100px */
    overflow: hidden !important;
    box-sizing: border-box;
}

    body.tc-app section.contentbody .mainWrap {
        height: 100% !important;
        width: 100% !important;
    }

/* ---------- Mobile off-canvas behavior (single layout; responsive via CSS) ---------- */

.tc-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.55);
    z-index: 6050;
}

@media (max-width: 991px) {
    .tc-topbar__user {
        display: none;
    }

    /* Tablet: show pinned rail */
    .tc-rail {
        display: flex;
    }

    /* Sidebar becomes an off-canvas drawer, offset by the rail */
    #sideNavi.tc-sidebar {
        position: fixed;
        top: 0;
        bottom: 0;
        left: var(--tc-rail-w);
        z-index: 6100;
        transform: translateX(-110%);
        transition: transform .18s ease-out;
        width: 86vw;
        max-width: 340px;
        min-width: 0;
        box-shadow: 0 20px 60px rgba(0,0,0,.55);
    }

    body.tc-nav-open #sideNavi.tc-sidebar {
        transform: translateX(0);
    }
}

/* Phone: when nav is closed, hide the icon rail; sidebar slides from left edge */
@media (max-width: 768px) {
    body.tc-nav-collapsed .tc-rail {
        display: none !important;
    }

    #sideNavi.tc-sidebar {
        left: 0 !important;
    }
}

/* ---- Legacy panel stacking fixes ---- */
body.tc-app .accountBin {
    z-index: 6250 !important; /* above overlay */
}

    /* Position account panels to the right of sidebar (or rail when sidebar collapsed) */
    body.tc-app .accountBin.activeBin {
        left: var(--tc-side-w) !important;
    }

body.tc-app.tc-nav-collapsed .accountBin.activeBin {
    left: var(--tc-rail-w) !important;
}

@media (max-width: 991px) {
    body.tc-app .accountBin.activeBin {
        left: var(--tc-rail-w) !important;
    }
}

/* ---- De-style legacy pgTitle headers (shared.css) so they behave like a Bootstrap toolbar ---- */
body.tc-app .pgTitle {
    height: auto !important;
    width: 100% !important;
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    padding: .5rem .75rem !important;
    background: transparent !important;
    box-shadow: none !important;
}

    body.tc-app .pgTitle #buttonList {
        position: static !important;
        left: auto !important;
        width: auto !important;
        display: flex;
        flex-wrap: wrap;
        gap: .5rem;
        align-items: center;
    }

/* ---------- Zammad chat polish (moved from inline style blocks) ---------- */

div.zammad-chat {
    z-index: 4000;
    position: absolute;
}

.zammad-chat-welcome {
    max-width: 50%;
}

.zammad-chat-header-controls {
    float: right;
    display: contents;
}

.zammad-chat-header {
    background: rgb(36,127,181);
    background: linear-gradient(90deg, rgba(36,127,181,1) 0%, rgba(36,140,208,1) 28%, rgba(29,98,153,1) 65%, rgba(0,0,0,1) 100%);
    box-shadow: 11px 0px 9px -4px rgba(0,0,0,0.28) inset;
    -webkit-box-shadow: 11px 0px 9px -4px rgba(0,0,0,0.28) inset;
    -moz-box-shadow: 11px 0px 9px -4px rgba(0,0,0,0.28) inset;
}


/* ==========================
   v4 additions: center banner, icon menu, modern account panel
   ========================== */

.tc-topbar {
    flex-direction: column;
    align-items: stretch;
}

.tc-topbar__row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    width: 100%;
}

.tc-topbar__center {
    flex: 1 1 260px;
    display: flex;
    justify-content: center;
    min-width: 180px;
}

.tc-lti a {
    display: block;
    width: clamp(160px, 28vw, 520px);
    height: clamp(26px, 2.2vw, 42px);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    border-radius: 14px;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
    opacity: .96;
}

    .tc-lti a:hover {
        opacity: 1;
        box-shadow: inset 0 0 0 1px rgba(255,255,255,.14), 0 10px 24px rgba(0,0,0,.18);
    }

/* Make sure the pagebar uses full width under the top row */
#tcPagebar.tc-pagebar {
    width: 100%;
}

/* ---------- Nav icons (sidebar + pinned list) ---------- */
.tc-navlink,
.tc-sidebar__pinnedlist a {
    display: flex;
    align-items: center;
    gap: 10px;
}

.tc-navicon {
    width: 20px;
    min-width: 20px;
    height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: rgba(255,255,255,.88);
    --tc-icon-badge-fg: #0b1220;
}

    .tc-navicon svg {
        width: 18px;
        height: 18px;
    }

/* Slightly tighter menu text */
#sideNavi.tc-sidebar .tc-navlink {
    font-size: clamp(.76rem, .18vw + .74rem, .86rem);
}

/* ---------- Collapsed rail (all icons) ---------- */
.tc-rail__list--all {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    padding: 5px 0;
}

.tc-rail__list--pinned {
    flex: 0 0 auto;
    max-height: 42%;
    overflow: auto;
    padding-top: 2px;
}

.tc-rail__item--nav svg {
    width: 22px;
    height: 22px;
}

.tc-rail__item.is-active {
    background: rgba(255,255,255,.16);
}

/* Widen the quick rail when a section scrolls so classic scrollbars do not crowd icons. */
body.tc-rail--scrollbar {
    --tc-rail-w: var(--tc-rail-w-scroll);
}

/* ---------- Modern account panel ---------- */
/* Override legacy position/width from shared.css without editing it */
body.tc-app .accountBin {
    position: fixed !important;
    top: calc(var(--tc-topbar-h, 62px) - 2px) !important;
    right: 12px !important;
    left: auto !important;
    width: min(440px, calc(100vw - 24px)) !important;
    max-height: calc(100vh - var(--tc-topbar-h, 62px) - 12px) !important;
    overflow: auto !important;
    background: rgba(15,23,32,.98) !important;
    color: rgba(255,255,255,.94) !important;
    border: 1px solid rgba(255,255,255,.10) !important;
    border-radius: 18px !important;
    box-shadow: 0 22px 60px rgba(0,0,0,.48) !important;
    transform: translateY(-14px);
    opacity: 0;
    pointer-events: none;
    transition: transform .18s ease, opacity .18s ease;
    z-index: 6505 !important;
}

    body.tc-app .accountBin.activeBin {
        transform: translateY(0);
        opacity: 1;
        pointer-events: auto;
    }

@media (max-width: 575px) {
    body.tc-app .accountBin {
        right: 0 !important;
        left: 0 !important;
        width: 100vw !important;
        border-radius: 0 0 18px 18px !important;
    }
}

body.tc-app .accountBin .tpTitle {
    position: sticky;
    top: 0;
    padding: 14px 14px 10px;
    background: rgba(15,23,32,.96);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid rgba(255,255,255,.10);
}

    body.tc-app .accountBin .tpTitle h1 {
        margin: 0;
        font-size: 1rem;
        line-height: 1.25;
        color: #fff;
    }

    body.tc-app .accountBin .tpTitle h2 {
        margin: 6px 0 0;
        font-size: .86rem;
        color: rgba(255,255,255,.82);
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        align-items: center;
    }

body.tc-app .accountBin a {
    color: rgba(255,255,255,.92);
}

body.tc-app .accountBin .accTile {
    margin: 10px 12px;
    border-radius: 14px;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.10);
}

    body.tc-app .accountBin .accTile:hover {
        background: rgba(255,255,255,.10);
    }

    body.tc-app .accountBin .accTile > div {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 10px 12px;
    }

    body.tc-app .accountBin .accTile img {
        width: 28px;
        height: 28px;
        object-fit: contain;
    }

    body.tc-app .accountBin .accTile span {
        font-size: .92rem;
    }


/* =========================================================
   Dashboard / page surfaces (Bootstrap-first)
   Keep very light: just enough to be consistent with the new layout.
========================================================= */

.tc-dashboard {
    overflow: auto;
    overflow-x: hidden;
    height: 100%;
    -webkit-overflow-scrolling: touch;
    min-height: 0; /* flex: allow shrinking for scroll to work */
}

/* List pages: height chain so tc-dashboard can scroll when content overflows */
section.contentbody > .container-fluid,
section.contentbody > .tc-dashboard {
    height: 100%;
    min-height: 0;
}

section.contentbody .container-fluid > .tc-dashboard {
    height: 100%;
    min-height: 0;
}

/* List pages: ensure scrollability on mobile (viewport-constrained) */
@media (max-width: 991px) {
    section.contentbody .tc-dashboard {
        overflow-y: auto;
        padding-bottom: 24px;
    }

    section.contentbody .tc-surface {
        min-height: min-content;
        padding-bottom: 20px;
    }
}

.tc-card {
    background: var(--tc-glass-bg);
    border: 1px solid var(--tc-glass-border);
    border-radius: 16px;
    box-shadow: var(--tc-glass-shadow);
    backdrop-filter: blur(var(--tc-glass-blur)) saturate(125%);
    -webkit-backdrop-filter: blur(var(--tc-glass-blur)) saturate(125%);
}

.tc-card-header {
    border-bottom: 1px solid rgba(255,255,255,.08);
    background: rgba(0,0,0,.14);
    color: rgba(240,246,255,.94);
    font-weight: 600;
}

.tc-muted {
    color: rgba(210,225,245,.72);
    font-size: .86rem;
}

.tc-icell {
    width: 36px;
    text-align: center;
    opacity: .85;
}

.tc-scroll {
    overflow: auto;
    max-height: 420px;
}

@media (min-width: 1200px) {
    .tc-scroll {
        max-height: 520px;
    }
}

.tc-bigstat {
    position: relative;
    border-radius: 14px;
    padding: 16px 14px;
    background: linear-gradient(135deg, rgba(36,127,181,.10), rgba(0,0,0,.02));
    border: 1px solid rgba(36,127,181,.18);
}

.tc-bigstat__value {
    font-size: clamp(1.9rem, 2.4vw, 2.6rem);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -.02em;
}

.tc-bigstat__label {
    margin-top: 6px;
    color: rgba(210,225,245,.72);
    font-weight: 600;
}

.tc-statlist {
    display: grid;
    gap: 10px;
    padding: 10px 0 0;
}

.tc-statrow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 12px;
    background: rgba(0,0,0,.02);
    border: 1px solid rgba(0,0,0,.06);
}

    .tc-statrow b {
        font-size: 1.1rem;
    }

.tc-ph-title {
    font-weight: 700;
    color: rgba(255,255,255,.95);
    font-size: 1.05rem;
    letter-spacing: .2px;
}

.tc-ph-sub {
    font-size: .86rem;
    color: rgba(255,255,255,.75);
}

.tc-chartbox {
    position: relative;
    width: 100%;
    height: 240px;
}

@media (min-width: 992px) {
    .tc-chartbox {
        height: 260px;
    }
}

.tc-charttab.is-active {
    background: rgba(0,0,0,.18) !important;
    border-color: rgba(0,0,0,.18) !important;
}

/* Make the legacy Latestlist table look acceptable inside the new card */
#tcHomeStats #tablelatest thead {
    display: none;
}

#tcHomeStats #tablelatest {
    width: 100%;
}

    #tcHomeStats #tablelatest tbody tr {
        cursor: pointer;
        transition: background-color .25s ease, box-shadow .25s ease;
    }

        #tcHomeStats #tablelatest tbody tr.tc-status-completed {
            background: rgba(15, 191, 6, 0.12);
        }

/* Rotating “light” on the border for queue / processing (conic sweep) */
@property --tc-latest-border-angle {
    syntax: '<angle>';
    inherits: false;
    initial-value: 0deg;
}

@keyframes tcLatestBorderRotate {
    to {
        --tc-latest-border-angle: 360deg;
    }
}

/* Legacy table layout: neutral fill + bright outline pulse (tr cannot use conic border cleanly) */
#tcHomeStats #tablelatest tbody tr.tc-status-queued,
#tcHomeStats #tablelatest tbody tr.tc-status-processing {
    background: rgba(0, 0, 0, 0.14);
    animation: tcLatestTableBorderGlow 2.4s ease-in-out infinite;
}

#tcHomeStats #tablelatest tbody tr.tc-status-queued {
    box-shadow: inset 0 0 0 2px rgba(255, 175, 90, 0.82), 0 0 12px rgba(255, 160, 70, 0.26);
}

#tcHomeStats #tablelatest tbody tr.tc-status-processing {
    box-shadow: inset 0 0 0 2px rgba(90, 185, 255, 0.82), 0 0 12px rgba(70, 160, 255, 0.26);
}

@keyframes tcLatestTableBorderGlow {
    0%, 100% {
        filter: brightness(1);
    }

    50% {
        filter: brightness(1.07);
    }
}

/* Recent Changes (v2): list rows — neutral fill, rotating light on border only */
#tcHomeStats .tc-latest-row.tc-status-completed {
    background: rgba(15, 191, 6, 0.12);
    border-color: rgba(15, 191, 6, 0.22);
}

#tcHomeStats .tc-latest-row.tc-status-queued {
    --tc-latest-border-angle: 0deg;
    border: 2px solid transparent;
    border-radius: 14px;
    background: linear-gradient(rgba(0, 0, 0, 0.22), rgba(0, 0, 0, 0.22)) padding-box, conic-gradient( from var(--tc-latest-border-angle) at 50% 100%, rgba(255, 130, 40, 0.28), rgba(255, 220, 165, 0.88), rgba(255, 195, 95, 0.82), rgba(255, 165, 70, 0.52), rgba(255, 130, 40, 0.28) ) border-box;
    background-clip: padding-box, border-box;
    background-origin: padding-box, border-box;
    animation: tcLatestBorderRotate 2.4s linear infinite;
    box-shadow: 0 0 15px rgba(255, 170, 80, 0.24);
}

#tcHomeStats .tc-latest-row.tc-status-processing {
    --tc-latest-border-angle: 0deg;
    border: 2px solid transparent;
    border-radius: 14px;
    background: linear-gradient(rgba(0, 0, 0, 0.22), rgba(0, 0, 0, 0.22)) padding-box, conic-gradient( from var(--tc-latest-border-angle) at 50% 100%, rgba(40, 120, 220, 0.28), rgba(190, 225, 255, 0.88), rgba(115, 195, 255, 0.82), rgba(70, 155, 235, 0.52), rgba(40, 120, 220, 0.28) ) border-box;
    background-clip: padding-box, border-box;
    background-origin: padding-box, border-box;
    animation: tcLatestBorderRotate 2.4s linear infinite;
    box-shadow: 0 0 15px rgba(80, 170, 255, 0.26);
}

#tcHomeStats .tc-latest-row.tc-status-completed:hover {
    background: rgba(15, 191, 6, 0.18);
}

#tcHomeStats .tc-latest-row.tc-status-queued:hover,
#tcHomeStats .tc-latest-row.tc-status-processing:hover {
    box-shadow: 0 0 18px rgba(255, 200, 120, 0.32);
}

#tcHomeStats .tc-latest-row.tc-status-processing:hover {
    box-shadow: 0 0 18px rgba(120, 190, 255, 0.34);
}

/* Fallback when @property is not supported: still show a bright static border */
@supports not (background: conic-gradient(from 0deg, red, blue)) {
    #tcHomeStats .tc-latest-row.tc-status-queued {
        border: 2px solid rgba(255, 190, 100, 0.82);
        background: rgba(0, 0, 0, 0.22);
        animation: none;
    }

    #tcHomeStats .tc-latest-row.tc-status-processing {
        border: 2px solid rgba(120, 190, 255, 0.82);
        background: rgba(0, 0, 0, 0.22);
        animation: none;
    }
}

#tcHomeStats .buttonPush {
    display: none !important;
}

/* FCC countdown styling - starts blue, JS transitions to teal->green->orange->red as deadline nears */
.tc-fcc {
    border-radius: 12px;
    padding: 10px 12px;
    background: #247FBA;
}

#tcFccCountdown {
    text-shadow: 0 1px 2px rgba(0,0,0,.25);
}

/* Make the view usable even if shared.css is removed */
body.tc-app #tcHomeStats .table {
    margin-bottom: 0;
}



/* -----------------------------
   Dark UI + soft gray surfaces
   (no bright white)
------------------------------*/
.tc-surface {
    /* transparent “glass” surface so SVG background shows through */

    border: 1px solid var(--tc-glass-border-soft);
    border-radius: 18px;
    padding: 14px;
    box-shadow: var(--tc-glass-shadow);
}

.tc-dashboard {
    color: rgba(240,246,255,.94);
}

.tc-card {
    background: var(--tc-glass-bg);
    border: 1px solid var(--tc-glass-border);
    box-shadow: var(--tc-glass-shadow);
    backdrop-filter: blur(var(--tc-glass-blur)) saturate(125%);
    -webkit-backdrop-filter: blur(var(--tc-glass-blur)) saturate(125%);
}

    .tc-card .card-body {
        background: transparent;
    }

.tc-card-header {
    background: rgba(0,0,0,.14);
    color: rgba(240,246,255,.94);
    border-bottom: 1px solid rgba(255,255,255,.08);
}

/* Buttons that match the darker layout, without bright white */
.tc-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .35rem;
    border-radius: 12px;
    padding: .45rem .7rem;
    border: 1px solid rgba(0,0,0,.22);
    background: rgba(28,33,40,.88);
    color: rgba(245,247,250,.92);
    text-decoration: none !important;
    line-height: 1.1;
    box-shadow: 0 6px 16px rgba(0,0,0,.18);
}

    .tc-btn:hover {
        background: rgba(28,33,40,.96);
        color: rgba(255,255,255,.95);
    }

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

.tc-btn-sm {
    padding: .35rem .6rem;
    border-radius: 10px;
    font-size: .86rem;
}

/* Truncation helpers */
.tc-ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tc-ph-title {
    font-size: 1.05rem;
    font-weight: 700;
}

.tc-ph-sub {
    font-size: .85rem;
    opacity: .9;
}

.tc-card-header > span, .tc-card-header .tc-muted {
    min-width: 0;
}

.tc-card-header {
    display: flex;
    gap: .6rem;
    align-items: center;
    justify-content: space-between;
}

    .tc-card-header > span {
        min-width: 0;
    }

.tc-muted {
    color: rgba(210,225,245,.72) !important;
}

/* Ensure table/rows aren't white */
.tc-dashboard .table {
    --bs-table-bg: transparent;
    --bs-table-striped-bg: rgba(255,255,255,.04);
    color: inherit;
}

    .tc-dashboard .table td, .tc-dashboard .table th {
        border-color: rgba(255,255,255,.10);
    }

/* Scroll areas: subtle */
.tc-scroll {
    max-height: 420px;
    overflow: auto;
}


/* Button variants */
.tc-btn-outline {
    background: rgba(255,255,255,.04);
    color: rgba(240,246,255,.90);
    border: 1px solid rgba(255,255,255,.14);
    box-shadow: none;
}

    .tc-btn-outline:hover {
        background: rgba(255,255,255,.07);
        color: rgba(255,255,255,.95);
    }

.tc-btn-primary {
    background: rgba(36, 127, 181, 0.92);
    border-color: rgba(36, 127, 181, 0.92);
    color: rgba(255,255,255,.96);
}

    .tc-btn-primary:hover {
        background: rgba(36, 127, 181, 1);
        color: rgba(255,255,255,.98);
    }

.tc-btn-danger {
    background: rgba(205, 61, 61, 0.92);
    border-color: rgba(205, 61, 61, 0.92);
    color: rgba(255,255,255,.96);
}

    .tc-btn-danger:hover {
        background: rgba(205, 61, 61, 1);
    }

.tc-btn-link {
    background: transparent;
    border-color: transparent;
    box-shadow: none;
    color: rgba(36, 127, 181, 0.95);
    padding-left: .25rem;
    padding-right: .25rem;
}

    .tc-btn-link:hover {
        text-decoration: none;
        background: transparent;
    }

/* Chart tabs */
.tc-charttabs {
    display: inline-flex;
    gap: .45rem;
}

.tc-tab {
    border: 1px solid rgba(255,255,255,.14);
    background: rgba(255,255,255,.04);
    color: rgba(240,246,255,.90);
    border-radius: 999px;
    padding: .32rem .65rem;
    font-size: .86rem;
    line-height: 1.1;
}

    .tc-tab:hover {
        background: rgba(255,255,255,.07);
    }

    .tc-tab.is-active {
        background: rgba(28,33,40,.86);
        color: rgba(245,247,250,.94);
    }

/* FCC alert (subtle, no bright yellow) */
.tc-fcc.alert-warning {
    background: rgba(120, 90, 20, .14);
    border: 1px solid rgba(255, 200, 90, .18);
    color: rgba(240,246,255,.90);
}

.tc-card-header span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tc-statrow span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}


/* =========================================================
   Dark dashboard theme (no bright whites)
   Page background: soft gray gradient
   Widgets: darker, modern headers
========================================================= */
body.tc-app {
    background: linear-gradient(180deg, #4b4f56 0%, #3a3e45 100%);
    color: rgba(240,244,252,.92);
}

.tc-dashboard {
    color: rgba(240,244,252,.90);
}

.tc-card {
    display: flex;
    flex-direction: column;
    background: linear-gradient(180deg, #2a2e34 0%, #22262c 10%);
    border: 1px solid rgba(255,255,255,.08);
    box-shadow: 0 14px 34px rgba(0,0,0,.36);
}

.tc-card-header {
    background: linear-gradient(180deg, rgba(20,22,26,.94) 0%, rgba(16,18,22,.94) 10%);
    border-bottom: 1px solid rgba(255,255,255,.08);
    color: rgba(246,248,252,.92);
    font-weight: 700;
}

.tc-muted {
    color: rgba(240,244,252,.62) !important;
}

.tc-dashboard .table {
    --bs-table-bg: transparent;
    --bs-table-striped-bg: rgba(255,255,255,.04);
    color: rgba(240,244,252,.90);
}

    .tc-dashboard .table td, .tc-dashboard .table th {
        border-color: rgba(255,255,255,.08);
        color: rgba(240,244,252,.88);
    }

/* Fill-height scroll area (for equal-height widgets) */
.tc-scroll-fill {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
}

/* Big stat + list rows */
.tc-bigstat {
    background: linear-gradient(135deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
    border: 1px solid rgba(255,255,255,.10);
}

.tc-bigstat__label {
    color: rgba(240,244,252,.70);
}

.tc-statrow {
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.08);
    color: rgba(240,244,252,.90);
}

    .tc-statrow b {
        color: rgba(246,248,252,.94);
    }

/* Tabs */
.tc-tab {
    border: 1px solid rgba(255,255,255,.16);
    background: rgba(255,255,255,.05);
    color: rgba(240,244,252,.86);
}

    .tc-tab:hover {
        background: rgba(255,255,255,.07);
    }

    .tc-tab.is-active {
        background: rgba(0,0,0,.45);
        border-color: rgba(0,0,0,.45);
        color: rgba(255,255,255,.92);
    }

/* Buttons */
.tc-btn {
    border: 1px solid rgba(255,255,255,.14);
    background: rgba(0,0,0,.35);
    color: rgba(255,255,255,.92);
}

    .tc-btn:hover {
        background: rgba(0,0,0,.45);
        color: rgba(255,255,255,.96);
    }

.tc-btn-outline {
    background: transparent;
    border: 1px solid rgba(255,255,255,.18);
    color: rgba(240,244,252,.88);
}

    .tc-btn-outline:hover {
        background: rgba(255,255,255,.07);
        color: rgba(255,255,255,.94);
    }

/* Alerts */
.tc-alert-warn.alert-warning {
    background: rgba(220,160,40,.10);
    border: 1px solid rgba(220,160,40,.22);
    color: rgba(240,244,252,.88);
}

.tc-fcc.alert-warning {
    background: rgba(220,160,40,.10);
    border: 1px solid rgba(220,160,40,.22);
    color: rgba(240,244,252,.88);
}

/* ---------- Latest list (Recent Changes) ---------- */
.tc-latest-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.tc-latest-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 10px;
    border-radius: 14px;
    background: rgba(255,255,255,.03);
    border: 1px solid rgba(255,255,255,.06);
    text-decoration: none !important;
    color: rgba(240,244,252,.92);
}

    .tc-latest-row:hover {
        background: rgba(255,255,255,.06);
        border-color: rgba(255,255,255,.10);
        color: rgba(255,255,255,.96);
    }

    .tc-latest-row[data-tc-inert="true"] {
        cursor: default;
        opacity: .78;
    }

.tc-latest-iconwrap {
    width: 36px;
    height: 36px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.10);
    flex: 0 0 auto;
}

    .tc-latest-iconwrap img {
        width: 20px;
        height: 20px;
        object-fit: contain;
        filter: drop-shadow(0 2px 4px rgba(0,0,0,.55));
    }

.tc-latest-main {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0; /* required for ellipsis inside flex */
    flex: 1 1 auto;
}

.tc-latest-title {
    font-weight: 800;
    letter-spacing: -.01em;
}

.tc-latest-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    font-size: .82rem;
    color: rgba(240,244,252,.64);
}

.tc-latest-right {
    flex: 0 0 auto;
    margin-left: 8px;
}

.tc-dot {
    opacity: .65;
}

/* Status badges */
.tc-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    padding: .22rem .58rem;
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .01em;
    border: 1px solid rgba(255,255,255,.10);
    background: rgba(255,255,255,.04);
    color: rgba(240,244,252,.88);
    white-space: nowrap;
}

.tc-badge-complete {
    background: rgba(30,150,90,.16);
    border-color: rgba(30,150,90,.28);
}

.tc-badge-processing {
    background: rgba(60,140,220,.14);
    border-color: rgba(60,140,220,.28);
}

.tc-badge-queued,
.tc-badge-warning {
    background: rgba(220,160,40,.12);
    border-color: rgba(220,160,40,.26);
}

.tc-badge-danger {
    background: rgba(220,70,70,.14);
    border-color: rgba(220,70,70,.26);
}

/* =====================================================================
   v8 Home dashboard + dark-widget theme
   Goals:
   - Page background: stylish light gray gradient
   - Widgets/cards: darker surfaces with light text
   - No bright whites
   - On desktop: everything fits in view; widgets scroll internally
   ===================================================================== */

:root {
    --tc-page-bg-1: #d5d9e1;
    --tc-page-bg-2: #c6cbd6;
    --tc-card-bg-1: #1b2432;
    --tc-card-bg-2: #111a26;
    --tc-card-head: rgba(0,0,0,.22);
    --tc-fg: rgba(240,244,252,.92);
    --tc-muted2: rgba(240,244,252,.65);
    --tc-border2: rgba(255,255,255,.08);
    --tc-border3: rgba(255,255,255,.12);
}


/* Cards/widgets: dark */
.tc-card {
    background: linear-gradient(180deg, var(--tc-card-bg-1) 0%, var(--tc-card-bg-2) 10%) !important;
    border: 1px solid var(--tc-border2) !important;
    box-shadow: 0 10px 26px rgba(0,0,0,.22) !important;
    color: var(--tc-fg) !important;
}

.tc-card-header {
    background: linear-gradient(180deg, rgba(0,0,0,.18), rgba(0,0,0,.28)) !important;
    border-bottom: 1px solid var(--tc-border2) !important;
    color: var(--tc-fg) !important;
}

.tc-muted {
    color: var(--tc-muted2) !important;
}

/* Ensure bootstrap defaults don't turn text black inside widgets */
.tc-card .card-body,
.tc-card .card-text,
.tc-card .table,
.tc-card .table td,
.tc-card .table th,
.tc-card label,
.tc-card p,
.tc-card small,
.tc-card span,
.tc-card div {
    color: inherit;
}

.tc-card a {
    color: rgba(170,210,255,.92);
}

    .tc-card a:hover {
        color: rgba(200,228,255,.98);
    }

.tc-card .table {
    --bs-table-bg: transparent;
    --bs-table-striped-bg: rgba(255,255,255,.03);
    --bs-table-hover-bg: rgba(255,255,255,.05);
    --bs-table-border-color: rgba(255,255,255,.08);
}

/* Buttons: dark, high-contrast, no white fills */
.tc-btn {
    border: 1px solid rgba(255,255,255,.14) !important;
    background: rgba(0,0,0,.30) !important;
    color: var(--tc-fg) !important;
    box-shadow: 0 8px 18px rgba(0,0,0,.24) !important;
}

    .tc-btn:hover {
        background: rgba(0,0,0,.38) !important;
    }

.tc-btn-outline {
    background: rgba(255,255,255,.06) !important;
    border: 1px solid rgba(255,255,255,.14) !important;
}

.tc-btn-link {
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
    color: rgba(170,210,255,.92) !important;
}

.tc-btn-danger {
    background: rgba(170,60,60,.22) !important;
    border-color: rgba(170,60,60,.35) !important;
}

.tc-btn-primary {
    background: rgba(36,140,208,.24) !important;
    border-color: rgba(36,140,208,.35) !important;
}

/* Tabs (Insights) */
.tc-tab {
    border: 1px solid rgba(255,255,255,.12) !important;
    background: rgba(0,0,0,.20) !important;
    color: var(--tc-fg) !important;
}

    .tc-tab.is-active {
        background: rgba(36,140,208,.22) !important;
        border-color: rgba(36,140,208,.30) !important;
    }

/* ---------- Home dashboard grid ---------- */

#tcHomeStats {
    height: 100%;
}

    #tcHomeStats .tc-home-surface {
        height: 100%;
        padding: 12px;
        min-height: 0;
    }

    #tcHomeStats .tc-homegrid {
        height: 100%;
        min-height: 0;
        display: grid;
        gap: 12px;
        grid-template-columns: 1fr;
        overflow-y: auto;
    }

    #tcHomeStats .tc-card--widget {
        display: flex;
        flex-direction: column;
        min-height: 400px !important; /*500px*/
    }

    #tcHomeStats .tc-card-body {
        min-height: 0;
    }

    #tcHomeStats .tc-scroll-fill {
        flex: 1 1 auto;
        min-height: 0;
        overflow: auto;
    }

/* Desktop: 3 columns, 2 rows. Recent Changes spans both rows.
   Also, the whole dashboard stays within the usable viewport; widgets scroll internally. */
@media (min-width: 1200px) {
    #tcHomeStats .tc-home-surface {
        height: 100%;
        overflow: hidden;
    }

    #tcHomeStats .tc-homegrid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        grid-template-rows: repeat(2, minmax(0, 1fr));
        grid-template-areas:
            "news overall changes"
            "insights notupdated changes";
    }

    #tcHomeStats .tc-homegrid__news {
        grid-area: news;
    }

    #tcHomeStats .tc-homegrid__insights {
        grid-area: insights;
    }

    #tcHomeStats .tc-homegrid__changes {
        grid-area: changes;
    }

    #tcHomeStats .tc-homegrid__overall {
        grid-area: overall;
    }

    #tcHomeStats .tc-homegrid__notupdated {
        grid-area: notupdated;
    }
}

/* Chart box should fill the widget body, but keep a sane minimum */
#tcHomeStats .tc-chartbox {
    height: 100%;
    min-height: 180px;
}

/* Latest list row background tuned for dark cards */
#tcHomeStats .tc-latest-row {
    background: rgba(0,0,0,.22);
    border-color: rgba(255,255,255,.08);
}

    #tcHomeStats .tc-latest-row:hover {
        background: rgba(0,0,0,.28);
    }

/* Ensure long text truncates nicely across widgets */
#tcHomeStats .tc-card-header span,
#tcHomeStats .tc-statrow span,
#tcHomeStats .tc-latest-title,
#tcHomeStats .tc-latest-meta {
    min-width: 0;
}

/* Home stat tiles (avoid any legacy black text) */
#tcHomeStats .tc-bigstat {
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.10);
}

#tcHomeStats .tc-bigstat__label {
    color: var(--tc-muted2) !important;
}

#tcHomeStats .tc-statrow {
    background: rgba(0,0,0,.20);
    border: 1px solid rgba(255,255,255,.08);
}

    #tcHomeStats .tc-statrow b {
        color: var(--tc-fg);
    }

#tcHomeStats .tc-icell {
    opacity: .9;
}

#tcHomeStats {
    padding: 0 !important;
}


/* =========================================================
   Account panel: make it work even if shared.css is disabled
   (no dependency on body.tc-app)
========================================================= */

.accountBin {
    position: fixed !important;
    top: calc(var(--tc-topbar-h, 62px) - 2px) !important;
    right: 12px !important;
    left: auto !important;
    width: min(440px, calc(100vw - 24px)) !important;
    max-height: calc(100vh - var(--tc-topbar-h, 62px) - 12px) !important;
    overflow: auto !important;
    background: rgba(15,23,32,.98) !important;
    color: rgba(255,255,255,.94) !important;
    border: 1px solid rgba(255,255,255,.10) !important;
    border-radius: 18px !important;
    box-shadow: 0 22px 60px rgba(0,0,0,.48) !important;
    transform: translateY(-14px);
    opacity: 0;
    pointer-events: none;
    transition: transform .18s ease, opacity .18s ease;
    z-index: 6505 !important;
}

    .accountBin.activeBin {
        transform: translateY(0);
        opacity: 1;
        pointer-events: auto;
    }

@media (max-width: 575px) {
    .accountBin {
        right: 0 !important;
        left: 0 !important;
        width: 100vw !important;
        border-radius: 0 0 18px 18px !important;
    }
}

.accountBin .tpTitle {
    position: sticky;
    top: 0;
    padding: 14px 14px 10px;
    background: rgba(15,23,32,.96);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid rgba(255,255,255,.10);
}

    .accountBin .tpTitle h1 {
        margin: 0;
        font-size: 1rem;
        line-height: 1.25;
        color: #fff;
    }

    .accountBin .tpTitle h2 {
        margin: 6px 0 0;
        font-size: .86rem;
        color: rgba(255,255,255,.82);
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        align-items: center;
    }

.accountBin a {
    color: rgba(255,255,255,.92) !important;
}

/* Make the legacy tiles readable and tappable */
.accountBin .accTile {
    margin: 10px 12px;
    border-radius: 14px;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.10);
}

    .accountBin .accTile:hover {
        background: rgba(255,255,255,.10);
    }

    .accountBin .accTile > div {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 10px 12px;
    }

    .accountBin .accTile img {
        width: 28px;
        height: 28px;
        object-fit: contain;
    }

    .accountBin .accTile span {
        font-size: .92rem;
    }

/* =========================================================
   Inline SVG icons for stats tables
========================================================= */

.tc-icell {
    width: 38px;
}

.tc-ico {
    display: inline-flex;
    width: 28px;
    height: 28px;
    border-radius: 10px;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,.22);
    border: 1px solid rgba(255,255,255,.12);
    color: rgba(255,255,255,.90);
}

    .tc-ico svg {
        width: 18px;
        height: 18px;
    }


/* ============================
   Account panel + language picker (no shared.css)
   ============================ */

/* Hide legacy rail/sidebar account and signout items (we only use header actions) */
#tcRail .accountOpen,
#accountButton,
#signOut {
    display: none !important;
}

/* Blur effect when account panel open */
section.contentbody.blurCity {
    filter: blur(2px);
}

/* Account panel: fixed dropdown under top-right Account button */
.accountBin {
    position: fixed !important;
    top: calc(var(--tc-topbar-h, 64px) + 10px) !important;
    right: 12px !important;
    left: auto !important;
    width: min(720px, calc(100vw - 24px)) !important;
    max-height: calc(100vh - var(--tc-topbar-h, 64px) - 24px) !important;
    padding: 14px !important;
    border-radius: 16px !important;
    border: 1px solid rgba(255,255,255,.10) !important;
    background: linear-gradient(180deg, rgba(15,20,28,.96), rgba(10,13,18,.96)) !important;
    box-shadow: 0 24px 70px rgba(0,0,0,.65) !important;
    z-index: 7000 !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    opacity: 0;
    transform: translateY(-10px);
    pointer-events: none;
    transition: opacity .18s ease, transform .18s ease;
}

    .accountBin.activeBin {
        opacity: 1;
        transform: translateY(0);
        pointer-events: auto;
    }

@media (max-width: 640px) {
    .accountBin {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        right: 8px !important;
        width: calc(100vw - 16px) !important;
    }
}

/* Header + footer rows span full width */
.accountBin .tpTitle,
.accountBin .btmTitle {
    grid-column: 1 / -1;
}

.accountBin .tpTitle {
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(255,255,255,.08);
    margin-bottom: 4px;
}

    .accountBin .tpTitle #title h1,
    .accountBin .tpTitle h1 {
        margin: 0 !important;
        font-size: 1rem !important;
        font-weight: 600 !important;
        color: rgba(255,255,255,.92) !important;
        letter-spacing: .2px;
    }

    .accountBin .tpTitle h2 {
        margin: 6px 0 0 0 !important;
        display: flex;
        align-items: center;
        gap: 10px;
        color: rgba(255,255,255,.72) !important;
        font-size: .9rem !important;
    }

        .accountBin .tpTitle h2 a {
            color: rgba(170,210,255,.95) !important;
            text-decoration: none;
        }

            .accountBin .tpTitle h2 a:hover {
                text-decoration: none;
            }

/* Global link style: no underlines unless explicitly opted-in */
a,
a:hover,
a:focus,
a:active {
    text-decoration: none !important;
}

.tc-allow-underline,
.tc-allow-underline:hover,
.tc-allow-underline:focus,
.tc-allow-underline:active {
    text-decoration: underline !important;
}

/* Language flag toggle button */
.tc-lang-toggle {
    margin-left: auto;
    padding: 4px;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,.10);
    background: rgba(255,255,255,.06);
}

    .tc-lang-toggle:hover {
        background: rgba(255,255,255,.10);
    }

    .tc-lang-toggle img {
        display: block;
        width: 28px;
        height: auto;
    }

/* Language list dropdown (hidden by default) */
#langBin.tc-langbin {
    display: none;
    opacity: 0;
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 260px;
    max-height: 240px;
    overflow: auto;
    padding: 10px;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,.10);
    background: var(--tc-langbin-bg, linear-gradient(180deg, rgba(20,24,34,.98), rgba(12,14,18,.98)));
    box-shadow: 0 20px 60px rgba(0,0,0,.6);
    z-index: 2147483646 !important;
    isolation: isolate;
}

    #langBin.tc-langbin.activeLangBin {
        display: block;
        opacity: 1 !important;
    }

    #langBin.tc-langbin ul {
        list-style: none;
        margin: 0;
        padding: 0;
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 8px;
        background: transparent;
    }

    #langBin.tc-langbin li a {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 8px;
        border-radius: 12px;
        border: 1px solid rgba(255,255,255,.16);
        background: rgba(12, 20, 34, .98);
    }

        #langBin.tc-langbin li a:hover {
            background: rgba(24, 36, 58, .98);
        }

        #langBin.tc-langbin li a span {
            display: none;
        }

        #langBin.tc-langbin li a img {
            width: 26px;
            height: auto;
        }

html.tc-theme-light #langBin.tc-langbin {
    border-color: rgba(15, 23, 42, .18);
    background: var(--tc-langbin-bg, linear-gradient(180deg, rgba(255,255,255,.98), rgba(243,246,252,.98)));
}

    html.tc-theme-light #langBin.tc-langbin li a {
        border-color: rgba(15, 23, 42, .16);
        background: rgba(255,255,255,.98);
    }

        html.tc-theme-light #langBin.tc-langbin li a:hover {
            background: rgba(242,246,252,.98);
        }

/* Tiles */
.accountBin a {
    text-decoration: none !important;
}

.accountBin .accTile {
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,.08);
    background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
    min-height: 108px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 10px;
    cursor: pointer;
    transition: transform .12s ease, background .12s ease, border-color .12s ease;
}

    .accountBin .accTile:hover {
        transform: translateY(-1px);
        background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.05));
        border-color: rgba(170,210,255,.25);
    }

    .accountBin .accTile > div {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 10px;
    }

    .accountBin .accTile img {
        width: 52px;
        height: 52px;
        object-fit: contain;
        filter: drop-shadow(0 6px 14px rgba(0,0,0,.45));
    }

    .accountBin .accTile span {
        color: rgba(255,255,255,.92);
        font-size: .95rem;
        line-height: 1.1;
    }

    .accountBin .accTile .tc-accTile-label {
        font-family: inherit;
        font-size: .95rem !important;
        font-weight: 600;
        line-height: 1.2;
        letter-spacing: .01em;
    }

    .accountBin .accTile .tc-accTile-icon {
        font-size: 2.05rem;
        line-height: 1;
        color: rgba(210, 233, 255, .95);
        filter: drop-shadow(0 4px 10px rgba(0,0,0,.35));
    }

/* Footer */
.accountBin .btmTitle {
    margin-top: 6px;
    padding-top: 10px;
    border-top: 1px solid rgba(255,255,255,.08);
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    justify-content: space-between;
    color: rgba(255,255,255,.6);
}

    .accountBin .btmTitle .socialBtm {
        filter: drop-shadow(0 6px 10px rgba(0,0,0,.35));
    }


.accountBin .tpTitle h2 {
    position: relative;
}



/* =========================================================
   Blueprint Glass Theme (inspired by login screenshot)
   Applied when body has class: tc-theme-blueprint
   - No bright whites
   - Deep blue gradients + subtle grid
   - Glassy panels, crisp borders, readable text
========================================================= */

body.tc-theme-blueprint {
    color: rgba(240,246,255,.94);
    /* Slightly lighter blueprint-glass background */
    background: radial-gradient(1000px 620px at 18% 18%, rgba(70,190,255,.22), transparent 62%), radial-gradient(860px 560px at 72% 10%, rgba(120,235,255,.16), transparent 58%), radial-gradient(980px 720px at 55% 80%, rgba(35,140,210,.14), transparent 62%), linear-gradient(135deg, #0b2c4e 0%, #06213e 44%, #0a3a66 100%);
}

    body.tc-theme-blueprint::before {
        content: "";
        position: fixed;
        inset: 0;
        pointer-events: none;
        /* Blueprint grid + subtle diagonals */
        background-image: linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px), linear-gradient(135deg, rgba(255,255,255,.035) 1px, transparent 1px), radial-gradient(circle at 30% 20%, rgba(70,190,255,.12), transparent 46%), radial-gradient(circle at 70% 10%, rgba(120,235,255,.10), transparent 42%);
        background-size: 56px 56px, 56px 56px, 112px 112px, 100% 100%, 100% 100%;
        opacity: .72;
        mix-blend-mode: overlay;
    }

    body.tc-theme-blueprint::after {
        content: "";
        position: fixed;
        inset: 0;
        pointer-events: none;
        /* Softer vignette than v13 */
        background: radial-gradient(1200px 760px at 50% 8%, transparent 0%, rgba(0,0,0,.22) 70%, rgba(0,0,0,.40) 100%);
        opacity: .50;
    }

    /* Topbar */
    body.tc-theme-blueprint .tc-topbar {
        background: linear-gradient(90deg, rgba(34,138,205,.88) 0%, rgba(10,58,94,.92) 55%, rgba(6,28,52,.94) 100%);
        border-bottom: 1px solid rgba(255,255,255,.10);
        box-shadow: 0 14px 28px rgba(0,0,0,.35);
        backdrop-filter: blur(10px);
    }

    /* Surfaces + widgets */
    body.tc-theme-blueprint .tc-surface {
        border: 1px solid rgba(255,255,255,.10);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        box-shadow: 0 18px 44px rgba(0,0,0,.35);
    }

    body.tc-theme-blueprint .tc-card {
        background: linear-gradient(180deg, rgba(20,52,82,.72) 0%, rgba(10,28,48,.70) 100%);
        border: 1px solid rgba(255,255,255,.10);
        backdrop-filter: blur(14px);
        -webkit-backdrop-filter: blur(14px);
        box-shadow: 0 18px 44px rgba(0,0,0,.45);
    }

    body.tc-theme-blueprint .tc-card-header {
        background: linear-gradient(180deg, rgba(14,34,56,.92) 0%, rgba(10,26,44,.92) 100%);
        border-bottom: 1px solid rgba(255,255,255,.10);
        color: rgba(240,246,255,.92);
    }

    body.tc-theme-blueprint .tc-muted {
        color: rgba(200,215,242,.70) !important;
    }

    body.tc-theme-blueprint a {
        color: rgba(150,220,255,.92);
    }

        body.tc-theme-blueprint a:hover {
            color: rgba(190,240,255,.95);
        }

    /* Buttons + tabs */
    body.tc-theme-blueprint .tc-btn,
    body.tc-theme-blueprint .btn.tc-btn {
        border: 1px solid rgba(255,255,255,.18);
        background: linear-gradient(180deg, rgba(45,144,210,.92) 0%, rgba(18,80,130,.92) 100%);
        color: rgba(245,250,255,.94);
        box-shadow: 0 10px 22px rgba(0,0,0,.35);
    }

        body.tc-theme-blueprint .tc-btn:hover {
            background: linear-gradient(180deg, rgba(30,94,138,.95) 0%, rgba(18,56,92,.95) 100%);
        }

    body.tc-theme-blueprint .tc-tab {
        border: 1px solid rgba(255,255,255,.18);
        background: rgba(255,255,255,.08);
        color: rgba(240,248,255,.92);
    }

        body.tc-theme-blueprint .tc-tab.is-active {
            background: linear-gradient(180deg, rgba(65,175,255,.90) 0%, rgba(35,135,225,.90) 100%);
            border-color: rgba(255,255,255,.26);
            color: rgba(6,12,18,.92);
        }

    /* Inputs (keep legacy pages readable without bright white) */
    body.tc-theme-blueprint input[type="text"],
    body.tc-theme-blueprint input[type="password"],
    body.tc-theme-blueprint input[type="email"],
    body.tc-theme-blueprint select,
    body.tc-theme-blueprint textarea,
    body.tc-theme-blueprint .form-control {
        background: rgba(6,22,40,.30) !important;
        border: 1px solid rgba(255,255,255,.16) !important;
        color: rgba(240,246,255,.92) !important;
    }

        body.tc-theme-blueprint .form-control::placeholder,
        body.tc-theme-blueprint input::placeholder {
            color: rgba(200,215,242,.55) !important;
        }

    /* Account dropdown: FORCE top-right under Account button (no sidebar-left positioning) */
    body.tc-theme-blueprint .accountBin,
    body.tc-theme-blueprint body .accountBin,
    body.tc-theme-blueprint body.tc-app .accountBin {
        position: fixed !important;
        top: calc(var(--tc-topbar-h, 62px) + 8px) !important;
        right: 12px !important;
        left: auto !important;
        bottom: auto !important;
        transform-origin: top right;
    }

        body.tc-theme-blueprint .accountBin.activeBin {
            right: 12px !important;
            left: auto !important;
        }

    body.tc-theme-blueprint .accountBin {
        opacity: 0;
        transform: translateY(-10px);
        pointer-events: none;
        visibility: hidden;
        transition: transform .18s ease, opacity .18s ease, visibility 0s linear .18s;
    }

        body.tc-theme-blueprint .accountBin.activeBin {
            opacity: 1;
            transform: translateY(0);
            pointer-events: auto;
            visibility: visible;
            transition: transform .18s ease, opacity .18s ease, visibility 0s;
        }

    /* Language bin: hidden by default; show only when toggled */
    body.tc-theme-blueprint #langBin {
        display: none;
        position: absolute;
        right: 12px;
        top: 48px;
        z-index: 2147483646 !important;
        background: var(--tc-langbin-bg, linear-gradient(180deg, rgba(10,23,38,.96) 0%, rgba(8,18,31,.96) 100%));
        border: 1px solid rgba(255,255,255,.12);
        border-radius: 12px;
        padding: 10px;
        box-shadow: 0 18px 44px rgba(0,0,0,.55);
    }

        body.tc-theme-blueprint #langBin.activeLangBin {
            display: block;
        }

    /* Make sure account tiles/icons remain visible (they're often light PNGs) */
    body.tc-theme-blueprint .accountBin img {
        filter: drop-shadow(0 2px 8px rgba(0,0,0,.55));
    }




/* Force account panel to top-right even if older rules exist earlier in the file */
body.tc-app .accountBin.activeBin,
body.tc-app.tc-nav-collapsed .accountBin.activeBin,
body.tc-app.tc-nav-open .accountBin.activeBin,
body .accountBin.activeBin {
    left: auto !important;
    right: 12px !important;
}



/* =========================================================
   Glass surfaces + mobile “one widget per screen”
   - Keeps your body SVG visible through the UI
   - Header + sidebar are NOT changed here
========================================================= */

/* Ensure blueprint pseudo overlays never cover the SVG background */
body.tc-theme-blueprint::before,
body.tc-theme-blueprint::after {
    display: none !important;
    content: none !important;
}

/* Popups / panels */
.accountBin,
.modal-content,
.ui-dialog,
.ui-dialog .ui-dialog-content {
    background: var(--tc-glass-bg-strong) !important;
    border: 1px solid var(--tc-glass-border) !important;
    box-shadow: var(--tc-glass-shadow) !important;
    backdrop-filter: blur(var(--tc-glass-blur)) saturate(125%);
    -webkit-backdrop-filter: blur(var(--tc-glass-blur)) saturate(125%);
    color: rgba(240,246,255,.94);
}

/* Keep language flyout readable over dense account tiles */
#langBin.tc-langbin {
    background: #0b1422 !important;
    background-image: none !important;
    border: 1px solid rgba(255,255,255,.14) !important;
    box-shadow: 0 22px 60px rgba(0,0,0,.65) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    mix-blend-mode: normal !important;
    opacity: 1 !important;
}

html.tc-theme-light #langBin.tc-langbin {
    background: #f7f9fd !important;
    background-image: none !important;
    border: 1px solid rgba(15, 23, 42, .16) !important;
}

#langBin.tc-langbin::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: inherit;
    z-index: 0;
}

#langBin.tc-langbin > ul {
    position: relative;
    z-index: 1;
}

#langBin.tc-langbin li a {
    background: #112136 !important;
    background-image: none !important;
}

html.tc-theme-light #langBin.tc-langbin li a {
    background: #ffffff !important;
    background-image: none !important;
}

#langBin.tc-langbin::-webkit-scrollbar-track {
    background: #0b1422;
}

html.tc-theme-light #langBin.tc-langbin::-webkit-scrollbar-track {
    background: #f7f9fd;
}

/* Full-panel language mode: language picker takes over account menu area. */
.accountBin.tc-lang-open {
    overflow: hidden !important;
}

    .accountBin.tc-lang-open > #langBin.tc-langbin {
        display: block !important;
        opacity: 1 !important;
        position: absolute !important;
        inset: auto 8px auto 8px !important;
        width: auto !important;
        max-height: none !important;
        height: auto !important;
        border-radius: 14px !important;
        border: 1px solid rgba(255,255,255,.14) !important;
        margin: 0 !important;
        padding: 12px !important;
        z-index: 2147483646 !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
    }

        .accountBin.tc-lang-open > #langBin.tc-langbin > ul {
            grid-template-columns: repeat(4, minmax(0, 1fr));
            gap: 10px;
        }

        .accountBin.tc-lang-open > #langBin.tc-langbin li a {
            min-height: 50px;
            border-radius: 10px;
            padding: 8px 6px;
        }

            .accountBin.tc-lang-open > #langBin.tc-langbin li a img {
                width: 34px;
                height: 22px;
                object-fit: cover;
                border-radius: 2px;
                display: block;
            }

html.tc-theme-light .accountBin.tc-lang-open > #langBin.tc-langbin {
    border: 1px solid rgba(15, 23, 42, .16) !important;
}

@media (max-width: 900px) {
    .accountBin.tc-lang-open > #langBin.tc-langbin > ul {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .accountBin.tc-lang-open > #langBin.tc-langbin li a img {
        width: 32px;
        height: 20px;
    }
}

@media (max-width: 560px) {
    .accountBin.tc-lang-open > #langBin.tc-langbin > ul {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    .accountBin.tc-lang-open > #langBin.tc-langbin li a {
        min-height: 46px;
    }
}

/* Keep account panel content visible while language flyout is open. */

/* Bootstrap modal header/footer transparency */
.modal-header,
.modal-footer {
    background: rgba(0,0,0,.10);
    border-color: rgba(255,255,255,.10);
}

/* Links inside glass panels */
.tc-card a,
.accountBin a,
.modal-content a {
    color: rgba(160,220,255,.96);
}

    .tc-card a:hover,
    .accountBin a:hover,
    .modal-content a:hover {
        color: rgba(200,240,255,.98);
    }

/* Mobile dashboard behavior: one widget per screen */
@media (max-width: 991px) {

    /* allow page scrolling between widgets and full page scroll on tablet/phone */
    .tc-main {
        overflow: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* allow section to scroll so user can see all content below the fold */
    body.tc-app section.contentbody {
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch;
        min-height: 0;
    }

    /* hide the center ad banner on small screens */
    #LTIlink {
        display: none !important;
    }

    /* tighten header buttons a bit */
    .tc-topbar__actions {
        gap: .45rem;
    }

        .tc-topbar__actions .tc-btn,
        .tc-topbar__actions .tc-btn-sm {
            padding: .38rem .55rem;
            border-radius: 12px;
            font-size: .84rem;
        }

    /* Make home grid scrollable so all 5 widgets can be seen on phone */
    #tcHomeStats .tc-home-surface {
        min-height: 0;
        overflow: visible;
    }

    #tcHomeStats .tc-homegrid {
        display: block;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        min-height: 0;
        max-height: calc(100dvh - var(--tc-chrome-h, 96px) - 14px);
    }

        /* Each widget: min 500px so content visible; cards stack and grid scrolls */
        #tcHomeStats .tc-card--widget,
        #tcHomeStats .tc-homegrid .tc-card {
            min-height: 500px;
            height: auto;
            max-height: none;
            margin-bottom: 12px;
        }

    #tcHomeStats .tc-card--widget {
        display: flex;
        flex-direction: column;
        min-height: 0;
    }

    #tcHomeStats .tc-card-body,
    #tcHomeStats .tc-scroll-fill {
        flex: 1 1 auto;
        min-height: 0;
        overflow: auto;
    }

    /* Sidebar: off-canvas drawer must not be hidden by “collapsed” mode */
    body.tc-nav-collapsed #sideNavi.tc-sidebar {
        display: block;
    }

    body.tc-nav-open #sideNavi.tc-sidebar {
        display: block;
        z-index: 6100;
    }

    /* When mobile nav is open, the drawer should be full width, not the skinny collapsed rail */
    body.tc-nav-open #sideNavi.tc-sidebar {
        width: 86vw;
        max-width: 340px;
    }
}

/* Extra safety: never let widget surfaces become bright/opaque */
.tc-surface,
.tc-card,
.tc-card-header {
    background-color: transparent;
}


/* =========================================================
   tc-Lists modal (Coverages first)
   - Bootstrap markup is NOT required; this is self-contained.
   ========================================================= */

.tc-modalbackdrop {
    position: fixed;
    inset: 0;
    background: rgba(6, 10, 18, 0.55);
    z-index: 6990;
}

body.tc-lists-open {
    overflow: hidden;
}

#tcListsModal.tc-listsmodal {
    position: fixed;
    inset: 0;
    z-index: 7000;
    padding: 14px;
    overflow: auto;
}

#tcListsModal .tc-listsmodal__dialog {
    width: min(1400px, 98vw);
    margin: calc(var(--tc-topbar-h, 62px) + 12px) auto 24px auto;
}

#tcListsModal .tc-listsmodal__content {
    background: var(--tc-glass-bg-strong, rgba(14,18,28,.50));
    border: 1px solid var(--tc-glass-border, rgba(255,255,255,.10));
    box-shadow: var(--tc-glass-shadow, 0 18px 40px rgba(0,0,0,.35));
    border-radius: 18px;
    backdrop-filter: blur(var(--tc-glass-blur, 10px)) saturate(125%);
    -webkit-backdrop-filter: blur(var(--tc-glass-blur, 10px)) saturate(125%);
    color: var(--tc-fg, rgba(240,244,252,.92));
}

#tcListsModal .tc-listsmodal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 12px 10px 14px;
    border-bottom: 1px solid var(--tc-border2, rgba(255,255,255,.10));
    background: rgba(0,0,0,.10);
    border-top-left-radius: 18px;
    border-top-right-radius: 18px;
}

#tcListsModal .tc-listsmodal__title {
    font-weight: 800;
    letter-spacing: .2px;
    font-size: 1.05rem;
    min-width: 0;
}

#tcListsModal .tc-listsmodal__body {
    padding: 0;
    max-height: calc(100vh - var(--tc-topbar-h, 62px) - 110px);
    overflow: auto;
}

/* Loading */
#tcListsModal .tc-listloading {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px;
    color: var(--tc-fg, rgba(240,244,252,.92));
}

#tcListsModal .tc-spinner {
    width: 16px;
    height: 16px;
    border-radius: 999px;
    border: 2px solid rgba(255,255,255,.22);
    border-top-color: rgba(160,220,255,.92);
    animation: tcspin .85s linear infinite;
}

@keyframes tcspin {
    to {
        transform: rotate(360deg);
    }
}

/* Coverages list inside modal */
#tcListsModal .tc-cov-search .input-group-text,
#tcListsModal .tc-cov-search__addon {
    background: rgba(0,0,0,.16);
    border: 1px solid var(--tc-border2, rgba(255,255,255,.10));
    color: var(--tc-fg, rgba(240,244,252,.92));
}

#tcListsModal .tc-cov-search__input {
    background: rgba(0,0,0,.16);
    border: 1px solid var(--tc-border2, rgba(255,255,255,.10));
    color: var(--tc-fg, rgba(240,244,252,.92));
}

    #tcListsModal .tc-cov-search__input::placeholder {
        color: rgba(240,244,252,.55);
    }

#tcListsModal .table {
    color: var(--tc-fg, rgba(240,244,252,.92));
}

    #tcListsModal .table thead th {
        color: rgba(240,244,252,.75);
        border-color: var(--tc-border2, rgba(255,255,255,.10));
        background: rgba(0,0,0,.10);
    }

    #tcListsModal .table td {
        border-color: var(--tc-border2, rgba(255,255,255,.08));
    }

#tcListsModal .table-hover tbody tr:hover {
    background: rgba(255,255,255,.06);
}

#tcListsModal a {
    color: rgba(160,220,255,.96);
}

    #tcListsModal a:hover {
        color: rgba(200,240,255,.98);
    }

/* Pagination: keep dark */
#tcListsModal .page-link,
#tcListsModal .pagination .page-link {
    background: rgba(0,0,0,.18);
    border-color: var(--tc-border2, rgba(255,255,255,.10));
    color: rgba(240,244,252,.86);
}

#tcListsModal .page-item.active .page-link {
    background: rgba(36,127,181,.75);
    border-color: rgba(36,127,181,.85);
    color: rgba(255,255,255,.96);
}

#tcListsModal .page-item.disabled .page-link {
    opacity: .45;
}

/* Badges for status */
.tc-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: .18rem .5rem;
    border-radius: 999px;
    font-weight: 700;
    font-size: .78rem;
    border: 1px solid rgba(255,255,255,.10);
    background: rgba(0,0,0,.14);
}

.tc-badge-ok {
    background: rgba(44, 155, 106, .18);
    border-color: rgba(44, 155, 106, .38);
}

.tc-badge-warn {
    background: rgba(252, 173, 55, .14);
    border-color: rgba(252, 173, 55, .34);
}

#tcListsModal .tc-cov-pagesize {
    background: rgba(0,0,0,.16);
    border: 1px solid var(--tc-border2, rgba(255,255,255,.10));
    color: var(--tc-fg, rgba(240,244,252,.92));
}

/* tc-Lists list padding blocks (keep table flush) */
#tcListsModal .tc-listpad {
    padding: 12px;
}

#tcListsModal .tc-listtable {
    border-top: 1px solid var(--tc-border2, rgba(255,255,255,.10));
}

#tcListsModal .tc-cov-loading {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0 6px;
    border-radius: 999px;
    background: rgba(0,0,0,.10);
    border: 1px solid rgba(255,255,255,.08);
}

#tcListsModal .tc-spinner-sm {
    width: 14px;
    height: 14px;
    border-radius: 999px;
    border: 2px solid rgba(255,255,255,.18);
    border-top-color: rgba(160,220,255,.92);
    animation: tcspin .85s linear infinite;
}

#tcListsModal .tc-listtable .table {
    width: 100%;
}
/* =========================================================
   tc-Lists modal — keep glass theme, kill white tbody/td fill
   ========================================================= */

/* Ensure modal itself stays glass */
#tcListsModal .modal-content,
#tcListsModal .modal-body {
    background: transparent !important;
}

/* Force all table surfaces to be transparent */
#tcListsModal table,
#tcListsModal thead,
#tcListsModal tbody,
#tcListsModal tfoot,
#tcListsModal tr,
#tcListsModal th,
#tcListsModal td,
#tcListsModal .table,
#tcListsModal .table > thead > tr > th,
#tcListsModal .table > tbody > tr > th,
#tcListsModal .table > tbody > tr > td,
#tcListsModal .table > tfoot > tr > th,
#tcListsModal .table > tfoot > tr > td {
    background: transparent !important;
    background-color: transparent !important;
    color: inherit !important;
}

/* Add a subtle “haze” row treatment (instead of white) */
#tcListsModal .table-striped > tbody > tr:nth-of-type(odd) {
    background-color: rgba(255,255,255,.03) !important;
}

#tcListsModal .table-hover > tbody > tr:hover,
#tcListsModal .table > tbody > tr:hover {
    background-color: rgba(170,235,255,.10) !important;
}

/* Borders stay ice-blue (not gray/black) */
#tcListsModal .table > thead > tr > th,
#tcListsModal .table > tbody > tr > td,
#tcListsModal .table > tbody > tr > th {
    border-color: rgba(170,235,255,.18) !important;
}

/* Make links in rows inherit the same light text */
#tcListsModal a,
#tcListsModal a:visited {
    color: inherit !important;
}

/* =========================================================
   v9: Light/Dark theme + tcLists swap view
   - Theme class is applied on <html>: tc-theme-dark | tc-theme-light
   - Lists view replaces the main content area (no backdrop)
========================================================= */

html.tc-theme-dark {
    color-scheme: dark;
}

html.tc-theme-light {
    color-scheme: light;
}

    /* Light theme: list/table pages must use dark foreground on light surfaces.
   (Some legacy CSS sets light text with !important and tables often inherit.) */
    html.tc-theme-light .contentbody,
    html.tc-theme-light section.contentbody {
        color: rgba(22,34,53,.92);
    }

    html.tc-theme-light .tc-muted {
        color: rgba(22,34,53,.62) !important;
    }

    html.tc-theme-light .contentbody .table,
    html.tc-theme-light .contentbody .table th,
    html.tc-theme-light .contentbody .table td,
    html.tc-theme-light #tablecoverage,
    html.tc-theme-light #tablecoverage th,
    html.tc-theme-light #tablecoverage td,
    html.tc-theme-light #tablemulticoverage,
    html.tc-theme-light #tablemulticoverage th,
    html.tc-theme-light #tablemulticoverage td,
    html.tc-theme-light #tableradiosystem,
    html.tc-theme-light #tableradiosystem th,
    html.tc-theme-light #tableradiosystem td {
        color: rgba(22,34,53,.92) !important;
    }

        html.tc-theme-light .contentbody .table a,
        html.tc-theme-light .contentbody .table a:visited,
        html.tc-theme-light #tablecoverage a,
        html.tc-theme-light #tablecoverage a:visited,
        html.tc-theme-light #tablemulticoverage a,
        html.tc-theme-light #tablemulticoverage a:visited,
        html.tc-theme-light #tableradiosystem a,
        html.tc-theme-light #tableradiosystem a:visited {
            color: rgba(19,92,147,.98) !important;
        }

/* Themed background SVG overlay (theme-colored)
   - Always renders in both themes (no CSS masks / no invert filters).
   - Two layers: the SVG + a theme tint gradient.
   - Theme colors are controlled by --tc-bgsvg-tint and --tc-bgsvg-opacity.

   Implemented as body.tc-app::before so it stays behind content without affecting Bootstrap modals. */
body.tc-app {
    position: relative;
}

    body.tc-app::before {
        content: "";
        position: fixed;
        inset: 0;
        pointer-events: none;
        z-index: -1; /* behind everything in the body, but above the page background */

        opacity: var(--tc-bgsvg-opacity);
        /* Gradient on top, SVG beneath */
        background-image: var(--tc-bgsvg-tint), var(--tc-bgsvg-url);
        background-repeat: no-repeat, no-repeat;
        background-position: center, center;
        background-size: cover, cover;
        background-attachment: fixed, fixed;
        /* Tint the SVG with the gradient (falls back gracefully if unsupported) */
        background-blend-mode: soft-light;
    }

/* Light theme: adjust tint + opacity (keeps the same SVG, recolored) */
html.tc-theme-light {
    --tc-bgsvg-opacity: .26;
    --tc-bgsvg-url: url('/images/login-bg-light.svg');
    --tc-bgsvg-tint: linear-gradient(135deg, rgba(36,127,186,.22) 0%, rgba(99,102,241,.12) 55%, rgba(0,0,0,.04) 100%);
}

/* Dark theme: explicit values so toggling always restores correctly */
html.tc-theme-dark {
    --tc-bgsvg-opacity: .18;
    --tc-bgsvg-tint: linear-gradient(135deg, rgba(170,235,255,.55) 0%, rgba(36,127,186,.45) 45%, rgba(255,255,255,.18) 100%);
}

html.tc-theme-light body {
    color: #162235;
    /* override the dark background stack with a light one (NO SVG here; svg is ::before) */
    background: repeating-linear-gradient(-35deg, rgba(36,127,186,.00) 0 22px, rgba(36,127,186,.07) 22px 23px, rgba(36,127,186,.00) 23px 60px), repeating-linear-gradient(0deg, rgba(0,0,0,.04) 0 1px, transparent 1px 28px), repeating-linear-gradient(90deg, rgba(0,0,0,.03) 0 1px, transparent 1px 28px), radial-gradient(1200px circle at 18% 10%, rgba(36,127,186,.16), transparent 55%), radial-gradient(900px circle at 82% 28%, rgba(99,102,241,.10), transparent 60%), linear-gradient(135deg, #f7f9fe 0%, #eef3fb 38%, #e8effa 100%);
}

/* =========================================================
   v9 add-ons: themed form controls + clean scrollbars
   ========================================================= */

html.tc-theme-dark {
    --tc-scroll-track: rgba(255,255,255,.08);
    --tc-scroll-thumb: rgba(150,220,255,.52);
    --tc-scroll-thumb-border: rgba(0,0,0,.18);
}

html.tc-theme-light {
    --tc-scroll-track: rgba(0,0,0,.08);
    --tc-scroll-thumb: rgba(36,127,186,.42);
    --tc-scroll-thumb-border: rgba(255,255,255,.55);
}

/* Bootstrap-ish controls (works even if Bootstrap isn't present) */
html.tc-theme-dark input.form-control,
html.tc-theme-dark select.form-control,
html.tc-theme-dark textarea.form-control,
html.tc-theme-dark .form-control,
html.tc-theme-dark select,
html.tc-theme-dark textarea {
    background-color: rgba(0,0,0,.28);
    border-color: rgba(255,255,255,.12);
    color: rgba(255,255,255,.92);
}

html.tc-theme-light input.form-control,
html.tc-theme-light select.form-control,
html.tc-theme-light textarea.form-control,
html.tc-theme-light .form-control,
html.tc-theme-light select,
html.tc-theme-light textarea {
    background-color: rgba(255,255,255,.72);
    border-color: rgba(0,0,0,.14);
    color: rgba(10,18,32,.92);
}

html.tc-theme-dark .form-control::placeholder {
    color: rgba(255,255,255,.55);
}

html.tc-theme-light .form-control::placeholder {
    color: rgba(10,18,32,.50);
}

/* Dropdown option surfaces (browser-dependent, but prevents dark-on-dark) */
html.tc-theme-dark select option {
    background: #0b1220;
    color: #e5f2ff;
}

html.tc-theme-light select option {
    background: #ffffff;
    color: #162235;
}

/* Clean scrollbars inside widgets/containers that scroll */
.contentbody,
.modal-body,
.tc-sidebar,
.tc-pinnedbar,
.tc-surface,
.tc-card,
.tc-scroll {
    scrollbar-width: thin;
    scrollbar-color: var(--tc-scroll-thumb) var(--tc-scroll-track);
}

    .contentbody::-webkit-scrollbar,
    .modal-body::-webkit-scrollbar,
    .tc-sidebar::-webkit-scrollbar,
    .tc-pinnedbar::-webkit-scrollbar,
    .tc-surface::-webkit-scrollbar,
    .tc-card::-webkit-scrollbar,
    .tc-scroll::-webkit-scrollbar {
        width: 10px;
        height: 10px;
    }

    .contentbody::-webkit-scrollbar-track,
    .modal-body::-webkit-scrollbar-track,
    .tc-sidebar::-webkit-scrollbar-track,
    .tc-pinnedbar::-webkit-scrollbar-track,
    .tc-surface::-webkit-scrollbar-track,
    .tc-card::-webkit-scrollbar-track,
    .tc-scroll::-webkit-scrollbar-track {
        background: var(--tc-scroll-track);
        border-radius: 10px;
    }

    .contentbody::-webkit-scrollbar-thumb,
    .modal-body::-webkit-scrollbar-thumb,
    .tc-sidebar::-webkit-scrollbar-thumb,
    .tc-pinnedbar::-webkit-scrollbar-thumb,
    .tc-surface::-webkit-scrollbar-thumb,
    .tc-card::-webkit-scrollbar-thumb,
    .tc-scroll::-webkit-scrollbar-thumb {
        background: var(--tc-scroll-thumb);
        border-radius: 10px;
        border: 2px solid var(--tc-scroll-thumb-border);
    }

/* Sidebar + rail in light mode */
html.tc-theme-light .tc-rail {
    background: rgba(255,255,255,.70);
    border-right: 1px solid rgba(0,0,0,.08);
}

html.tc-theme-light #sideNavi.tc-sidebar {
    background: rgba(255,255,255,.74);
    color: rgba(10,18,32,.92);
    border-right: 1px solid rgba(0,0,0,.10);
}

html.tc-theme-light .tc-navsection {
    background: rgba(0,0,0,.02);
    border: 1px solid rgba(0,0,0,.06);
}

html.tc-theme-light .tc-navsection__title {
    color: rgba(10,18,32,.82);
}

html.tc-theme-light .tc-navlink,
html.tc-theme-light .tc-navbtn {
    color: rgba(10,18,32,.90);
}

    html.tc-theme-light .tc-navlink:hover,
    html.tc-theme-light .tc-navbtn:hover {
        background: rgba(36,127,186,.10);
        color: rgba(10,18,32,.98);
    }

html.tc-theme-light .tc-navitem.is-active .tc-navlink,
html.tc-theme-light .tc-navitem.is-active .tc-navbtn {
    background: rgba(36,127,186,.16);
    border: 1px solid rgba(36,127,186,.28);
}

html.tc-theme-light .tc-navicon {
    color: rgba(10,18,32,.86);
    --tc-icon-badge-fg: #ffffff;
}

html.tc-theme-light .tc-rail__item {
    background: rgba(0,0,0,.04);
    color: rgba(10,18,32,.92);
    border: 1px solid rgba(0,0,0,.10);
    box-sizing: border-box; /* keep 40px height consistent when adding border */
}

    html.tc-theme-light .tc-rail__item:hover {
        background: rgba(36,127,186,.12);
        border-color: rgba(36,127,186,.22);
    }

/* Cards/widgets in light mode (keep glass feel, avoid bright white blocks) */
html.tc-theme-light .tc-card {
    background: rgba(255,255,255,.58) !important;
    border: 1px solid rgba(0,0,0,.08) !important;
    box-shadow: 0 14px 34px rgba(0,0,0,.12) !important;
    color: rgba(10,18,32,.92) !important;
}

html.tc-theme-light .tc-card-header {
    background: rgba(255,255,255,.45) !important;
    border-bottom: 1px solid rgba(0,0,0,.08) !important;
    color: rgba(10,18,32,.92) !important;
}

html.tc-theme-light .tc-muted {
    color: rgba(10,18,32,.62) !important;
}

html.tc-theme-light .tc-btn {
    background: rgba(255,255,255,.55) !important;
    border: 1px solid rgba(0,0,0,.14) !important;
    color: rgba(10,18,32,.92) !important;
    box-shadow: 0 10px 22px rgba(0,0,0,.10) !important;
}

    html.tc-theme-light .tc-btn:hover {
        background: rgba(255,255,255,.72) !important;
    }

/* Account panel in light mode */
html.tc-theme-light .accountBin {
    background: rgba(255,255,255,.92) !important;
    color: rgba(10,18,32,.92) !important;
    border: 1px solid rgba(0,0,0,.10) !important;
}

    html.tc-theme-light .accountBin .tpTitle {
        background: rgba(255,255,255,.92) !important;
        border-bottom: 1px solid rgba(0,0,0,.10) !important;
    }

        html.tc-theme-light .accountBin .tpTitle h1,
        html.tc-theme-light .accountBin .tpTitle h2,
        html.tc-theme-light .accountBin .accTile span {
            color: rgba(10,18,32,.92) !important;
        }

    html.tc-theme-light .accountBin .accTile .tc-accTile-icon {
        color: rgba(22, 53, 113, .88);
    }

    html.tc-theme-light .accountBin .accTile {
        background: rgba(0,0,0,.03) !important;
        border: 1px solid rgba(0,0,0,.08) !important;
    }

/* Theme toggle button */
.tc-theme-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.tc-theme-toggle__ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
}

    .tc-theme-toggle__ico svg {
        width: 16px;
        height: 16px;
        display: block;
    }


/* =========================================================
   tcLists: swap-in view (fills tcMain; no overlay)
========================================================= */

/* Host inside <main> so the list view can fill just that area */
#tcMainSwapHost.tc-swap-host {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 0;
}

#tcMainBody.tc-swap-main {
    width: 100%;
    height: 100%;
    min-height: 0;
}

/* The list view panel */
#tcListsModal.tc-listsview {
    position: absolute;
    inset: 0;
    display: none;
    flex-direction: column;
    min-height: 0;
    background: var(--tc-glass-bg-strong, rgba(14,18,28,.50));
    border: 1px solid var(--tc-glass-border, rgba(255,255,255,.10));
    box-shadow: var(--tc-glass-shadow, 0 18px 40px rgba(0,0,0,.35));
    border-radius: 18px;
    backdrop-filter: blur(var(--tc-glass-blur, 10px)) saturate(125%);
    -webkit-backdrop-filter: blur(var(--tc-glass-blur, 10px)) saturate(125%);
    color: var(--tc-fg, rgba(240,244,252,.92));
    overflow: hidden;
}

#tcListsModal .tc-listsview__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 12px 10px 14px;
    border-bottom: 1px solid rgba(255,255,255,.10);
    background: rgba(0,0,0,.10);
}

#tcListsModal .tc-listsview__title {
    font-weight: 800;
    letter-spacing: .2px;
    font-size: 1.05rem;
    min-width: 0;
}

#tcListsModal .tc-listsview__body {
    padding: 0;
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
}

/* When open: hide main content and show list view */
body.tc-lists-open #tcMainBody {
    display: none !important;
}

body.tc-lists-open #tcListsModal {
    display: flex !important;
}

/* Light theme: make the list view a light glass surface */
html.tc-theme-light #tcListsModal.tc-listsview {
    background: rgba(255,255,255,.70);
    border: 1px solid rgba(0,0,0,.10);
    color: rgba(10,18,32,.92);
}

html.tc-theme-light #tcListsModal .tc-listsview__header {
    background: rgba(255,255,255,.55);
    border-bottom: 1px solid rgba(0,0,0,.10);
}

/* Ensure table rows never become bright white inside the list view */
#tcListsModal table,
#tcListsModal thead,
#tcListsModal tbody,
#tcListsModal tfoot,
#tcListsModal tr,
#tcListsModal th,
#tcListsModal td,
#tcListsModal .table,
#tcListsModal .table > thead > tr > th,
#tcListsModal .table > tbody > tr > td {
    background: transparent !important;
    background-color: transparent !important;
}

/* Inline stat icons in light mode */
html.tc-theme-light .tc-ico {
    background: rgba(0,0,0,.05);
    border: 1px solid rgba(0,0,0,.10);
    color: rgba(10,18,32,.86);
}


/* v10: light theme contrast fixes (auto-added)
   - Keep header/topbar color the same in both themes
   - Increase icon contrast in light mode
   - Fix light-on-light text in widgets (EUS labels/tabs)
*/

/* Header bar stays consistent across themes */
html.tc-theme-light .tc-topbar {
    background: linear-gradient(90deg, rgba(36,127,181,1) 0%, rgba(36,140,208,1) 28%, rgba(29,98,153,1) 65%, rgba(0,0,0,1) 100%) !important;
}

html.tc-theme-light .tc-topbar__btn,
html.tc-theme-light .tc-topbar__link {
    background: rgba(0,0,0,.25) !important;
    color: #fff !important;
}

    html.tc-theme-light .tc-topbar__btn:hover,
    html.tc-theme-light .tc-topbar__link:hover {
        background: rgba(0,0,0,.35) !important;
        color: #fff !important;
    }

html.tc-theme-light .tc-topbar__user {
    color: rgba(255,255,255,.95) !important;
}

html.tc-theme-light .tc-topbar__meta {
    color: rgba(255,255,255,.75) !important;
}

/* Icon contrast in light mode (nav + rail + stat icons) */
html.tc-theme-light .tc-navicon {
    color: rgba(19,92,147,.98) !important;
    --tc-icon-badge-fg: #ffffff;
}

html.tc-theme-light .tc-rail__item {
    color: rgba(19,92,147,.98) !important;
}

    html.tc-theme-light .tc-rail__item.is-active {
        background: rgba(36,127,186,.16) !important;
        border-color: rgba(36,127,186,.30) !important;
    }

html.tc-theme-light .tc-ico {
    background: rgba(36,127,186,.10) !important;
    border: 1px solid rgba(36,127,186,.22) !important;
    color: rgba(19,92,147,.98) !important;
}

    html.tc-theme-light .tc-navicon svg,
    html.tc-theme-light .tc-rail__item svg,
    html.tc-theme-light .tc-ico svg {
        filter: drop-shadow(0 1px 0 rgba(255,255,255,.55));
    }

/* Fix light-on-light widget text (EUS cards) */
html.tc-theme-light .tc-bigstat__label {
    color: rgba(22,34,53,.78) !important;
}

html.tc-theme-light .tc-ph-title {
    color: rgba(22,34,53,.92) !important;
}

html.tc-theme-light .tc-tab {
    border: 1px solid rgba(0,0,0,.12) !important;
    background: rgba(255,255,255,.55) !important;
    color: rgba(22,34,53,.88) !important;
}

    html.tc-theme-light .tc-tab:hover {
        background: rgba(255,255,255,.72) !important;
    }

    html.tc-theme-light .tc-tab.is-active {
        background: rgba(36,127,186,.18) !important;
        border-color: rgba(36,127,186,.30) !important;
        color: rgba(22,34,53,.95) !important;
    }

/* tcLists swap view should look like a real "content replacement" in light mode */
html.tc-theme-light #tcListsModal.tc-listsview {
    background: rgba(255,255,255,.70) !important;
    border: 1px solid rgba(0,0,0,.10) !important;
    box-shadow: 0 14px 34px rgba(0,0,0,.12) !important;
    color: rgba(22,34,53,.92) !important;
}

html.tc-theme-light #tcListsModal .tc-listsview__header {
    background: rgba(255,255,255,.55) !important;
    border-bottom: 1px solid rgba(0,0,0,.08) !important;
}

html.tc-theme-light #tcListsModal .tc-listsview__title {
    color: rgba(22,34,53,.95) !important;
}

/* =========================================================
   v11: tcLists light-mode typography fix
   - Table/body text was being forced to white via an old tcLists rule.
   - In light theme, inherit the list view foreground + set form/pagination colors.
========================================================= */

html.tc-theme-light #tcListsModal .tc-cov-search .input-group-text,
html.tc-theme-light #tcListsModal .tc-cov-search__addon {
    background: rgba(255,255,255,.70) !important;
    border: 1px solid rgba(0,0,0,.12) !important;
    color: rgba(22,34,53,.92) !important;
}

html.tc-theme-light #tcListsModal .tc-cov-search__input {
    background: rgba(255,255,255,.70) !important;
    border: 1px solid rgba(0,0,0,.12) !important;
    color: rgba(22,34,53,.92) !important;
}

    html.tc-theme-light #tcListsModal .tc-cov-search__input::placeholder {
        color: rgba(22,34,53,.45) !important;
    }

html.tc-theme-light #tcListsModal .tc-cov-pagesize {
    background: rgba(255,255,255,.70) !important;
    border: 1px solid rgba(0,0,0,.12) !important;
    color: rgba(22,34,53,.92) !important;
}

html.tc-theme-light #tcListsModal .table,
html.tc-theme-light #tcListsModal .table th,
html.tc-theme-light #tcListsModal .table td {
    color: rgba(22,34,53,.92) !important;
}

    html.tc-theme-light #tcListsModal .table thead th {
        color: rgba(22,34,53,.72) !important;
        background: rgba(255,255,255,.45) !important;
        border-color: rgba(0,0,0,.10) !important;
    }

html.tc-theme-light #tcListsModal .page-link,
html.tc-theme-light #tcListsModal .pagination .page-link {
    background: rgba(255,255,255,.65) !important;
    border-color: rgba(0,0,0,.12) !important;
    color: rgba(22,34,53,.88) !important;
}

html.tc-theme-light #tcListsModal .page-item.disabled .page-link {
    opacity: .45 !important;
}


/* =========================================================
   v2026b - NO gradients on page/container backgrounds.
   Requirements:
   - html/body stay WHITE in BOTH themes
   - Use /Images/login-bg.svg as the ONLY page background layer
   - Big containers (content area/swap view wrappers) are transparent
   - Widgets/cards can be smokey translucent (no gradients)
========================================================= */

html, body {
    background-color: #fff !important;
}

    /* Force the same SVG background for dark, and the light variant for light */
    body,
    body.tc-app,
    html.tc-theme-dark body {
        background: #003b6f url('/Images/login-bg.svg') center/cover no-repeat fixed !important;
        background-image: url('/Images/login-bg.svg') !important;
        background-blend-mode: normal !important;
    }

    html.tc-theme-light body {
        background: #fff url('/Images/login-bg-light.svg') center/cover no-repeat fixed !important;
        background-image: url('/Images/login-bg-light.svg') !important;
        background-blend-mode: normal !important;
    }

    /* Disable the old theme tint overlay (it used gradients + blend-modes) */
    body.tc-app::before {
        content: none !important;
        opacity: 0 !important;
        background: none !important;
        display: none !important;
    }

    /* Kill theme tint variables so nothing can reintroduce gradients */
    html.tc-theme-dark,
    html.tc-theme-light {
        --tc-bgsvg-opacity: 0 !important;
        --tc-bgsvg-tint: none !important;
    }

/* Content area wrappers must remain transparent (no gray slabs) */
.tc-main,
.tc-dashboard,
.tc-surface,
#tcMainBody,
section.contentbody,
#tcListsModal,
#tcListsModal.tc-listsview,
.tc-listsview {
    background: transparent !important;
    background-image: none !important;
}

/* Remove gradient backgrounds from chrome elements (solid only) */
.tc-topbar {
    background: rgb(36,127,181) !important;
    background-image: none !important;
}

html.tc-theme-light .tc-topbar {
    background: rgb(36,127,181) !important;
    background-image: none !important;
}

/* Widget surfaces: smokey translucent, NO gradients */
.tc-card {
    background-image: none !important;
}

.tc-card-header {
    background: rgba(10,18,31,.5) !important;
    background-image: none !important;
}

html.tc-theme-light .tc-card {
    background: rgba(255,255,255,.80) !important;
    background-image: none !important;
}

html.tc-theme-light .tc-card-header {
    background: rgba(255,255,255,.72) !important;
    background-image: none !important;
}

/* Any “big stat” blocks must be translucent, not gradient */
.tc-bigstat {
    background: rgba(0,0,0,.14) !important;
    background-image: none !important;
}

html.tc-theme-light .tc-bigstat {
    background: rgba(0,0,0,.04) !important;
    background-image: none !important;
}
/* ============================================================
   Overlay open: hide underlying page without changing route
   ============================================================ */
body.tc-overlay-open #tcMainBody {
    visibility: hidden; /* keeps DOM state intact */
    pointer-events: none;
}

body.tc-overlay-open #tcListsModal {
    display: block !important;
}

/* Keep overlay container itself transparent (no gradients) */
#tcListsModal {
    background: transparent !important;
}

/* ============================================================
   FlipContainer (legacy fireFlip / closeOut)
   - Hidden when closed
   - Anchored under top chrome, offset from rail/sidebar
   - High z-index so it never sits behind other UI
   ============================================================ */

/* Honor the HTML [hidden] attribute */
#flipContainer[hidden],
#flipCard[hidden] {
    display: none !important;
}

#flipContainer {
    position: fixed !important;
    top: calc(var(--tc-chrome-h, 76px) + 8px);
    left: calc(var(--tc-side-w, 240px) + 12px);
    right: 12px;
    bottom: 12px;
    z-index: 7000;
    pointer-events: none; /* only the card is interactive */

    opacity: 0;
    transform: translateY(8px);
    transition: opacity .16s ease, transform .16s ease;
}

/* When the sidebar is collapsed, align to the pinned rail instead */
body.tc-nav-collapsed #flipContainer {
    left: calc(var(--tc-rail-w, 56px) + 12px);
}

/* Mobile: rail is always visible; keep a small inset */
@media (max-width: 991px) {
    #flipContainer {
        left: calc(var(--tc-rail-w, 56px) + 10px);
        right: 10px;
        bottom: 10px;
    }
}

/* Visible/open state — allow overlay clicks to close */
#flipContainer.showFlip {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

/* Closing animation (JS removes .showFlip + sets [hidden] after the transition) */
#flipContainer.exitFlip {
    opacity: 0;
    transform: translateY(8px);
}

#flipCard {
    pointer-events: auto;
    position: relative;
    display: block;
    width: auto;
    height: auto;
    max-height: calc(var(--tc-vh, 100vh) - var(--tc-chrome-h, 76px) - 24px);
    overflow: hidden;
    border-radius: 14px;
    background: var(--tc-glass-bg-strong, rgba(10,18,30,.68));
    border: 1px solid var(--tc-glass-border, rgba(255,255,255,.10));
    box-shadow: var(--tc-glass-shadow, 0 18px 45px rgba(0,0,0,.38));
    backdrop-filter: blur(var(--tc-glass-blur, 10px));
    -webkit-backdrop-filter: blur(var(--tc-glass-blur, 10px));
}

html.tc-theme-light #flipCard {
    background: rgba(255,255,255,.90);
    border-color: rgba(0,0,0,.10);
    box-shadow: 0 18px 45px rgba(0,0,0,.18);
    color: rgba(0,0,0,.88);
}

/* Title if present */
#flipCard h1 {
    margin: 0;
    padding: 14px 46px 10px 14px;
    font-size: 18px;
    font-weight: 800;
    line-height: 1.1;
    border-bottom: 1px solid rgba(255,255,255,.10);
}

html.tc-theme-light #flipCard h1 {
    border-bottom-color: rgba(0,0,0,.10);
}

/* Content area */
#flipCont {
    padding: 14px;
    overflow: auto;
    max-height: calc(var(--tc-vh, 100vh) - var(--tc-chrome-h, 76px) - 92px);
}

/* Update Settings -> Edit MultiCoverage: title on #flipCard h1 only; body from editmulticoverage partial */
#flipCard.tc-flip-edit-mcov {
    display: flex;
    flex-direction: column;
}

    #flipCard.tc-flip-edit-mcov #flipCont {
        flex: 1 1 auto;
        min-height: 0;
        max-height: none;
        display: flex;
        padding: 10px;
        overflow: hidden; /* scroll inside panes only, not the whole flip body */
    }

        #flipCard.tc-flip-edit-mcov #flipCont .contentbody.multicoverage-edit {
            width: 100%;
            height: 100%;
            min-height: 0;
            margin: 0;
            padding: 10px;
        }

            /* Redundant with #flipCard h1 title from fireFlip(); keep .fm-actions (e.g. mobile menu) */
            #flipCard.tc-flip-edit-mcov #flipCont .contentbody.multicoverage-edit > .pgTitle.fm-title > h1 {
                display: none !important;
            }

/* Hard fallback in case tc-flip-edit-mcov class is missing */
#flipContainer.showFlip #flipCont .contentbody.multicoverage-edit {
    width: 100%;
    height: 100%;
    min-height: 0;
    margin: 0;
    padding: 12px;
}

#flipCard.tc-flip-edit-mcov #flipCont .contentbody.multicoverage-edit .fm-page,
#flipCard.tc-flip-edit-mcov #flipCont .contentbody.multicoverage-edit .fm-body,
#flipCard.tc-flip-edit-mcov #flipCont .contentbody.multicoverage-edit .row.g-4 {
    height: 100%;
    min-height: 0;
}

/* Force full-width 50/50 panes with independent scrolling */
#flipCard.tc-flip-edit-mcov #flipCont .contentbody.multicoverage-edit .fm-page {
    min-height: 0 !important;
}

#flipCard.tc-flip-edit-mcov #flipCont .contentbody.multicoverage-edit .fm-body {
    display: block !important; /* override global .fm-body grid (1fr 420px) */
    min-height: 0 !important;
}

#flipCard.tc-flip-edit-mcov #flipCont .contentbody.multicoverage-edit .row.g-4 {
    margin-left: 0;
    margin-right: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
    column-gap: 12px;
    row-gap: 12px;
}

#flipContainer.showFlip #flipCont .contentbody.multicoverage-edit .row.g-4 {
    margin: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
    column-gap: 12px;
    row-gap: 12px;
}

#flipCard.tc-flip-edit-mcov #flipCont .contentbody.multicoverage-edit .row.g-4 > .col-12 {
    grid-column: 1 / -1;
    padding-left: 0;
    padding-right: 0;
}

#flipCard.tc-flip-edit-mcov #flipCont .contentbody.multicoverage-edit .row.g-4 > .col-lg-6 {
    grid-column: span 1;
    padding-left: 0;
    padding-right: 0;
    min-width: 0;
    min-height: 0;
    display: flex;
}

#flipContainer.showFlip #flipCont .contentbody.multicoverage-edit .row.g-4 > .col-12 {
    grid-column: 1 / -1;
    padding-left: 0;
    padding-right: 0;
}

#flipContainer.showFlip #flipCont .contentbody.multicoverage-edit .row.g-4 > .col-lg-6 {
    grid-column: span 1;
    padding-left: 0;
    padding-right: 0;
    min-width: 0;
    min-height: 0;
    display: flex;
}

    #flipCard.tc-flip-edit-mcov #flipCont .contentbody.multicoverage-edit .row.g-4 > .col-lg-6 .fm-card,
    #flipContainer.showFlip #flipCont .contentbody.multicoverage-edit .row.g-4 > .col-lg-6 .fm-card {
        display: flex;
        flex-direction: column;
        flex: 1 1 0;
        min-height: 0;
        min-width: 0;
        width: 100%;
        overflow: hidden;
    }

        /* Bootstrap .h-100 is height:100% !important — breaks flex-basis sizing for scroll panes */
        #flipCard.tc-flip-edit-mcov #flipCont .contentbody.multicoverage-edit .row.g-4 > .col-lg-6 .fm-card.h-100,
        #flipContainer.showFlip #flipCont .contentbody.multicoverage-edit .row.g-4 > .col-lg-6 .fm-card.h-100 {
            height: auto !important;
        }

    #flipCard.tc-flip-edit-mcov #flipCont .contentbody.multicoverage-edit .row.g-4 > .col-lg-6 .fm-cardbody,
    #flipContainer.showFlip #flipCont .contentbody.multicoverage-edit .row.g-4 > .col-lg-6 .fm-cardbody {
        display: flex;
        flex-direction: column;
        flex: 1 1 0;
        min-height: 0;
        width: 100%;
    }

/* flex-basis 0 (not auto): otherwise flex items grow with content and no scrollbar appears. */
#flipCard.tc-flip-edit-mcov #flipCont .contentbody.multicoverage-edit #tcLeftItems,
#flipCard.tc-flip-edit-mcov #flipCont .contentbody.multicoverage-edit #tcRightItems {
    flex: 1 1 0 !important;
    min-height: 0;
    overflow-y: auto;
}

/* Right column: list is inside #mcoverageform; form must fill the card flex column so the
   included list gets a bounded height and scrolls (left column has no form wrapper). */
#flipCard.tc-flip-edit-mcov #flipCont .contentbody.multicoverage-edit .fm-cardbody > form#mcoverageform,
#flipContainer.showFlip #flipCont .contentbody.multicoverage-edit .fm-cardbody > form#mcoverageform {
    display: flex;
    flex-direction: column;
    flex: 1 1 0;
    min-height: 0;
    overflow: hidden;
    width: 100%;
}

    #flipCard.tc-flip-edit-mcov #flipCont .contentbody.multicoverage-edit .fm-cardbody > form#mcoverageform #tcRightSearch,
    #flipContainer.showFlip #flipCont .contentbody.multicoverage-edit .fm-cardbody > form#mcoverageform #tcRightSearch {
        flex: 0 0 auto;
    }

    #flipCard.tc-flip-edit-mcov #flipCont .contentbody.multicoverage-edit .fm-cardbody > form#mcoverageform #tcRightItems,
    #flipContainer.showFlip #flipCont .contentbody.multicoverage-edit .fm-cardbody > form#mcoverageform #tcRightItems {
        flex: 1 1 0 !important;
        min-height: 0;
        overflow-y: auto !important;
    }

#flipContainer.showFlip #flipCont .contentbody.multicoverage-edit #tcLeftItems,
#flipContainer.showFlip #flipCont .contentbody.multicoverage-edit #tcRightItems {
    flex: 1 1 0 !important;
    min-height: 0;
    max-height: calc(100vh - 280px);
    overflow-y: auto !important;
}

@media (max-width: 991px) {
    #flipCard.tc-flip-edit-mcov #flipCont .contentbody.multicoverage-edit .row.g-4 {
        grid-template-columns: 1fr;
        grid-template-rows: auto minmax(260px, 1fr) minmax(260px, 1fr);
    }
}

/* Consistent legacy popup action buttons (delete Yes/No, etc.) */
#flipCont .YesNo,
#popNotice .YesNo {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 14px;
}

    #flipCont .YesNo a,
    #flipCont .YesNo button,
    #flipCont .YesNo input[type=button],
    #popNotice .YesNo a,
    #popNotice .YesNo button,
    #popNotice .YesNo input[type=button] {
        border: 1px solid var(--tc-glass-border, rgba(255,255,255,.12));
        background: rgba(255,255,255,.06);
        color: var(--tc-text, rgba(229,242,255,.95));
        padding: 8px 12px;
        border-radius: 12px;
        font-size: 13px;
        line-height: 1.2;
        cursor: pointer;
        text-decoration: none !important;
        min-width: 86px;
        text-align: center;
        transition: background .12s ease, border-color .12s ease, transform .05s ease;
    }

        #flipCont .YesNo a:hover,
        #flipCont .YesNo button:hover,
        #flipCont .YesNo input[type=button]:hover,
        #popNotice .YesNo a:hover,
        #popNotice .YesNo button:hover,
        #popNotice .YesNo input[type=button]:hover {
            background: rgba(255,255,255,.10);
            border-color: var(--tc-glass-border-strong, rgba(255,255,255,.18));
        }

        #flipCont .YesNo a:active,
        #flipCont .YesNo button:active,
        #flipCont .YesNo input[type=button]:active,
        #popNotice .YesNo a:active,
        #popNotice .YesNo button:active,
        #popNotice .YesNo input[type=button]:active {
            transform: translateY(1px);
        }

/* Close button */
#exit {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    cursor: pointer;
    user-select: none;
    background: rgba(0,0,0,.22);
    border: 1px solid rgba(255,255,255,.14);
    color: rgba(255,255,255,.92);
}

html.tc-theme-light #exit {
    background: rgba(0,0,0,.06);
    border-color: rgba(0,0,0,.12);
    color: rgba(0,0,0,.82);
}

#exit:hover {
    background: rgba(36,127,186,.22);
    border-color: rgba(36,127,186,.45);
}

/* Phone: FlipContainer full width, scrollable, close always available */
@media (max-width: 768px) {
    #flipContainer {
        top: calc(var(--tc-chrome-h, 76px) + 4px);
        left: 6px;
        right: 6px;
        bottom: 6px;
        max-width: calc(100vw - 12px);
        margin: 0 auto;
    }

    #flipCard {
        max-width: 100%;
        width: 100% !important;
        max-height: calc(100vh - var(--tc-chrome-h, 76px) - 20px);
        display: flex;
        flex-direction: column;
    }

        #flipCard h1 {
            flex-shrink: 0;
            padding-right: 48px;
        }

    #flipCont {
        flex: 1;
        min-height: 0;
        overflow-x: hidden;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        max-height: none;
    }

    #exit {
        width: 40px;
        height: 40px;
        top: 8px;
        right: 8px;
        font-size: 18px;
    }
}
/* Tutorial help button */
.tc-tutorial-host {
    position: relative !important;
}

.tc-tutorial-helpbtn {
    position: absolute !important;
    top: 8px !important;
    right: 8px !important;
    z-index: 99999 !important;
    width: 22px;
    height: 22px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.25);
    background: rgba(0,0,0,.35);
    color: inherit;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    font-weight: 800;
    cursor: pointer;
}

html.tc-theme-light .tc-tutorial-helpbtn {
    background: rgba(255,255,255,.70);
    border-color: rgba(0,0,0,.18);
}

.tc-tutorial-helpbtn:hover {
    transform: translateY(-1px);
}

/* =========================================================
   pgTitle toolbar as tc-card-header (all pages)
   - Light text in dark mode, dark text in light mode
   - Mobile: top bar collapses into dropdown menu
   ========================================================= */
.pgTitle.tc-card-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-bottom: 1px solid rgba(255,255,255,.08);
    background: linear-gradient(180deg, rgba(20,22,26,.94) 0%, rgba(16,18,22,.94) 10%);
    color: rgba(246,248,252,.92);
    font-weight: 600;
}

    .pgTitle.tc-card-header .fm-btn-txt,
    .pgTitle.tc-card-header .fm-btn,
    .pgTitle.tc-card-header a:not(.tc-mobile-menu-btn),
    .pgTitle.tc-card-header h1,
    .pgTitle.tc-card-header h5 {
        color: inherit;
    }

html.tc-theme-light .pgTitle.tc-card-header {
    background: rgba(255,255,255,.45) !important;
    border-bottom: 1px solid rgba(0,0,0,.08) !important;
    color: rgba(10,18,32,.92) !important;
}

    html.tc-theme-light .pgTitle.tc-card-header .fm-btn-txt,
    html.tc-theme-light .pgTitle.tc-card-header .fm-btn,
    html.tc-theme-light .pgTitle.tc-card-header a:not(.tc-mobile-menu-btn),
    html.tc-theme-light .pgTitle.tc-card-header h1,
    html.tc-theme-light .pgTitle.tc-card-header h5 {
        color: rgba(10,18,32,.92) !important;
    }

/* Mobile: Menu button (show only on narrow viewports) */
.tc-mobile-menu-btn {
    display: none;
    align-items: center;
    justify-content: center;
    padding: 8px 14px;
    min-height: 40px;
    border: 1px solid rgba(255,255,255,.2);
    background: rgba(255,255,255,.1);
    color: inherit;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    flex-shrink: 0;
}

#tcThemeToggle {
    display: none !important;
}

html.tc-theme-light .tc-mobile-menu-btn {
    border-color: rgba(0,0,0,.14);
    background: rgba(0,0,0,.06);
    color: rgba(10,18,32,.92);
}

@media (max-width: 768px) {
    .pgTitle.tc-card-header .fm-actions .tc-mobile-menu-btn {
        display: inline-flex !important;
    }

    .pgTitle.tc-card-header .fm-actions .tc-mobile-menu-dropdown {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 9998;
        background: rgba(0,0,0,.5);
        padding: 0;
    }

        .pgTitle.tc-card-header .fm-actions .tc-mobile-menu-dropdown.is-open {
            display: block;
        }
    /* Menu panel: top aligned to bottom of header (JS sets top on open); light text in dark theme, uniform button sizing */
    .pgTitle.tc-card-header .fm-actions .tc-mobile-menu-dropdown-inner {
        position: fixed;
        top: 56px;
        left: 0;
        right: 0;
        max-height: 85vh;
        overflow-y: auto;
        background: linear-gradient(to bottom, rgba(45,45,45,.98) 0%, rgba(25,25,25,.98) 100%);
        border: 1px solid rgba(255,255,255,.1);
        border-radius: 0 0 14px 14px;
        padding: 12px;
        box-shadow: 0 12px 40px rgba(0,0,0,.5);
        z-index: 9999;
        color: rgba(255,255,255,.95);
    }

        .pgTitle.tc-card-header .fm-actions .tc-mobile-menu-dropdown-inner .tc-btn,
        .pgTitle.tc-card-header .fm-actions .tc-mobile-menu-dropdown-inner a.fm-btn {
            color: rgba(255,255,255,.95) !important;
            min-width: 140px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
        }

    html.tc-theme-light .pgTitle.tc-card-header .fm-actions .tc-mobile-menu-dropdown-inner {
        background: rgba(255,255,255,.96);
        border-color: rgba(0,0,0,.1);
        color: rgba(10,18,32,.92);
    }

        html.tc-theme-light .pgTitle.tc-card-header .fm-actions .tc-mobile-menu-dropdown-inner .tc-btn,
        html.tc-theme-light .pgTitle.tc-card-header .fm-actions .tc-mobile-menu-dropdown-inner a.fm-btn {
            color: rgba(10,18,32,.92) !important;
        }
    /* Grid layout for buttons in phone mode (2 columns) */
    .pgTitle.tc-card-header .fm-actions .tc-mobile-menu-dropdown #buttonList {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }

    .pgTitle.tc-card-header .fm-actions .tc-mobile-menu-dropdown-inner:not(:has(#buttonList)) {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }

    .pgTitle.tc-card-header .fm-actions .tc-mobile-menu-dropdown .tc-btn {
        min-width: 140px;
    }
}

@media (min-width: 769px) {
    .pgTitle.tc-card-header .tc-mobile-menu-btn {
        display: none !important;
    }

    .pgTitle.tc-card-header .fm-actions .tc-mobile-menu-dropdown {
        display: contents !important;
    }

    .pgTitle.tc-card-header .fm-actions .tc-mobile-menu-dropdown-inner {
        display: contents !important;
    }
}

/* =========================================================
   tc-map-side-view: unified layout for all map+sideData pages
   (multicoverageviewonly, editcoverages, editsites, editlinks,
    editDevices, editLinkGroup, Polygons/EditPolygon, FiberMaps/Edit)
   - Big map + sidebar same style as multicoverageviewonly
   - Overrides sideData.css so sidebar is grid child, not absolute
   ========================================================= */
.tc-main .contentbody.tc-map-side-view {
    display: flex;
    flex-direction: column;
    min-height: 0;
    height: 100%;
    width: 100%;
    max-width: none;
    box-sizing: border-box;
}

    .tc-main .contentbody.tc-map-side-view .pgTitle.fm-title,
    .tc-main .contentbody.tc-map-side-view .pgTitle.tc-card-header {
        flex: 0 0 auto;
        min-height: 48px;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 8px;
        width: 100%;
        position: relative;
        z-index: 10;
    }
    /* Top bar: white text in dark mode, equal-sized buttons */
    .tc-main .contentbody.tc-map-side-view .pgTitle .fm-btn,
    .tc-main .contentbody.tc-map-side-view .pgTitle a.fm-btn,
    .tc-main .contentbody.tc-map-side-view .pgTitle button.fm-btn,
    .tc-main .contentbody.tc-map-side-view .pgTitle .fm-btn-txt,
    .tc-main .contentbody.tc-map-side-view .pgTitle h5 {
        color: #fafafa !important;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 8px 12px;
        min-height: 36px;
        border: 1px solid rgba(255,255,255,0.1);
        background: rgba(255,255,255,0.04);
        border-radius: 12px;
        font-size: 13px;
        font-weight: 600;
        text-decoration: none;
        cursor: pointer;
        transition: background 0.12s ease, border-color 0.12s ease;
    }

        .tc-main .contentbody.tc-map-side-view .pgTitle .fm-btn:hover,
        .tc-main .contentbody.tc-map-side-view .pgTitle a.fm-btn:hover {
            background: rgba(255,255,255,0.07);
            border-color: rgba(255,255,255,0.16);
        }

    .tc-main .contentbody.tc-map-side-view .pgTitle .fm-btn-icon {
        min-width: 36px;
        padding: 8px 10px;
        font-size: 18px;
    }

html.tc-theme-light .tc-main .contentbody.tc-map-side-view .pgTitle .fm-btn,
html.tc-theme-light .tc-main .contentbody.tc-map-side-view .pgTitle a.fm-btn,
html.tc-theme-light .tc-main .contentbody.tc-map-side-view .pgTitle .fm-btn-txt,
html.tc-theme-light .tc-main .contentbody.tc-map-side-view .pgTitle h5 {
    color: rgba(10,18,32,.92) !important;
    background: rgba(0,0,0,0.06);
    border-color: rgba(0,0,0,0.12);
}

.tc-main .contentbody.tc-map-side-view .pgTitle .fm-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.tc-main .contentbody.tc-map-side-view .fm-page {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}
/* Sidebar LEFT (380px), map RIGHT (1fr). Use order so DOM order doesn't matter. */
.tc-main .contentbody.tc-map-side-view .fm-body {
    flex: 1 1 auto;
    min-height: 0;
    min-width: 0;
    width: 100%;
    display: grid !important;
    grid-template-columns: 380px 1fr !important;
    gap: 0 !important;
    overflow: hidden;
}

    /* Map-only pages (no #sideData): full-width + full-height map (not squeezed into 380px col) */
    .tc-main .contentbody.tc-map-side-view .fm-body:not(:has(#sideData)) {
        grid-template-columns: 1fr !important;
        grid-template-rows: 1fr !important;
    }

        .tc-main .contentbody.tc-map-side-view .fm-body:not(:has(#sideData)) .fm-mapwrap {
            height: 100%;
            align-self: stretch;
        }

    /* Sidebar hidden: one column — map must use column 1 (FiberMaps uses grid-column:2 on .fm-mapwrap) */
    .tc-main .contentbody.tc-map-side-view .fm-body:has(.fm-side#sideData.slideData),
    .tc-main .contentbody.tc-map-side-view .fm-body:has(#sideData.slideData) {
        grid-template-columns: 1fr !important;
        grid-template-rows: 1fr !important;
    }

        .tc-main .contentbody.tc-map-side-view .fm-body:has(.fm-side#sideData.slideData) .fm-mapwrap,
        .tc-main .contentbody.tc-map-side-view .fm-body:has(#sideData.slideData) .fm-mapwrap {
            grid-column: 1 / -1 !important;
            width: 100% !important;
            max-width: none !important;
            height: 100%;
            align-self: stretch;
            min-height: 0;
        }

    .tc-main .contentbody.tc-map-side-view .fm-side#sideData,
    .tc-main .contentbody.tc-map-side-view .fm-body #sideData {
        order: 1;
    }

.tc-main .contentbody.tc-map-side-view .fm-mapwrap {
    order: 2;
    position: relative;
    min-height: 0;
    min-width: 0;
    overflow: hidden;
}

    .tc-main .contentbody.tc-map-side-view .fm-mapwrap .mainWrap,
    .tc-main .contentbody.tc-map-side-view .fm-mapwrap #coveragesWrapper,
    .tc-main .contentbody.tc-map-side-view .fm-mapwrap #map,
    .tc-main .contentbody.tc-map-side-view .fm-mapwrap .fm-map,
    .tc-main .contentbody.tc-map-side-view .fm-mapwrap #mapitems {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100% !important;
        height: 100% !important;
    }
/* Override sideData.css: sidebar as grid child, multicoverage style */
.tc-main .contentbody.tc-map-side-view .fm-side#sideData,
.tc-main .contentbody.tc-map-side-view .fm-body #sideData,
.tc-main .contentbody.tc-map-side-view #sideData {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    width: 100% !important;
    max-width: 380px !important;
    min-width: 0 !important;
    height: auto !important;
    max-height: none !important;
    z-index: auto !important;
    color: #fafafa;
    /* No panel background — .fm-card widgets carry their own surfaces */
    background: transparent !important;
    border: 1px solid rgba(255,255,255,0.1) !important;
    border-radius: 14px !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden;
    transition: min-width 250ms ease-in-out, margin 250ms ease-in-out;
}

/* Light theme: sidebar was #fafafa for dark map chrome; cards are light — inherit would wash out list text */
html.tc-theme-light .tc-main .contentbody.tc-map-side-view .fm-side#sideData,
html.tc-theme-light .tc-main .contentbody.tc-map-side-view .fm-body #sideData,
html.tc-theme-light .tc-main .contentbody.tc-map-side-view #sideData {
    color: rgba(10, 18, 32, .92);
    border-color: rgba(0, 0, 0, .12) !important;
}

.tc-main .contentbody.tc-map-side-view .fm-side#sideData.slideData,
.tc-main .contentbody.tc-map-side-view #sideData.slideData {
    display: none !important;
    min-width: 0 !important;
    width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden;
    border-width: 0;
}

.tc-main .contentbody.tc-map-side-view #sideData #btmOpWrap,
.tc-main .contentbody.tc-map-side-view .fm-side#sideData #btmOpWrap {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
}

.tc-main .contentbody.tc-map-side-view #sideData .scrollSideBar,
.tc-main .contentbody.tc-map-side-view #sideData .fm-cardbody {
    overflow-y: auto;
    min-height: 0;
}
/* Polygons: same grid (sidebar left, map right) */
.tc-main .contentbody.tc-map-side-view.polygons-edit-view .fm-body {
    display: grid !important;
    grid-template-columns: 380px 1fr !important;
    gap: 0 !important;
}

.tc-main .contentbody.tc-map-side-view.polygons-edit-view .fm-side#sideData,
.tc-main .contentbody.tc-map-side-view.polygons-edit-view #sideData {
    order: 1;
}

.tc-main .contentbody.tc-map-side-view.polygons-edit-view .fm-mapwrap {
    order: 2;
}
/* Color legend overlay on map (multicoverage-style) */
.tc-main .contentbody.tc-map-side-view .fm-mapwrap #colorLegend.fm-map-legend {
    position: absolute;
    right: 12px;
    top: 60%;
    transform: translateY(-50%);
    z-index: 10;
    width: 220px;
    max-height: 70%;
    overflow-y: auto;
    margin: 0;
    padding: 12px;
    background: rgba(0,0,0,0.72);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 14px;
    color: #fafafa;
    font-size: 12px;
}

    .tc-main .contentbody.tc-map-side-view .fm-mapwrap #colorLegend.fm-map-legend h5 {
        margin: 0 0 8px 0;
        font-size: 13px;
    }
/* Ensure map view uses full width (no max-width from other rules) */
.tc-main:has(.contentbody.tc-map-side-view) {
    width: 100% !important;
    max-width: none !important;
}
/* Polygons: calculated-area and geocoder positioning (from page inline styles → shared) */
.tc-main .contentbody.tc-map-side-view.polygons-edit-view div#calculated-area {
    display: block;
    /*width: auto;
    height: auto;
    padding: 20px;
    color: #fafafa;
    background: #313131;
    position: fixed;
    top: 10%;
    left: 110px;
    font-size: initial;*/
}

.tc-main .contentbody.tc-map-side-view.polygons-edit-view .geocoder {
    top: 10px;
}
/* Mobile: side panel BELOW top bar, ON TOP of everything; map full height */
@media (max-width: 768px) {
    .tc-main .contentbody.tc-map-side-view .fm-body {
        grid-template-columns: 1fr !important;
        grid-template-rows: 1fr !important;
        flex: 1 1 auto;
        min-height: 0;
    }

    .tc-main .contentbody.tc-map-side-view .fm-mapwrap {
        min-height: 0;
        height: 100%;
    }

    .tc-main .contentbody.tc-map-side-view .fm-side#sideData,
    .tc-main .contentbody.tc-map-side-view .fm-body #sideData,
    .tc-main .contentbody.tc-map-side-view #sideData {
        position: fixed !important;
        top: 56px !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100% !important;
        max-width: none !important;
        z-index: 2147483647 !important; /* above all other UI when open on mobile */
        display: none !important;
        overflow-y: auto !important;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
        border-radius: 14px 14px 0 0 !important;
        background: transparent !important;
    }

        .tc-main .contentbody.tc-map-side-view .fm-side#sideData:not(.slideData),
        .tc-main .contentbody.tc-map-side-view #sideData:not(.slideData) {
            display: flex !important;
            top: 20% !important;
            overflow-y: auto !important;
            overflow-x: hidden;
            -webkit-overflow-scrolling: touch;
            min-height: 0;
        }

        .tc-main .contentbody.tc-map-side-view .fm-side#sideData.slideData,
        .tc-main .contentbody.tc-map-side-view #sideData.slideData {
            display: none !important;
        }

    .tc-main .contentbody.tc-map-side-view .fm-body .fm-mapwrap::after,
    .tc-main .contentbody.tc-map-side-view .fm-body .mainWrap::after {
        content: '';
        position: absolute;
        inset: 0;
        background: rgba(0,0,0,0.4);
        z-index: 9996;
        pointer-events: none;
        opacity: 0;
        transition: opacity 0.2s;
    }

    .tc-main .contentbody.tc-map-side-view .fm-body:has(.fm-side#sideData:not(.slideData)) .fm-mapwrap::after,
    .tc-main .contentbody.tc-map-side-view .fm-body:has(#sideData:not(.slideData)) .fm-mapwrap::after,
    .tc-main .contentbody.tc-map-side-view:has(#sideData:not(.slideData)) .mainWrap::after {
        pointer-events: auto;
        opacity: 1;
    }
    /* Search bar: fixed to bottom, full width */
    .tc-main .contentbody.tc-map-side-view .pgTitle .btmTile.srcmap,
    .tc-main .contentbody.tc-map-side-view .pgTitle .btmTile.srcMap,
    .tc-main .contentbody.tc-map-side-view .pgTitle #pac-card,
    .tc-main .contentbody.tc-map-side-view .pgTitle .fm-search {
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        top: auto !important;
        z-index: 9995;
        margin: 0 !important;
        padding: 10px 12px !important;
        width: 100% !important;
        background: linear-gradient(to top, rgba(30,30,30,.98), rgba(45,45,45,.98)) !important;
        border-top: 1px solid rgba(255,255,255,.1);
    }

        .tc-main .contentbody.tc-map-side-view .pgTitle #pac-card #pac-container,
        .tc-main .contentbody.tc-map-side-view .pgTitle .fm-search {
            display: flex;
            gap: 8px;
            width: 100%;
        }

            .tc-main .contentbody.tc-map-side-view .pgTitle #pac-card #address,
            .tc-main .contentbody.tc-map-side-view .pgTitle .fm-search input {
                flex: 1;
                min-width: 0;
            }

    .tc-main .contentbody .pac-container {
        position: fixed !important;
        bottom: 60px !important;
        top: auto !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        max-height: 50vh !important;
    }

    .tc-main .contentbody.tc-map-side-view #colorLegend,
    .tc-main .contentbody.tc-map-side-view #colorLegend.fm-map-legend {
        display: none !important;
    }
}

/* =========================================================
   Bulk order authorize page polish
   ========================================================= */
.payment-process-page .tc-surface {
    max-width: 1240px;
    margin: 10px auto 0;
}

.payment-process-page .payment-process-summary {
    background: rgba(255, 255, 255, 0.03);
}

.payment-process-page .payment-process-input,
.payment-process-page .creditTable .form-control {
    border-width: 1px;
    border-style: solid;
}

.payment-process-page .alert {
    max-width: 1240px;
    margin-left: auto;
    margin-right: auto;
}

.payment-process-page .pgTitle .fm-actions .fm-btn,
.payment-process-page .pgTitle .fm-actions button.fm-btn,
.payment-process-page .pgTitle .fm-actions a.fm-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    padding: 0.45rem 0.9rem;
    border-radius: 10px;
    border: 1px solid rgba(160, 212, 255, 0.35);
    background: linear-gradient(180deg, rgba(75, 163, 227, 0.26) 0%, rgba(21, 86, 140, 0.42) 100%);
    color: rgba(239, 248, 255, 0.96) !important;
    font-weight: 700;
    letter-spacing: .01em;
    text-decoration: none;
    box-shadow: 0 1px 0 rgba(255,255,255,.08) inset, 0 4px 14px rgba(0,0,0,.25);
    transition: background-color .2s ease, border-color .2s ease, box-shadow .2s ease, transform .15s ease;
}

    .payment-process-page .pgTitle .fm-actions .fm-btn:hover,
    .payment-process-page .pgTitle .fm-actions button.fm-btn:hover,
    .payment-process-page .pgTitle .fm-actions a.fm-btn:hover {
        border-color: rgba(184, 227, 255, 0.6);
        background: linear-gradient(180deg, rgba(92, 183, 244, 0.32) 0%, rgba(26, 102, 162, 0.5) 100%);
        box-shadow: 0 1px 0 rgba(255,255,255,.11) inset, 0 8px 18px rgba(0,0,0,.28);
        transform: translateY(-1px);
    }

    .payment-process-page .pgTitle .fm-actions .fm-btn:focus-visible {
        outline: 0;
        box-shadow: 0 0 0 0.2rem rgba(75, 171, 236, 0.35), 0 8px 18px rgba(0,0,0,.28);
    }

html.tc-theme-light .payment-process-page .payment-process-input,
html.tc-theme-light .payment-process-page .creditTable .form-control {
    background-color: #ffffff !important;
    border-color: rgba(12, 30, 55, 0.35) !important;
    color: #0f1f33 !important;
    box-shadow: inset 0 0 0 1px rgba(12, 30, 55, 0.04);
}

    html.tc-theme-light .payment-process-page .payment-process-input:focus,
    html.tc-theme-light .payment-process-page .creditTable .form-control:focus {
        border-color: #247fba !important;
        box-shadow: 0 0 0 0.2rem rgba(36, 127, 186, 0.2) !important;
    }

html.tc-theme-dark .payment-process-page .payment-process-input,
html.tc-theme-dark .payment-process-page .creditTable .form-control {
    background-color: rgba(7, 14, 24, 0.62) !important;
    border-color: rgba(180, 214, 255, 0.45) !important;
    color: rgba(244, 250, 255, 0.94) !important;
}

    html.tc-theme-dark .payment-process-page .payment-process-input:focus,
    html.tc-theme-dark .payment-process-page .creditTable .form-control:focus {
        border-color: rgba(150, 220, 255, 0.9) !important;
        box-shadow: 0 0 0 0.2rem rgba(61, 170, 255, 0.24) !important;
    }

html.tc-theme-light .payment-process-page .payment-process-summary {
    background: rgba(255, 255, 255, 0.75);
}

html.tc-theme-light .payment-process-page .pgTitle .fm-actions .fm-btn,
html.tc-theme-light .payment-process-page .pgTitle .fm-actions button.fm-btn,
html.tc-theme-light .payment-process-page .pgTitle .fm-actions a.fm-btn {
    border-color: rgba(10, 53, 93, 0.28);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.95) 0%, rgba(230, 240, 251, 0.95) 100%);
    color: rgba(10, 36, 63, 0.95) !important;
    box-shadow: 0 1px 0 rgba(255,255,255,.95) inset, 0 4px 12px rgba(11, 43, 79, 0.14);
}

    html.tc-theme-light .payment-process-page .pgTitle .fm-actions .fm-btn:hover,
    html.tc-theme-light .payment-process-page .pgTitle .fm-actions button.fm-btn:hover,
    html.tc-theme-light .payment-process-page .pgTitle .fm-actions a.fm-btn:hover {
        border-color: rgba(25, 103, 161, 0.45);
        background: linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(218, 235, 252, 0.98) 100%);
        color: rgba(7, 30, 56, 0.98) !important;
    }

html.tc-theme-dark .payment-process-page .tc-surface {
    background: linear-gradient(180deg, rgba(14, 23, 37, 0.78) 0%, rgba(9, 17, 30, 0.74) 100%);
    border: 1px solid rgba(165, 214, 255, 0.16);
    backdrop-filter: blur(5px) saturate(112%);
    -webkit-backdrop-filter: blur(5px) saturate(112%);
}

html.tc-theme-dark .payment-process-page .payment-process-summary {
    background: rgba(7, 16, 28, 0.44);
}

.bulk-authorize-page .tc-surface {
    max-width: 1240px;
    margin: 10px auto 0;
}

.bulk-authorize-page .pgTitle .fm-actions .fm-btn,
.bulk-authorize-page .pgTitle .fm-actions button.fm-btn,
.bulk-authorize-page .pgTitle .fm-actions a.fm-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    padding: 0.45rem 0.9rem;
    border-radius: 10px;
    border: 1px solid rgba(160, 212, 255, 0.35);
    background: linear-gradient(180deg, rgba(75, 163, 227, 0.26) 0%, rgba(21, 86, 140, 0.42) 100%);
    color: rgba(239, 248, 255, 0.96) !important;
    font-weight: 700;
    letter-spacing: .01em;
    text-decoration: none;
    box-shadow: 0 1px 0 rgba(255,255,255,.08) inset, 0 4px 14px rgba(0,0,0,.25);
    transition: background-color .2s ease, border-color .2s ease, box-shadow .2s ease, transform .15s ease;
}

    .bulk-authorize-page .pgTitle .fm-actions .fm-btn:hover,
    .bulk-authorize-page .pgTitle .fm-actions button.fm-btn:hover,
    .bulk-authorize-page .pgTitle .fm-actions a.fm-btn:hover {
        border-color: rgba(184, 227, 255, 0.6);
        background: linear-gradient(180deg, rgba(92, 183, 244, 0.32) 0%, rgba(26, 102, 162, 0.5) 100%);
        box-shadow: 0 1px 0 rgba(255,255,255,.11) inset, 0 8px 18px rgba(0,0,0,.28);
        transform: translateY(-1px);
    }

    .bulk-authorize-page .pgTitle .fm-actions .fm-btn:focus-visible {
        outline: 0;
        box-shadow: 0 0 0 0.2rem rgba(75, 171, 236, 0.35), 0 8px 18px rgba(0,0,0,.28);
    }

.bulk-authorize-page .bulk-authorize-summary {
    background: rgba(255, 255, 255, 0.03);
}

.bulk-authorize-page .bulk-authorize-input {
    border-width: 1px;
    border-style: solid;
}

.bulk-authorize-page .alert {
    max-width: 1240px;
    margin-left: auto;
    margin-right: auto;
}

html.tc-theme-light .bulk-authorize-page .bulk-authorize-input {
    background-color: #ffffff !important;
    border-color: rgba(12, 30, 55, 0.35) !important;
    color: #0f1f33 !important;
    box-shadow: inset 0 0 0 1px rgba(12, 30, 55, 0.04);
}

    html.tc-theme-light .bulk-authorize-page .bulk-authorize-input:focus {
        border-color: #247fba !important;
        box-shadow: 0 0 0 0.2rem rgba(36, 127, 186, 0.2) !important;
    }

html.tc-theme-dark .bulk-authorize-page .bulk-authorize-input {
    background-color: rgba(7, 14, 24, 0.62) !important;
    border-color: rgba(180, 214, 255, 0.45) !important;
    color: rgba(244, 250, 255, 0.94) !important;
}

    html.tc-theme-dark .bulk-authorize-page .bulk-authorize-input:focus {
        border-color: rgba(150, 220, 255, 0.9) !important;
        box-shadow: 0 0 0 0.2rem rgba(61, 170, 255, 0.24) !important;
    }

html.tc-theme-light .bulk-authorize-page .bulk-authorize-summary {
    background: rgba(255, 255, 255, 0.75);
}

html.tc-theme-light .bulk-authorize-page .pgTitle .fm-actions .fm-btn,
html.tc-theme-light .bulk-authorize-page .pgTitle .fm-actions button.fm-btn,
html.tc-theme-light .bulk-authorize-page .pgTitle .fm-actions a.fm-btn {
    border-color: rgba(10, 53, 93, 0.28);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.95) 0%, rgba(230, 240, 251, 0.95) 100%);
    color: rgba(10, 36, 63, 0.95) !important;
    box-shadow: 0 1px 0 rgba(255,255,255,.95) inset, 0 4px 12px rgba(11, 43, 79, 0.14);
}

    html.tc-theme-light .bulk-authorize-page .pgTitle .fm-actions .fm-btn:hover,
    html.tc-theme-light .bulk-authorize-page .pgTitle .fm-actions button.fm-btn:hover,
    html.tc-theme-light .bulk-authorize-page .pgTitle .fm-actions a.fm-btn:hover {
        border-color: rgba(25, 103, 161, 0.45);
        background: linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(218, 235, 252, 0.98) 100%);
        color: rgba(7, 30, 56, 0.98) !important;
    }

html.tc-theme-dark .bulk-authorize-page .tc-surface {
    background: linear-gradient(180deg, rgba(14, 23, 37, 0.78) 0%, rgba(9, 17, 30, 0.74) 100%);
    border: 1px solid rgba(165, 214, 255, 0.16);
    backdrop-filter: blur(5px) saturate(112%);
    -webkit-backdrop-filter: blur(5px) saturate(112%);
}

html.tc-theme-dark .bulk-authorize-page .bulk-authorize-summary {
    background: rgba(7, 16, 28, 0.44);
}

/* EUS Template Generator — same map+sideData grid as editdevices (.pgTitle + .fm-page direct children of section, like EditDevices) */
.tc-main .contentbody.tc-page-eustemplate > .pgTitle {
    flex: 0 0 auto;
}

.tc-main .contentbody.tc-map-side-view.tc-page-eustemplate .fm-body {
    min-height: min(85vh, calc(100vh - 120px));
}
/* Desktop: left column ~1/3 of row; preview centered with horizontal inset (form scales inside #tcEUStile) */
@media (min-width: 769px) {
    .tc-main .contentbody.tc-map-side-view.tc-page-eustemplate .fm-body {
        grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) !important;
    }

        .tc-main .contentbody.tc-map-side-view.tc-page-eustemplate .fm-body #sideData,
        .tc-main .contentbody.tc-map-side-view.tc-page-eustemplate #sideData {
            max-width: none !important;
        }

            .tc-main .contentbody.tc-map-side-view.tc-page-eustemplate #sideData .tc-eus-preview-wrap {
                align-items: center;
                padding: 16px 22px;
            }
}

.tc-main .contentbody.tc-map-side-view.tc-page-eustemplate .fm-mapwrap.tc-eus-mapwrap {
    position: relative;
    min-height: 0;
}

.tc-main .contentbody.tc-map-side-view.tc-page-eustemplate .tc-eus-editor-panel {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100% !important;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

.tc-main .contentbody.tc-map-side-view.tc-page-eustemplate #sideData .tc-eus-preview-wrap {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: stretch;
    align-content: center;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 14px 16px;
    box-sizing: border-box;
    -webkit-overflow-scrolling: touch;
}

.tc-main .contentbody.tc-map-side-view.tc-page-eustemplate #sideData #tempLeft {
    position: static !important;
    width: 100% !important;
    max-width: 460px;
    min-width: 0 !important;
    height: auto !important;
    margin: 0 auto !important;
    top: auto !important;
    left: auto !important;
    border-right: none !important;
    z-index: auto !important;
}

/* EUS: preview column (left) — transparent in dark UI, solid white in light */
.tc-main .contentbody.tc-map-side-view.tc-page-eustemplate #sideData {
    background: transparent !important;
}

html.tc-theme-light .tc-main .contentbody.tc-map-side-view.tc-page-eustemplate #sideData {
    background: #fff !important;
    color: rgba(10, 18, 32, .92);
    border-color: rgba(0, 0, 0, .1) !important;
}

/*
 * EUS mobile / narrow: do not use map+sideData “fixed overlay” pattern — stack preview
 * then editor and let the page scroll (otherwise fm-body overflow:hidden traps content
 * and the editor below the fold is unreachable).
 */
/* Tablet: keep 2-col EUS grid but allow vertical scroll (fm-body overflow:hidden traps content) */
@media (min-width: 769px) and (max-width: 991px) {
    body.tc-app section.contentbody.tc-map-side-view.tc-page-eustemplate {
        height: auto !important;
        max-height: none !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch;
    }

    .tc-main .contentbody.tc-map-side-view.tc-page-eustemplate {
        height: auto !important;
        overflow: visible !important;
    }

        .tc-main .contentbody.tc-map-side-view.tc-page-eustemplate .fm-body {
            overflow: visible !important;
            height: auto !important;
        }

        .tc-main .contentbody.tc-map-side-view.tc-page-eustemplate .fm-mapwrap.tc-eus-mapwrap {
            min-height: min(72vh, 560px) !important;
        }
}

/* Phone: stack preview + editor; disable sideData fixed overlay for this page */
@media (max-width: 768px) {
    body.tc-app section.contentbody.tc-map-side-view.tc-page-eustemplate {
        height: auto !important;
        max-height: none !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch;
    }

    .tc-main .contentbody.tc-map-side-view.tc-page-eustemplate {
        height: auto !important;
        min-height: 0 !important;
        overflow: visible !important;
    }

        .tc-main .contentbody.tc-map-side-view.tc-page-eustemplate .fm-page {
            flex: 0 0 auto !important;
            overflow: visible !important;
        }

        .tc-main .contentbody.tc-map-side-view.tc-page-eustemplate .fm-body {
            display: flex !important;
            flex-direction: column !important;
            align-items: stretch !important;
            height: auto !important;
            min-height: 0 !important;
            overflow: visible !important;
            grid-template-columns: 1fr !important;
            grid-template-rows: none !important;
        }

            .tc-main .contentbody.tc-map-side-view.tc-page-eustemplate .fm-side#sideData,
            .tc-main .contentbody.tc-map-side-view.tc-page-eustemplate .fm-body #sideData,
            .tc-main .contentbody.tc-map-side-view.tc-page-eustemplate #sideData {
                position: relative !important;
                top: auto !important;
                left: auto !important;
                right: auto !important;
                bottom: auto !important;
                width: 100% !important;
                max-width: none !important;
                min-height: 0 !important;
                z-index: auto !important;
                display: flex !important;
                flex: 0 0 auto !important;
                overflow: visible !important;
                order: 1 !important;
            }

        .tc-main .contentbody.tc-map-side-view.tc-page-eustemplate .fm-mapwrap.tc-eus-mapwrap {
            position: relative !important;
            order: 2 !important;
            flex: 0 0 auto !important;
            min-height: min(70vh, 520px) !important;
            height: auto !important;
            width: 100% !important;
            overflow: visible !important;
        }

        .tc-main .contentbody.tc-map-side-view.tc-page-eustemplate .tc-eus-editor-panel {
            position: relative !important;
            top: auto !important;
            left: auto !important;
            right: auto !important;
            bottom: auto !important;
            width: 100% !important;
            height: auto !important;
            min-height: min(70vh, 520px) !important;
            overflow: visible !important;
        }

        .tc-main .contentbody.tc-map-side-view.tc-page-eustemplate #sideData .tc-eus-preview-wrap {
            overflow: visible !important;
            justify-content: flex-start !important;
        }

        .tc-main .contentbody.tc-map-side-view.tc-page-eustemplate .fm-body .fm-mapwrap::after {
            display: none !important;
            opacity: 0 !important;
            pointer-events: none !important;
        }
}

.pgTitle h1,
.pgTitle .fm-h1 {
    color: inherit;
    margin: 0;
    font-size: 1.25rem;
    font-weight: 700;
}

html.tc-theme-dark .pgTitle h1,
html.tc-theme-dark .pgTitle .fm-h1,
body.tc-app .pgTitle h1 {
    color: rgba(246,248,252,.95);
}

html.tc-theme-light .pgTitle h1,
html.tc-theme-light .pgTitle .fm-h1 {
    color: rgba(10,18,32,.92);
}

.pgTitle .fm-btn {
    margin: 0;
    padding: 0.375rem 0.5rem;
}

.input-group-addon {
    align-content: center;
    margin: 3px;
}

/* EUS Analytics in flip container */
.tc-eus-analytics {
    width: 100%;
    max-width: 100%;
    margin: 0;
    color: var(--tc-text, rgba(235, 243, 255, .95));
}

.tc-eus-analytics__head {
    margin-bottom: 12px;
}

.tc-eus-analytics__title {
    margin: 0;
    font-size: 1.08rem;
    line-height: 1.3;
    font-weight: 700;
}

.tc-eus-analytics__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 10px;
}

.tc-eus-analytics__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 12px;
    background: rgba(255,255,255,.03);
    padding: 10px 12px;
}

.tc-eus-analytics__label {
    display: block;
    font-size: .95rem;
    line-height: 1.25;
    color: rgba(235, 243, 255, .9);
}

.tc-eus-analytics__value {
    display: inline-block;
    min-width: 2.4ch;
    text-align: right;
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1;
    color: rgba(255, 255, 255, .98);
}

.tc-eus-analytics__empty {
    border: 1px dashed rgba(255,255,255,.22);
    border-radius: 12px;
    padding: 18px 14px;
    text-align: center;
    color: rgba(230, 240, 255, .8);
}

html.tc-theme-light .tc-eus-analytics {
    color: rgba(16, 28, 48, .95);
}

html.tc-theme-light .tc-eus-analytics__item {
    border-color: rgba(11, 31, 64, .16);
    background: rgba(255,255,255,.62);
}

html.tc-theme-light .tc-eus-analytics__label {
    color: rgba(16, 28, 48, .88);
}

html.tc-theme-light .tc-eus-analytics__value {
    color: rgba(9, 24, 46, .98);
}

html.tc-theme-light .tc-eus-analytics__empty {
    border-color: rgba(11, 31, 64, .24);
    color: rgba(18, 34, 58, .78);
}

@media (max-width: 640px) {
    .tc-eus-analytics__grid {
        grid-template-columns: 1fr;
    }
}

/* EUS Settings in flip container */
.tc-eus-settings {
    width: 100%;
    max-width: 100%;
    margin: 0;
    color: var(--tc-text, rgba(235, 243, 255, .95));
}

.tc-eus-settings__head {
    margin-bottom: 12px;
}

.tc-eus-settings__title {
    margin: 0;
    font-size: 1.08rem;
    line-height: 1.3;
    font-weight: 700;
}

.tc-eus-settings__body {
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 14px;
    background: rgba(255,255,255,.03);
    padding: 14px;
}

.tc-eus-settings__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px 18px;
}

.tc-eus-settings .fm-field {
    margin: 0;
}

.tc-eus-settings .fm-field-full {
    grid-column: 1 / -1;
}

.tc-eus-settings .fm-label,
.tc-eus-settings .form-check-label {
    color: inherit;
}

.tc-eus-settings .form-control,
.tc-eus-settings .form-select {
    background: rgba(8, 14, 25, .42);
    border-color: rgba(255,255,255,.16);
    color: inherit;
}

.tc-eus-settings .text-muted {
    color: rgba(215, 228, 248, .78) !important;
}

/* Link list: muted metadata must stay readable in dark mode */
html.tc-theme-dark #tcLinksListRoot .text-muted {
    color: var(--tc-muted2) !important;
}

/* Link list: bootstrap default buttons need dark-theme contrast */
html.tc-theme-dark #tcLinksListRoot .btn.btn-default {
    color: var(--tc-fg) !important;
    background-color: rgba(255,255,255,.08) !important;
    border-color: rgba(255,255,255,.20) !important;
}

    html.tc-theme-dark #tcLinksListRoot .btn.btn-default:hover {
        background-color: rgba(255,255,255,.14) !important;
    }

html.tc-theme-dark #tcLinksListRoot #tcLinksSortDir {
    color: #e9f2ff !important;
    font-weight: 700;
}

/* Link list: add breathing room between addon labels and inputs */
#tcLinksListRoot .input-group > .input-group-addon {
    padding-right: 10px;
}

/* EditLinks: keep side form readable and fully scrollable */
.tc-main .contentbody.editlinks-page.tc-map-side-view .fm-side#sideData,
.tc-main .contentbody.editlinks-page.tc-map-side-view .fm-body #sideData,
.tc-main .contentbody.editlinks-page.tc-map-side-view #sideData {
    height: 100% !important;
    max-height: 100% !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding: 10px !important;
    box-sizing: border-box;
    display: flex !important;
    flex-direction: column !important;
    gap: 10px;
    min-height: 0;
}

    .tc-main .contentbody.editlinks-page.tc-map-side-view #sideData .fm-card {
        min-height: 0;
    }

        .tc-main .contentbody.editlinks-page.tc-map-side-view #sideData .fm-card.fm-card-small {
            flex: 0 0 auto;
        }

        .tc-main .contentbody.editlinks-page.tc-map-side-view #sideData .fm-card:not(.fm-card-small) {
            flex: 1 1 auto;
            display: flex;
            flex-direction: column;
            min-height: 0;
        }

    .tc-main .contentbody.editlinks-page.tc-map-side-view #sideData .fm-cardbody {
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
        overflow-x: hidden;
        padding: 12px 14px;
    }

/* Link group list: dark-mode button/icon contrast */
html.tc-theme-dark #tcLinkGroupsListRoot .btn.btn-default {
    color: var(--tc-fg) !important;
    background-color: rgba(255,255,255,.08) !important;
    border-color: rgba(255,255,255,.20) !important;
}

    html.tc-theme-dark #tcLinkGroupsListRoot .btn.btn-default:hover {
        background-color: rgba(255,255,255,.14) !important;
    }

html.tc-theme-dark #tcLinkGroupsListRoot #tcLinkGroupsSortDir {
    color: #e9f2ff !important;
    font-weight: 700;
}

/* Link group list: spacing between Search/Sort labels and controls */
#tcLinkGroupsListRoot .input-group > .input-group-addon {
    padding-right: 10px;
}

html.tc-theme-light .tc-eus-settings {
    color: rgba(12, 26, 44, .95);
}

html.tc-theme-light .tc-eus-settings__body {
    border-color: rgba(11, 31, 64, .16);
    background: rgba(255,255,255,.62);
}

html.tc-theme-light .tc-eus-settings .form-control,
html.tc-theme-light .tc-eus-settings .form-select {
    background: rgba(255,255,255,.92);
    border-color: rgba(11, 31, 64, .18);
    color: rgba(12, 26, 44, .96);
}

html.tc-theme-light .tc-eus-settings .text-muted {
    color: rgba(26, 46, 71, .72) !important;
}

@media (max-width: 900px) {
    .tc-eus-settings__grid {
        grid-template-columns: 1fr;
    }
}

.input-group-btn button {
    visibility: hidden;
}