/* Displays */

.boxplot-q1 {
    fill: rgba(35, 183, 229, 0.85);
    stroke: var(--bs-dark);
}

.boxplot-q3 {
    fill: var(--primary-color);
    stroke: var(--bs-dark);
}

/* Inputs */

/* Slider */

.form-control.text-truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%;
    display: block;
}

.noUi-tooltip {
    opacity: 0;
    transition: opacity 0.2s ease;
    pointer-events: none;
}

.noUi-target.disabled {
    pointer-events: none;
    opacity: 0.5;
}

#slider-hide .noUi-tooltip {
    display: none;
}

#slider-hide .noUi-active .noUi-tooltip {
    display: block;
}

/* Select With Search */

/* Form Floating Placeholders */
.form-floating > .form-control::placeholder {
    text-align: start;
}

.search-dropdown {
    top: 100%;
    left: 0;
    max-height: 300px;
    overflow-y: auto;
    z-index: 1000;
}

.select-icon {
    cursor: pointer;
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--stk-text-placeholder);
    pointer-events: none;
    transition: transform 0.2s ease;
}

.search-select-trigger {
    cursor: pointer;
}

/* The trigger is a div, not a real form control, so Bootstrap's
       :placeholder-shown/:focus label-float rules never fire. Keep the
       floating label pinned in its raised position. */
.form-floating > .search-select-trigger ~ label {
    transform: scale(.85) translateY(-.5rem) translateX(.15rem);
    opacity: .65;
}


/* Modal */

/* Filter Expression */

.filter-table {
    border-collapse: collapse;
    text-align: center;
    width: 100%;
}

    .filter-table td {
        border: 1px solid #ddd;
        padding: 4px;
        vertical-align: middle;
    }

.logic-rail {
    background: #f7f7f7;
    text-align: center;
    min-width: 70px;
    font-weight: bold;
}

.table-icon-btn {
    border: none;
    background: transparent;
    padding: .25rem .5rem;
    border-radius: .25rem;
    cursor: pointer;
    transition: background-color .15s ease-in-out, color .15s ease-in-out;
}

    .table-icon-btn:hover {
        background-color: rgba(0, 0, 0, 0.075);
    }

    .table-icon-btn:focus {
        outline: none;
    }

.add-btn {
    color: var(--bs-success);
}

.delete-btn {
    background: rgba(var(--danger-rgb), 0.1);
    color: var(--stk-error);
    border: 1px solid rgba(var(--danger-rgb), 0.3);
}

/* Filter Modal */

.filter-dropdown {
    display: flex;
    flex-direction: column;
    background: var(--stk-bg-primary);
    border: 1px solid var(--stk-border-primary);
    border-radius: var(--stk-radius-sm);
    min-width: 240px;
    max-width: 300px;
    position: relative;
    z-index: 9999 !important;
}

/* right and left are both set: the dropdown is anchored left but clamped
   on the right, which is how it already renders. */
.filter-dropdown-wrapper {
    position: absolute;
    top: 100%;
    left: -74px;
    right: 0;
    z-index: 9999 !important;
    margin-top: 5px;
}

.filter-dropdown-search {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px;
    position: relative;
    border-bottom: hidden;
}

.filter-search-input {
    flex: 1;
    width: 100%;
    padding: 8px 8px 8px 32px;
    border: 1px solid var(--stk-border-primary);
    border-radius: var(--stk-radius-sm);
    font-size: 13px;
    transition: border-color 0.2s;
}
/* ==========================================================================
   StkViewTable Component Styles
   Supports light and dark themes via CSS variables
   ========================================================================== */

/* ==========================================================================
   Theme Variables

   Systek design tokens, derived entirely from the Ynex theme.

   Nothing here holds a literal colour. Accents follow --primary-rgb, which
   the Switcher writes (see _Layout.cshtml and Switcher.razor), so picking a
   new primary colour restyles every Systek component with it. Surfaces and
   text follow Ynex's own semantic variables, which Ynex already flips under
   [data-theme-mode=dark] - so light/dark is inherited rather than
   maintained here a second time.

   Shadows and radii keep literal values: they are theme-neutral.
   ========================================================================== */

