/* =========================================================================
   SaaS admin theme for DotFlow（參考 Linear / Stripe / shadcn 的現代設計語言）

   設計原則：
   - 品牌紫（indigo #4F46E5）滲透：主按鈕、選中態、頭像、分頁器、focus ring
   - 帶藍灰的 off-white 畫布（#F5F6FA），白色工作面浮在上面，層次靠色階差
   - 1px 低對比邊框取代陰影；陰影僅用於彈出層（dropdown / modal）
   - radius token：控制項 10px、卡片 14px、彈窗 16px、pill 全圓角
   - 8px spacing 網格；字重對比撐起層級（大數字 700、輔助文字 400 灰）
   ========================================================================= */

:root {
    /* 品牌紫 */
    --stocks-primary: #4f46e5;
    --stocks-primary-dark: #4338ca;
    --stocks-primary-deeper: #3730a3;
    --stocks-primary-soft: #eef2ff;
    --stocks-primary-softer: #e0e7ff;
    --stocks-primary-border: #c7d2fe;
    --stocks-primary-rgb: 79, 70, 229;

    /* 中性色（往品牌紫方向微調的藍灰階） */
    --stocks-bg: #f5f6fa;
    --stocks-surface: #ffffff;
    --stocks-surface-sunken: #f8f9fc;
    --stocks-border: #e4e7ef;
    --stocks-border-soft: #eef0f5;
    --stocks-heading: #1a2138;
    --stocks-text: #3d465f;
    --stocks-muted: #5e6883;
    --stocks-subtle: #8b93a9;

    /* 語意色（soft 底 + 深文字，五種 pill） */
    --stocks-green: #16a34a;
    --stocks-green-ink: #166534;
    --stocks-green-soft: #e3f5eb;
    --stocks-green-border: #86efac;
    --stocks-red: #dc2626;
    --stocks-red-ink: #b91c1c;
    --stocks-red-soft: #fdebec;
    --stocks-red-border: #fca5a5;
    --stocks-amber: #d97706;
    --stocks-amber-ink: #92400e;
    --stocks-amber-soft: #fbf1de;
    --stocks-blue: #2563eb;
    --stocks-blue-ink: #1d4ed8;
    --stocks-blue-soft: #e8f1fe;

    /* radius token */
    --stocks-radius-sm: .5rem;    /*  8px：chip、小控制項 */
    --stocks-radius: .625rem;     /* 10px：按鈕、輸入框 */
    --stocks-radius-lg: .875rem;  /* 14px：卡片 */
    --stocks-radius-xl: 1rem;     /* 16px：modal */
    --stocks-radius-pill: 999px;

    /* 陰影（極輕；分隔靠邊框） */
    --stocks-shadow-xs: 0 1px 2px rgba(20, 24, 50, .04);
    --stocks-shadow-pop: 0 12px 32px -8px rgba(20, 24, 50, .16);

    /* focus ring */
    --stocks-ring: 0 0 0 .1875rem rgba(79, 70, 229, .15);
    --stocks-ring-border: #a5b4fc;

    --stocks-sidebar-width: 13rem;
    --stocks-font: "Inter", "Noto Sans TC", "Microsoft JhengHei", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

    /* Backward-compatible aliases used by older local CSS. */
    --mazer-primary: var(--stocks-primary);
    --mazer-primary-dark: var(--stocks-primary-dark);
    --mazer-primary-rgb: var(--stocks-primary-rgb);
    --mazer-body-bg: var(--stocks-bg);
    --mazer-body-color: var(--stocks-muted);
    --mazer-heading: var(--stocks-heading);
    --mazer-card-shadow: var(--stocks-shadow-xs);
    --mazer-radius: var(--stocks-radius-lg);
    --mazer-font: var(--stocks-font);
}

html:not(.dark) {
    --falcon-primary: var(--stocks-primary);
    --falcon-primary-rgb: var(--stocks-primary-rgb);
    --falcon-body-bg: var(--stocks-bg);
    --falcon-body-color: var(--stocks-text);
    --falcon-card-bg: var(--stocks-surface);
    --falcon-border-color: var(--stocks-border);
    --falcon-link-color: var(--stocks-primary);
    --falcon-link-hover-color: var(--stocks-primary-dark);
}

html:not(.dark),
html:not(.dark) body {
    background: var(--stocks-bg);
    color: var(--stocks-text);
}

body,
.tooltip,
.popover,
.font-sans-serif {
    font-family: var(--stocks-font) !important;
}

body {
    font-size: 14px;
    letter-spacing: 0;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    color: var(--stocks-heading);
    font-family: var(--stocks-font);
    font-weight: 700;
    letter-spacing: -.01em;
}

html:not(.dark) .text-primary {
    color: var(--stocks-primary) !important;
}

html:not(.dark) .bg-primary {
    background-color: var(--stocks-primary) !important;
}

html:not(.dark) .text-success {
    color: var(--stocks-green) !important;
}

html:not(.dark) .text-danger {
    color: var(--stocks-red) !important;
}

html:not(.dark) .text-700,
html:not(.dark) .text-800,
html:not(.dark) .text-900 {
    color: var(--stocks-heading) !important;
}

html:not(.dark) .text-600 {
    color: var(--stocks-muted) !important;
}

main > .container[data-layout],
main > .container-fluid[data-layout],
#app main > .container[data-layout],
#app main > .container-fluid[data-layout] {
    max-width: none;
    padding-left: 0;
    padding-right: 0;
}

.content {
    min-width: 0;
}

@media (min-width: 1200px) {
    .navbar-vertical.navbar-expand-xl + .content {
        margin-left: var(--stocks-sidebar-width);
    }

    .content {
        padding: 0 1.25rem 1.25rem;
    }

    .navbar-vertical-collapsed .navbar-vertical.navbar-expand-xl + .content {
        margin-left: 4rem;
    }
}

@media (max-width: 1199.98px) {
    .content {
        padding: 0 1rem 1rem;
    }
}

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

html:not(.dark) .navbar-vertical,
html:not(.dark) .navbar-vertical .navbar-collapse,
html:not(.dark) .navbar-vertical .navbar-vertical-content {
    background: var(--stocks-surface);
}

