/* ============================================================
TECHNICAL TERMINAL CSS
----------------------

Purpose:

* Technical / Share Market dashboard
* Light + Dark theme support
* Single-button theme toggle compatible
* Fixed sidebar + header
* Trading terminal components
* Charts / watchlists / tables / order panels
* Alerts / badges / live indicators
* Desktop + tablet + mobile responsive
* Compact professional UI
* Existing dashboard class compatibility
  ============================================================ */

/* ============================================================
01. THEME VARIABLES
============================================================ */

:root {
color-scheme: light;


--body-bg: #f5f6f8;

--surface: #ffffff;
--surface-2: #f8fafc;
--surface-3: #f1f5f9;

--sidebar-bg: #111827;
--sidebar-hover: #1f2937;
--sidebar-active: #2563eb;

--header-bg: #ffffff;

--border: #e5e7eb;
--border-light: #eef2f7;

--text: #1f2937;
--text-secondary: #4b5563;
--text-muted: #6b7280;
--text-faint: #94a3b8;

--primary: #2563eb;
--primary-hover: #1d4ed8;
--primary-soft: rgba(37, 99, 235, 0.10);

--success: #16a34a;
--success-soft: rgba(22, 163, 74, 0.10);

--danger: #dc2626;
--danger-soft: rgba(220, 38, 38, 0.10);

--warning: #d97706;
--warning-soft: rgba(217, 119, 6, 0.10);

--info: #0891b2;
--info-soft: rgba(8, 145, 178, 0.10);

--shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.04);
--shadow-sm: 0 2px 6px rgba(15, 23, 42, 0.06);
--shadow-md: 0 5px 18px rgba(15, 23, 42, 0.08);

--radius-xs: 4px;
--radius-sm: 6px;
--radius-md: 8px;
--radius-lg: 10px;

--sidebar-width: 240px;
--sidebar-collapsed-width: 50px;

--topbar-height: 40px;

--transition-fast: 0.15s ease;
--transition: 0.25s ease;


}

/* DARK THEME */

html[data-theme="dark"] {
color-scheme: dark;


--body-bg: #0b1120;

--surface: #111827;
--surface-2: #172033;
--surface-3: #1e293b;

--sidebar-bg: #080d18;
--sidebar-hover: #172033;
--sidebar-active: #2563eb;

--header-bg: #111827;

--border: #273449;
--border-light: #1f2b3d;

--text: #e5e7eb;
--text-secondary: #cbd5e1;
--text-muted: #94a3b8;
--text-faint: #64748b;

--primary: #3b82f6;
--primary-hover: #60a5fa;
--primary-soft: rgba(59, 130, 246, 0.14);

--success: #22c55e;
--success-soft: rgba(34, 197, 94, 0.12);

--danger: #ef4444;
--danger-soft: rgba(239, 68, 68, 0.12);

--warning: #f59e0b;
--warning-soft: rgba(245, 158, 11, 0.12);

--info: #22d3ee;
--info-soft: rgba(34, 211, 238, 0.12);

--shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.20);
--shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.25);
--shadow-md: 0 8px 25px rgba(0, 0, 0, 0.30);


}

/* ============================================================
02. GLOBAL RESET
============================================================ */

*,
*::before,
*::after {
box-sizing: border-box;
}

html {
min-height: 100%;
background: var(--body-bg);
}

body {
margin: 0;
padding: 0;


font-family:
    Arial,
    Helvetica,
    sans-serif;

font-size: 13px;
line-height: 1.4;

background: var(--body-bg);
color: var(--text);

transition:
    background-color var(--transition),
    color var(--transition);


}

button,
input,
select,
textarea {
font: inherit;
}

button {
outline: none;
}

a {
color: inherit;
}

img {
max-width: 100%;
}

table {
border-collapse: collapse;
}

/* ============================================================
03. SCROLLBAR
============================================================ */

* {
  scrollbar-width: thin;
  scrollbar-color: #cbd5e1 transparent;
  }

html[data-theme="dark"] * {
scrollbar-color: #475569 transparent;
}

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

::-webkit-scrollbar-track {
background: transparent;
}

::-webkit-scrollbar-thumb {
background: #cbd5e1;
border-radius: 20px;
}

html[data-theme="dark"] ::-webkit-scrollbar-thumb {
background: #475569;
}

::-webkit-scrollbar-thumb:hover {
background: #94a3b8;
}

/* ============================================================
04. MAIN TECHNICAL LAYOUT
============================================================ */

.technical-layout {
min-height: 100vh;
width: 100%;
}

/* ============================================================
05. SIDEBAR
============================================================ */

.sidebar {
position: fixed;


left: 0;
top: 0;
bottom: 0;

width: var(--sidebar-width);

background: var(--sidebar-bg);
color: #fff;

z-index: 1000;

overflow-x: hidden;
overflow-y: auto;

transition:
    width var(--transition),
    background-color var(--transition);

box-shadow: 1px 0 0 rgba(255,255,255,0.04);


}

.sidebar.collapsed {
width: var(--sidebar-collapsed-width);
}

/* ============================================================
SIDEBAR LOGO
============================================================ */

.sidebar-logo {
height: var(--topbar-height);
width: 100%;

display: flex;
align-items: center;

padding: 0 10px;

border-bottom: 1px solid rgba(255,255,255,0.08);

white-space: nowrap;
overflow: hidden;

}

/* ------------------------------------------------------------
LOGO
Same exact size in expanded and collapsed states
------------------------------------------------------------ */

.sidebar-logo .technical-logo {
display: block;

width: 24px !important;
height: 24px !important;

min-width: 24px !important;
min-height: 24px !important;

max-width: 24px !important;
max-height: 24px !important;

flex: 0 0 24px !important;

object-fit: contain;
object-position: center;

margin: 0 !important;
padding: 0 !important;

}

/* ------------------------------------------------------------
LOGO TEXT
------------------------------------------------------------ */

.sidebar-logo span {
display: block;

margin-left: 8px;

font-size: 16px;
font-weight: 700;
line-height: 1;

color: #fff;

white-space: nowrap;

opacity: 1;

transition:
    opacity var(--transition),
    transform var(--transition),
    margin var(--transition);

}