:root {
    /* --primary-rgb: 55, 65, 81; */
    /* Foreground for anything sitting ON the accent. It has to flip with the
       theme: the dark-mode accent is light enough that white text on it would
       disappear. Use --stk-on-accent-rgb when you need an alpha. */
    --stk-on-accent-rgb: 255, 255, 255;
    --stk-on-accent: rgb(var(--stk-on-accent-rgb));
    /* Surfaces */
    --stk-bg-primary: var(--custom-white);
    --stk-bg-secondary: var(--default-background);
    --stk-bg-tertiary: var(--form-control-bg);
    --stk-bg-hover: var(--primary01);
    /* Table row hover. Stronger than --stk-bg-hover because the colour is the
       only feedback now - the lift that used to accompany it is gone. */
    --stk-row-hover: rgba(var(--primary-rgb), 0.14);
    --stk-bg-panel: var(--custom-white);
    --stk-bg-header: var(--default-background);
    /* Borders */
    --stk-border-primary: var(--input-border);
    --stk-border-secondary: var(--default-border);
    --stk-border-accent: var(--primary-color);
    /* Text */
    --stk-text-primary: var(--default-text-color);
    --stk-text-secondary: var(--gray-7);
    --stk-text-muted: var(--text-muted);
    --stk-text-placeholder: var(--text-muted);
    /* Accents - driven by the Switcher */
    --stk-accent-primary: var(--primary-color);
    --stk-accent-secondary: var(--primary08);
    --stk-accent-gradient: rgb(var(--primary-rgb));
    /* Hover shifts the accent toward black on light, toward white on dark
       (see the dark block below), so it still tracks a Switcher colour. */
    --stk-accent-gradient-hover: color-mix(in srgb, rgb(var(--primary-rgb)) 85%, #000);
    /* Faint wash over an accent surface (modal headers) - flat, like the rest. */
    --stk-accent-sheen: rgba(var(--primary-rgb), 0.08);
    --stk-success: rgb(var(--success-rgb));
    --stk-error: rgb(var(--danger-rgb));
    --stk-warning: rgb(var(--warning-rgb));
    /* Neutral, non-accent tint for secondary buttons and off-state switches.
       Follows the theme's muted colour, so it inverts with light/dark. */
    --stk-neutral-rgb: var(--bs-secondary-color-rgb);
    /* No elevation shadows anywhere - surfaces are separated by a hairline
       border instead. Radii are theme-neutral, so they stay literal. */
    --stk-radius-sm: 4px;
    --stk-radius-md: 8px;
    --stk-radius-lg: 12px;
    --stk-radius-xl: 16px;
}

/* Dark theme flips the accent to an off-white, so the on-accent foreground
   flips to graphite. Ynex sets data-theme-mode on <html>. */
[data-theme-mode="dark"] {
    --primary-rgb: 229, 231, 235;
    --stk-on-accent-rgb: 31, 41, 55;
    /* The accent is light here, so hover brightens instead of darkening. */
    --stk-accent-gradient-hover: color-mix(in srgb, rgb(var(--primary-rgb)) 85%, #fff);
}

/* Ynex hardcodes white on primary surfaces with !important, which breaks once
   the accent is light. Re-point those at the flipping token. */
.btn-primary,
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.text-bg-primary,
.btn.btn-outline-primary .badge {
    color: var(--stk-on-accent) !important;
}


.stk-table-wrapper {
    background: var(--stk-bg-primary);
    border-radius: var(--stk-radius-xl);
    border: 1px solid var(--stk-border-primary);
    /*overflow: hidden;*/
    backdrop-filter: blur(10px);
    position: relative;
    z-index: 1;
}

/* ==========================================================================
   Buttons
   ========================================================================== */

.stk-close-btn {
    background: none;
    border: none;
    padding: 4px;
    cursor: pointer;
    color: var(--stk-text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--stk-radius-sm);
    transition: all 0.2s ease;
}

    .stk-close-btn:hover {
        background: var(--stk-bg-hover);
        color: var(--stk-text-primary);
    }

/* ==========================================================================
   Column Settings Panel
   ========================================================================== */

.stk-column-settings-container {
    position: relative;
}

.stk-column-settings-panel {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 1000;
    background: var(--stk-bg-panel);
    border: 1px solid var(--stk-border-primary);
    border-radius: var(--stk-radius-lg);
    min-width: 280px;
    max-width: 320px;
    max-height: 500px;
    display: flex;
    flex-direction: column;
}

.stk-settings-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid var(--stk-border-primary);
    font-weight: 600;
    color: var(--stk-text-primary);
}

.stk-settings-body {
    flex: 1;
    overflow-y: auto;
    padding: 12px;
}

.stk-column-list {
    display: flex;
    flex-direction: column;
    gap: 0;
    border: 1px solid var(--stk-border-primary);
    border-radius: var(--stk-radius-md);
    /*overflow: hidden;*/
}

.stk-column-item {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    padding: 0;
    background: var(--stk-bg-tertiary);
    border: none;
    border-bottom: 1px solid var(--stk-border-primary);
    border-radius: 0;
    transition: all 0.2s ease;
}

    .stk-column-item:active {
        cursor: grabbing;
    }

    .stk-column-item:last-child {
        border-bottom: none;
    }

    .stk-column-item:hover {
        background: var(--stk-bg-hover);
    }

    .stk-column-item.hidden-column {
        opacity: 0.5;
    }

.stk-drag-handle {
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: grab;
    color: var(--stk-text-muted);
    padding: 0 5px;
    background: var(--stk-bg-secondary);
    transition: all 0.2s ease;
}

    .stk-drag-handle:hover {
        color: var(--stk-accent-primary);
        background: var(--stk-bg-hover);
    }

    .stk-drag-handle:active {
        cursor: grabbing;
    }

    .stk-drag-handle.disabled {
        opacity: 0.3;
        cursor: not-allowed;
        /*pointer-events: none;*/
    }

    .stk-drag-handle i {
        font-size: 16px;
    }

.stk-column-item-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 8px 12px 8px 5px;
    gap: 6px;
}

.stk-column-item-inner-content {
    display: flex;
    flex-direction: row;
    gap: 12px; /* space between option items */
    align-items: center;
}

.stk-column-item-header {
    display: flex;
    align-items: center;
    gap: 8px;
}

.stk-column-title {
    font-size: 13px;
    color: var(--stk-text-primary);
    font-weight: 500;
    flex: 1;
    /*overflow: hidden;*/
    text-overflow: ellipsis;
    white-space: nowrap;
}

.stk-width-wrapper {
    display: flex;
    align-items: center;
    gap: 4px;
    color: var(--stk-text-muted);
    flex-shrink: 0;
}

    .stk-width-wrapper i {
        font-size: 14px;
    }

    .stk-width-wrapper.disabled {
        opacity: 0.3;
        /*pointer-events: none;*/
    }

.stk-width-input {
    width: 60px;
    padding: 3px 6px;
    font-size: 12px;
    background: var(--stk-bg-secondary);
    border: 1px solid var(--stk-border-secondary);
    border-radius: var(--stk-radius-sm);
    color: var(--stk-text-secondary);
    text-align: center;
    transition: all 0.2s ease;
}

    .stk-width-input:hover:not(:disabled) {
        border-color: var(--stk-border-primary);
        background: var(--stk-bg-tertiary);
    }

    .stk-width-input:focus {
        outline: none;
        border-color: var(--stk-accent-primary);
        background: var(--stk-bg-tertiary);
        box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.25);
        color: var(--stk-text-primary);
    }

    .stk-width-input:disabled {
        cursor: not-allowed;
        background: var(--stk-bg-tertiary);
        opacity: 0.5;
    }