html:not(.dark) .navbar-vertical {
    border-right: 1px solid var(--stocks-border);
    box-shadow: none;
}

@media (min-width: 1200px) {
    .navbar-vertical.navbar-expand-xl {
        left: 0;
        max-width: var(--stocks-sidebar-width);
        width: var(--stocks-sidebar-width);
    }

    .navbar-vertical.navbar-expand-xl .navbar-collapse,
    .navbar-vertical.navbar-expand-xl .navbar-vertical-content {
        width: var(--stocks-sidebar-width);
    }

    /* 收合狀態：側欄固定 4rem (與 .content 的 margin-left 對齊)，品牌區只顯示置中的 Logo */
    .navbar-vertical-collapsed .navbar-vertical.navbar-expand-xl {
        width: 4rem;
        max-width: 4rem;
    }

    .navbar-vertical-collapsed .navbar-vertical.navbar-expand-xl .navbar-collapse {
        width: 4rem !important;
        margin-left: 0;
    }

    .navbar-vertical-collapsed .navbar-vertical.navbar-expand-xl .navbar-brand.smart-brand {
        padding: 0;
    }

    .navbar-vertical-collapsed .navbar-vertical.navbar-expand-xl .navbar-brand.smart-brand > div {
        justify-content: center;
    }

    .navbar-vertical-collapsed .navbar-vertical.navbar-expand-xl .smart-brand-mark {
        margin-right: 0;
    }

    .navbar-vertical-collapsed .navbar-vertical.navbar-expand-xl .smart-brand-copy {
        display: none;
    }

    /* 收合時 topbar (切換選單 + 系統名稱) 靠左，覆蓋 Falcon 預設的 13.5rem 縮排 */
    .navbar-vertical-collapsed .navbar-vertical.navbar-expand-xl + .content .navbar-top {
        padding-left: .75rem;
    }

    /* 收合 + 滑鼠移入展開：還原側欄寬度與品牌區 (規則需在收合規則之後才能覆蓋) */
    .navbar-vertical-collapsed-hover .navbar-vertical.navbar-expand-xl {
        width: var(--stocks-sidebar-width);
        max-width: var(--stocks-sidebar-width);
    }

    .navbar-vertical-collapsed-hover .navbar-vertical.navbar-expand-xl .navbar-collapse {
        width: var(--stocks-sidebar-width) !important;
        margin-left: 0;
    }

    .navbar-vertical-collapsed-hover .navbar-vertical.navbar-expand-xl .navbar-brand.smart-brand {
        padding: 0 1.5rem;
    }

    .navbar-vertical-collapsed-hover .navbar-vertical.navbar-expand-xl .navbar-brand.smart-brand > div {
        justify-content: flex-start;
    }

    .navbar-vertical-collapsed-hover .navbar-vertical.navbar-expand-xl .smart-brand-mark {
        margin-right: .75rem;
    }

    .navbar-vertical-collapsed-hover .navbar-vertical.navbar-expand-xl .smart-brand-copy {
        display: flex;
    }
}

.navbar-vertical .navbar-brand.smart-brand {
    width: 100%;
    margin: 0;
    padding: 0 .625rem;
    white-space: normal;
}

/* 品牌區可斷行後高度不固定，Falcon 寫死的 calc(100vh - 4.3125rem)
   會把 footer 推出畫面；改用 flex 分配側欄高度 */
@media (min-width: 1200px) {
    .navbar-vertical.navbar-expand-xl {
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        align-items: stretch;
    }

    .navbar-vertical.navbar-expand-xl .navbar-collapse {
        display: flex !important;
        flex-direction: column;
        flex: 1 1 auto;
        min-height: 0;
    }

    .navbar-vertical.navbar-expand-xl .navbar-vertical-content {
        flex: 1 1 auto;
        min-height: 0;
        height: auto;
        max-height: none;
    }

    /* 收合（未 hover 展開）時還原 Falcon 原生佈局，確保 icon 欄正常顯示 */
    .navbar-vertical-collapsed:not(.navbar-vertical-collapsed-hover) .navbar-vertical.navbar-expand-xl .navbar-collapse {
        display: inline-block !important;
    }

    /* 5.25rem = 品牌區高度（logo 3.25rem + 上下 padding 2rem） */
    .navbar-vertical-collapsed:not(.navbar-vertical-collapsed-hover) .navbar-vertical.navbar-expand-xl .navbar-vertical-content {
        height: calc(100vh - 5.25rem);
        max-height: calc(100vh - 5.25rem);
    }

    .navbar-vertical-collapsed:not(.navbar-vertical-collapsed-hover) .navbar-vertical.navbar-expand-xl .navbar-vertical-content > .navbar-nav {
        flex: 0 0 auto;
        min-height: auto;
        overflow: visible;
    }
}

/* 品牌區與選單之間的滿版分隔線（畫在選單容器上緣，寬度貫穿整個側欄） */
html:not(.dark) .navbar-vertical #navbarVerticalCollapse {
    border-top: 1px solid var(--stocks-border);
}

.smart-brand-mark {
    width: 3.25rem;
    height: 3.25rem;
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
    margin-right: .5rem;
    overflow: hidden;
    border-radius: var(--stocks-radius);
    background: transparent;
}

.smart-brand-mark img {
    width: 3.25rem;
    height: 3.25rem;
    object-fit: contain;
}

.smart-brand-copy {
    display: flex;
    min-width: 0;
    flex-direction: column;
    line-height: 1.2;
    text-align: left;
}

.smart-brand-title {
    color: var(--stocks-heading);
    font-size: .9375rem;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -.01em;
    white-space: normal;
    overflow-wrap: anywhere;
    text-wrap: balance;
}

.smart-brand-subtitle {
    margin-top: .125rem;
    /* subtle(#8b93a9) 對白底僅 3.07:1，副標是實際文字，改用 muted(5.55:1) */
    color: var(--stocks-muted);
    font-size: .75rem;
    font-weight: 400;
}

.navbar-vertical .navbar-vertical-content {
    padding: 1rem .75rem;
}