/* ------------------------------------------------------------
COLLAPSED
Only hide the text.
DO NOT resize the logo.
------------------------------------------------------------ */

.sidebar.collapsed .sidebar-logo {
padding: 0;

justify-content: center;

}

.sidebar.collapsed .sidebar-logo span {
width: 0;

margin-left: 0;

opacity: 0;

transform: translateX(-5px);

overflow: hidden;

}


/* ============================================================
SIDEBAR MENU
============================================================ */

.sidebar-menu {
padding: 6px 5px;
}


.menu-item {
display: flex;
align-items: center;


width: 100%;
height: 40px;

padding: 0 5px;
margin-bottom: 4px;

border-radius: var(--radius-sm);

color: #cbd5e1;

text-decoration: none;

white-space: nowrap;
overflow: hidden;

transition:
    background-color var(--transition-fast),
    color var(--transition-fast);


}

.menu-item:hover {
background: var(--sidebar-hover);
color: #fff;
}

.menu-item.active {
background: var(--sidebar-active);
color: #fff;
}

.menu-item i {
width: 30px;
min-width: 30px;


text-align: center;

font-size: 15px;


}

.menu-item span {
margin-left: 8px;


font-size: 13px;

white-space: nowrap;

transition:
    opacity var(--transition),
    transform var(--transition);


}

.sidebar.collapsed .menu-item span {
opacity: 0;
transform: translateX(-5px);
}

/* SIDEBAR SECTION */

.sidebar-section-title {
padding: 12px 10px 5px;


color: #64748b;

font-size: 9px;
font-weight: 700;

text-transform: uppercase;
letter-spacing: 0.7px;

white-space: nowrap;


}

.sidebar.collapsed .sidebar-section-title {
opacity: 0;
}

/* SIDEBAR BADGE */

.sidebar-badge {
margin-left: auto;


padding: 2px 6px;

border-radius: 10px;

background: rgba(255,255,255,0.10);

color: #cbd5e1;

font-size: 9px;


}

/* ============================================================
06. MAIN CONTENT
============================================================ */

.main {
min-height: 100vh;


margin-left: var(--sidebar-width);

background: var(--body-bg);

transition:
    margin-left var(--transition),
    background-color var(--transition);


}

.sidebar.collapsed ~ .main {
margin-left: var(--sidebar-collapsed-width);
}

/* ============================================================
07. TOP HEADER
============================================================ */

.topbar {
position: sticky;


top: 0;

width: 100%;

height: var(--topbar-height) !important;
min-height: var(--topbar-height) !important;
max-height: var(--topbar-height) !important;

display: flex;
align-items: center;

padding: 0 10px;

background: var(--header-bg);

border-bottom: 1px solid var(--border);

z-index: 900;

box-shadow: var(--shadow-xs);

transition:
    background-color var(--transition),
    border-color var(--transition);


}

/* HEADER LEFT */

.topbar-left {
display: flex;
align-items: center;


min-width: 0;


}

.topbar-title {
margin-left: 10px;


font-size: 15px;
font-weight: 600;

line-height: var(--topbar-height);

color: var(--text);

white-space: nowrap;

overflow: hidden;
text-overflow: ellipsis;


}

/* HEADER CENTER */

.topbar-center {
display: flex;
align-items: center;


min-width: 0;

margin: 0 auto;


}

/* HEADER RIGHT */

.topbar-right {
display: flex;
align-items: center;


gap: 5px;

margin-left: auto;


}

/* ============================================================
08. SIDEBAR TOGGLE
============================================================ */

.toggle-button {
width: 32px;
height: 32px;


min-width: 32px;

padding: 0;
margin: 0;

display: inline-flex;
align-items: center;
justify-content: center;

border: 0;

border-radius: var(--radius-sm);

background: transparent;

color: var(--text-secondary);

cursor: pointer;

font-size: 16px;

transition:
    background-color var(--transition-fast),
    color var(--transition-fast);


}

.toggle-button:hover {
background: var(--surface-3);
color: var(--text);
}

/* ============================================================
09. LIGHT / DARK THEME BUTTON
============================================================ */

.theme-toggle {
width: 32px;
height: 32px;
min-width: 32px;
min-height: 32px;
padding: 0;

display: inline-flex;
align-items: center;
justify-content: center;

border: 1px solid transparent;
border-radius: var(--radius-sm);

cursor: pointer;

font-size: 14px;
line-height: 1;

transition:
    background-color var(--transition-fast),
    border-color var(--transition-fast),
    color var(--transition-fast),
    transform var(--transition-fast);

}

/* ------------------------------------------------------------
LIGHT THEME
------------------------------------------------------------ */

html:not([data-theme="dark"]) .theme-toggle {
background: #f59e0b;
color: #000000;
border-color: #f59e0b;
}

html:not([data-theme="dark"]) .theme-toggle:hover {
background: #d97706;
color: #000000;
border-color: #d97706;
transform: translateY(-1px);
}

/* ------------------------------------------------------------
DARK THEME
------------------------------------------------------------ */

html[data-theme="dark"] .theme-toggle {
background: #ffffff;
color: #000000;
border-color: #ffffff;
}

html[data-theme="dark"] .theme-toggle:hover {
background: #f1f1f1;
color: #000000;
border-color: #f1f1f1;
transform: translateY(-1px);
}


.theme-toggle:active {
transform: translateY(0);
}

.theme-toggle i {
display: inline-flex;
align-items: center;
justify-content: center;
}

/* ------------------------------------------------------------
THEME ICONS
------------------------------------------------------------ */

.theme-icon-dark {
display: inline-flex !important;
}

.theme-icon-light {
display: none !important;
}

html[data-theme="dark"] .theme-icon-dark {
display: inline-flex !important;
}

html[data-theme="dark"] .theme-icon-light {
display: none !important;
}

/* ============================================================
HEADER AUTH BUTTONS
============================================================ */

.header-auth-form {
display: inline-flex;
margin: 0;
padding: 0;
}

.header-auth-button {
text-decoration: none;
}

/* Logout */

.logout-button {
background: #000000 !important;
color: #ffffff !important;
border-color: #000000 !important;
}