/* Highlighted state when custom width is set */
.stk-option-item {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--stk-text-muted);
    font-size: 13px;
}

    .stk-option-item i {
        font-size: 14px;
    }

    .stk-option-item.disabled {
        opacity: 0.4;
        /*pointer-events: none;*/
    }

        .stk-option-item.disabled .stk-column-toggle {
            cursor: not-allowed;
        }

        .stk-option-item.disabled .stk-width-input {
            cursor: not-allowed;
            background: var(--stk-bg-tertiary);
        }

.stk-column-toggle {
    position: relative;
    display: inline-block;
    width: 37px;
    height: 18px;
    cursor: pointer;
}

    .stk-column-toggle input {
        opacity: 0;
        width: 0;
        height: 0;
    }

.stk-toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--stk-border-primary);
    border-radius: 18px;
    transition: all 0.3s ease;
}

    .stk-toggle-slider::before {
        position: absolute;
        content: "";
        height: 12px;
        width: 12px;
        left: 3px;
        bottom: 3px;
        background: var(--stk-on-accent);
        border-radius: 50%;
        transition: all 0.3s ease;
    }

.stk-column-toggle input:checked + .stk-toggle-slider {
    background: var(--stk-accent-primary);
}

    .stk-column-toggle input:checked + .stk-toggle-slider::before {
        transform: translateX(19px);
    }

/* Settings Footer */
.stk-settings-footer {
    display: flex;
    gap: 8px;
    padding: 12px;
    border-top: 1px solid var(--stk-border-primary);
    background: var(--stk-bg-tertiary);
    border-radius: 0 0 var(--stk-radius-lg) var(--stk-radius-lg);
}

.stk-settings-action-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 12px;
    background: var(--stk-bg-secondary);
    border: 1px solid var(--stk-border-secondary);
    border-radius: var(--stk-radius-md);
    color: var(--stk-text-secondary);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

    .stk-settings-action-btn:hover {
        background: var(--stk-bg-hover);
        border-color: var(--stk-accent-primary);
        color: var(--stk-accent-primary);
    }

/* Table Grid */


.tradingview-scroll-container {
    height: 55vh;
    overflow-x: visible;
    overflow-y: auto;
    padding-right: 0.5rem; /* avoids vertical text cutoff */
    scrollbar-gutter: stable;
    scrollbar-width: thin;
}

.date-text {
    font-size: 13px;
    font-weight: 600;
    color: var(--stk-text-primary);
}

.systek-value-text {
    font-size: 14px;
    font-weight: 600;
    color: var(--stk-text-primary);
}

.time-text {
    font-size: 11px;
    color: var(--stk-text-muted);
    font-weight: 500;
}

.ellipsis-cell {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
    display: block;
}

.systek-number {
    display: flex;
    align-items: stretch;
    border: 1px solid var(--bs-border-color);
    border-radius: .375rem;
    overflow: hidden;
    background: var(--bs-body-bg);
}

.spinner {
    display: flex;
    flex-direction: column;
    justify-content: center;
    border-right: 1px solid var(--bs-border-color);
    width: 2rem;
}

    .spinner button {
        flex: 1;
        border: none;
        background: transparent;
        padding: 0;
        line-height: 1;
        transition: background .15s;
    }

        .spinner button:hover {
            background: rgba(0,0,0,.06);
        }

.systek-number .form-floating {
    flex: 1;
}

.systek-number .form-control {
    border: none !important;
    box-shadow: none !important;
}



/* ==========================================================================
   Desktop layout floor.
   The application targets desktop and has no mobile/tablet breakpoints. Below
   this width the layout keeps its desktop proportions and the page scrolls
   horizontally instead of reflowing, so a half-screen window cannot squeeze
   elements into each other. 1100px matches the floor .grid-stack already
   requires in gridstack-custom.css.
   ========================================================================== */

body {
    min-width: 1100px;
}

/* ==========================================================================
   Form controls

   Consolidated from alarms.css and scripts.css. Where the two disagreed the
   scripts.css value is kept, because it loaded later and is what already
   renders; properties only one file declared are carried over unchanged.
   ========================================================================== */

.form-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    margin-bottom: 24px;
}

.form-hint {
    font-size: 12px;
    color: var(--stk-text-muted);
    margin-top: 4px;
}

.modern-label {
    font-size: 14px;
    font-weight: 600;
    color: var(--stk-text-primary);
    margin: 0 0 8px;
}

.modern-input {
    padding: 12px 16px;
    border: 1px solid var(--stk-border-primary);
    border-radius: var(--stk-radius-md);
    font-size: 14px;
    transition: all 0.2s ease;
    background: var(--stk-bg-hover);
    color: var(--stk-text-primary);
    backdrop-filter: blur(10px);
    width: 100%;
}

/* !important is inherited from the scripts.css copy, where it existed to win
   the alarms.css/scripts.css cascade fight. Safe to drop once alarms.css is
   retired and this is the only definition. */
.modern-select {
    padding: 12px 16px;
    border: 1px solid var(--stk-border-primary);
    border-radius: var(--stk-radius-md);
    font-size: 14px;
    transition: all 0.2s ease;
    background: var(--stk-bg-hover);
    color: var(--stk-text-primary);
    cursor: pointer;
    appearance: none;
    width: 100%;
    backdrop-filter: blur(10px);
}

.required-asterisk {
    color: var(--stk-error);
    font-weight: bold;
    margin-left: 4px;
}

/* ==========================================================================
   Actions, badges, tabs and empty states

   Consolidated from alarms.css, baselines.css, scripts.css and
   usermanagement.css. All four are loaded globally, so usermanagement.css
   won every contested property by load order - that is what already renders.
   Properties declared by only one file are carried over, since they were
   applying too.

   QualityControl.css scopes everything under .qc-page and uses Bootstrap
   nav pills instead of .tab-button.
   ========================================================================== */

.action-buttons {
    display: flex;
    gap: 4px;
    align-items: center;
}

.action-btn {
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    border-radius: var(--stk-radius-sm);
    cursor: pointer;
    transition: all 0.2s;
    padding: 0;
    font-size: 16px;
}