html:not(.dark) .navbar-vertical .navbar-nav .nav-link {
    min-height: 2.5rem;
    margin: .125rem 0;
    padding: .5rem .75rem;
    border-radius: var(--stocks-radius);
    color: var(--stocks-text);
    font-size: .875rem;
    transition: background-color .15s cubic-bezier(.25, 1, .5, 1), color .15s cubic-bezier(.25, 1, .5, 1);
}

/* 蓋掉標記上的 fs-1 / fw-bold 工具類別：主選單 14px / 子選單 13px、字重 500 */
.navbar-vertical .navbar-nav .nav-link .nav-link-text.fs-1 {
    font-size: .875rem !important;
    font-weight: 500 !important;
}

.navbar-vertical .navbar-nav .nav-link .nav-link-text.fs-0 {
    font-size: .8125rem !important;
    font-weight: 500 !important;
}

.navbar-vertical .navbar-nav .nav-link .nav-link-icon .fs-1 {
    font-size: 1rem !important;
}

html:not(.dark) .navbar-vertical .navbar-nav .nav-link:hover {
    background: var(--stocks-bg);
    color: var(--stocks-heading);
}

/* 選中態：品牌紫 soft 底 + 紫字（品牌色滲透，不用實心塊） */
#navbarVerticalCollapse .nav-link.active,
html:not(.dark) .navbar-vertical .navbar-nav .nav-link.active {
    background: var(--stocks-primary-soft) !important;
    color: var(--stocks-primary) !important;
}

html:not(.dark) .navbar-vertical .navbar-nav .nav-link.active .nav-link-icon,
html:not(.dark) .navbar-vertical .navbar-nav .nav-link.active .nav-link-icon > span,
html:not(.dark) .navbar-vertical .navbar-nav .nav-link.active .nav-link-text {
    color: var(--stocks-primary) !important;
}

.navbar-vertical .navbar-nav .nav-link.active .nav-link-text.fs-1,
.navbar-vertical .navbar-nav .nav-link.active .nav-link-text.fs-0 {
    font-weight: 600 !important;
}

.navbar-vertical .nav-link-icon {
    width: 1.25rem;
    text-align: center;
    color: var(--stocks-subtle);
}

/* 父層選單的展開箭頭：靠右內縮 10px */
.dropdown-indicator:after {
    right: 10px;
}

html:not(.dark) .navbar-vertical .navbar-nav .nav-link:hover .nav-link-icon {
    color: var(--stocks-heading);
}

.navbar-vertical .nav-link-text {
    color: currentColor;
}

.navbar-vertical .nav.collapse .nav-link {
    min-height: 2.25rem;
    margin-left: 2rem;
    padding: .4375rem .75rem;
    color: var(--stocks-muted);
    font-size: .8125rem;
}

/* -------------------------------------------------------------------------
   Sidebar footer（系統工具 + 使用者，自頂端列移入）
   ------------------------------------------------------------------------- */

/* Falcon 預設在 .navbar-collapse 與 .navbar-vertical-content > * 上設 overflow: hidden，
   會把 footer 的彈出選單（測試模式、使用者選單）裁掉。
   改為只讓選單清單本身捲動，外層放開 overflow。
   （桌機收合態的 overflow: hidden 由 Falcon 更高特異度的規則維持，不受影響） */
.navbar-vertical .navbar-collapse {
    overflow: visible;
}

.navbar-vertical .navbar-collapse .navbar-vertical-content.scrollbar {
    overflow: visible;
}

.navbar-vertical .navbar-collapse .navbar-vertical-content > .navbar-nav {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden auto;
}

.navbar-vertical .navbar-collapse .navbar-vertical-content > .smart-sidebar-footer {
    overflow: visible;
}

.smart-sidebar-footer {
    margin-top: auto;
    padding: .75rem 0 .25rem;
    border-top: 1px solid var(--stocks-border);
}

/* Bootstrap 在 .navbar 內不啟用 Popper 定位，選單會跑位；
   改以 CSS 錨定：貼著觸發項目往上開、對齊左緣 */
.smart-sidebar-footer .dropdown-menu.show {
    position: absolute !important;
    inset: auto auto 100% 0 !important;
    margin: 0 0 .375rem !important;
    transform: none !important;
}

/* 四個工具（測試模式時鐘、手冊、設定、主題）須同列：
   不用負邊距（OverlayScrollbars 會裁掉超出內容框的部分），
   改為去除 gap、靠左依序排列；項目過多（如觀察模式同開）才允許換行 */
.smart-sidebar-tools {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    margin-left: 0.5rem;
    padding: 0;
    list-style: none;
}

.smart-sidebar-tools .nav-item > a,
.smart-sidebar-tools .nav-item > button,
.smart-sidebar-tools .nav-item > div > a,
.smart-sidebar-tools .theme-control-toggle-label {
    appearance: none;
    /* 寬 30px 讓時鐘＋三顆 icon 能同列；高度保持 36px 觸控目標 */
    min-width: 1.875rem;
    min-height: 2.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: var(--stocks-radius);
    background: transparent;
    color: var(--stocks-muted);
    text-decoration: none;
    cursor: pointer;
    transition: background-color .15s cubic-bezier(.25, 1, .5, 1), color .15s cubic-bezier(.25, 1, .5, 1);
}

.smart-sidebar-tools .nav-item > a:hover,
.smart-sidebar-tools .nav-item > button:hover,
.smart-sidebar-tools .nav-item > div > a:hover,
.smart-sidebar-tools .theme-control-toggle-label:hover {
    background: var(--stocks-bg);
    color: var(--stocks-heading);
}

.smart-sidebar-tools .nav-item > button:focus-visible,
.smart-sidebar-user-btn:focus-visible {
    outline: none;
    box-shadow: var(--stocks-ring);
}

/* 測試模式時鐘 / 觀察模式：文字型項目，與三顆 icon 按鈕同列。
   字體釘回 token（Falcon 會在此元素指定 Poppins，數字較寬會擠掉同列餘裕） */
.smart-sidebar-tools #navbarDropdownTestMode,
.smart-sidebar-tools #navbarDropdownWatchMode {
    justify-content: flex-start;
    padding: 0;
    font-family: var(--stocks-font);
    font-size: .6875rem;
    font-weight: 600;
    letter-spacing: -.01em;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.smart-sidebar-user {
    position: relative;
}