.logout-button:hover {
background: #1f1f1f !important;
color: #ffffff !important;
border-color: #1f1f1f !important;
}

/* Login */

.login-button {
background: #2563eb !important;
color: #ffffff !important;
border-color: #2563eb !important;
}

.login-button:hover {
background: #1d4ed8 !important;
color: #ffffff !important;
border-color: #1d4ed8 !important;
}

/* Keep auth icons white regardless of theme */

.login-button i,
.logout-button i {
color: #ffffff !important;
}

/* ============================================================
10. HEADER ACTIONS
============================================================ */

.header-action {
width: 32px;
height: 32px;


display: inline-flex;
align-items: center;
justify-content: center;

border: 1px solid var(--border);

border-radius: var(--radius-sm);

background: var(--surface);

color: var(--text-secondary);

cursor: pointer;

transition:
    border-color var(--transition-fast),
    background-color var(--transition-fast),
    color var(--transition-fast);


}

.header-action:hover {
background: var(--surface-3);
color: var(--primary);
border-color: var(--primary);
}

/* ============================================================
11. CONTENT
============================================================ */

.content {
padding: 20px;
min-width: 0;
}

/* ============================================================
12. PAGE TITLE
============================================================ */

.page-title {
margin-bottom: 15px;
}

.page-title h1 {
margin: 0;


color: var(--text);

font-size: 24px;
font-weight: 700;

line-height: 1.25;


}

.page-title p {
margin: 4px 0 0;


color: var(--text-muted);

font-size: 13px;


}

/* ============================================================
13. SUMMARY GRID
============================================================ */

.summary-grid {
display: grid;


grid-template-columns:
    repeat(4, minmax(0, 1fr));

gap: 12px;

margin-bottom: 15px;


}

/* ============================================================
14. SUMMARY CARD
============================================================ */

.summary-card {
min-width: 0;


padding: 14px;

background: var(--surface);

border: 1px solid var(--border);

border-radius: var(--radius-md);

box-shadow: var(--shadow-xs);

transition:
    background-color var(--transition),
    border-color var(--transition),
    box-shadow var(--transition);


}

.summary-card:hover {
box-shadow: var(--shadow-sm);
}

.summary-title {
margin-bottom: 5px;


color: var(--text-muted);

font-size: 11px;
font-weight: 600;

text-transform: uppercase;
letter-spacing: 0.3px;


}

.summary-value {
color: var(--text);


font-size: 22px;
font-weight: 700;

line-height: 1.2;


}

.summary-change {
margin-top: 5px;


color: var(--text-muted);

font-size: 11px;


}

/* ============================================================
15. COLORS
============================================================ */

.positive {
color: var(--success) !important;
}

.negative {
color: var(--danger) !important;
}

.unchanged {
color: var(--text-muted) !important;
}

.warning {
color: var(--warning) !important;
}

.info {
color: var(--info) !important;
}

/* ============================================================
16. CARDS / PANELS
============================================================ */

.card,
.panel,
.table-card,
.chart-card,
.market-card,
.order-card,
.watchlist-card,
.stats-card {
background: var(--surface);


border: 1px solid var(--border);

border-radius: var(--radius-md);

box-shadow: var(--shadow-xs);

transition:
    background-color var(--transition),
    border-color var(--transition),
    box-shadow var(--transition);


}

.card-header,
.panel-header,
.chart-header,
.market-card-header,
.order-card-header,
.watchlist-header {
min-height: 40px;


display: flex;
align-items: center;

padding: 8px 12px;

border-bottom: 1px solid var(--border);

color: var(--text);

font-weight: 600;


}

.card-body,
.panel-body,
.chart-body,
.market-card-body,
.order-card-body,
.watchlist-body {
padding: 12px;
}

/* ============================================================
17. TABLE CARD
============================================================ */

.table-card {
padding: 14px;


overflow: hidden;


}

/* ============================================================
18. GENERIC GRID
============================================================ */

.grid {
display: grid;


gap: 12px;


}

.grid-2 {
grid-template-columns:
repeat(2, minmax(0, 1fr));
}

.grid-3 {
grid-template-columns:
repeat(3, minmax(0, 1fr));
}

.grid-4 {
grid-template-columns:
repeat(4, minmax(0, 1fr));
}

.grid-auto {
grid-template-columns:
repeat(auto-fit, minmax(240px, 1fr));
}

/* ============================================================
19. CHART WORKSPACE
============================================================ */

.chart-workspace {
position: relative;


width: 100%;
min-width: 0;

background: var(--surface);

border: 1px solid var(--border);

border-radius: var(--radius-md);

overflow: hidden;


}

.chart-container,
.chart-area {
position: relative;


width: 100%;

min-height: 300px;

background: var(--surface);


}

.chart-container canvas,
.chart-area canvas {
max-width: 100%;
}

/* CHART TOOLBAR */

.chart-toolbar {
min-height: 38px;


display: flex;
align-items: center;

gap: 5px;

padding: 5px 8px;

background: var(--surface-2);

border-bottom: 1px solid var(--border);

overflow-x: auto;


}

.chart-tool {
height: 28px;


padding: 0 8px;

border: 1px solid transparent;

border-radius: var(--radius-xs);

background: transparent;

color: var(--text-secondary);

font-size: 11px;

cursor: pointer;

white-space: nowrap;


}

.chart-tool:hover,
.chart-tool.active {
background: var(--primary-soft);


color: var(--primary);

border-color: rgba(37,99,235,0.20);


}

/* ============================================================
20. WATCHLIST
============================================================ */

.watchlist {
width: 100%;


overflow: hidden;


}

.watchlist-row {
min-height: 44px;


display: grid;

grid-template-columns:
    minmax(90px, 1fr)
    minmax(75px, auto)
    minmax(70px, auto);

align-items: center;

gap: 8px;

padding: 5px 10px;

border-bottom: 1px solid var(--border-light);

cursor: pointer;

transition:
    background-color var(--transition-fast);


}

.watchlist-row:hover {
background: var(--surface-2);
}

.watchlist-symbol {
min-width: 0;


color: var(--text);

font-size: 12px;
font-weight: 700;

overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;


}

.watchlist-price {
text-align: right;


color: var(--text);

font-size: 12px;
font-weight: 600;


}