.badge {
    display: inline-block;
    padding: 4px 8px;
    border-radius: var(--stk-radius-sm);
    font-size: 12px;
    font-weight: 500;
}

/* colour was a hardcoded rgba(var(--stk-on-accent-rgb), 0.4), invisible on a light
   surface once the theme follows Ynex - now tokenised */
.empty-state {
    text-align: center;
    padding: 40px;
    color: var(--stk-text-muted);
    position: relative;
    z-index: 1;
}

.tab-button {
    flex: 1;
    padding: 10px 20px;
    background: rgba(var(--primary-rgb), 0.6);
    border: none;
    border-bottom: 2px solid transparent;
    border-radius: var(--stk-radius-md);
    margin-bottom: -10px;
    color: var(--stk-text-primary);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 8px;
}

/* ==========================================================================
   Tree view

   Base component, consolidated from baselines.css, organizationalunits.css
   and widget.css. It is rendered by SystekTreeNode (also inside the dashboard OuTreeWidget) and the
   Organizational Units page, so it belongs here rather than in any one of
   them. Pages keep only their genuine deviations.
   ========================================================================== */

.tree-view {
    margin-top: 1rem;
    padding-left: calc(var(--tree-level) * 20px);
}

.tree-node {
    margin: 0;
    padding: 0;
}

.tree-node-content {
    display: flex;
    align-items: center;
    padding: 0.75rem;
    cursor: pointer;
    user-select: none;
    border-radius: var(--stk-radius-md);
    transition: all 0.2s;
    margin-bottom: 4px;
}

    .tree-node-content:hover {
        background-color: rgba(var(--primary-rgb), 0.08);
    }

    .tree-node-content.selected {
        background-color: rgba(var(--primary-rgb), 0.15);
        border-left: 3px solid var(--primary-color);
        padding-left: calc(0.75rem - 3px);
    }

.tree-toggle {
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-right: 0.5rem;
    font-size: 16px;
    color: var(--stk-text-muted);
    transition: transform 0.2s;
}

    .tree-toggle.empty {
        visibility: hidden;
    }

.tree-label {
    flex: 1;
    font-weight: 500;
    color: var(--stk-text-primary);
}

.tree-node-content.selected .tree-label {
    color: var(--primary-color);
    font-weight: 600;
}
/* ==========================================================================
   Modifiers for the shared components above

   Promoted out of usermanagement.css: the base classes already live here, but
   their modifiers were left behind in a page stylesheet while ~14 pages relied
   on them. Keeping a component's base and its states in one file is what lets
   the page stylesheets be unhooked from the layout.
   ========================================================================== */

.tab-button:hover {
    color: var(--stk-text-primary);
}

.tab-button.active {
    color: var(--stk-text-primary);
    border-bottom-color: var(--primary-color);
}

.action-btn:hover {
    transform: scale(1.1);
}

.action-btn.edit {
    color: var(--primary-color);
}

    .action-btn.edit:hover {
        background-color: rgba(var(--primary-rgb), 0.1);
    }

.action-btn.delete {
    color: rgb(var(--danger-rgb));
}

    .action-btn.delete:hover {
        background-color: rgba(var(--danger-rgb), 0.1);
    }

.action-btn:disabled,
.action-btn.disabled {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
}

.empty-state i {
    font-size: 48px;
    margin-bottom: 16px;
}

.tradingview-btn:disabled,
.tradingview-btn.disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background: rgba(108, 117, 125, 0.3);
}

/* ==========================================================================
   Scroll containers and panels

   Promoted from baselines.css, which is being retired. Each of these is used
   outside the Baselines feature: .treeview-scroll-container by the shared
   SystekTreeViewAsync, .import-secret-box by ImportCredentialsPanel, and
   .form-scroll-container across the alarm wizard steps.
   ========================================================================== */

.form-scroll-container {
    min-height: 200px;
    max-height: 400px;
    overflow-y: auto;
    overflow-x: hidden;
}

.treeview-scroll-container {
    height: 60vh;
    overflow: auto;
    padding-right: 0.5rem;
}

.import-secret-box {
    background: rgba(var(--warning-rgb), 0.12);
    border: 1px solid rgba(var(--warning-rgb), 0.4);
    border-radius: var(--stk-radius-md);
    padding: 1rem 1.25rem;
    margin-bottom: 1rem;
}

    .import-secret-box code {
        word-break: break-all;
        font-size: 0.85rem;
    }

/* ==========================================================================
   Promoted from scripts.css

   These are used by pages outside the Scripts feature, so they must live here
   before scripts.css can be unhooked from the layout. Where scripts.css held
   several copies (it held four or five of most), the last one is taken, since
   that is the one that was winning.
   ========================================================================== */

.error {
    text-align: center;
    padding: 60px 20px;
    color: var(--stk-error);
}

.error-text {
    color: var(--stk-error);
}

/* No `border: none` here. Ynex sets the border on .btn at the same specificity,
   and this rule loads later - it was stripping the border off every
   `btn-outline-* btn-sm` in the app. Variants supply their own border. */
.btn-sm {
    padding: 8px 16px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s ease;
    cursor: pointer;
}

.empty-state h3 {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 8px;
    color: var(--stk-text-primary);
}

.empty-state p {
    font-size: 14px;
    margin-bottom: 16px;
    color: var(--stk-text-muted);
}

.form-group.full-width {
    grid-column: 1 / -1;
}

.modern-input:focus,
.modern-select:focus {
    outline: none;
    border-color: var(--stk-border-accent);
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.1);
    background: var(--stk-bg-tertiary);
}

.modern-select option {
    background: var(--stk-bg-panel);
    color: var(--stk-text-primary);
    padding: 8px;
}


/* ==========================================================================
   Shared components promoted out of css/alarms.css

   These were global only because alarms.css was linked from the layout
   head. Each family below is used by pages other than Alarms, so it now
   lives in the shared layer. Page stylesheets load after this file and
   may still override any of it.
   ========================================================================== */

/* ==========================================================================
   Page header bar
   ========================================================================== */