.smart-sidebar-user-btn {
    appearance: none;
    width: 100%;
    display: flex;
    align-items: center;
    gap: .625rem;
    padding: .375rem .5rem;
    border: 0;
    border-radius: var(--stocks-radius);
    background: transparent;
    font-family: inherit;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .15s cubic-bezier(.25, 1, .5, 1);
}

.smart-sidebar-user-btn:hover {
    background: var(--stocks-bg);
}

.smart-sidebar-user-icon {
    flex: 0 0 auto;
    color: var(--stocks-muted);
    font-size: 1.625rem;
    line-height: 1;
}

/* 頭貼：與未設定時的 fa-user-circle 同尺寸，換上圖片時整列高度不會跳動 */
.smart-sidebar-user-avatar {
    flex: 0 0 auto;
    width: 1.625rem;
    height: 1.625rem;
    border-radius: 50%;
    object-fit: cover;
    background: var(--stocks-bg);
}

/* 下拉選單頂端的作用中公司：非可點項目，樣式刻意與 dropdown-item 區隔 */
.smart-sidebar-user-company {
    padding: .35rem 1rem .25rem;
    color: var(--stocks-muted);
    font-size: .75rem;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.smart-sidebar-user-copy {
    display: flex;
    min-width: 0;
    flex: 1 1 auto;
    flex-direction: column;
    line-height: 1.25;
}

.smart-sidebar-user-name {
    color: var(--stocks-heading);
    font-size: .8125rem;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 名稱下方的登入帳號：帳號多為 email，長度不可控，與名稱同樣截斷不撐破側欄 */
.smart-sidebar-user-account {
    color: var(--stocks-muted);
    font-size: .75rem;
    font-weight: 400;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.smart-sidebar-user-caret {
    flex: 0 0 auto;
    color: var(--stocks-subtle);
    font-size: .75rem;
}

.smart-sidebar-user .dropdown-menu {
    width: 100%;
    min-width: 0;
}


/* 收合側欄（4rem）時空間不足，隱藏底部區；滑入展開時還原 */
@media (min-width: 1200px) {
    .navbar-vertical-collapsed .navbar-vertical.navbar-expand-xl .smart-sidebar-footer {
        display: none;
    }

    .navbar-vertical-collapsed-hover .navbar-vertical.navbar-expand-xl .smart-sidebar-footer {
        display: block;
    }
}

/* -------------------------------------------------------------------------
   Topbar
   ------------------------------------------------------------------------- */

html:not(.dark) .navbar-top.navbar-glass {
    min-height: 4rem;
    margin: 0 -1.25rem 1.25rem;
    padding: .625rem 1.25rem .625rem .75rem;
    border-bottom: 1px solid var(--stocks-border);
    border-radius: 0;
    background: var(--stocks-surface);
    box-shadow: none;
}

@media (max-width: 1199.98px) {
    html:not(.dark) .navbar-top.navbar-glass {
        margin: 0 -1rem 1rem;
        padding: .5rem 1rem;
    }

    /* navbar-expand 預設 nowrap，窄視窗操作鈕放不下會整排溢出被裁切；
       改為允許換行，掉到第二行靠右排 */
    .navbar-top.navbar-glass {
        flex-wrap: wrap;
        row-gap: .375rem;
    }

    .smart-topbar-actions {
        min-width: 0;
        flex-wrap: wrap;
        justify-content: flex-end;
    }
}

.smart-topbar-left {
    display: flex;
    align-items: center;
    min-width: 0;
    gap: .75rem;
}

.smart-topbar-title {
    min-width: 0;
}

.smart-topbar-title h1 {
    max-width: min(48vw, 42rem);
    margin: 0;
    color: var(--stocks-heading);
    font-size: 1.125rem;
    line-height: 1.3;
    font-weight: 700;
    letter-spacing: -.01em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.navbar-top .navbar-toggler-humburger-icon {
    width: 2.25rem;
    height: 2.25rem;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0;
    border: 1px solid var(--stocks-border);
    border-radius: var(--stocks-radius);
    color: var(--stocks-muted);
    background: var(--stocks-surface);
}

.navbar-top .navbar-toggler-humburger-icon:hover {
    border-color: var(--stocks-primary-border);
    color: var(--stocks-primary);
}

.navbar-top .navbar-nav-icons {
    gap: .25rem;
}

.navbar-top .nav-item > a,
.navbar-top .nav-item > div > a,
.navbar-top .theme-control-toggle-label,
.navbar-top .nav-link {
    min-width: 2.25rem;
    min-height: 2.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--stocks-radius);
    color: var(--stocks-muted);
    text-decoration: none;
    transition: background-color .15s cubic-bezier(.25, 1, .5, 1), color .15s cubic-bezier(.25, 1, .5, 1);
}

.navbar-top .nav-item > a:hover,
.navbar-top .nav-item > div > a:hover,
.navbar-top .theme-control-toggle-label:hover,
.navbar-top .nav-link:hover {
    background: var(--stocks-bg);
    color: var(--stocks-heading);
}

/* 頂端列右側：頁面主要操作（由 HeaderFunction teleport 而來） */
.smart-topbar-actions {
    display: flex;
    align-items: center;
    gap: .5rem;
}

/* 右上角登出按鈕：描邊方形 icon 鈕，hover 帶入危險色 */
.smart-topbar-logout {
    width: 2.25rem;
    height: 2.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    margin-left: .75rem;
    border: 1px solid var(--stocks-border);
    border-radius: var(--stocks-radius);
    color: var(--stocks-muted);
    background: var(--stocks-surface);
    text-decoration: none;
    cursor: pointer;
    transition: background-color .15s cubic-bezier(.25, 1, .5, 1), border-color .15s cubic-bezier(.25, 1, .5, 1), color .15s cubic-bezier(.25, 1, .5, 1);
}

.smart-topbar-logout:hover,
.smart-topbar-logout:focus {
    border-color: var(--stocks-red-border);
    background: var(--stocks-red-soft);
    color: var(--stocks-red);
}

/* 桌機頂端列 padding-right 1.25rem，負邊距讓按鈕距視窗邊緣 .5rem；
   窄視窗內距只剩 1rem，不外推（media 不影響優先權，須寫在基礎規則之後） */
@media (min-width: 1200px) {
    .smart-topbar-logout {
        margin-right: -.75rem;
    }
}

/* -------------------------------------------------------------------------
   Cards and work surfaces
   ------------------------------------------------------------------------- */

.card {
    border-radius: var(--stocks-radius-lg);
}

.modal-content {
    border-radius: var(--stocks-radius-xl);
}

.dropdown-menu {
    border-radius: calc(var(--stocks-radius) + 2px);
}

html:not(.dark) .card {
    border: 1px solid var(--stocks-border);
    background: var(--stocks-surface);
    box-shadow: var(--stocks-shadow-xs);
}

.card-header {
    border-bottom: 1px solid var(--stocks-border-soft);
    background: var(--stocks-surface);
    padding: 1rem 1.5rem;
    border-top-left-radius: var(--stocks-radius-lg) !important;
    border-top-right-radius: var(--stocks-radius-lg) !important;
}

.card-header h1,
.card-header h2,
.card-header h3,
.card-header h4,
.card-header h5,
.card-header h6 {
    margin: 0;
    font-size: .9375rem;
}

.card-body {
    padding: 1.5rem;
}

html:not(.dark) .card > .card-body.bg-light,
html:not(.dark) .card-body.bg-light {
    background: var(--stocks-surface) !important;
}

.card.mb-3 > .card-body.bg-light {
    padding: 1.25rem 1.5rem;
}

/* 搜尋區：label（col-4）與控制項（col-8）同列、垂直置中對齊 */
.card.mb-3 > .card-body.bg-light > .row > .row[class*="col-"] {
    align-items: center;
    margin-right: 0;
    margin-left: 0;
}

.card.mb-3 > .card-body.bg-light > .row > .row[class*="col-"] .form-label {
    margin-bottom: 0;
}

.card-detail,
.dynamic-form-field,
.menu-area {
    border: 1px solid var(--stocks-border);
    border-radius: var(--stocks-radius-lg);
    box-shadow: none;
}

.bg-hover:hover {
    background: var(--stocks-surface-sunken) !important;
    border-color: var(--stocks-primary-border);
    box-shadow: none;
}

/* -------------------------------------------------------------------------
   Stat cards（統計卡：灰標籤 400 / 大數字 700 / 灰註解）
   ------------------------------------------------------------------------- */

.smart-stat-card {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    padding: 1.25rem 1.5rem;
    border: 1px solid var(--stocks-border);
    border-radius: var(--stocks-radius-lg);
    background: var(--stocks-surface);
    box-shadow: var(--stocks-shadow-xs);
}

.smart-stat-label {
    color: var(--stocks-muted);
    font-size: .8125rem;
    font-weight: 400;
}

.smart-stat-value {
    color: var(--stocks-heading);
    font-size: 1.875rem;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -.02em;
    font-variant-numeric: tabular-nums;
}

.smart-stat-hint {
    color: var(--stocks-muted);
    font-size: .8125rem;
    font-weight: 400;
}

.smart-stat-card--success {
    border-color: var(--stocks-green-border);
}

.smart-stat-card--success .smart-stat-value {
    color: var(--stocks-green);
}

.smart-stat-card--danger {
    border-color: var(--stocks-red-border);
}

.smart-stat-card--danger .smart-stat-value {
    color: var(--stocks-red);
}

/* -------------------------------------------------------------------------
   Avatars（表格列首字縮寫、品牌色滲透）
   ------------------------------------------------------------------------- */

.smart-avatar {
    width: 2.5rem;
    height: 2.5rem;
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
    border-radius: var(--stocks-radius-pill);
    background: var(--stocks-primary-soft);
    color: var(--stocks-primary);
    font-size: .8125rem;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: uppercase;
    user-select: none;
}

.smart-avatar--sm {
    width: 2rem;
    height: 2rem;
    font-size: .6875rem;
}

/* -------------------------------------------------------------------------
   Segmented control（狀態篩選：選中塊 = 深藏青實心）
   ------------------------------------------------------------------------- */

.smart-segmented {
    display: inline-flex;
    align-items: stretch;
    border: 1px solid var(--stocks-border);
    border-radius: var(--stocks-radius);
    background: var(--stocks-surface);
    overflow: hidden;
}

.smart-segmented > button,
.smart-segmented > a,
.smart-segmented > label {
    appearance: none;
    margin: 0;
    padding: .4375rem 1rem;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--stocks-muted);
    font-family: var(--stocks-font);
    font-size: .875rem;
    font-weight: 500;
    line-height: 1.5;
    cursor: pointer;
    transition: background-color .15s cubic-bezier(.25, 1, .5, 1), color .15s cubic-bezier(.25, 1, .5, 1);
}

.smart-segmented > * + * {
    border-left: 1px solid var(--stocks-border-soft);
}

.smart-segmented > button:hover,
.smart-segmented > a:hover,
.smart-segmented > label:hover {
    background: var(--stocks-bg);
    color: var(--stocks-heading);
}

.smart-segmented > .active,
.smart-segmented > button.active,
.smart-segmented > a.active,
.smart-segmented > label.active {
    background: var(--stocks-heading);
    color: #fff;
    font-weight: 600;
}

/* -------------------------------------------------------------------------
   Forms
   ------------------------------------------------------------------------- */

.form-label {
    margin-bottom: .375rem;
    color: var(--stocks-text);
    font-size: .8125rem;
    font-weight: 600;
}

/* 蓋掉標記上的 fs-0 fw-bold（維持 label 統一階層） */
.form-label.fs-0.fw-bold {
    font-size: .8125rem !important;
    font-weight: 600 !important;
}

.form-control,
.form-select,
.choices__inner {
    border-color: var(--stocks-border) !important;
    border-radius: var(--stocks-radius) !important;
    color: var(--stocks-text);
    background-color: var(--stocks-surface);
    box-shadow: none !important;
    transition: border-color .15s cubic-bezier(.25, 1, .5, 1), box-shadow .15s cubic-bezier(.25, 1, .5, 1);
}

.form-control,
.form-select {
    min-height: 2.375rem;
    padding: .4375rem .75rem;
    font-size: .875rem;
}

/* select 右側需保留箭頭圖示空間，維持 Bootstrap 預設 2.25rem */
.form-select {
    padding-right: 2.25rem;
}

.form-control::placeholder {
    color: var(--stocks-muted);
    opacity: 1;
}

.form-control:focus,
.form-select:focus,
.choices.is-focused .choices__inner,
.choices.is-open .choices__inner {
    border-color: var(--stocks-ring-border) !important;
    box-shadow: var(--stocks-ring) !important;
}

.form-check-input {
    border-color: #c4cad9;
}

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

.form-check-input:focus {
    border-color: var(--stocks-ring-border);
    box-shadow: var(--stocks-ring);
}

.input-group-text {
    border-color: var(--stocks-border);
    border-radius: var(--stocks-radius);
    background: var(--stocks-surface-sunken);
    color: var(--stocks-muted);
}

.choices__list--multiple .choices__item {
    border: 0;
    border-radius: var(--stocks-radius-pill);
    background: var(--stocks-primary-soft);
    color: var(--stocks-primary);
    font-weight: 600;
}

/* -------------------------------------------------------------------------
   Buttons（三層級：primary 實心紫 / secondary 白底描邊 / danger 紅描邊）
   ------------------------------------------------------------------------- */

.btn {
    border-radius: var(--stocks-radius);
    font-weight: 600;
    letter-spacing: 0;
    box-shadow: none !important;
    transition: background-color .15s cubic-bezier(.25, 1, .5, 1), border-color .15s cubic-bezier(.25, 1, .5, 1), color .15s cubic-bezier(.25, 1, .5, 1);
}

.btn:focus-visible {
    box-shadow: var(--stocks-ring) !important;
}

.btn-sm {
    border-radius: var(--stocks-radius-sm);
}

html:not(.dark) .btn-primary {
    --falcon-btn-bg: var(--stocks-primary);
    --falcon-btn-border-color: var(--stocks-primary);
    --falcon-btn-hover-bg: var(--stocks-primary-dark);
    --falcon-btn-hover-border-color: var(--stocks-primary-dark);
    --falcon-btn-active-bg: var(--stocks-primary-deeper);
    --falcon-btn-active-border-color: var(--stocks-primary-deeper);
    background: var(--stocks-primary);
    border-color: var(--stocks-primary);
    color: #fff;
}

html:not(.dark) .btn-primary:hover,
html:not(.dark) .btn-primary:focus {
    background: var(--stocks-primary-dark);
    border-color: var(--stocks-primary-dark);
    color: #fff;
}

html:not(.dark) .btn-primary:active {
    background: var(--stocks-primary-deeper);
    border-color: var(--stocks-primary-deeper);
    color: #fff;
}

/* secondary：白底 + 邊框 + 深色文字，hover 帶入品牌紫 */
html:not(.dark) .btn-falcon-primary,
html:not(.dark) .btn-falcon-default,
html:not(.dark) .btn-outline-primary,
html:not(.dark) .btn-outline-secondary {
    border-color: var(--stocks-border);
    background: var(--stocks-surface);
    color: var(--stocks-heading);
}

html:not(.dark) .btn-falcon-primary:hover,
html:not(.dark) .btn-falcon-primary:focus,
html:not(.dark) .btn-falcon-default:hover,
html:not(.dark) .btn-falcon-default:focus,
html:not(.dark) .btn-outline-primary:hover,
html:not(.dark) .btn-outline-primary:focus,
html:not(.dark) .btn-outline-secondary:hover,
html:not(.dark) .btn-outline-secondary:focus {
    border-color: var(--stocks-primary-border);
    background: var(--stocks-primary-soft);
    color: var(--stocks-primary-dark);
}

/* danger：紅描邊（批次刪除等破壞性操作） */
html:not(.dark) .btn-outline-danger {
    border-color: var(--stocks-red-border);
    background: var(--stocks-surface);
    color: var(--stocks-red);
}

html:not(.dark) .btn-outline-danger:hover,
html:not(.dark) .btn-outline-danger:focus {
    border-color: var(--stocks-red);
    background: var(--stocks-red-soft);
    color: var(--stocks-red-ink);
}

/* 實心語意按鈕的白字對比：#16A34A 3.3:1、#f59e0b 2.2:1 皆不達 WCAG AA 4.5:1，
   加深至各自色階的 700（皆 5.0:1）；淺色版本仍用原 token */
html:not(.dark) .btn-success {
    border-color: #15803d;
    background: #15803d;
}

html:not(.dark) .btn-warning {
    border-color: #b45309;
    background: #b45309;
    color: #fff;
}

html:not(.dark) .btn-danger {
    border-color: var(--stocks-red);
    background: var(--stocks-red);
}

html:not(.dark) .btn-link {
    color: var(--stocks-muted);
}

html:not(.dark) .btn-link:hover {
    color: var(--stocks-primary);
}

.btn-reveal {
    width: 2rem;
    height: 2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid transparent;
}

.btn-reveal:hover {
    border-color: var(--stocks-border);
    background: var(--stocks-surface-sunken);
}

/* -------------------------------------------------------------------------
   Tables and DataTables
   ------------------------------------------------------------------------- */

.table-responsive {
    border-radius: var(--stocks-radius-lg);
    max-width: 100%;
    overflow-x: auto !important;
}

/* DataTables 的 autoWidth 會在 table 上寫死 px 寬，縮視窗時鎖回 100%，
   寬度不足時交給 .table-responsive 水平捲動 */
table.dataTable {
    width: 100% !important;
}

.card .table-responsive {
    border-radius: 0;
}

.table {
    margin-bottom: 0;
    color: var(--stocks-text);
    vertical-align: middle;
    font-variant-numeric: tabular-nums;
    --falcon-table-color: var(--stocks-text);
    --bs-table-color: var(--stocks-text);
}

.table > :not(caption) > * > * {
    padding: .875rem 1.25rem;
}

html:not(.dark) .table thead.table-primary,
html:not(.dark) .table .table-primary > th,
html:not(.dark) .table thead.table-primary > tr > th,
html:not(.dark) .table thead th {
    --falcon-table-bg: var(--stocks-surface-sunken);
    --bs-table-bg: var(--stocks-surface-sunken);
    border-color: var(--stocks-border);
    background: var(--stocks-surface-sunken);
    color: var(--stocks-muted);
    font-size: .8125rem;
    font-weight: 600;
    white-space: nowrap;
}

html:not(.dark) .table > tbody > tr > td {
    border-bottom: 1px solid var(--stocks-border-soft);
}

html:not(.dark) .table-striped > tbody > tr:nth-of-type(odd) > * {
    --falcon-table-accent-bg: transparent;
    --falcon-table-striped-bg: transparent;
    --bs-table-accent-bg: transparent;
    --bs-table-striped-bg: transparent;
}

html:not(.dark) .table-hover > tbody > tr:hover > * {
    --falcon-table-hover-bg: var(--stocks-surface-sunken);
    --falcon-table-accent-bg: var(--stocks-surface-sunken);
    --bs-table-hover-bg: var(--stocks-surface-sunken);
    --bs-table-accent-bg: var(--stocks-surface-sunken);
}

.table tbody tr {
    cursor: pointer;
}

.table-image {
    border: 1px solid var(--stocks-border);
    border-radius: var(--stocks-radius);
    box-shadow: none;
}

div.dataTables_wrapper div.dataTables_length,
div.dataTables_wrapper div.dataTables_filter,
div.dataTables_wrapper div.dataTables_info {
    color: var(--stocks-muted);
    font-size: .8125rem;
    font-weight: 400;
}

div.dataTables_wrapper div.dataTables_length select {
    width: auto;
    min-height: 2rem;
    margin: 0 .25rem;
    /* width:auto 會縮到內容寬，須保留右側空間給下拉箭頭，避免箭頭疊在數字上 */
    padding: .25rem 2rem .25rem .75rem;
    background-position: right .625rem center;
    border-color: var(--stocks-border);
    border-radius: var(--stocks-radius-sm);
    color: var(--stocks-text);
}

div.dataTables_wrapper div.dataTables_processing {
    border: 1px solid var(--stocks-border);
    border-radius: var(--stocks-radius);
    background: rgba(255, 255, 255, .92);
    box-shadow: var(--stocks-shadow-pop);
    color: var(--stocks-muted);
    font-weight: 600;
}

/* 分頁器：圓形按鈕、選中 = 實心品牌紫 */
.pagination {
    gap: .25rem;
}

.pagination .page-link {
    min-width: 2rem;
    height: 2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0 .5rem;
    border: 0;
    border-radius: var(--stocks-radius-pill);
    background: transparent;
    color: var(--stocks-muted);
    font-size: .8125rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    transition: background-color .15s cubic-bezier(.25, 1, .5, 1), color .15s cubic-bezier(.25, 1, .5, 1);
}

.pagination .page-link:hover {
    background: var(--stocks-primary-soft);
    color: var(--stocks-primary);
}

.pagination .page-item.active .page-link {
    background: var(--stocks-primary);
    color: #fff;
}

.pagination .page-item.disabled .page-link {
    color: #c4cad9;
    background: transparent;
}

/* -------------------------------------------------------------------------
   Badges（五種語意色 pill）, alerts, menus
   ------------------------------------------------------------------------- */

.badge {
    padding: .375em .875em;
    border-radius: var(--stocks-radius-pill);
    font-family: var(--stocks-font);
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: 0;
}

html:not(.dark) .badge-soft-primary {
    border: 0;
    background: var(--stocks-primary-soft);
    color: var(--stocks-primary-dark);
}

html:not(.dark) .badge-soft-success {
    border: 0;
    background: var(--stocks-green-soft);
    color: var(--stocks-green-ink);
}


/* ── 個人檔案：頭貼預覽 ───────────────────────────────────────
   已上傳與尚未上傳（字型圖示）兩種狀態尺寸一致，切換時版面不跳動 */
.profile-avatar-preview,
.profile-avatar-placeholder {
    display: inline-block;
    width: 8rem;
    height: 8rem;
    line-height: 8rem;
}

.profile-avatar-preview {
    border-radius: 50%;
    object-fit: cover;
    background: var(--stocks-bg);
    border: 1px solid var(--stocks-border);
}

.profile-avatar-placeholder {
    color: var(--stocks-subtle);
    font-size: 8rem;
}

html:not(.dark) .badge-soft-warning {
    border: 0;
    background: var(--stocks-amber-soft);
    color: var(--stocks-amber-ink);
}

html:not(.dark) .badge-soft-danger {
    border: 0;
    background: var(--stocks-red-soft);
    color: var(--stocks-red-ink);
}

/* ── 內容被截斷時一律看得到捲軸 ───────────────────────────────────────────
   Falcon 的 .scrollbar 把捲軸設成 visibility: hidden，只有滑鼠移到該區塊上才現形
   （theme.css 的 .scrollbar::-webkit-scrollbar 與 :hover 規則）。結果是內容明明
   被切掉，畫面上卻沒有任何「右邊還有東西」的提示——使用者不會想到要把游標移過去
   試著捲，直接當作那些內容不存在。表格裡被切掉的操作按鈕因此等於按不到。

   這裡把它改回「有溢位就顯示捲軸」。不會平白多出軌道：overflow: auto 本來就只在
   內容真的超出時才畫捲軸，沒溢位的區塊外觀完全不變。

   例外：側邊主選單（.navbar-vertical-content）維持 Falcon 原本的 hover 行為。
   它是導覽而非資料，捲軸常駐會干擾視覺，且本檔上方已將其 overflow 放開。         */
.scrollbar:not(.navbar-vertical-content)::-webkit-scrollbar,
.scrollbar:not(.navbar-vertical-content)::-webkit-scrollbar-thumb {
    visibility: visible;
}

/* 捲軸滑塊在淺色底上偏淡，加深一點才看得出來（Falcon 預設值是為深色側欄調的） */
.scrollbar:not(.navbar-vertical-content)::-webkit-scrollbar-thumb {
    background-color: var(--stocks-subtle, #9da9bb);
}

/* Firefox 沒有 ::-webkit-scrollbar，改用標準屬性給同樣的細捲軸 */
.scrollbar:not(.navbar-vertical-content) {
    scrollbar-width: thin;
}

/* DataTables 產生的橫向捲動容器沒有 .scrollbar class，一併納入同一條規則：
   列表頁欄位一多就會橫向溢位，那裡同樣需要看得見的捲軸 */
.dataTables_scrollBody,
.table-responsive {
    scrollbar-width: thin;
}

html:not(.dark) .badge-soft-secondary {
    border: 0;
    background: #eef0f4;
    color: #4b5565;
}

html:not(.dark) .badge-soft-info {
    border: 0;
    background: var(--stocks-blue-soft);
    color: var(--stocks-blue-ink);
}

.alert {
    border-radius: var(--stocks-radius-lg);
    border-color: var(--stocks-border);
}

/* 警示 alert 與 badge-soft-warning 同一組 amber 色票（DESIGN.md：警示=amber-soft）。
   Falcon 預設的 alert-warning 偏橘，和頁上黃色警示徽章並列時像兩種語意 */
html:not(.dark) .alert-warning {
    background: var(--stocks-amber-soft);
    color: var(--stocks-amber-ink);
    border-color: #f3e2bd;
}

.dropdown-menu {
    padding: .375rem;
    border: 1px solid var(--stocks-border);
    box-shadow: var(--stocks-shadow-pop);
}

.dropdown-item {
    padding: .4375rem .625rem;
    border-radius: var(--stocks-radius-sm);
    color: var(--stocks-text);
    font-weight: 500;
}

.dropdown-item:hover,
.dropdown-item:focus {
    background: var(--stocks-bg);
    color: var(--stocks-heading);
}

.dropdown-divider {
    border-color: var(--stocks-border-soft);
}

.function-row {
    gap: .375rem;
}

.function-row a {
    padding: .25rem .5rem;
    border-radius: var(--stocks-radius-sm);
    font-size: .75rem;
    line-height: 1.4;
}

.dropdown-item.border-bottom {
    border-bottom-color: var(--stocks-border-soft) !important;
}

/* -------------------------------------------------------------------------
   Page-level polish
   ------------------------------------------------------------------------- */

/* 列表頁頂部的標題/按鈕列：按鈕已 teleport 至頂端列，整列收起
   （h2#title 仍須留在 DOM，topbar 標題同步依賴它） */
#listApp > .mb-3:first-child:not(.card),
#listApp > .row.mb-3:first-child {
    margin-bottom: 0 !important;
}

#listApp > .mb-3:first-child h2#title {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px !important;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

/* card-header 內只剩 HeaderFunction 插槽（按鈕已 teleport 走）時整塊隱藏 */
.card-header:has(> .smart-header-slot) {
    display: none;
}

.card.mb-3 + .card:has(> .card-body > .table-responsive) {
    overflow: hidden;
}

.card.mb-3 + .card:has(> .card-body > .table-responsive) > .card-body > .table-responsive {
    border-radius: var(--stocks-radius-lg);
}

.modal-content {
    border: 1px solid var(--stocks-border);
    box-shadow: var(--stocks-shadow-pop);
}

.modal-header,
.modal-footer {
    border-color: var(--stocks-border-soft);
}

.modal-title {
    color: var(--stocks-heading);
    font-size: 1rem;
    font-weight: 700;
}

.toast {
    border: 1px solid var(--stocks-border);
    border-radius: var(--stocks-radius-lg);
    box-shadow: var(--stocks-shadow-pop);
}

/* Event workspace */

.smart-event-shell .card-header {
    padding: 1rem 1.5rem .75rem;
}

.smart-event-shell h2#title {
    color: var(--stocks-heading) !important;
    font-size: 1rem !important;
}

.smart-event-tabs {
    background: var(--stocks-surface) !important;
}

.smart-event-tabs .nav-tabs {
    gap: .375rem;
    padding: .75rem 1rem 0;
    border-bottom: 1px solid var(--stocks-border-soft);
}

.smart-event-tabs .nav-item {
    margin: 0 !important;
}

.smart-event-tabs .btn-outline-primary {
    border: 1px solid transparent !important;
    border-radius: var(--stocks-radius) var(--stocks-radius) 0 0 !important;
    background: transparent !important;
    color: var(--stocks-muted) !important;
}

.smart-event-tabs .btn-outline-primary:hover {
    background: var(--stocks-surface-sunken) !important;
    color: var(--stocks-heading) !important;
}

.smart-event-tabs .btn-outline-primary.active {
    border-color: var(--stocks-border) var(--stocks-border) var(--stocks-surface) !important;
    background: var(--stocks-surface) !important;
    color: var(--stocks-primary) !important;
}

.smart-listener-card .card-header {
    background: var(--stocks-surface) !important;
}

.smart-listener-card .btn-link {
    color: var(--stocks-heading) !important;
    font-weight: 700;
}

/* 登入頁品牌面板：Falcon 預設藍漸層 → 品牌紫 */

html:not(.dark) .bg-card-gradient {
    background-image: linear-gradient(135deg, var(--stocks-primary), var(--stocks-primary-deeper));
}

/* Utility surfaces used by dynamic forms and templates */

.option-span {
    border: 1px solid var(--stocks-border);
    border-radius: var(--stocks-radius-sm);
    box-shadow: none;
    color: var(--stocks-text);
    background: var(--stocks-surface-sunken);
}

.figure-preview {
    border: 1px solid var(--stocks-border);
    border-radius: var(--stocks-radius);
    box-shadow: none;
}

.form-header-sticky {
    top: 4rem;
}

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

::-webkit-scrollbar-thumb {
    border: 4px solid transparent;
    border-radius: 999px;
    background-clip: content-box;
    background-color: #c4cad9;
}

::-webkit-scrollbar-thumb:hover {
    background-color: #8b93a9;
}

@media (max-width: 767.98px) {
    .smart-topbar-title h1 {
        max-width: 46vw;
    }

    .card-body {
        padding: 1rem;
    }

    .card-header,
    .card.mb-3 > .card-body.bg-light {
        padding: 1rem;
    }

    .table > :not(caption) > * > * {
        padding: .75rem 1rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .navbar-vertical .navbar-nav .nav-link,
    .navbar-top .nav-link,
    .btn,
    .dropdown-item,
    .pagination .page-link,
    .smart-segmented > button,
    .smart-segmented > a,
    .smart-segmented > label,
    .form-control,
    .form-select {
        transition: none !important;
    }
}