.watchlist-change {
text-align: right;


font-size: 11px;
font-weight: 600;


}

/* ============================================================
21. QUOTE / INSTRUMENT
============================================================ */

.quote-box {
display: flex;
align-items: center;


gap: 15px;

min-width: 0;


}

.quote-symbol {
color: var(--text);


font-size: 15px;
font-weight: 700;


}

.quote-price {
color: var(--text);


font-size: 22px;
font-weight: 700;


}

.quote-change {
font-size: 12px;
font-weight: 600;
}

.quote-meta {
display: flex;
flex-wrap: wrap;


gap: 12px;

margin-top: 6px;

color: var(--text-muted);

font-size: 10px;


}

/* ============================================================
22. MARKET TICKER
============================================================ */

.market-ticker {
display: flex;
align-items: stretch;


width: 100%;

overflow-x: auto;

background: var(--surface);

border-top: 1px solid var(--border);
border-bottom: 1px solid var(--border);


}

.ticker-item {
min-width: 140px;


padding: 7px 10px;

border-right: 1px solid var(--border);

white-space: nowrap;


}

.ticker-symbol {
color: var(--text-secondary);


font-size: 10px;
font-weight: 700;


}

.ticker-price {
margin-left: 5px;


color: var(--text);

font-size: 12px;
font-weight: 700;


}

.ticker-change {
margin-left: 4px;


font-size: 10px;


}

/* ============================================================
23. ORDER BOOK
============================================================ */

.order-book {
width: 100%;


font-variant-numeric: tabular-nums;


}

.order-book-header,
.order-book-row {
display: grid;


grid-template-columns:
    1fr
    1fr
    1fr;

align-items: center;

gap: 5px;


}

.order-book-header {
padding: 6px 8px;


background: var(--surface-2);

color: var(--text-muted);

font-size: 9px;
font-weight: 700;

text-transform: uppercase;


}

.order-book-row {
position: relative;


min-height: 25px;

padding: 3px 8px;

color: var(--text-secondary);

font-size: 11px;

border-bottom: 1px solid var(--border-light);


}

.order-book-row span:nth-child(2) {
text-align: center;
}

.order-book-row span:last-child {
text-align: right;
}

.order-book-ask {
color: var(--danger);
}

.order-book-bid {
color: var(--success);
}

.order-book-spread {
padding: 6px 8px;


text-align: center;

background: var(--surface-3);

color: var(--text);

font-size: 10px;
font-weight: 600;


}

/* ============================================================
24. ORDER TICKET
============================================================ */

.order-ticket {
background: var(--surface);


border: 1px solid var(--border);

border-radius: var(--radius-md);

overflow: hidden;


}

.order-tabs {
display: grid;


grid-template-columns: 1fr 1fr;

border-bottom: 1px solid var(--border);


}

.order-tab {
height: 36px;


border: 0;

background: transparent;

color: var(--text-muted);

cursor: pointer;

font-size: 11px;
font-weight: 600;


}

.order-tab:hover {
background: var(--surface-2);
}

.order-tab.active.buy {
background: var(--success-soft);
color: var(--success);
}

.order-tab.active.sell {
background: var(--danger-soft);
color: var(--danger);
}

.order-form {
padding: 12px;
}

/* ============================================================
25. FORMS
============================================================ */

.form-group {
margin-bottom: 10px;
}

.form-label {
display: block;


margin-bottom: 4px;

color: var(--text-secondary);

font-size: 10px;
font-weight: 600;


}

.form-control,
.form-select,
input.form-control,
select.form-control,
textarea.form-control {
width: 100%;


min-height: 34px;

padding: 6px 9px;

background: var(--surface);

border: 1px solid var(--border);

border-radius: var(--radius-sm);

color: var(--text);

outline: none;

transition:
    border-color var(--transition-fast),
    box-shadow var(--transition-fast),
    background-color var(--transition-fast);


}

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

.form-control:focus,
.form-select:focus {
border-color: var(--primary);


box-shadow:
    0 0 0 2px var(--primary-soft);


}

.form-control:disabled,
.form-select:disabled {
opacity: 0.6;
cursor: not-allowed;
}

/* ============================================================
26. BUTTONS
============================================================ */

.btn {
min-height: 32px;


display: inline-flex;
align-items: center;
justify-content: center;

gap: 5px;

padding: 0 11px;

border: 1px solid transparent;

border-radius: var(--radius-sm);

background: var(--surface-3);

color: var(--text);

font-size: 11px;
font-weight: 600;

text-decoration: none;

cursor: pointer;

transition:
    background-color var(--transition-fast),
    border-color var(--transition-fast),
    color var(--transition-fast),
    transform var(--transition-fast);


}

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

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

.btn-primary {
background: var(--primary);
border-color: var(--primary);
color: #fff;
}

.btn-primary:hover {
background: var(--primary-hover);
}

.btn-success {
background: var(--success);
border-color: var(--success);
color: #fff;
}

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

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

.btn-outline {
background: transparent;


border-color: var(--border);

color: var(--text-secondary);


}

.btn-outline:hover {
background: var(--surface-2);


border-color: var(--primary);

color: var(--primary);


}

.btn-sm {
min-height: 28px;
padding: 0 8px;
font-size: 10px;
}

.btn-lg {
min-height: 38px;
padding: 0 15px;
font-size: 12px;
}

/* ============================================================
27. BADGES
============================================================ */

.badge {
display: inline-flex;
align-items: center;
justify-content: center;


min-height: 20px;

padding: 2px 7px;

border-radius: 20px;

background: var(--surface-3);

color: var(--text-secondary);

font-size: 9px;
font-weight: 700;

white-space: nowrap;


}

.badge-primary {
background: var(--primary-soft);
color: var(--primary);
}

.badge-success {
background: var(--success-soft);
color: var(--success);
}

.badge-danger {
background: var(--danger-soft);
color: var(--danger);
}

.badge-warning {
background: var(--warning-soft);
color: var(--warning);
}

.badge-info {
background: var(--info-soft);
color: var(--info);
}

/* ============================================================
28. STATUS DOT
============================================================ */