/* TradingView Style Header */
.tradingview-header {
    background: var(--stk-bg-primary);
    border: 1px solid var(--stk-border-primary);
    border-radius: 12px;
    padding: 24px 32px;
   /* margin-bottom: 24px;*/
}

.header-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.header-info {
    display: flex;
    align-items: center;
    gap: 16px;
}

.header-icon {
    width: 48px;
    height: 48px;
    background: var(--stk-accent-gradient);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--stk-on-accent);
    font-size: 24px;
}

.header-text {
    padding-left: 4px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.header-title {
    font-size: 28px;
    font-weight: 700;
    color: var(--stk-text-primary);
    margin: 0;
    line-height: 1.2;
}

.header-subtitle {
    font-size: 14px;
    color: var(--stk-text-muted);
    margin: 0;
    font-weight: 400;
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.title-line {
    width: 4px;
    height: 32px;
    background: var(--stk-accent-gradient);
    border-radius: 2px;
}

.header-left {
    display: flex;
    align-items: center;
}

.title-text {
    font-size: 20px;
    font-weight: 700;
    color: var(--stk-text-primary);
    margin: 0;
    letter-spacing: -0.025em;
}

.header-controls {
    display: flex;
    align-items: center;
    gap: 16px;
}

/* ==========================================================================
   TradingView buttons
   ========================================================================== */

.tradingview-btn {
    padding: 12px 24px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 14px;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 8px;
}

    .tradingview-btn.primary {
        background: var(--stk-accent-gradient);
        color: var(--stk-on-accent);
    }

        .tradingview-btn.primary:hover {
            background: var(--stk-accent-gradient-hover);
            transform: translateY(-1px);
        }

        .tradingview-btn.primary:active {
            transform: translateY(0);
        }

/* ==========================================================================
   Modern card shell
   ========================================================================== */

.modern-card {
    background: var(--stk-bg-primary);
    border-radius: 16px;
    border: 1px solid var(--stk-border-primary);
    overflow: hidden;
    backdrop-filter: blur(10px);
}

.modern-card-header {
    background: var(--stk-bg-primary);
    border-bottom: 1px solid var(--stk-border-primary);
    padding: 24px 32px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: 12px 12px 0 0;
}

.modern-body {
    padding: 32px;
    background: var(--stk-bg-panel);
}

/* ==========================================================================
   Modal shell (modern-*)
   ========================================================================== */

.modern-modal-content {
    border: 1px solid var(--stk-border-primary);
    border-radius: 16px;
    overflow: visible;
    background: var(--stk-bg-primary);
    color: var(--stk-text-primary);
}

.modern-header {
    background: var(--stk-accent-gradient);
    border: none;
    padding: 24px 32px;
    position: relative;
}

    .modern-header::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: var(--stk-accent-sheen);
        pointer-events: none;
    }

    .modern-header .header-content {
        display: flex;
        align-items: center;
        gap: 16px;
        position: relative;
        z-index: 1;
    }

    .modern-header .header-icon {
        width: 48px;
        height: 48px;
        background: rgba(var(--stk-on-accent-rgb), 0.2);
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        backdrop-filter: blur(10px);
    }

        .modern-header .header-icon i {
            font-size: 24px;
            color: var(--stk-on-accent);
        }

    .modern-header .header-text h5 {
        margin: 0;
        font-size: 24px;
        font-weight: 700;
        color: var(--stk-on-accent);
    }

.modal-subtitle {
    margin: 4px 0 0 0;
    font-size: 14px;
    color: rgba(var(--stk-on-accent-rgb), 0.8);
    font-weight: 400;
}

.modern-close {
    background: var(--stk-bg-header);
    border: none;
    border-radius: 8px;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--stk-on-accent);
    transition: all 0.2s ease;
    position: relative;
    z-index: 1;
}

    .modern-close:hover {
        background: rgba(var(--stk-on-accent-rgb), 0.2);
        transform: scale(1.05);
    }

.modern-form {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.form-section {
    background: var(--stk-bg-secondary);
    border: 1px solid var(--stk-border-primary);
    border-radius: 12px;
    padding: 24px;
    backdrop-filter: blur(10px);
}

.modern-footer {
    background: var(--stk-bg-tertiary);
    border: none;
    padding: 24px 32px;
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    backdrop-filter: blur(10px);
}

.modern-btn {
    padding: 12px 24px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 14px;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 8px;
}

    .modern-btn.secondary {
        background: rgba(var(--stk-neutral-rgb), 0.2);
        color: var(--stk-text-muted);
        border: 1px solid rgba(var(--stk-neutral-rgb), 0.3);
    }

        .modern-btn.secondary:hover {
            background: rgba(var(--stk-neutral-rgb), 0.3);
            color: var(--stk-text-secondary);
            transform: translateY(-1px);
        }

    .modern-btn.primary {
        background: var(--stk-accent-gradient);
        color: var(--stk-on-accent);
    }

        .modern-btn.primary:hover {
            background: var(--stk-accent-gradient-hover);
            transform: translateY(-1px);
        }

        .modern-btn.primary:active {
            transform: translateY(0);
        }

/* Modal animations */
.modal.fade .modal-dialog {
    transform: scale(0.8) translateY(-50px);
    transition: transform 0.3s ease-out;
}

.modal.show .modal-dialog {
    transform: scale(1) translateY(0);
}

/* ==========================================================================
   Section title
   ========================================================================== */

.section-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--stk-text-primary);
    margin: 0 0 12px 0;
    display: flex;
    align-items: center;
    gap: 16px;
}

    .section-title::before {
        content: '';
        width: 4px;
        height: 20px;
        background: var(--stk-accent-gradient);
        border-radius: 2px;
    }

/* ==========================================================================
   Form controls (extends the base rules above)
   ========================================================================== */

.modern-label.required {
    color: var(--stk-text-primary);
    font-weight: 600;
}

.required-field {
    border-color: var(--stk-error) !important;
    box-shadow: 0 0 0 2px rgba(var(--danger-rgb), 0.1) !important;
}

    .required-field:focus {
        border-color: var(--stk-error) !important;
        box-shadow: 0 0 0 3px rgba(var(--danger-rgb), 0.2) !important;
    }

.modern-input::placeholder {
    color: var(--stk-text-placeholder);
}

.modern-select-wrapper {
    position: relative;
}

.modern-select:focus + .select-icon {
    transform: translateY(-50%) rotate(180deg);
}

.form-hint.error {
    color: var(--stk-error);
}

/* ==========================================================================
   Search box and refresh button
   ========================================================================== */

.search-container {
    position: relative;
    display: flex;
    align-items: center;
}

.search-icon {
    position: absolute;
    left: 16px;
    color: var(--stk-text-placeholder);
    font-size: 16px;
    z-index: 1;
}

.modern-search-input {
    background: var(--stk-bg-tertiary);
    border: 1px solid rgba(var(--primary-rgb), 0.3);
    border-radius: 12px;
    padding: 12px 16px 12px 48px;
    color: var(--stk-text-primary);
    font-size: 14px;
    font-weight: 500;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
    width: 320px;
}

    .modern-search-input:focus {
        outline: none;
        border-color: var(--stk-border-accent);
        box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.1);
        background: var(--stk-bg-tertiary);
        transform: translateY(-1px);
    }

    .modern-search-input::placeholder {
        color: var(--stk-text-placeholder);
        font-weight: 400;
    }

.modern-refresh-btn {
    background: var(--stk-accent-gradient);
    border: none;
    border-radius: 12px;
    padding: 12px 16px;
    color: var(--stk-on-accent);
    font-size: 14px;
    font-weight: 600;
    transition: all 0.3s ease;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
}

    .modern-refresh-btn:hover:not(:disabled) {
        background: var(--stk-accent-gradient-hover);
        transform: translateY(-2px);
    }

    .modern-refresh-btn:active:not(:disabled) {
        transform: translateY(0);
    }

    .modern-refresh-btn:disabled {
        opacity: 0.6;
        cursor: not-allowed;
        transform: none;
    }

.loading-spinner {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid rgba(var(--stk-on-accent-rgb), 0.3);
    border-radius: 50%;
    border-top-color: var(--stk-border-accent);
    animation: spin 1s ease-in-out infinite;
}

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

/* ==========================================================================
   Row action buttons
   ========================================================================== */

.edit-btn {
    background: var(--stk-bg-hover);
    color: var(--stk-accent-primary);
    border: 1px solid rgba(var(--primary-rgb), 0.3);
}

    .edit-btn:hover {
        background: rgba(var(--primary-rgb), 0.2);
        transform: translateY(-1px);
    }

.delete-btn:hover {
    background: rgba(var(--danger-rgb), 0.2);
    transform: translateY(-1px);
}

/* ==========================================================================
   Data table
   ========================================================================== */

.tradingview-table-container {
    background: transparent;
    border-radius: 0;
    overflow: hidden;
    border: none;
    box-shadow: none;
}

.tradingview-table {
    width: 100%;
    border-collapse: collapse;
    background: transparent;
    color: var(--stk-text-primary);
    position: relative;
    /*table-layout: fixed;*/
}

    .tradingview-table thead {
        background: var(--stk-accent-gradient);
        position: sticky;
        top: 0;
        z-index: 10;
    }

    .tradingview-table th {
        padding: 20px 24px;
        text-align: left;
        font-weight: 700;
        font-size: 13px;
        color: var(--stk-on-accent);
        border: none;
        position: relative;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

        /* Sticky header */
        /*.tradingview-table th:last-child {
            background: var(--stk-accent-gradient);
        }*/

    /* Sticky body cells */
    /*.tradingview-table td:last-child {
        background: var(--stk-bg-secondary);
    }*/

    /* Even rows */
    /*.tradingview-table tr:nth-child(even) td:last-child {
        background: var(--stk-bg-secondary);
    }*/

    /* Hovered rows */
    /*.tradingview-table tr:hover td:last-child {
        background: var(--stk-row-hover);
    }*/

.tradingview-sticky-column {
    border-bottom: 1px solid var(--stk-border-secondary);
    background: var(--stk-bg-secondary);
    /* Only the colour animates. `all` also used to drag the transform along,
       and it is what makes var()-driven colours go stale on a theme switch. */
    transition: background-color 0.12s ease;
}

    .tradingview-sticky-column:nth-child(even) {
        background: rgba(var(--stk-neutral-rgb), 0.04);
    }

    /* Flat hover: an accent tint and nothing else - no lift, no scale. */
    .tradingview-sticky-column:hover {
        background: var(--stk-row-hover);
    }

.th-content {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.tradingview-table th.sortable {
    cursor: pointer;
    transition: background-color 0.2s ease;
}

    .tradingview-table th.sortable:hover {
        background: var(--stk-bg-header);
    }

.tradingview-table th i {
    font-size: 12px;
    opacity: 0.8;
}

.tradingview-table td {
    padding: 20px 24px;
    border: none;
    vertical-align: middle;
}

.tradingview-table tbody {
    min-height: 200px;
    display: table-row-group;
}

/* Table Styles */
.sortable:hover {
    background-color: var(--stk-bg-hover) !important;
}

.table-hover tbody tr:hover {
    background-color: var(--stk-bg-hover);
}

.table-primary th {
    color: var(--stk-on-accent) !important;
    border-color: var(--stk-accent-primary);
    background-color: var(--stk-accent-primary) !important;
}

.table-primary .sortable:hover {
    background-color: rgba(var(--primary-rgb), 0.35) !important;
    color: var(--stk-on-accent) !important;
}

/* ==========================================================================
   Consolidated from alarms.css / baselines.css.
   These are used by more than one page or by a shared component,
   so the base definition belongs here rather than in a page stylesheet.
   ========================================================================== */

.tradingview-row {
    border-bottom: 1px solid var(--stk-border-secondary);
    background: var(--stk-bg-secondary);
    /* Only the colour animates. `all` also used to drag the transform along,
       and it is what makes var()-driven colours go stale on a theme switch. */
    transition: background-color 0.12s ease;
}

    .tradingview-row:nth-child(even) {
        background: rgba(var(--stk-neutral-rgb), 0.04);
    }

    /* Flat hover: an accent tint and nothing else - no lift, no scale. */
    .tradingview-row:hover {
        background: var(--stk-row-hover);
    }

.tree-children {
    margin-left: 1.5rem;
    padding-left: 1rem;
}



/* ==========================================================================
   Column filter dropdown (extends the Filter Modal block above)
   ========================================================================== */

.filterable {
    position: relative;
}

.filter-dropdown-container {
    position: relative;
    display: inline-block;
}

.filterable .filter-dropdown-wrapper {
    z-index: 10000 !important;
}

.filter-dropdown-header {
    padding: 12px;
    border-bottom: 1px solid var(--stk-border-primary);
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--stk-text-primary);
}

    .filter-dropdown-header span {
        font-weight: 500;
        font-size: 14px;
    }

.filter-dropdown-search i {
    position: absolute;
    left: 18px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--stk-text-muted);
    font-size: 14px;
}