.status-dot {
width: 7px;
height: 7px;


min-width: 7px;

display: inline-block;

border-radius: 50%;

background: var(--text-muted);


}

.status-dot.online {
background: var(--success);


animation: pulse-status 1.8s infinite;


}

.status-dot.offline {
background: var(--danger);
}

.status-dot.warning {
background: var(--warning);
}

/* ============================================================
29. DATATABLE
============================================================ */

#stocksTable {
width: 100% !important;


color: var(--text);


}

#stocksTable thead {
background: var(--surface-2);
}

#stocksTable thead tr {
height: 28px !important;
}

#stocksTable thead th {
height: 28px !important;
min-height: 28px !important;
max-height: 28px !important;


padding: 4px 8px !important;

white-space: nowrap !important;

color: var(--text-secondary);

font-size: 10px !important;
font-weight: 700;

line-height: 20px !important;

vertical-align: middle !important;

border-bottom: 1px solid var(--border);

box-sizing: border-box !important;


}

#stocksTable tbody td {
padding: 8px 10px;


white-space: nowrap;

color: var(--text);

font-size: 13px;

border-bottom: 1px solid var(--border-light);


}

#stocksTable tbody tr:hover {
background: var(--surface-2);
}

.symbol {
color: var(--text);


font-weight: 700;


}

/* DATATABLE CONTROLS */

.dataTables_wrapper {
color: var(--text-secondary);
}

.dataTables_wrapper select,
.dataTables_wrapper input {
min-height: 30px;


padding: 4px 7px;

background: var(--surface);

border: 1px solid var(--border);

border-radius: var(--radius-xs);

color: var(--text);

outline: none;


}

.dataTables_wrapper input:focus,
.dataTables_wrapper select:focus {
border-color: var(--primary);
}

.dataTables_info {
color: var(--text-muted) !important;


font-size: 10px;


}

.dataTables_paginate {
font-size: 10px;
}

/* ============================================================
30. GENERIC TABLE
============================================================ */

.data-table {
width: 100%;


color: var(--text);

font-size: 11px;


}

.data-table th {
padding: 7px 9px;


background: var(--surface-2);

color: var(--text-muted);

border-bottom: 1px solid var(--border);

font-size: 9px;
font-weight: 700;

text-align: left;

white-space: nowrap;


}

.data-table td {
padding: 8px 9px;


border-bottom: 1px solid var(--border-light);

white-space: nowrap;


}

.data-table tbody tr:hover {
background: var(--surface-2);
}

/* ============================================================
31. TABS
============================================================ */

.tabs {
display: flex;
align-items: center;


gap: 2px;

border-bottom: 1px solid var(--border);

overflow-x: auto;


}

.tab {
position: relative;


height: 36px;

padding: 0 12px;

display: inline-flex;
align-items: center;

border: 0;

background: transparent;

color: var(--text-muted);

font-size: 11px;
font-weight: 600;

cursor: pointer;

white-space: nowrap;


}

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

.tab.active {
color: var(--primary);
}

.tab.active::after {
content: "";


position: absolute;

left: 10px;
right: 10px;
bottom: -1px;

height: 2px;

background: var(--primary);

border-radius: 2px 2px 0 0;


}

/* ============================================================
32. FILTER BAR
============================================================ */

.filter-bar {
display: flex;
align-items: center;


flex-wrap: wrap;

gap: 6px;

padding: 8px;

background: var(--surface-2);

border: 1px solid var(--border);

border-radius: var(--radius-md);


}

.search-box {
position: relative;


min-width: 180px;


}

.search-box input {
padding-left: 30px;
}

.search-box i {
position: absolute;


left: 10px;
top: 50%;

transform: translateY(-50%);

color: var(--text-muted);

font-size: 11px;


}

/* ============================================================
33. ALERTS
============================================================ */

.alert {
display: flex;
align-items: flex-start;


gap: 8px;

padding: 9px 11px;

margin-bottom: 10px;

border: 1px solid var(--border);

border-radius: var(--radius-sm);

background: var(--surface);

color: var(--text-secondary);

font-size: 11px;


}

.alert i {
margin-top: 1px;
}

.alert-success {
background: var(--success-soft);
border-color: rgba(22,163,74,0.20);
color: var(--success);
}

.alert-danger {
background: var(--danger-soft);
border-color: rgba(220,38,38,0.20);
color: var(--danger);
}

.alert-warning {
background: var(--warning-soft);
border-color: rgba(217,119,6,0.20);
color: var(--warning);
}

.alert-info {
background: var(--info-soft);
border-color: rgba(8,145,178,0.20);
color: var(--info);
}

/* ============================================================
34. TOAST
============================================================ */

.toast-container {
position: fixed;


top: 50px;
right: 15px;

z-index: 5000;

display: flex;
flex-direction: column;

gap: 8px;


}

.toast {
min-width: 260px;
max-width: 380px;


padding: 10px 12px;

background: var(--surface);

border: 1px solid var(--border);

border-radius: var(--radius-md);

box-shadow: var(--shadow-md);

color: var(--text);

font-size: 11px;

animation: toast-in 0.25s ease;


}

/* ============================================================
35. MODAL
============================================================ */

.modal-overlay {
position: fixed;


inset: 0;

z-index: 4000;

display: flex;
align-items: center;
justify-content: center;

padding: 15px;

background: rgba(15,23,42,0.50);

backdrop-filter: blur(2px);


}

.modal {
width: 100%;
max-width: 600px;
max-height: calc(100vh - 30px);


overflow: auto;

background: var(--surface);

border: 1px solid var(--border);

border-radius: var(--radius-lg);

box-shadow: var(--shadow-md);


}

.modal-header {
min-height: 42px;


display: flex;
align-items: center;

padding: 8px 12px;

border-bottom: 1px solid var(--border);

color: var(--text);

font-weight: 700;


}

.modal-body {
padding: 14px;
}

.modal-footer {
display: flex;
align-items: center;
justify-content: flex-end;


gap: 6px;

padding: 9px 12px;

border-top: 1px solid var(--border);


}

/* ============================================================
36. DROPDOWN
============================================================ */

.dropdown {
position: relative;
}

.dropdown-menu {
position: absolute;


top: calc(100% + 5px);
right: 0;

min-width: 170px;

padding: 5px;

background: var(--surface);

border: 1px solid var(--border);

border-radius: var(--radius-sm);

box-shadow: var(--shadow-md);

z-index: 2000;


}

.dropdown-item {
display: flex;
align-items: center;


width: 100%;

min-height: 32px;

padding: 0 8px;

border: 0;

border-radius: var(--radius-xs);

background: transparent;

color: var(--text-secondary);

font-size: 11px;

text-decoration: none;

cursor: pointer;

text-align: left;


}

.dropdown-item:hover {
background: var(--surface-2);


color: var(--text);


}

/* ============================================================
37. LIVE DATA
============================================================ */

.live-value {
transition:
background-color 0.25s ease,
color 0.25s ease;
}

.live-up {
animation: flash-up 0.7s ease;
}

.live-down {
animation: flash-down 0.7s ease;
}

.price-up {
color: var(--success) !important;
}

.price-down {
color: var(--danger) !important;
}

/* ============================================================
38. SKELETON LOADING
============================================================ */

.skeleton {
position: relative;


overflow: hidden;

background: var(--surface-3);

border-radius: var(--radius-xs);

color: transparent !important;


}

.skeleton::after {
content: "";


position: absolute;

top: 0;
left: -100%;

width: 100%;
height: 100%;

background:
    linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,0.20),
        transparent
    );

animation: skeleton-slide 1.3s infinite;


}

html[data-theme="dark"] .skeleton::after {
background:
linear-gradient(
90deg,
transparent,
rgba(255,255,255,0.05),
transparent
);
}

/* ============================================================
39. HEATMAP
============================================================ */

.heatmap {
display: grid;


grid-template-columns:
    repeat(auto-fit, minmax(80px, 1fr));

gap: 3px;


}

.heatmap-cell {
min-height: 45px;


display: flex;
flex-direction: column;

align-items: center;
justify-content: center;

padding: 4px;

border-radius: var(--radius-xs);

background: var(--surface-3);

color: var(--text);

font-size: 9px;


}

.heatmap-cell.positive {
background: var(--success-soft);
}

.heatmap-cell.negative {
background: var(--danger-soft);
}

/* ============================================================
40. SIGNAL CARDS
============================================================ */

.signal-card {
position: relative;


padding: 12px;

background: var(--surface);

border: 1px solid var(--border);

border-radius: var(--radius-md);


}

.signal-card.buy {
border-left: 3px solid var(--success);
}

.signal-card.sell {
border-left: 3px solid var(--danger);
}

.signal-card.neutral {
border-left: 3px solid var(--text-muted);
}

.signal-title {
color: var(--text-muted);


font-size: 9px;
font-weight: 700;

text-transform: uppercase;


}

.signal-value {
margin-top: 4px;


color: var(--text);

font-size: 18px;
font-weight: 700;


}

/* ============================================================
41. POSITION CARD
============================================================ */

.position-card {
padding: 12px;


background: var(--surface);

border: 1px solid var(--border);

border-radius: var(--radius-md);


}

.position-header {
display: flex;
align-items: center;
justify-content: space-between;


gap: 10px;

margin-bottom: 10px;


}

.position-symbol {
color: var(--text);


font-size: 13px;
font-weight: 700;


}

.position-grid {
display: grid;


grid-template-columns:
    repeat(2, minmax(0, 1fr));

gap: 8px;


}

.position-label {
color: var(--text-muted);


font-size: 9px;


}

.position-value {
margin-top: 2px;


color: var(--text);

font-size: 12px;
font-weight: 600;


}

/* ============================================================
42. STATISTICS
============================================================ */

.stats-grid {
display: grid;


grid-template-columns:
    repeat(4, minmax(0, 1fr));

gap: 8px;


}

.stat-item {
padding: 9px;


background: var(--surface-2);

border: 1px solid var(--border-light);

border-radius: var(--radius-sm);


}

.stat-label {
color: var(--text-muted);


font-size: 9px;


}

.stat-value {
margin-top: 3px;


color: var(--text);

font-size: 14px;
font-weight: 700;


}

/* ============================================================
43. PROGRESS
============================================================ */

.progress {
width: 100%;
height: 6px;


overflow: hidden;

background: var(--surface-3);

border-radius: 10px;


}

.progress-bar {
height: 100%;


background: var(--primary);

border-radius: inherit;

transition: width 0.3s ease;


}

.progress-success {
background: var(--success);
}

.progress-danger {
background: var(--danger);
}

.progress-warning {
background: var(--warning);
}

/* ============================================================
44. RANGE / SLIDER
============================================================ */

.range-control {
width: 100%;


height: 4px;

appearance: none;

background: var(--surface-3);

border-radius: 10px;

outline: none;


}

.range-control::-webkit-slider-thumb {
appearance: none;


width: 14px;
height: 14px;

border-radius: 50%;

background: var(--primary);

border: 2px solid var(--surface);

box-shadow: 0 0 0 1px var(--primary);

cursor: pointer;


}

.range-control::-moz-range-thumb {
width: 14px;
height: 14px;


border-radius: 50%;

background: var(--primary);

border: 2px solid var(--surface);

cursor: pointer;


}

/* ============================================================
45. SYMBOL SELECTOR
============================================================ */

.symbol-selector {
position: relative;


display: flex;
align-items: center;

min-width: 160px;

height: 34px;

padding: 0 9px;

background: var(--surface);

border: 1px solid var(--border);

border-radius: var(--radius-sm);

color: var(--text);

cursor: pointer;


}

.symbol-selector:hover {
border-color: var(--primary);
}

.symbol-selector-name {
min-width: 0;


overflow: hidden;

text-overflow: ellipsis;

white-space: nowrap;

font-size: 11px;
font-weight: 700;


}

.symbol-selector-price {
margin-left: auto;


padding-left: 8px;

color: var(--text-secondary);

font-size: 10px;


}

/* ============================================================
46. MINI CHART
============================================================ */

.mini-chart {
width: 100%;
height: 55px;


overflow: hidden;


}

.mini-chart canvas {
width: 100% !important;
height: 100% !important;
}

/* ============================================================
47. BREADTH
============================================================ */