.filter-search-input:focus {
    outline: none;
    border-color: rgb(var(--primary-rgb));
}

.filter-dropdown-options {
    max-height: 300px;
    overflow-y: auto;
    padding: 4px 0;
}

    /* Custom scrollbar for options */
    .filter-dropdown-options::-webkit-scrollbar {
        width: 6px;
    }

    .filter-dropdown-options::-webkit-scrollbar-track {
        background: var(--stk-bg-secondary);
    }

    .filter-dropdown-options::-webkit-scrollbar-thumb {
        border-radius: 3px;
    }

        .filter-dropdown-options::-webkit-scrollbar-thumb:hover {
            background: var(--stk-text-secondary);
        }

.filter-option {
    display: flex;
    align-items: center;
    padding: 8px 12px;
    cursor: pointer;
    transition: background 0.15s;
    font-size: 13px;
}

    .filter-option:hover {
        background: var(--stk-bg-hover);
    }

    .filter-option.selected {
        background: var(--bs-info-text-emphasis);
        font-weight: 500;
    }

    .filter-option input[type="radio"] {
        margin-right: 8px;
        cursor: pointer;
    }

    .filter-option span {
        flex: 1;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

.filter-count {
    color: var(--stk-text-muted);
    font-size: 12px;
    margin-left: 4px;
}

.filter-btn {
    background: none;
    border: none;
    padding: 4px 8px;
    cursor: pointer;
    border-radius: 3px;
    transition: all 0.2s;
    margin-left: 4px;
    color: var(--stk-on-accent);
}

    .filter-btn:hover {
        background: var(--stk-bg-hover);
        color: var(--stk-on-accent);
    }

    .filter-btn i {
        font-size: 14px;
    }

.close-btn {
    background: none;
    border: none;
    padding: 4px;
    cursor: pointer;
    color: var(--stk-text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 3px;
    transition: background 0.2s;
}

    .close-btn:hover {
        background: var(--stk-bg-hover);
    }

/* ==========================================================================
   Tabs
   ========================================================================== */

.tab-buttons {
    display: flex;
    gap: 8px;
    background: var(--stk-bg-secondary);
    padding: 4px;
    border-radius: 12px;
    border: 1px solid var(--stk-border-primary);
}

.tab-button i {
    font-size: 16px;
}

/* ==========================================================================
   Empty state (empty-content variant)
   ========================================================================== */

.empty-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

    .empty-content i {
        font-size: 48px;
        color: var(--stk-text-placeholder);
        margin-bottom: 8px;
    }

    .empty-content h4 {
        color: var(--stk-text-muted);
        font-size: 18px;
        font-weight: 600;
        margin: 0;
    }

    .empty-content p {
        color: var(--stk-text-placeholder);
        font-size: 14px;
        margin: 0;
    }

/* ==========================================================================
   Alarm status cell - used by the Baselines pages
   ========================================================================== */

/* Enhanced Alarm Status Styling */
.alarm-status-container {
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: flex-start;
}

.status-text {
    font-size: 10px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ==========================================================================
   Ynex avatar override
   ========================================================================== */

/* .avatar intentionally not styled here: Ynex owns it (2.625rem, rounded,
   white text) together with its avatar-sm/md/lg/xl modifiers. An override at
   equal specificity loading after Ynex flattened all of them. */
/* ==========================================================================
   Alarm notification toast - scoped to this component

   AlarmNotificationComponent renders from MainLayout

   Colours come from the --stk-* tokens in css/shared.css.
   ========================================================================== */


.alarm-notification-container {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 999999;
    display: flex;
    flex-direction: column;
    gap: 12px;
    pointer-events: none;
    max-width: 400px;
}

.alarm-notification {
    background: var(--stk-bg-panel);
    border: 1px solid var(--stk-border-secondary);
    border-radius: 12px;
    min-width: 320px;
    max-width: 400px;
    animation: alarm-notification-slide-in 0.3s ease-out;
    overflow: hidden;
    pointer-events: auto;
    position: relative;
    display: block;
    visibility: visible;
    opacity: 1;
}

    .alarm-notification.alarm-notification-error {
        border-color: rgba(var(--danger-rgb), 0.5);
    }

    .alarm-notification.alarm-notification-warning {
        border-color: rgba(var(--warning-rgb), 0.5);
    }

    .alarm-notification.alarm-notification-info {
        border-color: rgba(var(--primary-rgb), 0.5);
    }

    .alarm-notification.alarm-notification-default {
        border-color: rgba(var(--stk-neutral-rgb), 0.5);
    }

.alarm-notification-header {
    display: flex;
    align-items: flex-start;
    padding: 16px 20px 12px 20px;
    gap: 12px;
}

.alarm-notification-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    flex-shrink: 0;
    margin-top: 2px;
}

.alarm-notification-error .alarm-notification-icon {
    background: rgba(var(--danger-rgb), 0.2);
    color: var(--stk-error);
}

.alarm-notification-warning .alarm-notification-icon {
    background: rgba(var(--warning-rgb), 0.2);
    color: var(--stk-warning);
}

.alarm-notification-info .alarm-notification-icon {
    background: rgba(var(--primary-rgb), 0.2);
    color: var(--stk-accent-primary);
}

.alarm-notification-default .alarm-notification-icon {
    background: rgba(var(--stk-neutral-rgb), 0.2);
    color: var(--stk-text-placeholder);
}

.alarm-notification-icon i {
    font-size: 16px;
}

.alarm-notification-content {
    flex: 1;
    min-width: 0;
}

.alarm-notification-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--stk-text-primary);
    margin-bottom: 4px;
}