.breadth-bar {
display: flex;


width: 100%;
height: 8px;

overflow: hidden;

border-radius: 10px;

background: var(--surface-3);


}

.breadth-advance {
background: var(--success);
}

.breadth-decline {
background: var(--danger);
}

.breadth-neutral {
background: var(--text-muted);
}

/* ============================================================
48. INDICATOR PANEL
============================================================ */

.indicator-panel {
display: flex;
align-items: center;


flex-wrap: wrap;

gap: 6px;

padding: 7px 9px;

background: var(--surface-2);

border-bottom: 1px solid var(--border);


}

.indicator-item {
display: inline-flex;
align-items: center;


gap: 4px;

padding: 3px 6px;

border-radius: var(--radius-xs);

background: var(--surface-3);

color: var(--text-secondary);

font-size: 9px;


}

.indicator-name {
color: var(--text-muted);
}

.indicator-value {
color: var(--text);


font-weight: 700;


}

/* ============================================================
49. TIMEFRAME SELECTOR
============================================================ */

.timeframe-selector {
display: flex;


align-items: center;

gap: 2px;

overflow-x: auto;


}

.timeframe {
height: 26px;


padding: 0 7px;

display: inline-flex;
align-items: center;
justify-content: center;

border: 0;

border-radius: var(--radius-xs);

background: transparent;

color: var(--text-muted);

font-size: 9px;
font-weight: 600;

cursor: pointer;

white-space: nowrap;


}

.timeframe:hover,
.timeframe.active {
background: var(--primary-soft);


color: var(--primary);


}

/* ============================================================
50. TERMINAL SPLIT LAYOUT
============================================================ */

.terminal-grid {
display: grid;


grid-template-columns:
    minmax(0, 1fr)
    320px;

gap: 10px;

min-width: 0;


}

.terminal-main {
min-width: 0;
}

.terminal-side {
min-width: 0;
}

/* ============================================================
51. RESIZABLE PANELS
============================================================ */

.panel-grid {
display: grid;


grid-template-columns:
    minmax(220px, 1fr)
    minmax(300px, 2fr)
    minmax(220px, 1fr);

gap: 8px;

min-width: 0;


}

.panel-grid > * {
min-width: 0;
}

/* ============================================================
52. FULLSCREEN CHART
============================================================ */

.chart-fullscreen {
position: fixed;


inset: 0;

z-index: 3000;

width: 100vw;
height: 100vh;

background: var(--surface);


}

.chart-fullscreen .chart-container {
height: calc(100vh - 40px);
}

/* ============================================================
53. PAGINATION
============================================================ */

.pagination {
display: flex;
align-items: center;


justify-content: flex-end;

gap: 3px;

flex-wrap: wrap;


}

.pagination a,
.pagination button,
.pagination span {
min-width: 28px;
height: 28px;


display: inline-flex;
align-items: center;
justify-content: center;

padding: 0 7px;

border: 1px solid var(--border);

border-radius: var(--radius-xs);

background: var(--surface);

color: var(--text-secondary);

font-size: 10px;

text-decoration: none;

cursor: pointer;


}

.pagination a:hover,
.pagination button:hover,
.pagination .active {
background: var(--primary);


border-color: var(--primary);

color: #fff;


}

/* ============================================================
54. EMPTY / LOADING
============================================================ */

.empty-state {
min-height: 180px;


display: flex;
flex-direction: column;

align-items: center;
justify-content: center;

padding: 20px;

color: var(--text-muted);

text-align: center;


}

.empty-state i {
margin-bottom: 8px;


font-size: 28px;

opacity: 0.5;


}

.empty-state-title {
color: var(--text-secondary);


font-size: 13px;
font-weight: 600;


}

.empty-state-text {
margin-top: 3px;


font-size: 10px;


}

/* ============================================================
55. MARKET STATUS
============================================================ */

.market-status {
display: inline-flex;
align-items: center;


gap: 5px;

padding: 4px 7px;

border-radius: 20px;

background: var(--surface-2);

color: var(--text-secondary);

font-size: 9px;
font-weight: 700;


}

.market-status.open {
background: var(--success-soft);
color: var(--success);
}

.market-status.closed {
background: var(--danger-soft);
color: var(--danger);
}

/* ============================================================
56. LIVE CONNECTION
============================================================ */

.connection-status {
display: inline-flex;
align-items: center;


gap: 5px;

color: var(--text-muted);

font-size: 9px;


}

.connection-status.connected {
color: var(--success);
}

.connection-status.disconnected {
color: var(--danger);
}

/* ============================================================
57. FOOTER
============================================================ */

.technical-footer {
display: flex;
align-items: center;
justify-content: space-between;


min-height: 34px;

padding: 7px 15px;

border-top: 1px solid var(--border);

background: var(--surface);

color: var(--text-muted);

font-size: 9px;


}

/* ============================================================
58. UTILITY
============================================================ */

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

.text-secondary {
color: var(--text-secondary) !important;
}

.text-primary {
color: var(--primary) !important;
}

.text-success {
color: var(--success) !important;
}

.text-danger {
color: var(--danger) !important;
}

.text-warning {
color: var(--warning) !important;
}

.fw-normal {
font-weight: 400 !important;
}

.fw-medium {
font-weight: 500 !important;
}

.fw-semibold {
font-weight: 600 !important;
}

.fw-bold {
font-weight: 700 !important;
}

.text-right {
text-align: right !important;
}

.text-center {
text-align: center !important;
}

.text-left {
text-align: left !important;
}

.w-100 {
width: 100% !important;
}

.h-100 {
height: 100% !important;
}

.min-width-0 {
min-width: 0 !important;
}

/* ============================================================
59. ANIMATIONS
============================================================ */

@keyframes pulse-status {
0% {
box-shadow: 0 0 0 0 rgba(22,163,74,0.35);
}


70% {
    box-shadow: 0 0 0 6px rgba(22,163,74,0);
}

100% {
    box-shadow: 0 0 0 0 rgba(22,163,74,0);
}


}

@keyframes flash-up {
0% {
background: var(--success-soft);
}


100% {
    background: transparent;
}


}

@keyframes flash-down {
0% {
background: var(--danger-soft);
}


100% {
    background: transparent;
}


}