.alarm-notification-subtitle {
    font-size: 12px;
    color: var(--stk-text-muted);
    font-weight: 500;
}

.alarm-notification-close {
    background: none;
    border: none;
    color: var(--stk-text-muted);
    cursor: pointer;
    padding: 4px;
    border-radius: 4px;
    transition: all 0.2s ease;
    flex-shrink: 0;
    margin-top: 2px;
}

    .alarm-notification-close:hover {
        background: rgba(var(--primary-rgb), 0.1);
        color: var(--stk-text-primary);
    }

    .alarm-notification-close i {
        font-size: 14px;
    }

.alarm-notification-body {
    padding: 0 20px 16px 20px;
}

.alarm-notification-message {
    font-size: 13px;
    color: var(--stk-text-primary);
    line-height: 1.4;
    margin-bottom: 8px;
}

.alarm-notification-details {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 8px;
}

.alarm-notification-detail-label {
    font-size: 11px;
    color: var(--stk-text-muted);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.alarm-notification-detail-value {
    font-size: 12px;
    color: var(--stk-text-primary);
    font-weight: 600;
    font-family: 'Courier New', monospace;
}

.alarm-notification-time {
    font-size: 11px;
    color: var(--stk-text-muted);
    font-weight: 500;
    text-align: right;
}

/* CSS isolation does not scope @keyframes, so these need names distinct from
   the global slideInRight/slideOutRight kept in alarms.css for .alarm-toast. */
@keyframes alarm-notification-slide-in {
    from {
        transform: translateX(100%);
        opacity: 0;
    }

    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes alarm-notification-slide-out {
    from {
        transform: translateX(0);
        opacity: 1;
    }

    to {
        transform: translateX(100%);
        opacity: 0;
    }
}

.alarm-notification.hiding {
    /* Duration comes from ExitAnimationMs via the container's inline style;
       the fallback only matters if that variable ever goes missing. */
    animation: alarm-notification-slide-out var(--alarm-notification-exit-duration, 300ms) ease-in forwards;
}


/* ==========================================================================
   Active location picker in the app header

   Moved here from css/site.css, which has been deleted. Rendered by
   Shared/MainHeader.razor on every page, so it belongs in the shared layer.
   ========================================================================== */

.app-header .location-header-label {
    max-width: 11rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-inline-start: 0.35rem;
    vertical-align: middle;
}

.app-header .header-location-dropdown {
    min-width: 14rem;
    max-width: 20rem;
    padding-block: 0.25rem;
}

    .app-header .header-location-dropdown .dropdown-item {
        width: 100%;
        text-align: start;
        border: 0;
        background: transparent;
    }

        .app-header .header-location-dropdown .dropdown-item.active {
            font-weight: 600;
        }

/* ==========================================================================
   Tabs
   ========================================================================== */

.tradingview-tabs {
    margin-bottom: 24px;
}

.management-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 1.5rem;
    border-bottom: 2px solid var(--stk-border-secondary);
    padding-bottom: 8px;
}

.tab-nav {
    display: flex;
    background: var(--stk-bg-secondary);
    border-radius: 8px;
    padding: 4px;
    border: 1px solid var(--stk-border-primary);
}

.tab-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 16px;
    border: none;
    background: transparent;
    color: var(--stk-text-muted);
    font-size: 14px;
    font-weight: 500;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
}

    .tab-btn:hover {
        color: var(--stk-text-secondary);
        background: var(--stk-bg-hover);
    }

    .tab-btn.active {
        background: var(--stk-accent-gradient);
        color: var(--stk-on-accent);
    }

    .tab-btn i {
        font-size: 16px;
    }

.alarm-tab-content {
    display: none;
}

    .alarm-tab-content.active {
        display: block;
    }

.alarm-type-tabs {
    margin-bottom: 24px;
}

/* ==========================================================================
   Modal
   ========================================================================== */


.systek-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1050;
    background: rgba(0, 0, 0, 0.5);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 200ms ease, visibility 200ms ease;
}

    .systek-modal-backdrop.show {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }

.systek-modal {
    --bs-modal-padding: 1rem;
    position: absolute;
    inset: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow-x: hidden;
    overflow-y: auto;
    opacity: 0;
    transition: opacity 200ms ease;
}

    .systek-modal.show {
        opacity: 1;
    }

.systek-modal-dialog {
    width: 800px;
    max-width: 800px;
    margin: 1.75rem auto;
    transform: translateY(-12px);
    transition: transform 200ms ease;
}

.systek-modal.show .systek-modal-dialog {
    transform: translateY(0);
}

.systek-modal-content {
    max-height: 90vh;
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    background: var(--bs-modal-bg, #fff);
    border: 1px solid var(--bs-modal-border-color, rgba(0, 0, 0, 0.175));
    border-radius: var(--bs-modal-border-radius, 0.5rem);
    outline: 0;
}

.systek-modal .modal-body {
    max-height: 700px;
    overflow-y: auto;
}

.systek-modal-small {
    height: 175px;
}

.systek-modal-large {
    height: 700px;
}

@media (prefers-reduced-motion: reduce) {
    .systek-modal-backdrop,
    .systek-modal,
    .systek-modal-dialog {
        transition: none;
    }
}