@keyframes skeleton-slide {
100% {
left: 100%;
}
}

@keyframes toast-in {
from {
opacity: 0;
transform: translateY(-5px);
}


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


}

/* ============================================================
60. REDUCED MOTION
============================================================ */

@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
scroll-behavior: auto !important;
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}

/* ============================================================
61. LARGE DESKTOP
============================================================ */

@media (max-width: 1200px) {


.summary-grid {
    grid-template-columns:
        repeat(4, minmax(0, 1fr));
}

.terminal-grid {
    grid-template-columns:
        minmax(0, 1fr)
        280px;
}

.panel-grid {
    grid-template-columns:
        minmax(200px, 1fr)
        minmax(280px, 2fr);
}

.panel-grid > :last-child {
    grid-column: 1 / -1;
}


}

/* ============================================================
62. TABLET
============================================================ */

@media (max-width: 1000px) {


.summary-grid {
    grid-template-columns:
        repeat(2, minmax(0, 1fr));
}

.grid-4 {
    grid-template-columns:
        repeat(2, minmax(0, 1fr));
}

.grid-3 {
    grid-template-columns:
        repeat(2, minmax(0, 1fr));
}

.stats-grid {
    grid-template-columns:
        repeat(2, minmax(0, 1fr));
}

.terminal-grid {
    grid-template-columns: 1fr;
}

.terminal-side {
    width: 100%;
}

.content {
    padding: 15px;
}


}

/* ============================================================
63. MOBILE
============================================================ */

@media (max-width: 700px) {


:root {
    --sidebar-width: 50px;
}

.sidebar {
    width: 50px;
}

.sidebar-logo span,
.menu-item span {
    opacity: 0;

    transform: translateX(-5px);
}

.sidebar-section-title {
    opacity: 0;
}

.sidebar-badge {
    display: none;
}

.main {
    margin-left: 50px;
}

.sidebar.collapsed ~ .main {
    margin-left: 50px;
}

.content {
    padding: 10px;
}

.topbar {
    padding: 0 6px;
}

.topbar-title {
    max-width: 40vw;

    margin-left: 7px;

    font-size: 13px;
}

.topbar-center {
    display: none;
}

.topbar-right {
    gap: 3px;
}

.summary-grid {
    grid-template-columns: 1fr;

    gap: 8px;
}

.summary-card {
    padding: 11px;
}

.summary-value {
    font-size: 19px;
}

.page-title {
    margin-bottom: 10px;
}

.page-title h1 {
    font-size: 20px;
}

.page-title p {
    font-size: 11px;
}

.grid-2,
.grid-3,
.grid-4 {
    grid-template-columns: 1fr;
}

.stats-grid {
    grid-template-columns:
        repeat(2, minmax(0, 1fr));
}

.panel-grid {
    grid-template-columns: 1fr;
}

.chart-container,
.chart-area {
    min-height: 240px;
}

.chart-toolbar {
    overflow-x: auto;
    scrollbar-width: none;
}

.chart-toolbar::-webkit-scrollbar {
    display: none;
}

.filter-bar {
    align-items: stretch;

    flex-direction: column;
}

.search-box {
    width: 100%;
    min-width: 0;
}

.filter-bar .btn,
.filter-bar .form-control,
.filter-bar .form-select {
    width: 100%;
}

.quote-box {
    flex-wrap: wrap;

    gap: 8px;
}

.quote-price {
    font-size: 19px;
}

.market-ticker {
    margin-left: -10px;
    margin-right: -10px;

    width: calc(100% + 20px);
}

.ticker-item {
    min-width: 125px;
}

.watchlist-row {
    grid-template-columns:
        minmax(90px, 1fr)
        minmax(65px, auto)
        minmax(60px, auto);

    padding: 5px 7px;
}

.table-card {
    padding: 8px;

    overflow-x: auto;
}

#stocksTable {
    min-width: 700px;
}

.data-table {
    min-width: 650px;
}

.technical-footer {
    flex-direction: column;

    align-items: flex-start;

    gap: 3px;
}

.toast-container {
    left: 10px;
    right: 10px;

    top: 48px;
}

.toast {
    width: 100%;
    max-width: none;

    min-width: 0;
}

.modal-overlay {
    padding: 8px;
}

.modal {
    max-height: calc(100vh - 16px);
}


}

/* ============================================================
64. SMALL MOBILE
============================================================ */

@media (max-width: 450px) {


body {
    font-size: 12px;
}

.content {
    padding: 7px;
}

.topbar {
    height: 40px !important;
}

.toggle-button,
.theme-toggle,
.header-action {
    width: 30px;
    min-width: 30px;
    height: 30px;
}

.topbar-title {
    max-width: 35vw;

    font-size: 12px;
}

.summary-card {
    padding: 9px;
}

.summary-title {
    font-size: 9px;
}

.summary-value {
    font-size: 18px;
}

.card-header,
.panel-header,
.chart-header {
    min-height: 36px;

    padding: 7px 9px;
}

.card-body,
.panel-body,
.chart-body {
    padding: 9px;
}

.chart-container,
.chart-area {
    min-height: 210px;
}

.stats-grid {
    gap: 5px;
}

.stat-item {
    padding: 7px;
}

.stat-value {
    font-size: 12px;
}

.position-grid {
    grid-template-columns: 1fr;
}

.symbol-selector {
    min-width: 120px;
}

.modal-header,
.modal-body,
.modal-footer {
    padding-left: 9px;
    padding-right: 9px;
}


}

/* ============================================================
65. LANDSCAPE MOBILE
============================================================ */

@media (max-width: 900px) and (orientation: landscape) {


.chart-container,
.chart-area {
    min-height: 280px;
}

.summary-grid {
    grid-template-columns:
        repeat(2, minmax(0, 1fr));
}


}

/* ============================================================
66. PRINT
============================================================ */

@media print {


.sidebar,
.topbar,
.theme-toggle,
.toggle-button,
.header-action {
    display: none !important;
}

.main {
    margin-left: 0 !important;
}

.content {
    padding: 0;
}

.card,
.panel,
.table-card,
.chart-card {
    box-shadow: none !important;
}


}