/* ========================================
   TRADE DASHBOARD - PREMIUM UI DESIGN
   Modern, Dark Theme with Glassmorphism
   ======================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

/* === CSS VARIABLES === */
:root {
    --dashboard-bg: linear-gradient(135deg, #0f172a 0%, #020617 50%, #0c1222 100%);
    --card-bg: rgba(30, 41, 59, 0.6);
    --card-bg-hover: rgba(30, 41, 59, 0.8);
    --card-border: rgba(255, 255, 255, 0.08);
    --card-border-hover: rgba(255, 255, 255, 0.15);

    --text-primary: #ffffff;
    --text-secondary: #94a3b8;
    --text-muted: #64748b;

    --accent-blue: #3b82f6;
    --accent-purple: #8b5cf6;
    --accent-green: #22c55e;
    --accent-red: #ef4444;
    --accent-yellow: #fbbf24;
    --accent-gold: #f59e0b;
    --accent-cyan: #06b6d4;

    --gradient-primary: linear-gradient(135deg, #3b82f6, #8b5cf6);
    --gradient-success: linear-gradient(135deg, #22c55e, #16a34a);
    --gradient-danger: linear-gradient(135deg, #ef4444, #dc2626);
    --gradient-gold: linear-gradient(135deg, #fbbf24, #f59e0b);

    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.2);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.4);
    --shadow-glow-blue: 0 0 20px rgba(59, 130, 246, 0.3);
    --shadow-glow-green: 0 0 20px rgba(34, 197, 94, 0.3);

    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 24px;

    --transition-fast: 0.15s ease;
    --transition-normal: 0.25s ease;
    --transition-slow: 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* === BASE LAYOUT === */
.trade-dashboard {
    max-width: 1250px;
    margin: 0 auto;
    height: calc(100vh - 132px);
    font-family: 'Inter', -apple-system, sans-serif;
    color: var(--text-primary);
    padding: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.dashboard-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 20px;
    background: linear-gradient(90deg,
            #050A14 0%,
            rgba(15, 23, 42, 0.95) 18%,
            rgba(22, 33, 52, 0.98) 50%,
            rgba(15, 23, 42, 0.95) 82%,
            #050A14 100%);
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    backdrop-filter: blur(20px);
    flex-shrink: 0;
    position: relative;
}

.dashboard-header::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 60px;
    background: linear-gradient(90deg, #050A14, transparent);
    z-index: 1;
    pointer-events: none;
}

.dashboard-header::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    width: 60px;
    background: linear-gradient(270deg, #050A14, transparent);
    z-index: 1;
    pointer-events: none;
}

.dashboard-title {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--text-primary);
}

.dashboard-title i {
    color: var(--accent-gold);
}

.header-tabs {
    display: flex;
    gap: 4px;
    margin-left: 20px;
}

.tab-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    background: transparent;
    border: none;
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    font-size: 0.78rem;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition-normal);
}

.tab-btn:hover {
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-primary);
}

.tab-btn.active {
    background: var(--gradient-primary);
    color: white;
    box-shadow: var(--shadow-glow-blue);
}

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

.header-right {
    display: flex;
    gap: 24px;
}

.quick-stat {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.quick-stat .stat-label {
    font-size: 0.7rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.quick-stat .stat-value {
    font-size: 1.1rem;
    font-weight: 700;
}

/* === DASHBOARD CONTENT === */
.dashboard-content {
    padding: 12px 16px;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

.dashboard-grid {
    display: grid;
    gap: 16px;
}

/* === COMPACT OVERVIEW LAYOUT === */
.overview-compact {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr;
    height: 100%;
    max-height: calc(100vh - 240px);
}

.dashboard-left-panel {
    display: flex;
    flex-direction: column;
    gap: 12px;
    height: 100%;
}

.dashboard-left-panel .news-widget,
.dashboard-left-panel .logistics-widget {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.dashboard-left-panel .news-widget.compact,
.dashboard-left-panel .logistics-widget.compact {
    max-height: calc(50% - 6px);
}

.dashboard-right-panel {
    display: flex;
    flex-direction: column;
    gap: 12px;
    height: 100%;
}

.dashboard-right-panel .company-widget,
.dashboard-right-panel .exchange-widget {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

@media (max-width: 1200px) {
    .overview-compact {
        grid-template-columns: 1fr;
        max-height: none;
    }

    .dashboard-left-panel,
    .dashboard-right-panel {
        flex-direction: row;
        gap: 16px;
    }

    .dashboard-left-panel .news-widget,
    .dashboard-left-panel .logistics-widget,
    .dashboard-right-panel .company-widget,
    .dashboard-right-panel .exchange-widget {
        flex: 1;
        max-height: 400px;
    }
}

@media (max-width: 768px) {

    .dashboard-left-panel,
    .dashboard-right-panel {
        flex-direction: column;
    }
}

/* === SECTION STYLES === */
.dashboard-section {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* === WIDGET BASE STYLES === */
.company-widget,
.exchange-widget,
.news-widget,
.logistics-widget {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-lg);
    backdrop-filter: blur(10px);
    overflow: hidden;
    transition: all var(--transition-normal);
}

.company-widget:hover,
.exchange-widget:hover,
.news-widget:hover,
.logistics-widget:hover {
    border-color: var(--card-border-hover);
    box-shadow: var(--shadow-md);
}

.widget-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    background: rgba(0, 0, 0, 0.2);
    border-bottom: 1px solid var(--card-border);
}

.widget-header h3 {
    margin: 0;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 10px;
}

.widget-header h3 i {
    color: var(--accent-blue);
}

.widget-footer {
    display: flex;
    gap: 10px;
    padding: 16px 20px;
    background: rgba(0, 0, 0, 0.15);
    border-top: 1px solid var(--card-border);
}

.btn-widget {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 16px;
    background: var(--gradient-primary);
    border: none;
    border-radius: var(--radius-md);
    color: white;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-normal);
}

.btn-widget:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-glow-blue);
}

.btn-widget.secondary {
    background: rgba(255, 255, 255, 0.08);
    color: var(--text-secondary);
}

.btn-widget.secondary:hover {
    background: rgba(255, 255, 255, 0.12);
    color: var(--text-primary);
    box-shadow: none;
}

/* === COMPANY WIDGET === */
.company-identity {
    display: flex;
    align-items: center;
    gap: 14px;
}

.company-logo {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
}

.company-logo.large {
    width: 64px;
    height: 64px;
    font-size: 1.6rem;
}

.company-info .company-name {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-primary);
}

.company-info .company-type {
    font-size: 0.75rem;
    font-weight: 500;
}

.company-level .level-badge {
    padding: 4px 10px;
    background: var(--gradient-gold);
    border-radius: 20px;
    font-size: 0.7rem;
    font-weight: 700;
    color: #000;
}

.widget-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    padding: 16px 20px;
}

.stat-item {
    display: flex;
    align-items: center;
    gap: 10px;
}

.stat-icon {
    width: 36px;
    height: 36px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
}

.stat-content {
    display: flex;
    flex-direction: column;
}

.stat-content .stat-value {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text-primary);
}

.stat-content .stat-label {
    font-size: 0.65rem;
    color: var(--text-muted);
    text-transform: uppercase;
}

.widget-products {
    padding: 0 20px 16px;
}

.products-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.products-header h4 {
    margin: 0;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-secondary);
}

.product-count {
    font-size: 0.7rem;
    color: var(--text-muted);
}

.products-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.product-mini {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: var(--radius-sm);
}

.product-mini .product-info {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.product-mini .product-name {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-primary);
}

.product-mini .product-stock {
    font-size: 0.7rem;
    color: var(--text-muted);
}

.product-mini .product-demand {
    width: 60px;
    height: 4px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 2px;
    overflow: hidden;
}

.product-mini .demand-bar {
    height: 100%;
    background: var(--accent-green);
    border-radius: 2px;
    transition: width 0.3s ease;
}

.widget-orders {
    display: flex;
    gap: 16px;
    padding: 12px 20px;
    background: rgba(0, 0, 0, 0.15);
    border-top: 1px solid var(--card-border);
}

.order-stat {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.75rem;
    color: var(--text-secondary);
}

/* === EXCHANGE WIDGET - NEW DESIGN === */
.exchange-widget-content {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 16px;
    gap: 12px;
}

.exchange-widget-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--card-border);
}

.main-index {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

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

.index-label {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-secondary);
}

.market-status {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--accent-green);
}

.market-status .status-dot {
    width: 6px;
    height: 6px;
    background: var(--accent-green);
    border-radius: 50%;
    animation: pulse 2s infinite;
}

.index-value-large {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--text-primary);
    letter-spacing: -0.5px;
}

.index-change-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 700;
    width: fit-content;
}

.index-change-badge.positive {
    background: rgba(34, 197, 94, 0.15);
    color: var(--accent-green);
}

.index-change-badge.negative {
    background: rgba(239, 68, 68, 0.15);
    color: var(--accent-red);
}

.mini-chart-container {
    width: 100px;
    height: 50px;
}

.mini-chart-container svg {
    width: 100%;
    height: 100%;
}

/* Index Strip */
.index-strip {
    display: flex;
    gap: 8px;
    padding: 8px 0;
}

.index-mini {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 8px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: var(--radius-sm);
}

.idx-name {
    font-size: 0.65rem;
    color: var(--text-muted);
    margin-bottom: 2px;
}

.idx-change {
    font-size: 0.75rem;
    font-weight: 700;
}

.idx-change.positive {
    color: var(--accent-green);
}

.idx-change.negative {
    color: var(--accent-red);
}

/* Movers Grid */
.movers-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    flex: 1;
    min-height: 0;
}

.mover-card {
    padding: 10px 12px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: var(--radius-sm);
    border-left: 3px solid transparent;
    transition: all var(--transition-fast);
}

.mover-card.up {
    border-left-color: var(--accent-green);
}

.mover-card.down {
    border-left-color: var(--accent-red);
}

.mover-card:hover {
    background: rgba(255, 255, 255, 0.05);
}

.mover-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 4px;
}

.mover-ticker {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--text-primary);
}

.mover-change {
    font-size: 0.7rem;
    font-weight: 600;
}

.mover-change.positive {
    color: var(--accent-green);
}

.mover-change.negative {
    color: var(--accent-red);
}

.mover-price {
    font-size: 0.75rem;
    color: var(--text-muted);
}

/* Exchange Quick Actions */
.exchange-quick-actions {
    display: flex;
    gap: 6px;
    padding-top: 8px;
    border-top: 1px solid var(--card-border);
}

.btn-exchange {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 10px 8px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    font-size: 0.65rem;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.btn-exchange i {
    font-size: 0.9rem;
    color: var(--accent-blue);
}

.btn-exchange:hover {
    background: var(--gradient-primary);
    border-color: transparent;
    color: white;
}

.btn-exchange:hover i {
    color: white;
}

@keyframes pulse {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.5;
    }
}

.index-ticker {
    display: flex;
    gap: 16px;
    padding: 12px 20px;
    background: rgba(0, 0, 0, 0.2);
    overflow-x: auto;
}

.index-item {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

.index-name {
    font-size: 0.7rem;
    color: var(--text-muted);
}

.index-value {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--text-primary);
}

.index-change {
    font-size: 0.75rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 4px;
}

.index-change.positive {
    color: var(--accent-green);
}

.index-change.negative {
    color: var(--accent-red);
}

.top-movers {
    padding: 16px 20px;
}

.movers-section h4 {
    margin: 0 0 10px 0;
    font-size: 0.75rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
}

.movers-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 16px;
}

.mover-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 12px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: var(--radius-sm);
}

.stock-info {
    display: flex;
    flex-direction: column;
}

.stock-info .ticker {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--text-primary);
}

.stock-info .name {
    font-size: 0.7rem;
    color: var(--text-muted);
}

.stock-price {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.stock-price .price {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-primary);
}

.stock-price .change {
    font-size: 0.7rem;
    font-weight: 600;
}

.stock-price .change.positive {
    color: var(--accent-green);
}

.stock-price .change.negative {
    color: var(--accent-red);
}

.quick-funds {
    padding: 0 20px 16px;
}

.quick-funds h4 {
    margin: 0 0 10px 0;
    font-size: 0.75rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text-secondary);
}

.funds-mini-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.fund-mini-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 12px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: var(--radius-sm);
}

.fund-info {
    display: flex;
    align-items: center;
    gap: 10px;
}

.fund-ticker {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--accent-purple);
}

.fund-name {
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.fund-change {
    font-size: 0.75rem;
    font-weight: 600;
}

.fund-change.positive {
    color: var(--accent-green);
}

.fund-change.negative {
    color: var(--accent-red);
}

/* === NEWS WIDGET === */
.live-badge {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.65rem;
    font-weight: 700;
    color: var(--accent-red);
    text-transform: uppercase;
}

.live-dot {
    width: 6px;
    height: 6px;
    background: var(--accent-red);
    border-radius: 50%;
    animation: pulse 1.5s infinite;
}

.breaking-news-banner {
    margin: 16px 20px;
    padding: 16px;
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.2), rgba(220, 38, 38, 0.1));
    border: 1px solid rgba(239, 68, 68, 0.3);
    border-radius: var(--radius-md);
}

.breaking-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.65rem;
    font-weight: 700;
    color: var(--accent-red);
    text-transform: uppercase;
    margin-bottom: 8px;
}

.breaking-content h4 {
    margin: 0 0 6px 0;
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--text-primary);
}

.breaking-content p {
    margin: 0 0 10px 0;
    font-size: 0.8rem;
    color: var(--text-secondary);
    line-height: 1.4;
}

.breaking-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.impact-badge {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    background: rgba(34, 197, 94, 0.2);
    border-radius: 20px;
    font-size: 0.7rem;
    font-weight: 600;
}

.impact-badge.up {
    color: var(--accent-green);
}

.impact-badge.down {
    color: var(--accent-red);
    background: rgba(239, 68, 68, 0.2);
}

.news-list {
    padding: 0 20px 16px;
}

.news-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background var(--transition-fast);
}

.news-item:hover {
    background: rgba(255, 255, 255, 0.05);
}

.news-icon {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
}

.news-icon.energy {
    background: rgba(251, 191, 36, 0.2);
    color: var(--accent-yellow);
}

.news-icon.tech {
    background: rgba(59, 130, 246, 0.2);
    color: var(--accent-blue);
}

.news-icon.textile {
    background: rgba(232, 121, 249, 0.2);
    color: #e879f9;
}

.news-icon.commodities {
    background: rgba(245, 158, 11, 0.2);
    color: var(--accent-gold);
}

.news-content {
    flex: 1;
}

.news-content h4 {
    margin: 0;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-primary);
}

.news-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 4px;
}

.trend-indicator {
    font-size: 0.75rem;
}

.trend-indicator.up {
    color: var(--accent-green);
}

.trend-indicator.down {
    color: var(--accent-red);
}

.news-meta .time {
    font-size: 0.7rem;
    color: var(--text-muted);
}

.market-pulse {
    margin: 0 20px 16px;
    padding: 12px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: var(--radius-sm);
}

.pulse-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    font-size: 0.75rem;
}

.pulse-status {
    font-weight: 600;
}

.pulse-status.positive {
    color: var(--accent-green);
}

.pulse-status.negative {
    color: var(--accent-red);
}

.pulse-indicators {
    display: flex;
    gap: 16px;
}

.pulse-indicator {
    flex: 1;
}

.indicator-bar {
    height: 6px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: 6px;
}

.indicator-bar .bar-fill {
    height: 100%;
    width: var(--value);
    background: var(--color);
    border-radius: 3px;
    transition: width 0.5s ease;
}

.indicator-label {
    display: flex;
    justify-content: space-between;
    font-size: 0.65rem;
    color: var(--text-muted);
}

.indicator-label .value {
    font-weight: 600;
    color: var(--text-secondary);
}

/* === LOGISTICS WIDGET === */
.shipment-count {
    font-size: 0.7rem;
    padding: 4px 10px;
    background: rgba(59, 130, 246, 0.2);
    color: var(--accent-blue);
    border-radius: 20px;
    font-weight: 600;
}

.shipment-stats-mini {
    display: flex;
    gap: 10px;
    padding: 12px 20px;
}

.stat-pill {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 20px;
    font-size: 0.7rem;
    font-weight: 500;
    color: var(--text-secondary);
}

.active-shipments-list {
    padding: 0 20px 16px;
}

.shipment-mini {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: var(--radius-sm);
    margin-bottom: 8px;
    cursor: pointer;
    transition: background var(--transition-fast);
}

.shipment-mini:hover {
    background: rgba(0, 0, 0, 0.3);
}

.shipment-mini:last-child {
    margin-bottom: 0;
}

.shipment-icon {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
}

.shipment-info {
    flex: 1;
}

.shipment-route {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-primary);
}

.shipment-product {
    font-size: 0.7rem;
    color: var(--text-muted);
}

.shipment-progress {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
}

.progress-bar-mini {
    width: 60px;
    height: 4px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 2px;
    overflow: hidden;
}

.progress-bar-mini .progress-fill {
    height: 100%;
    border-radius: 2px;
    transition: width 0.3s ease;
}

.progress-text {
    font-size: 0.65rem;
    font-weight: 600;
    color: var(--text-secondary);
}

/* === UTILITY CLASSES === */
.text-gold {
    color: var(--accent-gold) !important;
}

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

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

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

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

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

/* === EMPTY STATES === */
.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    text-align: center;
}

.empty-state i {
    font-size: 2.5rem;
    color: var(--text-muted);
    opacity: 0.3;
    margin-bottom: 16px;
}

.empty-state h3 {
    margin: 0 0 8px 0;
    font-size: 1rem;
    color: var(--text-primary);
}

.empty-state p {
    margin: 0;
    font-size: 0.85rem;
    color: var(--text-muted);
    max-width: 280px;
}

.empty-state.small {
    padding: 24px 16px;
}

.empty-state.small i {
    font-size: 1.5rem;
    margin-bottom: 10px;
}

.empty-state.small p {
    font-size: 0.75rem;
}

/* === ANIMATIONS === */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

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

@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(20px);
    }

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

.trade-dashboard {
    animation: fadeInUp 0.4s ease;
}

.company-widget,
.exchange-widget,
.news-widget,
.logistics-widget {
    animation: fadeInUp 0.5s ease backwards;
}

.dashboard-section:nth-child(1) .company-widget {
    animation-delay: 0.1s;
}

.dashboard-section:nth-child(2) .exchange-widget {
    animation-delay: 0.2s;
}

.dashboard-sidebar .news-widget {
    animation-delay: 0.3s;
}

.dashboard-sidebar .logistics-widget {
    animation-delay: 0.4s;
}

/* === SCROLLBAR === */
.trade-dashboard ::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

.trade-dashboard ::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 3px;
}

.trade-dashboard ::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.15);
    border-radius: 3px;
}

.trade-dashboard ::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.25);
}

/* === FULL VIEW STYLES === */

/* Logistics Full View */
.logistics-full-view {
    padding: 0;
}

/* Logistics Main Grid - Sol kargolar, Sağ haberler */
.logistics-main-grid {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 20px;
}

.logistics-shipments-area {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Logistics News Sidebar */
.logistics-news-sidebar {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    height: fit-content;
    position: sticky;
    top: 20px;
}

.sidebar-header {
    padding: 16px 20px;
    background: rgba(0, 0, 0, 0.2);
    border-bottom: 1px solid var(--card-border);
}

.sidebar-header h3 {
    margin: 0;
    font-size: 0.9rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--text-primary);
}

.sidebar-header h3 i {
    color: var(--accent-cyan);
}

.logistics-news-list {
    padding: 12px;
}

.logistics-news-item {
    display: flex;
    gap: 12px;
    padding: 12px;
    border-radius: var(--radius-sm);
    margin-bottom: 8px;
    transition: background var(--transition-fast);
    cursor: pointer;
}

.logistics-news-item:hover {
    background: rgba(255, 255, 255, 0.05);
}

.logistics-news-item:last-child {
    margin-bottom: 0;
}

.logistics-news-item .news-icon {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    flex-shrink: 0;
}

.logistics-news-item .news-content {
    flex: 1;
    min-width: 0;
}

.logistics-news-item h4 {
    margin: 0 0 4px 0;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.3;
}

.logistics-news-item p {
    margin: 0 0 8px 0;
    font-size: 0.7rem;
    color: var(--text-muted);
    line-height: 1.4;
}

.logistics-news-item .news-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logistics-news-item .news-time {
    font-size: 0.65rem;
    color: var(--text-muted);
}

.logistics-news-item .news-impact {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.65rem;
    font-weight: 600;
}

.logistics-news-item .news-impact.positive {
    color: var(--accent-green);
}

.logistics-news-item .news-impact.negative {
    color: var(--accent-red);
}

@media (max-width: 1200px) {
    .logistics-main-grid {
        grid-template-columns: 1fr;
    }

    .logistics-news-sidebar {
        position: static;
    }

    .logistics-news-list {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
        gap: 12px;
    }

    .logistics-news-item {
        margin-bottom: 0;
    }
}

.logistics-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24px;
    background: var(--card-bg);
    border-radius: var(--radius-lg);
    margin-bottom: 24px;
}

.logistics-header h1 {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 12px;
}

.logistics-header p {
    margin: 4px 0 0 0;
    font-size: 0.85rem;
    color: var(--text-muted);
}

.stats-bar {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 16px;
    margin-bottom: 24px;
}

.stat-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 20px;
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-md);
}

.stat-card .stat-icon {
    width: 48px;
    height: 48px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
}

.stat-card .stat-content {
    display: flex;
    flex-direction: column;
}

.stat-card .stat-content .value {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--text-primary);
}

.stat-card .stat-content .label {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.transport-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.transport-tab {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition-normal);
}

.transport-tab:hover {
    background: rgba(255, 255, 255, 0.08);
    color: var(--text-primary);
}

.transport-tab.active {
    background: var(--gradient-primary);
    color: white;
    border-color: transparent;
}

.shipments-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 20px;
}

.shipment-card {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-lg);
    padding: 20px;
    transition: all var(--transition-normal);
}

.shipment-card:hover {
    border-color: var(--card-border-hover);
    box-shadow: var(--shadow-md);
}

.shipment-card .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.transport-badge,
.status-badge {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 0.7rem;
    font-weight: 600;
}

.tracking-id {
    font-size: 0.75rem;
    color: var(--text-muted);
    font-family: monospace;
    margin-bottom: 16px;
}

.route-info {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.route-point {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    font-size: 0.75rem;
}

.route-point i {
    font-size: 0.6rem;
}

.route-point.origin i {
    color: var(--accent-green);
}

.route-point.destination i {
    color: var(--accent-red);
}

.route-line {
    flex: 1;
    height: 3px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 2px;
    overflow: hidden;
}

.route-progress {
    height: 100%;
    border-radius: 2px;
    transition: width 0.5s ease;
}

.shipment-details {
    display: flex;
    gap: 16px;
    margin-bottom: 16px;
    padding: 12px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: var(--radius-sm);
}

.shipment-details .detail {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.shipment-details .detail i {
    color: var(--text-muted);
}

.progress-section {
    margin-bottom: 16px;
}

.progress-bar {
    height: 6px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: 8px;
}

.progress-bar .progress-fill {
    height: 100%;
    border-radius: 3px;
    transition: width 0.5s ease;
}

.progress-info {
    display: flex;
    justify-content: space-between;
    font-size: 0.7rem;
    color: var(--text-muted);
}

.card-actions {
    display: flex;
    gap: 10px;
}

.btn-sm {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 14px;
    background: var(--gradient-primary);
    border: none;
    border-radius: var(--radius-sm);
    color: white;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-normal);
}

.btn-sm:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-glow-blue);
}

.btn-sm.secondary {
    background: rgba(255, 255, 255, 0.08);
    color: var(--text-secondary);
}

.btn-sm.secondary:hover {
    background: rgba(255, 255, 255, 0.12);
    color: var(--text-primary);
    box-shadow: none;
}

.btn-action {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition-normal);
}

.btn-action:hover {
    background: rgba(255, 255, 255, 0.12);
    color: var(--text-primary);
}

.btn-action.primary {
    background: var(--gradient-primary);
    border-color: transparent;
    color: white;
}

.btn-action.primary:hover {
    box-shadow: var(--shadow-glow-blue);
}

/* Company Full View */
.company-full-view {
    padding: 0;
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

.company-full-view-scroll {
    flex: 1;
    overflow-y: auto;
    padding: 0 5px 20px 0;
}

/* Şık Scrollbar */
.company-full-view-scroll::-webkit-scrollbar {
    width: 6px;
}

.company-full-view-scroll::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.02);
}

.company-full-view-scroll::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 6px;
}

.company-full-view-scroll::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.2);
}

.company-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.8), rgba(15, 23, 42, 0.9));
    border-radius: var(--radius-lg);
    margin-bottom: 20px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-left: 4px solid var(--profession-color, var(--accent-blue));
    flex-shrink: 0;
}

.header-main {
    display: flex;
    align-items: center;
    gap: 20px;
}

.company-details h1 {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 700;
}

.company-meta {
    display: flex;
    gap: 16px;
    margin-top: 8px;
    font-size: 0.8rem;
    color: var(--text-muted);
}

.company-meta span {
    display: flex;
    align-items: center;
    gap: 6px;
}

.experience-bar {
    width: 200px;
    height: 6px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 3px;
    overflow: hidden;
    margin-top: 12px;
    position: relative;
}

.exp-fill {
    height: 100%;
    background: var(--gradient-gold);
    border-radius: 3px;
}

.exp-text {
    position: absolute;
    right: 0;
    top: -18px;
    font-size: 0.65rem;
    color: var(--text-muted);
}

.header-actions {
    display: flex;
    gap: 10px;
}

.company-compact-grid {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 20px;
}

.company-management-hub {
    margin-bottom: 24px;
}

.management-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

@media (max-width: 1560px) {
    .management-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

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

/* Hub Elements */
.hub-mini-section {
    margin-bottom: 12px;
}

.hub-mini-section:last-child {
    margin-bottom: 0;
}

.section-label {
    font-size: 0.6rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
}

.staff-summary-mini {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(255, 255, 255, 0.03);
    padding: 8px 12px;
    border-radius: 8px;
}

.staff-count-box {
    display: flex;
    flex-direction: column;
}

.staff-count-box .count {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--accent-cyan);
}

.staff-count-box .lbl {
    font-size: 0.55rem;
    color: var(--text-muted);
}

.company-grid-mini {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.mini-comp-dot {
    width: 28px;
    height: 28px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.2s;
}

.mini-comp-dot:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
    transform: scale(1.1);
}

.mini-comp-dot.active {
    background: rgba(6, 182, 212, 0.15);
    border-color: var(--accent-cyan);
    color: var(--accent-cyan);
}

.mini-comp-dot.add {
    border-style: dashed;
    color: var(--accent-green);
}

.btn-sm-ghost {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--text-secondary);
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 0.65rem;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-sm-ghost:hover {
    background: rgba(255, 255, 255, 0.05);
    color: white;
    border-color: rgba(255, 255, 255, 0.2);
}

/* === PRESTIGE & RANK CARD === */
.prestige-display {
    text-align: center;
    padding: 10px 0;
    margin-bottom: 20px;
}

.prestige-val-box {
    margin-bottom: 8px;
}

.prestige-val-box .p-value {
    font-size: 2rem;
    font-weight: 800;
    color: #fbbf24;
    /* gold */
}

.prestige-val-box .p-max {
    font-size: 0.8rem;
    color: var(--text-muted);
}

.prestige-bar-container {
    height: 8px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 12px;
}

.prestige-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, #f59e0b, #fbbf24);
    border-radius: 4px;
}

.prestige-label {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.ranking-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.rank-item {
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(0, 0, 0, 0.2);
    padding: 10px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.04);
}

.rank-icon {
    width: 32px;
    height: 32px;
    background: rgba(59, 130, 246, 0.1);
    color: #3b82f6;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
}

.rank-icon.national {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
}

.rank-info {
    display: flex;
    flex-direction: column;
}

.rank-label {
    font-size: 0.55rem;
    color: var(--text-muted);
}

.rank-value {
    font-size: 0.85rem;
    font-weight: 700;
}

/* === COMPANY SWITCHER & HEADER === */
.company-name-wrapper {
    position: relative;
    cursor: pointer;
    display: inline-block;
}

.company-name-wrapper:hover .company-name {
    color: var(--accent-blue);
}

.company-name i {
    font-size: 0.9rem;
    margin-left: 8px;
    opacity: 0.6;
    transition: transform 0.2s;
}

.company-name-wrapper .company-name {
    display: flex;
    align-items: center;
    transition: color 0.2s;
}

.company-switcher-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    width: 280px;
    background: rgba(15, 23, 42, 0.95);
    backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 8px;
    margin-top: 10px;
    z-index: 1000;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    display: none;
    animation: dropdownFade 0.2s ease-out;
}

.company-switcher-dropdown.show {
    display: block;
}

@keyframes dropdownFade {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

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

.switcher-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 8px;
    transition: all 0.2s;
    position: relative;
}

.switcher-item:hover {
    background: rgba(255, 255, 255, 0.05);
}

.switcher-item.active {
    background: rgba(59, 130, 246, 0.1);
}

.switcher-item .item-icon {
    width: 36px;
    height: 36px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    color: var(--text-secondary);
}

.switcher-item.active .item-icon {
    color: var(--accent-blue);
    border: 1px solid rgba(59, 130, 246, 0.3);
}

.switcher-item .item-info {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.switcher-item .item-info .name {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--text-primary);
}

.switcher-item .item-info .desc {
    font-size: 0.65rem;
    color: var(--text-muted);
}

.switcher-item .fa-check {
    color: var(--accent-blue);
    font-size: 0.8rem;
}

.switcher-divider {
    height: 1px;
    background: rgba(255, 255, 255, 0.06);
    margin: 8px 12px;
}

.switcher-item.add-new .item-icon {
    color: var(--accent-green);
    border: 1px dashed rgba(34, 197, 94, 0.4);
}

.rank-icon.sector {
    background: rgba(165, 180, 252, 0.1);
    color: #a5b4fc;
}

.financial-summary-bar {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
    margin-bottom: 24px;
}

.summary-card {
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    padding: 15px;
    display: flex;
    align-items: center;
    gap: 12px;
    transition: all 0.2s;
}

.summary-card:hover {
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(255, 255, 255, 0.1);
    transform: translateY(-2px);
}

.summary-icon {
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
}

.summary-content {
    display: flex;
    flex-direction: column;
}

.summary-value {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-primary);
}

.summary-label {
    font-size: 0.65rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.company-left-column {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.company-right-column {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

@media (max-width: 1200px) {
    .company-content-grid {
        grid-template-columns: 1fr 1fr;
    }

    .company-products-panel {
        grid-column: span 2;
    }
}

.stats-card {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    margin-bottom: 20px;
}

.stats-card .card-header {
    padding: 16px 20px;
    background: rgba(0, 0, 0, 0.2);
    border-bottom: 1px solid var(--card-border);
}

.stats-card .card-header h3 {
    margin: 0;
    font-size: 0.9rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
}

.stats-card .card-content {
    padding: 20px;
}

.big-stat {
    text-align: center;
    padding: 16px 0;
    margin-bottom: 16px;
}

.big-stat .stat-value {
    font-size: 2rem;
    font-weight: 800;
}

.big-stat .stat-label {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-top: 4px;
}

.big-stat .stat-change {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 8px;
    font-size: 0.75rem;
    font-weight: 600;
}

.big-stat .stat-change.positive {
    color: var(--accent-green);
}

.big-stat .stat-change.negative {
    color: var(--accent-red);
}

.stat-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.stat-box {
    text-align: center;
    padding: 12px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: var(--radius-sm);
}

.stat-box .value {
    font-size: 1rem;
    font-weight: 700;
}

.stat-box .label {
    font-size: 0.65rem;
    color: var(--text-muted);
    margin-top: 2px;
}

.stat-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--card-border);
}

.stat-row:last-child {
    border-bottom: none;
}

.stat-row .stat-icon {
    width: 32px;
    height: 32px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    color: var(--text-muted);
}

.stat-row .stat-info {
    flex: 1;
}

.stat-row .stat-label {
    font-size: 0.75rem;
    color: var(--text-muted);
}

/* === FUND VISUALIZATION === */
.fund-visualization-box {
    background: rgba(0, 0, 0, 0.15);
    border-radius: 12px;
    padding: 15px;
    margin: 15px 0;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.fund-radar-container {
    display: flex;
    align-items: center;
    gap: 20px;
}

.fund-radar-container svg {
    filter: drop-shadow(0 0 10px rgba(59, 130, 246, 0.2));
}

.fund-summary-list {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.fund-summary-item {
    display: flex;
    align-items: center;
    font-size: 0.7rem;
    gap: 8px;
}

.fund-summary-item .dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent-blue);
}

.fund-summary-item .label {
    color: var(--text-muted);
    flex: 1;
}

.fund-summary-item .val {
    font-weight: 700;
    color: var(--text-primary);
}

/* Risk Badges */
.product-name-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.risk-badge {
    font-size: 0.6rem;
    padding: 3px 8px;
    border-radius: 4px;
    font-weight: 700;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: 4px;
}

.risk-low {
    background: rgba(34, 197, 94, 0.1);
    color: #4ade80;
    border: 1px solid rgba(34, 197, 94, 0.2);
}

.risk-mid {
    background: rgba(251, 191, 36, 0.1);
    color: #fbbf24;
    border: 1px solid rgba(251, 191, 36, 0.2);
}

.risk-high {
    background: rgba(239, 68, 68, 0.1);
    color: #f87171;
    border: 1px solid rgba(239, 68, 68, 0.2);
}

.volatility-text {
    font-size: 0.65rem;
    color: var(--text-muted);
    margin-left: 10px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

/* === DETAIL MODAL STYLES === */
.detail-modal {
    max-width: 800px;
    width: 90%;
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 20px;
    overflow: hidden;
    backdrop-filter: blur(20px);
}

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

.sector-icon-box {
    width: 50px;
    height: 50px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
}

.header-texts h2 {
    margin: 0;
    font-size: 1.4rem;
    font-weight: 800;
}

.sector-badge {
    font-size: 0.7rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.detail-content-grid {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 30px;
    padding: 10px;
}

.large-radar-container {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 15px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.visual-title {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-bottom: 20px;
    font-weight: 600;
}

.product-preview-big {
    height: 300px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 15px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
    color: var(--text-muted);
}

.product-preview-big i {
    font-size: 5rem;
    opacity: 0.2;
}

.detail-stats-panel {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.detail-stat-row {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.detail-stat-row .lbl {
    font-size: 0.75rem;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 6px;
}

.detail-stat-row .val {
    font-size: 1.2rem;
    font-weight: 700;
}

.val-bar-group {
    display: flex;
    align-items: center;
    gap: 12px;
}

.mini-bar-bg {
    flex: 1;
    height: 6px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 3px;
    overflow: hidden;
}

.mini-bar-fill {
    height: 100%;
    background: var(--accent-blue);
    border-radius: 3px;
    transition: width 1s ease-out;
}

.finance-risk-card {
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 15px;
    padding: 20px;
    margin-top: 10px;
}

.risk-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.risk-title {
    font-size: 0.8rem;
    color: var(--text-muted);
}

.risk-score-val {
    font-size: 1.2rem;
    font-weight: 800;
}

.volatility-info {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.volatility-info strong {
    color: var(--text-primary);
}

.volatility-info strong {
    color: var(--text-primary);
}

/* === BORSA FUND MODAL EXTRA STYLES === */
.fund-ticker-box {
    width: 50px;
    height: 50px;
    background: var(--accent-blue);
    color: white;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 1.1rem;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

.fund-radar-container-big {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
}

.fund-summary-list-big {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 10px;
}

.risk-score-val.risk-low {
    color: #4ade80;
}

.risk-score-val.risk-medium {
    color: #fbbf24;
}

.risk-score-val.risk-high {
    color: #f87171;
}

.stat-row .stat-value {
    font-size: 0.9rem;
    font-weight: 600;
}

.progress-mini {
    width: 60px;
    height: 4px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 2px;
    overflow: hidden;
}

.progress-mini .progress-fill {
    height: 100%;
    background: var(--accent-blue);
    border-radius: 2px;
}

.progress-mini.quality .progress-fill {
    background: var(--gradient-gold);
}

/* Products Section */
.products-section {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-lg);
    padding: 20px;
}

.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.section-header h3 {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 10px;
}

.section-actions {
    display: flex;
    gap: 10px;
}

.search-input {
    padding: 8px 14px;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-size: 0.8rem;
    outline: none;
}

.search-input:focus {
    border-color: var(--accent-blue);
}

.products-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 16px;
}

.product-card {
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-md);
    padding: 16px;
    transition: all var(--transition-normal);
}

.product-card:hover {
    border-color: var(--card-border-hover);
    transform: translateY(-2px);
}

.product-header {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 14px;
}

.product-icon {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
}

.product-card .product-info {
    flex: 1;
}

.product-card .product-name {
    margin: 0;
    font-size: 0.9rem;
    font-weight: 600;
}

.product-card .product-meta {
    display: flex;
    gap: 8px;
    margin-top: 4px;
}

.quality-badge {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.65rem;
    color: var(--accent-gold);
}

.product-menu .btn-icon {
    width: 28px;
    height: 28px;
    background: transparent;
    border: none;
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.product-menu .btn-icon:hover {
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-primary);
}

.product-stats {
    display: flex;
    justify-content: space-between;
    margin-bottom: 14px;
}

.product-stats .stat {
    display: flex;
    flex-direction: column;
}

.product-stats .label {
    font-size: 0.65rem;
    color: var(--text-muted);
}

.product-stats .value {
    font-size: 0.85rem;
    font-weight: 600;
}

.product-demand .demand-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 6px;
    font-size: 0.7rem;
}

.demand-bar-container {
    height: 4px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 2px;
    overflow: hidden;
}

.demand-bar-container .demand-bar {
    height: 100%;
    border-radius: 2px;
    transition: width 0.3s ease;
}

.product-actions {
    display: flex;
    gap: 8px;
    margin-top: 14px;
}

.btn-product {
    flex: 1;
    padding: 8px 12px;
    background: var(--gradient-success);
    border: none;
    border-radius: var(--radius-sm);
    color: white;
    font-size: 0.7rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: all var(--transition-normal);
}

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

.btn-product.secondary {
    background: rgba(255, 255, 255, 0.08);
    color: var(--text-secondary);
}

@media (max-width: 600px) {
    .stats-bar {
        grid-template-columns: repeat(2, 1fr);
    }

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

/* === EXCHANGE FULL VIEW === */
.exchange-full-view {
    padding: 0;
}

.exchange-page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24px;
    background: var(--card-bg);
    border-radius: var(--radius-lg);
    margin-bottom: 24px;
}

.exchange-page-header h1 {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 12px;
}

.portfolio-summary {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.portfolio-summary .label {
    font-size: 0.7rem;
    color: var(--text-muted);
    text-transform: uppercase;
}

.portfolio-summary .value {
    font-size: 1.3rem;
    font-weight: 700;
}

.portfolio-summary .change {
    font-size: 0.8rem;
    font-weight: 600;
}

.index-bar {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

.index-card {
    padding: 20px;
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-md);
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.index-card .index-name {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.index-card .index-value {
    font-size: 1.3rem;
    font-weight: 700;
}

.index-card .mini-chart {
    height: 30px;
    margin-top: 8px;
}

.exchange-content {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.stocks-section,
.funds-section {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-lg);
    padding: 20px;
}

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

.search-box {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-sm);
}

.search-box input {
    background: none;
    border: none;
    outline: none;
    color: var(--text-primary);
    font-size: 0.8rem;
    width: 150px;
}

.search-box i {
    color: var(--text-muted);
    font-size: 0.8rem;
}

.filter-tabs {
    display: flex;
    gap: 4px;
}

.filter-tab {
    padding: 8px 14px;
    background: rgba(255, 255, 255, 0.05);
    border: none;
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    font-size: 0.75rem;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.filter-tab:hover {
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-primary);
}

.filter-tab.active {
    background: var(--gradient-primary);
    color: white;
}

.stocks-table {
    margin-top: 16px;
}

.table-header,
.stock-row {
    display: grid;
    grid-template-columns: 100px 1fr 100px 100px 80px 120px 140px;
    gap: 12px;
    padding: 12px 16px;
    align-items: center;
}

.table-header {
    background: rgba(0, 0, 0, 0.2);
    border-radius: var(--radius-sm);
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
}

.stock-row {
    border-bottom: 1px solid var(--card-border);
    transition: background var(--transition-fast);
}

.stock-row:hover {
    background: rgba(255, 255, 255, 0.03);
}

.stock-row:last-child {
    border-bottom: none;
}

.ticker-badge {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: var(--radius-sm);
    font-size: 0.8rem;
    font-weight: 700;
}

.col-change.positive {
    color: var(--accent-green);
}

.col-change.negative {
    color: var(--accent-red);
}

.col-actions {
    display: flex;
    gap: 6px;
}

.btn-trade {
    padding: 6px 10px;
    border: none;
    border-radius: var(--radius-sm);
    font-size: 0.7rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 4px;
    transition: all var(--transition-fast);
}

.btn-trade.buy {
    background: rgba(34, 197, 94, 0.2);
    color: var(--accent-green);
}

.btn-trade.buy:hover {
    background: var(--accent-green);
    color: white;
}

.btn-trade.sell {
    background: rgba(239, 68, 68, 0.2);
    color: var(--accent-red);
}

.btn-trade.sell:hover {
    background: var(--accent-red);
    color: white;
}

.funds-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
    margin-top: 16px;
}

.fund-card {
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-md);
    padding: 20px;
    transition: all var(--transition-normal);
}

.fund-card:hover {
    border-color: var(--accent-purple);
    box-shadow: 0 0 20px rgba(139, 92, 246, 0.15);
}

.fund-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 12px;
}

.fund-identity {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.fund-card .fund-ticker {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--accent-purple);
}

.fund-type {
    font-size: 0.7rem;
    color: var(--text-muted);
}

.fund-risk {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.7rem;
    font-weight: 600;
}

.fund-card .fund-name {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 16px;
    color: var(--text-primary);
}

.fund-stats {
    display: flex;
    justify-content: space-between;
    margin-bottom: 16px;
}

.fund-stats .stat {
    display: flex;
    flex-direction: column;
}

.fund-stats .stat .label {
    font-size: 0.65rem;
    color: var(--text-muted);
}

.fund-stats .stat .value {
    font-size: 0.9rem;
    font-weight: 600;
}

.fund-chart {
    margin-bottom: 16px;
}

.fund-chart .mini-chart {
    height: 40px;
}

.fund-actions {
    display: flex;
    gap: 10px;
}

.btn-fund {
    flex: 1;
    padding: 10px 14px;
    background: rgba(255, 255, 255, 0.08);
    border: none;
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: all var(--transition-normal);
}

.btn-fund:hover {
    background: rgba(255, 255, 255, 0.12);
    color: var(--text-primary);
}

.btn-fund.primary {
    background: linear-gradient(135deg, var(--accent-purple), #a855f7);
    color: white;
}

.btn-fund.primary:hover {
    box-shadow: 0 0 20px rgba(139, 92, 246, 0.4);
}

/* === INTERACTIVE TRADINGVIEW CHART STYLES === */
.tv-chart-wrapper {
    position: relative;
    width: 100%;
    height: 280px;
    background: linear-gradient(180deg, rgba(30, 41, 59, 0.8) 0%, rgba(15, 23, 42, 1) 100%);
    border-radius: 8px;
    overflow: hidden;
}

.tv-chart-canvas {
    width: 100%;
    height: 100%;
    cursor: crosshair;
}

.tv-chart-crosshair-x {
    position: absolute;
    top: 0;
    bottom: 60px;
    width: 1px;
    background: rgba(34, 211, 238, 0.5);
    pointer-events: none;
    display: none;
    z-index: 10;
}

.tv-chart-crosshair-y {
    position: absolute;
    left: 0;
    right: 60px;
    height: 1px;
    background: rgba(34, 211, 238, 0.5);
    pointer-events: none;
    display: none;
    z-index: 10;
}

.tv-price-label {
    position: absolute;
    right: 0;
    background: rgba(6, 182, 212, 0.9);
    color: white;
    padding: 2px 8px;
    font-size: 0.65rem;
    font-weight: 700;
    border-radius: 4px 0 0 4px;
    display: none;
    z-index: 11;
    pointer-events: none;
}

.tv-chart-tooltip {
    position: absolute;
    background: rgba(15, 23, 42, 0.95);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 10px 12px;
    min-width: 140px;
    z-index: 20;
    pointer-events: none;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}

.tv-chart-tooltip .tt-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
    padding-bottom: 6px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.tv-chart-tooltip .tt-symbol {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--text-primary);
}

.tv-chart-tooltip .tt-change {
    font-size: 0.65rem;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 4px;
}

.tv-chart-tooltip .tt-change.positive {
    background: rgba(34, 197, 94, 0.15);
    color: #22c55e;
}

.tv-chart-tooltip .tt-change.negative {
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
}

.tv-chart-tooltip .tt-row {
    display: flex;
    justify-content: space-between;
    font-size: 0.65rem;
    padding: 2px 0;
}

.tv-chart-tooltip .tt-row span:first-child {
    color: var(--text-muted);
}

.tv-chart-tooltip .tt-row span:last-child {
    font-weight: 600;
    color: var(--text-primary);
}

.tv-chart-tooltip .tt-row .text-green {
    color: #22c55e !important;
}

.tv-chart-tooltip .tt-row .text-red {
    color: #ef4444 !important;
}

/* === ORDERS SECTION === */
.orders-section {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    margin-bottom: 20px;
}

.orders-section .section-header {
    padding: 16px 20px;
    background: rgba(0, 0, 0, 0.2);
    border-bottom: 1px solid var(--card-border);
}

.order-count {
    font-size: 0.7rem;
    padding: 4px 10px;
    background: rgba(245, 158, 11, 0.2);
    color: var(--accent-gold);
    border-radius: 20px;
    font-weight: 600;
}

.orders-list {
    padding: 16px 20px;
}

.order-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: var(--radius-sm);
    margin-bottom: 10px;
}

.order-item:last-child {
    margin-bottom: 0;
}

.order-status {
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 0.7rem;
    font-weight: 600;
    flex-shrink: 0;
}

.order-details {
    flex: 1;
}

.order-id {
    font-size: 0.7rem;
    color: var(--text-muted);
    font-family: monospace;
}

.order-info {
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--text-primary);
}

.order-value {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--accent-gold);
}

.btn-full {
    width: 100%;
    padding: 14px;
    background: rgba(0, 0, 0, 0.2);
    border: none;
    border-top: 1px solid var(--card-border);
    color: var(--text-secondary);
    font-size: 0.8rem;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.btn-full:hover {
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-primary);
}

/* === ACTIVITY FEED === */
.activity-section {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.activity-section .section-header {
    padding: 16px 20px;
    background: rgba(0, 0, 0, 0.2);
    border-bottom: 1px solid var(--card-border);
}

.activity-feed {
    padding: 16px 20px;
}

.activity-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid var(--card-border);
}

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

.activity-icon {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    flex-shrink: 0;
}

.activity-content {
    flex: 1;
}

.activity-message {
    font-size: 0.8rem;
    color: var(--text-primary);
}

.activity-time {
    font-size: 0.7rem;
    color: var(--text-muted);
}

/* === REPUTATION GAUGE === */
.reputation-gauge {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px 0;
}

.gauge-svg {
    width: 120px;
    height: 60px;
}

.gauge-fill {
    stroke-linecap: round;
    transition: stroke-dasharray 0.5s ease;
}

.gauge-value {
    position: absolute;
    bottom: 20px;
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--text-primary);
}

.gauge-label {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-top: 8px;
}

.satisfaction-bar {
    margin-top: 20px;
}

.bar-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 8px;
    font-size: 0.75rem;
}

.bar-track {
    height: 8px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    overflow: hidden;
}

.bar-fill.satisfaction {
    height: 100%;
    background: linear-gradient(90deg, var(--accent-blue), var(--accent-cyan));
    border-radius: 4px;
    transition: width 0.5s ease;
}

/* === COMPANY EMPTY STATE === */
.company-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 40px;
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-lg);
    text-align: center;
}

.company-empty-state .empty-icon {
    width: 80px;
    height: 80px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    color: var(--text-muted);
    margin-bottom: 24px;
}

.company-empty-state h3 {
    margin: 0 0 12px 0;
    font-size: 1.2rem;
    color: var(--text-primary);
}

.company-empty-state p {
    margin: 0 0 24px 0;
    font-size: 0.9rem;
    color: var(--text-muted);
    max-width: 300px;
}

.btn-primary.btn-create-company {
    padding: 14px 28px;
    background: var(--gradient-primary);
    border: none;
    border-radius: var(--radius-md);
    color: white;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: all var(--transition-normal);
}

.btn-primary.btn-create-company:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-glow-blue);
}

.btn-action.secondary {
    background: rgba(255, 255, 255, 0.05);
}

.btn-action.success {
    background: var(--gradient-success);
    border-color: transparent;
    color: white;
}

/* === COMPANY COMPACT VIEW === */
.company-compact-grid {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 20px;
    margin-top: 20px;
}

.company-left-column,
.company-right-column {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Financial Summary Bar */
.financial-summary-bar {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}

.summary-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-md);
}

.summary-icon {
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
}

.summary-content {
    display: flex;
    flex-direction: column;
}

.summary-value {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-primary);
}

.summary-label {
    font-size: 0.65rem;
    color: var(--text-muted);
}

/* Compact Orders Section */
.orders-compact-section {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-lg);
    padding: 16px;
}

.section-header-compact {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 14px;
}

.section-header-compact h3 {
    margin: 0;
    font-size: 0.9rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
}

.btn-see-all {
    background: none;
    border: none;
    color: var(--accent-blue);
    font-size: 0.7rem;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 4px;
}

.btn-see-all:hover {
    text-decoration: underline;
}

/* Order Status Grid */
.order-status-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    margin-bottom: 14px;
}

.order-status-card {
    position: relative;
    padding: 12px 10px;
    border-radius: var(--radius-sm);
    text-align: center;
    overflow: hidden;
}

.order-status-card.pending {
    background: rgba(245, 158, 11, 0.12);
}

.order-status-card.processing {
    background: rgba(59, 130, 246, 0.12);
}

.order-status-card.shipped {
    background: rgba(139, 92, 246, 0.12);
}

.order-status-card.delivered {
    background: rgba(34, 197, 94, 0.12);
}

.order-status-card .status-count {
    font-size: 1.3rem;
    font-weight: 800;
    color: var(--text-primary);
}

.order-status-card .status-label {
    font-size: 0.6rem;
    color: var(--text-muted);
    margin-top: 2px;
}

.order-status-card .status-icon {
    position: absolute;
    top: 8px;
    right: 8px;
    font-size: 0.6rem;
    opacity: 0.5;
}

.order-status-card.pending .status-icon {
    color: #f59e0b;
}

.order-status-card.processing .status-icon {
    color: #3b82f6;
}

.order-status-card.shipped .status-icon {
    color: #8b5cf6;
}

.order-status-card.delivered .status-icon {
    color: #22c55e;
}

/* Recent Orders */
.recent-orders h4 {
    margin: 0 0 10px 0;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
}

.orders-list-compact {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.order-card-compact {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: var(--radius-sm);
    transition: background var(--transition-fast);
    cursor: pointer;
}

.order-card-compact:hover {
    background: rgba(255, 255, 255, 0.05);
}

.order-status-badge {
    width: 28px;
    height: 28px;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    flex-shrink: 0;
}

.order-card-compact .order-info {
    flex: 1;
    min-width: 0;
}

.order-product {
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.order-id-small {
    font-size: 0.65rem;
    color: var(--text-muted);
    font-family: monospace;
}

.order-card-compact .order-value {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--accent-gold);
    flex-shrink: 0;
}

/* Compact Activity Feed */
.activity-compact-section {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-lg);
    padding: 16px;
}

.activity-list-compact {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.activity-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid var(--card-border);
}

.activity-row:last-child {
    border-bottom: none;
}

.activity-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.activity-text {
    flex: 1;
    font-size: 0.75rem;
    color: var(--text-primary);
}

.activity-time-small {
    font-size: 0.65rem;
    color: var(--text-muted);
}

/* Responsive */
@media (max-width: 1100px) {
    .company-compact-grid {
        grid-template-columns: 1fr;
    }

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

    .company-right-column {
        flex-direction: row;
    }

    .orders-compact-section,
    .activity-compact-section {
        flex: 1;
    }
}

@media (max-width: 600px) {
    .financial-summary-bar {
        grid-template-columns: 1fr;
    }

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

    .company-right-column {
        flex-direction: column;
    }
}

/* === COMMODITY EXCHANGE STYLES === */
.commodity-widget-content {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 16px;
    gap: 12px;
}

.commodity-widget-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.commodity-widget-header .header-title {
    display: flex;
    align-items: center;
    gap: 10px;
}

.commodity-widget-header .header-title i {
    font-size: 1.1rem;
    color: var(--accent-gold);
}

.commodity-widget-header .header-title h3 {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
}

.category-strip {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    padding-bottom: 4px;
}

.category-pill {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 6px 10px;
    border-radius: 20px;
    font-size: 0.65rem;
    font-weight: 500;
    white-space: nowrap;
    flex-shrink: 0;
}

.category-pill i {
    font-size: 0.7rem;
}

.commodity-movers {
    flex: 1;
    min-height: 0;
}

.commodity-movers h4 {
    margin: 0 0 10px 0;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-muted);
}

.commodity-movers .movers-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.commodity-mover-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: var(--radius-sm);
    border-left: 3px solid transparent;
    transition: all var(--transition-fast);
}

.commodity-mover-item.up {
    border-left-color: var(--accent-green);
}

.commodity-mover-item.down {
    border-left-color: var(--accent-red);
}

.commodity-mover-item:hover {
    background: rgba(255, 255, 255, 0.05);
}

.commodity-icon {
    width: 28px;
    height: 28px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    color: var(--text-muted);
}

.commodity-info {
    flex: 1;
    min-width: 0;
}

.commodity-name {
    display: block;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-primary);
}

.commodity-price {
    display: block;
    font-size: 0.65rem;
    color: var(--text-muted);
}

.commodity-change {
    font-size: 0.7rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 3px;
}

.commodity-change.positive {
    color: var(--accent-green);
}

.commodity-change.negative {
    color: var(--accent-red);
}

.commodity-actions {
    display: flex;
    gap: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--card-border);
}

.btn-commodity {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    font-size: 0.7rem;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.btn-commodity i {
    color: var(--accent-gold);
}

.btn-commodity:hover {
    background: linear-gradient(135deg, var(--accent-gold), #d97706);
    border-color: transparent;
    color: white;
}

.btn-commodity:hover i {
    color: white;
}

/* === COMMODITY FULL VIEW === */
.commodity-full-view {
    padding: 0;
}

.commodity-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24px;
    background: var(--card-bg);
    border-radius: var(--radius-lg);
    margin-bottom: 20px;
}

.commodity-header h1 {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 12px;
}

.commodity-header h1 i {
    color: var(--accent-gold);
}

.commodity-header p {
    margin: 4px 0 0 0;
    font-size: 0.85rem;
    color: var(--text-muted);
}

.commodity-category-tabs {
    display: flex;
    gap: 8px;
    padding: 12px 16px;
    background: var(--card-bg);
    border-radius: var(--radius-lg);
    margin-bottom: 20px;
    overflow-x: auto;
}

.category-tab {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    font-size: 0.75rem;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
    transition: all var(--transition-fast);
}

.category-tab:hover {
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-primary);
}

.category-tab.active {
    background: var(--gradient-primary);
    border-color: transparent;
    color: white;
}

.commodity-main-grid {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 20px;
}

.commodity-list-section {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-lg);
    padding: 20px;
}

.list-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.list-header .search-box {
    flex: 1;
    max-width: 300px;
}

.sort-options select {
    padding: 8px 12px;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-size: 0.75rem;
}

.commodity-table .table-header,
.commodity-row {
    display: grid;
    grid-template-columns: 1fr 100px 100px 80px 120px;
    gap: 12px;
    padding: 12px 16px;
    align-items: center;
}

.commodity-table .table-header {
    background: rgba(0, 0, 0, 0.2);
    border-radius: var(--radius-sm);
    margin-bottom: 8px;
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
}

.commodity-row {
    border-bottom: 1px solid var(--card-border);
    transition: background var(--transition-fast);
}

.commodity-row:hover {
    background: rgba(255, 255, 255, 0.03);
}

.commodity-row:last-child {
    border-bottom: none;
}

.commodity-row .col-name {
    display: flex;
    align-items: center;
    gap: 10px;
}

.commodity-badge {
    width: 32px;
    height: 32px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    color: var(--text-muted);
}

.commodity-row .col-price {
    font-weight: 600;
    color: var(--text-primary);
}

.commodity-row .col-change.positive {
    color: var(--accent-green);
}

.commodity-row .col-change.negative {
    color: var(--accent-red);
}

.commodity-row .col-volume {
    color: var(--text-muted);
    font-size: 0.8rem;
}

.commodity-row .col-actions {
    display: flex;
    gap: 6px;
}

/* Market Summary Sidebar */
.market-summary-sidebar {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.market-summary-sidebar .summary-card,
.market-summary-sidebar .top-volume-card,
.market-summary-sidebar .watchlist-card {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-lg);
    padding: 16px;
}

.market-summary-sidebar h4 {
    margin: 0 0 14px 0;
    font-size: 0.85rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
}

.market-summary-sidebar h4 i {
    color: var(--accent-gold);
}

.summary-stats .stat-row {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px solid var(--card-border);
    font-size: 0.8rem;
}

.summary-stats .stat-row:last-child {
    border-bottom: none;
}

.summary-stats .label {
    color: var(--text-muted);
}

.summary-stats .value {
    font-weight: 600;
    color: var(--text-primary);
}

.volume-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.volume-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: var(--radius-sm);
    font-size: 0.75rem;
}

.volume-item .rank {
    width: 20px;
    font-weight: 700;
    color: var(--accent-gold);
}

.volume-item .name {
    flex: 1;
    color: var(--text-primary);
}

.volume-item .vol {
    color: var(--text-muted);
}

.watchlist-card .empty-text {
    margin: 0 0 12px 0;
    font-size: 0.75rem;
    color: var(--text-muted);
    text-align: center;
}

.btn-add-watchlist {
    width: 100%;
    padding: 10px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px dashed var(--card-border);
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    font-size: 0.75rem;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.btn-add-watchlist:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: var(--accent-gold);
    color: var(--accent-gold);
}

@media (max-width: 1100px) {
    .commodity-main-grid {
        grid-template-columns: 1fr;
    }

    .market-summary-sidebar {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .market-summary-sidebar>* {
        flex: 1;
        min-width: 250px;
    }
}

/* Buy/Sell Trade Buttons - Futuristic Warframe Style */
.btn-trade {
    padding: 6px 14px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    border: 1px solid transparent;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: rgba(0, 0, 0, 0.4);
}

.btn-trade.buy {
    color: #22d3ee;
    border: 1px solid rgba(6, 182, 212, 0.3);
    box-shadow: inset 0 0 10px rgba(6, 182, 212, 0.05);
}

.btn-trade.buy:hover {
    background: rgba(6, 182, 212, 0.15);
    border-color: #22d3ee;
    color: #ffffff;
    box-shadow: 0 0 15px rgba(6, 182, 212, 0.4), inset 0 0 10px rgba(6, 182, 212, 0.1);
    transform: translateY(-1px);
}

.btn-trade.sell {
    color: #f87171;
    border: 1px solid rgba(239, 68, 68, 0.3);
    box-shadow: inset 0 0 10px rgba(239, 68, 68, 0.05);
}

.btn-trade.sell:hover {
    background: rgba(239, 68, 68, 0.15);
    border-color: #f87171;
    color: #ffffff;
    box-shadow: 0 0 15px rgba(239, 68, 68, 0.4);
    transform: translateY(-1px);
}

/* Category & Filter Tabs - Futuristic Style */
.category-tab,
.filter-tab {
    padding: 6px 16px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--text-muted);
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.25s ease;
    letter-spacing: 0.5px;
}

.category-tab:hover,
.filter-tab:hover {
    color: var(--text-primary);
    border-color: rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.03);
}

.category-tab.active,
.filter-tab.active {
    color: #22d3ee;
    background: rgba(6, 182, 212, 0.1);
    border-color: #06b6d4;
    box-shadow: 0 0 12px rgba(6, 182, 212, 0.2);
}

.category-tab.active::after,
.filter-tab.active::after {
    display: none;
    /* Replaced with glow and border */
}

/* Search Box in Commodity */
.commodity-list-section .search-box {
    position: relative;
    display: flex;
    align-items: center;
}

.commodity-list-section .search-box i {
    position: absolute;
    left: 12px;
    color: var(--text-muted);
    font-size: 0.8rem;
}

.commodity-list-section .search-box input {
    width: 100%;
    padding: 10px 12px 10px 36px;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-size: 0.8rem;
}

.commodity-list-section .search-box input:focus {
    outline: none;
    border-color: var(--accent-gold);
}

.commodity-list-section .search-box input::placeholder {
    color: var(--text-muted);
}

/* No Results Message */
.no-results {
    padding: 40px 20px;
    text-align: center;
}

.no-results p {
    margin: 0;
    color: var(--text-muted);
    font-size: 0.85rem;
}

/* Category Tab Active Effect */
.category-tab.active {
    background: var(--gradient-primary);
    border-color: transparent;
    color: white;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

.category-tab:hover:not(.active) {
    background: rgba(255, 255, 255, 0.1);
    border-color: var(--cat-color, var(--text-muted));
    color: var(--cat-color, var(--text-primary));
}

/* === TRADINGVIEW STYLE EXCHANGE === */
.exchange-main-layout {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 20px;
    margin-top: 20px;
}

.exchange-left-panel {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.exchange-right-panel {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* TradingView Chart Container */
.tv-chart-container {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.tv-chart-container .chart-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid var(--card-border);
}

.chart-symbol {
    display: flex;
    align-items: baseline;
    gap: 12px;
}

.chart-symbol .symbol {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-primary);
}

.chart-symbol .price {
    font-size: 1.3rem;
    font-weight: 800;
    color: var(--text-primary);
}

.chart-symbol .change {
    font-size: 0.85rem;
    font-weight: 600;
    padding: 4px 8px;
    border-radius: var(--radius-sm);
}

.chart-symbol .change.positive {
    background: rgba(34, 197, 94, 0.15);
    color: var(--accent-green);
}

.chart-symbol .change.negative {
    background: rgba(239, 68, 68, 0.15);
    color: var(--accent-red);
}

.chart-timeframes {
    display: flex;
    gap: 4px;
}

.tf-btn {
    padding: 4px 10px;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    color: var(--text-muted);
    font-size: 0.65rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    text-transform: uppercase;
}

.tf-btn:hover {
    background: rgba(255, 255, 255, 0.05);
    color: #22d3ee;
    border-color: rgba(34, 211, 238, 0.3);
}

.tf-btn.active {
    background: rgba(6, 182, 212, 0.15);
    border-color: #06b6d4;
    color: #22d3ee;
    box-shadow: 0 0 10px rgba(6, 182, 212, 0.2);
}

.chart-area {
    padding: 0;
    min-height: 250px;
}

.tv-chart-svg {
    width: 100%;
    height: 250px;
    display: block;
}

.chart-footer {
    padding: 12px 20px;
    border-top: 1px solid var(--card-border);
}

.chart-stats {
    display: flex;
    gap: 24px;
}

.chart-stats .stat {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.chart-stats .label {
    font-size: 0.65rem;
    color: var(--text-muted);
    text-transform: uppercase;
}

.chart-stats .val {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-primary);
}

/* Sidebar Cards */
.sidebar-card {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-lg);
    padding: 16px;
}

.sidebar-card .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.sidebar-card .card-header h3 {
    margin: 0;
    font-size: 0.85rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
}

.sidebar-card .card-header h3 i {
    color: var(--accent-gold);
}

/* Country Economies */
.economies-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.economy-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background var(--transition-fast);
}

.economy-row:hover {
    background: rgba(255, 255, 255, 0.05);
}

.country-flag {
    font-size: 1.3rem;
}

.country-info {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.country-name {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-primary);
}

.country-gdp {
    font-size: 0.65rem;
    color: var(--text-muted);
}

.country-growth {
    font-size: 0.75rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 4px;
}

.country-growth.positive {
    color: var(--accent-green);
}

.country-growth.negative {
    color: var(--accent-red);
}

/* Recent Investments */
.investments-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.investment-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: var(--radius-sm);
    border-left: 3px solid transparent;
}

.investment-row.buy {
    border-left-color: var(--accent-green);
}

.investment-row.sell {
    border-left-color: var(--accent-red);
}

.investment-row.dividend {
    border-left-color: var(--accent-gold);
}

.inv-icon {
    width: 28px;
    height: 28px;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
}

.investment-row.buy .inv-icon {
    background: rgba(34, 197, 94, 0.15);
    color: var(--accent-green);
}

.investment-row.sell .inv-icon {
    background: rgba(239, 68, 68, 0.15);
    color: var(--accent-red);
}

.investment-row.dividend .inv-icon {
    background: rgba(245, 158, 11, 0.15);
    color: var(--accent-gold);
}

.inv-info {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.inv-asset {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-primary);
}

.inv-detail {
    font-size: 0.65rem;
    color: var(--text-muted);
}

.inv-value {
    text-align: right;
}

.inv-price {
    display: block;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-primary);
}

.inv-time {
    display: block;
    font-size: 0.6rem;
    color: var(--text-muted);
}

/* Trade Agreements */
.agreements-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.agreement-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.agreement-row:hover {
    background: rgba(255, 255, 255, 0.05);
    transform: translateX(4px);
}

.agreement-countries {
    font-size: 1.1rem;
    display: flex;
    gap: 2px;
}

.agreement-info {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.agreement-title {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.3;
}

.agreement-type {
    font-size: 0.6rem;
    color: var(--text-muted);
    margin-top: 2px;
}

.agreement-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
}

.agreement-impact {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.6rem;
}

.agreement-impact.positive {
    background: rgba(34, 197, 94, 0.2);
    color: var(--accent-green);
}

.agreement-impact.negative {
    background: rgba(239, 68, 68, 0.2);
    color: var(--accent-red);
}

.agreement-date {
    font-size: 0.6rem;
    color: var(--text-muted);
}

/* Agreement Modal */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(5px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    animation: fadeIn 0.2s ease;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.modal-content.agreement-modal {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-lg);
    width: 90%;
    max-width: 600px;
    max-height: 80vh;
    overflow: hidden;
    animation: slideUp 0.3s ease;
}

@keyframes slideUp {
    from {
        transform: translateY(20px);
        opacity: 0;
    }

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

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 20px 24px;
    border-bottom: 1px solid var(--card-border);
}

.modal-header h2 {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 12px;
}

.modal-countries {
    font-size: 1.5rem;
}

.modal-close {
    width: 32px;
    height: 32px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-fast);
}

.modal-close:hover {
    background: rgba(239, 68, 68, 0.2);
    border-color: var(--accent-red);
    color: var(--accent-red);
}

.modal-body {
    padding: 24px;
    overflow-y: auto;
    max-height: 60vh;
}

.agreement-meta-full {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.type-badge,
.impact-badge,
.date-badge {
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 0.7rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 6px;
}

.type-badge {
    background: rgba(59, 130, 246, 0.15);
    color: var(--accent-blue);
}

.impact-badge.positive {
    background: rgba(34, 197, 94, 0.15);
    color: var(--accent-green);
}

.impact-badge.negative {
    background: rgba(239, 68, 68, 0.15);
    color: var(--accent-red);
}

.date-badge {
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-muted);
}

.agreement-content {
    color: var(--text-secondary);
    font-size: 0.85rem;
    line-height: 1.7;
}

.agreement-content h4 {
    color: var(--text-primary);
    font-size: 0.9rem;
    margin: 20px 0 10px 0;
}

.agreement-content ul {
    margin: 10px 0;
    padding-left: 20px;
}

.agreement-content li {
    margin-bottom: 6px;
}

/* Responsive */
@media (max-width: 1100px) {
    .exchange-main-layout {
        grid-template-columns: 1fr;
    }

    .exchange-right-panel {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .exchange-right-panel>* {
        flex: 1;
        min-width: 280px;
    }
}

/* === COMPACT OVERVIEW V2 === */
.overview-compact-v2 {
    display: grid;
    grid-template-columns: 1fr 0.9fr 1.4fr;
    gap: 12px;
    height: calc(100vh - 180px);
    min-height: 520px;
}

.overview-column {
    display: flex;
    flex-direction: column;
    gap: 12px;
    height: 100%;
}

/* Vertical Spacing Overrides based on visual */
.col-left .news-widget-compact {
    flex: 1.4;
}

.col-left .investments-widget-compact {
    flex: 1;
}

.col-center .logistics-widget-compact {
    flex: 1;
}

.col-right .company-widget-compact {
    flex: 1.2;
}

.col-right .exchange-widget-compact {
    flex: 1;
}

.logistics-widget {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.shipment-stats-mini {
    display: flex;
    gap: 8px;
    padding: 10px 12px;
    background: rgba(255, 255, 255, 0.02);
}

.stat-pill {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 4px;
    padding: 4px 8px;
    font-size: 0.6rem;
    font-weight: 700;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 5px;
}

.active-shipments-list {
    flex: 1;
    overflow-y: auto;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.shipment-mini {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.04);
    border-radius: 6px;
    padding: 8px 10px;
    display: flex;
    align-items: center;
    gap: 12px;
    transition: all 0.2s ease;
}

.shipment-mini:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.1);
}

.shipment-icon {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    flex-shrink: 0;
}

.shipment-info {
    flex: 1;
    min-width: 0;
}

.shipment-route {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.shipment-product {
    font-size: 0.65rem;
    color: var(--text-muted);
    margin-top: 2px;
}

.shipment-progress {
    width: 80px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: flex-end;
}

.progress-bar-mini {
    width: 100%;
    height: 4px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 2px;
    overflow: hidden;
}

.progress-text {
    font-size: 0.6rem;
    font-weight: 800;
    color: var(--text-secondary);
}

.widget-footer {
    padding: 10px 12px;
    display: flex;
    gap: 8px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.btn-widget {
    flex: 1;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    color: var(--text-primary);
    font-size: 0.65rem;
    font-weight: 700;
    padding: 6px 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: all 0.2s ease;
}

.btn-widget:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
}

.btn-widget.secondary {
    background: rgba(6, 182, 212, 0.1);
    border-color: rgba(6, 182, 212, 0.2);
    color: var(--accent-cyan);
}

.btn-widget.secondary:hover {
    background: rgba(6, 182, 212, 0.2);
}

.overview-column {
    display: flex;
    flex-direction: column;
    gap: 12px;
    height: 100%;
}

/* === COMPANY WIDGET V2 STYLES === */
.company-widget-v2 {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 12px;
    gap: 14px;
}

.comp-v2-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.comp-v2-identity {
    display: flex;
    gap: 12px;
    align-items: center;
}

.comp-v2-icon {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
}

.comp-v2-names h4 {
    margin: 0;
    font-size: 0.75rem;
    color: var(--text-primary);
    font-weight: 700;
    letter-spacing: 0.3px;
}

.comp-v2-profession {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.comp-v2-stats-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 10px;
}

.comp-v2-stat-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    padding: 8px 10px;
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.comp-v2-stat-card .stat-content {
    display: flex;
    flex-direction: column;
}

.comp-v2-stat-card .val {
    font-size: 0.75rem;
    font-weight: 700;
}

.comp-v2-stat-card .lbl {
    font-size: 0.55rem;
    color: var(--text-muted);
    font-weight: 600;
    margin-top: 2px;
}

.comp-v2-stat-card .stat-trend {
    font-size: 0.6rem;
    color: var(--accent-green);
}

.comp-v2-products {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.comp-v2-products .products-header {
    display: flex;
    justify-content: space-between;
    font-size: 0.65rem;
    color: var(--text-secondary);
    font-weight: 600;
}

.products-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.prod-item-v2 {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.prod-item-v2 .prod-top {
    display: flex;
    justify-content: space-between;
    font-size: 0.7rem;
    font-weight: 500;
}

.prod-item-v2 .prod-bar-full {
    height: 4px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 2px;
    overflow: hidden;
}

.prod-item-v2 .prod-bar-fill {
    height: 100%;
    border-radius: 2px;
}

.comp-v2-footer {
    display: flex;
    gap: 12px;
    padding-top: 10px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    font-size: 0.65rem;
    color: var(--text-muted);
    align-items: center;
}

.comp-v2-footer .lvl-badge {
    margin-left: auto;
    background: var(--accent-gold);
    color: black;
    padding: 2px 6px;
    border-radius: 4px;
    font-weight: 800;
    font-size: 0.6rem;
}

/* === EXCHANGE WIDGET V2 STYLES === */
.exchange-widget-header-v2 {
    display: flex;
    justify-content: space-between;
    padding: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.index-info-box {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.index-name-row {
    display: flex;
    gap: 8px;
    align-items: center;
}

.index-label {
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--text-secondary);
}

.status-indicator {
    font-size: 0.55rem;
    font-weight: 800;
    padding: 1px 4px;
    border-radius: 3px;
    background: rgba(34, 197, 94, 0.15);
    color: var(--accent-green);
}

.index-price-row {
    display: flex;
    gap: 10px;
    align-items: baseline;
}

.index-price-row .value-large {
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: -0.2px;
}

.change-tag {
    font-size: 0.7rem;
    font-weight: 700;
}

.index-sparkline {
    width: 80px;
    height: 35px;
}

.top-movers-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    padding: 12px;
}

.mover-grid-item {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.04);
    border-radius: 6px;
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.mover-grid-item .mover-top {
    display: flex;
    justify-content: space-between;
    font-size: 0.7rem;
}

.mover-grid-item .ticker {
    font-weight: 700;
    color: var(--text-primary);
}

.mover-grid-item .price {
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.mover-grid-item .change {
    font-size: 0.65rem;
    font-weight: 700;
}

.exchange-quick-actions {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 8px;
    padding: 10px 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    background: rgba(255, 255, 255, 0.01);
}

.btn-exchange {
    background: rgba(6, 182, 212, 0.05);
    border: 1px solid rgba(6, 182, 212, 0.1);
    border-radius: 6px;
    color: var(--accent-cyan);
    font-size: 0.65rem;
    font-weight: 700;
    padding: 8px 4px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-exchange i {
    font-size: 0.9rem;
    opacity: 0.8;
}

.btn-exchange:hover {
    background: rgba(6, 182, 212, 0.15);
    border-color: rgba(6, 182, 212, 0.4);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(6, 182, 212, 0.1);
}

.overview-column {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-height: 0;
}

/* Sol ve Sağ sütunlar: 2 widget eşit bölünmüş */
.col-left .widget-card,
.col-right .widget-card {
    flex: 1;
    min-height: 0;
}

/* Orta sütun: 1 widget tam boy */
.col-center .widget-card {
    flex: 1;
}

.widget-card {
    background: rgba(15, 23, 42, 0.65);
    backdrop-filter: blur(14px) saturate(180%);
    -webkit-backdrop-filter: blur(14px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-md);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-height: 0;
    box-shadow: 0 4px 24px -1px rgba(0, 0, 0, 0.3);
}

.widget-body {
    flex: 1;
    overflow-y: auto;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-height: 0;
}

/* Scrollbar styles for widget-body */
.widget-body::-webkit-scrollbar {
    width: 3px;
}

.widget-body::-webkit-scrollbar-thumb {
    background: rgba(6, 182, 212, 0.2);
    border-radius: 10px;
}

.widget-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    border-bottom: 1px solid var(--card-border);
    flex-shrink: 0;
}

.widget-header h3 {
    margin: 0;
    font-size: 0.7rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--text-primary);
}

.widget-header h3 i {
    color: var(--accent-gold);
    font-size: 0.75rem;
}

.btn-widget-action {
    background: rgba(6, 182, 212, 0.05);
    border: 1px solid rgba(6, 182, 212, 0.2);
    border-radius: 4px;
    color: #22d3ee;
    font-size: 0.6rem;
    font-weight: 600;
    cursor: pointer;
    padding: 3px 10px;
    transition: all 0.2s ease;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.btn-widget-action:hover {
    background: rgba(6, 182, 212, 0.15);
    border-color: #22d3ee;
    box-shadow: 0 0 8px rgba(6, 182, 212, 0.3);
    text-decoration: none;
}

.widget-body {
    padding: 8px;
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* Column Sizing */
.col-left .widget-card:first-child {
    flex: 1;
}

.col-left .widget-card:last-child {
    flex: 1;
}

.col-center .widget-card {
    flex: 1;
}

.col-right .widget-card:first-child {
    flex: 1;
}

.col-right .widget-card:last-child {
    flex: 1;
}

/* Compact News Item */
.compact-news-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: var(--radius-sm);
    transition: background var(--transition-fast);
    cursor: pointer;
}

.compact-news-item:hover {
    background: rgba(255, 255, 255, 0.05);
}

.news-icon {
    width: 22px;
    height: 22px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.55rem;
    flex-shrink: 0;
}

.news-icon.breaking {
    background: rgba(239, 68, 68, 0.15);
    color: var(--accent-red);
}

.news-icon.market {
    background: rgba(59, 130, 246, 0.15);
    color: var(--accent-blue);
}

.news-icon.trade {
    background: rgba(34, 197, 94, 0.15);
    color: var(--accent-green);
}

.news-icon.economy {
    background: rgba(245, 158, 11, 0.15);
    color: var(--accent-gold);
}

.news-content {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.news-title {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.news-time {
    font-size: 0.55rem;
    color: var(--text-muted);
}

.news-impact {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.5rem;
    flex-shrink: 0;
}

.news-impact.positive {
    background: rgba(34, 197, 94, 0.2);
    color: var(--accent-green);
}

.news-impact.negative {
    background: rgba(239, 68, 68, 0.2);
    color: var(--accent-red);
}

.news-impact.neutral {
    background: rgba(148, 163, 184, 0.2);
    color: var(--text-muted);
}

/* Compact Investment Item */
.compact-investment-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: var(--radius-sm);
    border-left: 2px solid transparent;
}

.compact-investment-item.buy {
    border-left-color: var(--accent-green);
}

.compact-investment-item.sell {
    border-left-color: var(--accent-red);
}

.compact-investment-item.dividend {
    border-left-color: var(--accent-gold);
}

.inv-type-icon {
    width: 20px;
    height: 20px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.55rem;
    flex-shrink: 0;
}

.compact-investment-item.buy .inv-type-icon {
    background: rgba(34, 197, 94, 0.15);
    color: var(--accent-green);
}

.compact-investment-item.sell .inv-type-icon {
    background: rgba(239, 68, 68, 0.15);
    color: var(--accent-red);
}

.compact-investment-item.dividend .inv-type-icon {
    background: rgba(245, 158, 11, 0.15);
    color: var(--accent-gold);
}

.inv-details {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.inv-name {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--text-primary);
}

.inv-desc {
    font-size: 0.55rem;
    color: var(--text-muted);
}

.inv-amount {
    text-align: right;
}

.inv-amount .inv-price {
    display: block;
    font-size: 0.65rem;
    font-weight: 600;
    color: var(--text-primary);
}

.inv-amount .inv-time {
    display: block;
    font-size: 0.5rem;
    color: var(--text-muted);
}

/* Logistics Widget Compact Override */
.logistics-widget-compact .widget-body {
    padding: 0;
}

.logistics-widget-compact .logistics-widget-content {
    height: 100%;
}

/* Company/Exchange Widget Compact Override */
.company-widget-compact,
.exchange-widget-compact {
    padding: 0;
}

.company-widget-compact>*,
.exchange-widget-compact>* {
    border: none;
    border-radius: 0;
}

/* Responsive */
@media (max-width: 1200px) {
    .overview-compact-v2 {
        grid-template-columns: 1fr 1fr;
    }

    .col-center {
        order: 3;
        grid-column: span 2;
    }
}

@media (max-width: 768px) {
    .overview-compact-v2 {
        grid-template-columns: 1fr;
        height: auto;
    }

    .col-center {
        grid-column: span 1;
    }

    .overview-column {
        min-height: auto;
    }

    .widget-card {
        max-height: 300px;
    }
}

/* === FUTURISTIC TAB BUTTONS (Warframe Style) === */
.header-tabs.futuristic {
    display: flex;
    gap: 4px;
    background: rgba(0, 0, 0, 0.4);
    padding: 4px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.header-tabs.futuristic .tab-btn {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 10px 16px 8px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 6px;
    color: rgba(148, 163, 184, 0.7);
    cursor: pointer;
    transition: all 0.25s ease;
    overflow: hidden;
}

.header-tabs.futuristic .tab-btn::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, #06b6d4, transparent);
    transition: width 0.3s ease;
}

.header-tabs.futuristic .tab-btn::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(6, 182, 212, 0.1) 0%, transparent 50%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.header-tabs.futuristic .tab-btn:hover {
    color: rgba(255, 255, 255, 0.9);
    border-color: rgba(6, 182, 212, 0.3);
}

.header-tabs.futuristic .tab-btn:hover::before {
    width: 60%;
}

.header-tabs.futuristic .tab-btn:hover::after {
    opacity: 1;
}

/* Active State - Cyan Glow */
.header-tabs.futuristic .tab-btn.active {
    color: #ffffff;
    background: rgba(6, 182, 212, 0.08);
    border-color: rgba(6, 182, 212, 0.5);
    box-shadow:
        0 0 15px rgba(6, 182, 212, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.header-tabs.futuristic .tab-btn.active::before {
    width: 80%;
    height: 2px;
    background: linear-gradient(90deg, transparent, #06b6d4, #22d3ee, #06b6d4, transparent);
    box-shadow: 0 0 8px #06b6d4;
}

.header-tabs.futuristic .tab-btn.active::after {
    opacity: 1;
}

/* Tab Icon */
.header-tabs.futuristic .tab-icon {
    position: relative;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
}

.header-tabs.futuristic .tab-icon i {
    font-size: 1rem;
    transition: all 0.3s ease;
}

.header-tabs.futuristic .tab-btn:hover .tab-icon i {
    transform: scale(1.1);
}

.header-tabs.futuristic .tab-btn.active .tab-icon i {
    color: #22d3ee;
    filter: drop-shadow(0 0 6px rgba(34, 211, 238, 0.6));
}

/* Tab Label */
.header-tabs.futuristic .tab-label {
    font-size: 0.6rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    z-index: 1;
    transition: all 0.3s ease;
}

.header-tabs.futuristic .tab-btn.active .tab-label {
    color: #22d3ee;
}

/* Corner Accents for Active Tab */
.header-tabs.futuristic .tab-btn.active::before {
    animation: glowPulse 2s ease-in-out infinite;
}

@keyframes glowPulse {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.6;
    }
}

/* Responsive */
@media (max-width: 768px) {
    .header-tabs.futuristic {
        gap: 2px;
        padding: 3px;
    }

    .header-tabs.futuristic .tab-btn {
        padding: 8px 10px 6px;
    }

    .header-tabs.futuristic .tab-icon {
        width: 26px;
        height: 26px;
    }

    .header-tabs.futuristic .tab-icon i {
        font-size: 0.85rem;
    }

    .header-tabs.futuristic .tab-label {
        font-size: 0.5rem;
    }
}

/* === COMPREHENSIVE FUTURISTIC BUTTONS (Warframe Style) === */

/* Widget Footer Buttons */
.widget-footer .btn-widget {
    flex: 1;
    padding: 8px 12px;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border: 1px solid rgba(6, 182, 212, 0.2);
    border-radius: 4px;
    background: rgba(6, 182, 212, 0.05);
    color: #22d3ee;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.widget-footer .btn-widget:hover {
    background: rgba(6, 182, 212, 0.15);
    border-color: #22d3ee;
    box-shadow: 0 0 15px rgba(6, 182, 212, 0.3);
    color: #ffffff;
    transform: translateY(-1px);
}

.widget-footer .btn-widget.secondary {
    border-color: rgba(255, 255, 255, 0.1);
    background: rgba(0, 0, 0, 0.3);
    color: var(--text-muted);
}

.widget-footer .btn-widget.secondary:hover {
    border-color: rgba(255, 255, 255, 0.3);
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.05);
    box-shadow: none;
}

/* Header & Full View Action Buttons */
.btn-action {
    padding: 8px 18px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(0, 0, 0, 0.4);
    color: var(--text-primary);
}

.btn-action.primary {
    background: rgba(6, 182, 212, 0.1);
    border-color: rgba(6, 182, 212, 0.4);
    color: #22d3ee;
    box-shadow: inset 0 0 10px rgba(6, 182, 212, 0.05);
}

.btn-action.primary:hover {
    background: rgba(6, 182, 212, 0.25);
    border-color: #22d3ee;
    box-shadow: 0 0 20px rgba(6, 182, 212, 0.4);
    color: #ffffff;
}

/* Transport & Section Tabs */
.transport-tab,
.section-tab {
    padding: 8px 16px;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--text-muted);
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.25s ease;
    display: flex;
    align-items: center;
    gap: 8px;
}

.transport-tab:hover,
.section-tab:hover {
    border-color: rgba(34, 211, 238, 0.3);
    background: rgba(34, 211, 238, 0.05);
    color: var(--text-primary);
}

.transport-tab.active,
.section-tab.active {
    color: #22d3ee;
    background: rgba(6, 182, 212, 0.1);
    border-color: #06b6d4;
    box-shadow: 0 0 15px rgba(6, 182, 212, 0.2);
}

/* Global Glow Utility */
.glow-cyan {
    box-shadow: 0 0 15px rgba(6, 182, 212, 0.3);
}

/* Scrollbar Styling for Futuristic Look */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.2);
}

::-webkit-scrollbar-thumb {
    background: rgba(6, 182, 212, 0.2);
    border-radius: 3px;
    transition: background 0.3s;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(6, 182, 212, 0.5);
    box-shadow: 0 0 10px rgba(6, 182, 212, 0.3);
}

/* === EXCHANGE PAGE FULL VIEW STYLES === */
.exchange-full-view {
    display: flex;
    flex-direction: column;
    height: 100%;
    gap: 8px;
}

.exchange-page-header {
    display: inline-flex;
    gap: 20px;
    align-items: center;
    padding: 10px 16px;
    background: rgba(15, 23, 42, 0.8);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-md);
}

.exchange-page-header h1 {
    font-size: 1rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
}

.exchange-page-header h1 i {
    color: var(--accent-cyan);
}

.market-status {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.6rem;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 12px;
    margin-left: 8px;
}

.market-status.open {
    background: rgba(34, 197, 94, 0.15);
    color: var(--accent-green);
}

.status-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    animation: pulse 2s infinite;
}

@keyframes pulse {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.4;
    }
}

.header-center {
    display: flex;
}

/* Exchange Navigation Tabs */
.exchange-nav-tabs {
    display: flex;
    gap: 4px;
    background: rgba(0, 0, 0, 0.3);
    padding: 4px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.exchange-nav-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 4px;
    color: var(--text-muted);
    font-size: 0.65rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.25s ease;
}

.exchange-nav-btn i {
    font-size: 0.7rem;
}

.exchange-nav-btn:hover {
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.05);
}

.exchange-nav-btn.active {
    color: #22d3ee;
    background: rgba(6, 182, 212, 0.1);
    border-color: rgba(6, 182, 212, 0.4);
    box-shadow: 0 0 12px rgba(6, 182, 212, 0.15);
}

.exchange-nav-btn.active i {
    color: #22d3ee;
    filter: drop-shadow(0 0 4px rgba(34, 211, 238, 0.5));
}

.portfolio-summary {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
}

.portfolio-summary .label {
    font-size: 0.55rem;
    color: var(--text-muted);
}

.portfolio-summary .value {
    font-size: 0.9rem;
    font-weight: 800;
}

.portfolio-summary .change {
    font-size: 0.6rem;
    font-weight: 700;
}

/* Exchange Main Layout */
.exchange-main-layout {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 8px;
    flex: 1;
    min-height: 0;
}

.exchange-left-panel {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-height: 0;
}

.exchange-right-panel {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: calc(100vh - 180px);
    overflow-y: auto;
}

.right-panel-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
}

.right-panel-row>.sidebar-card {
    min-height: 0;
}

.right-panel-full {
    width: 100%;
}

/* Mini Index Cards for Sidebar */
.right-panel-indices {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4px;
}

.index-mini-card {
    background: rgba(15, 23, 42, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 4px;
    padding: 6px 8px;
    text-align: center;
    transition: all 0.2s ease;
}

.index-mini-card:hover {
    border-color: rgba(6, 182, 212, 0.3);
}

.index-mini-card.positive {
    border-left: 2px solid var(--accent-green);
}

.index-mini-card.negative {
    border-left: 2px solid var(--accent-red);
}

.index-mini-name {
    font-size: 0.5rem;
    font-weight: 600;
    color: var(--text-muted);
    margin-bottom: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.index-mini-value {
    font-size: 0.65rem;
    font-weight: 800;
    color: var(--text-primary);
}

.index-mini-change {
    font-size: 0.5rem;
    font-weight: 700;
    margin-top: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
}

.index-mini-card.positive .index-mini-change {
    color: var(--accent-green);
}

.index-mini-card.negative .index-mini-change {
    color: var(--accent-red);
}

/* Index Bar */
.index-bar {
    display: flex;
    gap: 8px;
}

.index-card {
    flex: 1;
    background: rgba(15, 23, 42, 0.7);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 6px;
    padding: 10px 12px;
    transition: all 0.25s ease;
}

.index-card.clickable {
    cursor: pointer;
}

.index-card.clickable:hover {
    border-color: rgba(6, 182, 212, 0.3);
    background: rgba(6, 182, 212, 0.05);
}

.index-name {
    font-size: 0.6rem;
    font-weight: 600;
    color: var(--text-muted);
    margin-bottom: 2px;
}

.index-value {
    font-size: 0.95rem;
    font-weight: 800;
    color: var(--text-primary);
}

.index-change {
    font-size: 0.6rem;
    font-weight: 700;
    margin-top: 2px;
    display: flex;
    align-items: center;
    gap: 3px;
}

/* View Panels */
.exchange-view-panel {
    display: none;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
}

.exchange-view-panel.active {
    display: block;
}

/* TradingView Chart Container */
.tv-chart-container {
    background: rgba(15, 23, 42, 0.7);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    overflow: hidden;
}

.chart-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.chart-symbol {
    display: flex;
    align-items: baseline;
    gap: 12px;
}

.chart-symbol .symbol {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--text-primary);
}

.chart-symbol .price {
    font-size: 1.1rem;
    font-weight: 800;
}

.chart-timeframes {
    display: flex;
    gap: 4px;
}

.tf-btn {
    padding: 6px 12px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid transparent;
    border-radius: 4px;
    color: var(--text-muted);
    font-size: 0.65rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.tf-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-primary);
}

.tf-btn.active {
    background: rgba(6, 182, 212, 0.15);
    border-color: rgba(6, 182, 212, 0.4);
    color: #22d3ee;
}

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

.chart-footer {
    padding: 10px 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.chart-stats {
    display: flex;
    gap: 24px;
}

.chart-stats .stat {
    display: flex;
    gap: 8px;
    font-size: 0.7rem;
}

.chart-stats .label {
    color: var(--text-muted);
}

.chart-stats .val {
    font-weight: 700;
}

/* Stocks Section */
.stocks-section,
.funds-section {
    background: rgba(15, 23, 42, 0.7);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    padding: 16px;
}

.stocks-section .section-header,
.funds-section .section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.stocks-section h2,
.funds-section h2 {
    font-size: 1rem;
    font-weight: 700;
    margin: 0;
}

.section-controls {
    display: flex;
    gap: 12px;
    align-items: center;
}

.section-controls .search-input {
    padding: 6px 12px;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    color: var(--text-primary);
    font-size: 0.7rem;
    width: 180px;
}

.filter-tabs {
    display: flex;
    gap: 4px;
}

.filter-tab {
    padding: 6px 12px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid transparent;
    border-radius: 4px;
    color: var(--text-muted);
    font-size: 0.65rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.filter-tab:hover {
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-primary);
}

.filter-tab.active {
    background: rgba(6, 182, 212, 0.15);
    border-color: rgba(6, 182, 212, 0.4);
    color: #22d3ee;
}

/* Stocks Table */
.stocks-table {
    width: 100%;
}

.stocks-table .table-header {
    display: grid;
    grid-template-columns: 100px 1fr 100px 100px 100px 120px 140px;
    gap: 8px;
    padding: 10px 12px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 6px;
    margin-bottom: 8px;
    font-size: 0.65rem;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
}

.stocks-table .table-body {
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-height: 400px;
    overflow-y: auto;
}

.stock-row {
    display: grid;
    grid-template-columns: 100px 1fr 100px 100px 100px 120px 140px;
    gap: 8px;
    padding: 12px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.04);
    border-radius: 6px;
    align-items: center;
    transition: all 0.2s ease;
}

.stock-row:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(6, 182, 212, 0.2);
}

.ticker-badge {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
    color: var(--text-primary);
}

.ticker-badge i {
    width: 28px;
    height: 28px;
    background: rgba(6, 182, 212, 0.15);
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent-cyan);
    font-size: 0.7rem;
}

.col-name {
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.col-price {
    font-weight: 700;
    font-size: 0.8rem;
}

.col-change {
    font-weight: 700;
    font-size: 0.75rem;
}

.col-volume,
.col-mcap {
    font-size: 0.7rem;
    color: var(--text-secondary);
}

.col-actions {
    display: flex;
    gap: 6px;
}

.btn-trade {
    padding: 6px 12px;
    font-size: 0.65rem;
    font-weight: 700;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-trade.buy {
    background: rgba(34, 197, 94, 0.15);
    border: 1px solid rgba(34, 197, 94, 0.3);
    color: var(--accent-green);
}

.btn-trade.buy:hover {
    background: rgba(34, 197, 94, 0.25);
}

.btn-trade.sell {
    background: rgba(239, 68, 68, 0.15);
    border: 1px solid rgba(239, 68, 68, 0.3);
    color: var(--accent-red);
}

.btn-trade.sell:hover {
    background: rgba(239, 68, 68, 0.25);
}

/* Funds Grid - Compact */
.funds-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

.fund-card {
    background: rgba(15, 23, 42, 0.7);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 6px;
    padding: 10px;
    transition: all 0.2s ease;
}

.fund-card:hover {
    border-color: rgba(6, 182, 212, 0.3);
}

.fund-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 6px;
}

.fund-identity {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.fund-ticker {
    font-size: 0.7rem;
    font-weight: 800;
    color: var(--text-primary);
}

.fund-type {
    font-size: 0.5rem;
    color: var(--text-muted);
}

.fund-risk {
    font-size: 0.5rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 3px;
}

.fund-risk i {
    font-size: 0.55rem;
}

.fund-name {
    font-size: 0.6rem;
    color: var(--text-secondary);
    margin-bottom: 8px;
    line-height: 1.3;
}

.fund-stats-row {
    display: flex;
    justify-content: space-between;
    gap: 6px;
    margin-bottom: 8px;
    padding: 6px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 4px;
}

.fund-stat {
    text-align: center;
    flex: 1;
}

.fund-stat-value {
    display: block;
    font-size: 0.65rem;
    font-weight: 700;
    color: var(--text-primary);
}

.fund-stat-label {
    display: block;
    font-size: 0.45rem;
    color: var(--text-muted);
    margin-top: 1px;
}

.fund-actions {
    display: flex;
    gap: 4px;
}

.btn-fund-mini {
    flex: 1;
    padding: 5px 8px;
    font-size: 0.55rem;
    font-weight: 600;
    border-radius: 4px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

.btn-fund-mini:hover {
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-primary);
}

.btn-fund-mini.primary {
    background: rgba(6, 182, 212, 0.15);
    border-color: rgba(6, 182, 212, 0.3);
    color: var(--accent-cyan);
}

.btn-fund-mini.primary:hover {
    background: rgba(6, 182, 212, 0.25);
}

.btn-fund-mini i {
    font-size: 0.55rem;
}

/* Sidebar Cards */
.sidebar-card {
    background: rgba(15, 23, 42, 0.7);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 6px;
    padding: 10px;
}

.sidebar-card .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.sidebar-card .card-header h3 {
    font-size: 0.65rem;
    font-weight: 700;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 6px;
}

.sidebar-card .card-header h3 i {
    color: var(--accent-gold);
}

.btn-see-all {
    background: transparent;
    border: none;
    color: var(--accent-cyan);
    font-size: 0.55rem;
    font-weight: 600;
    cursor: pointer;
}

/* Economy Row */
.economy-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.economy-row:last-child {
    border-bottom: none;
}

.country-flag {
    font-size: 1rem;
}

.country-info {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.country-name {
    font-size: 0.6rem;
    font-weight: 600;
}

.country-gdp {
    font-size: 0.5rem;
    color: var(--text-muted);
}

.country-growth {
    font-size: 0.55rem;
    font-weight: 700;
}

/* Investment Row */
.investment-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.investment-row:last-child {
    border-bottom: none;
}

.inv-icon {
    width: 22px;
    height: 22px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.55rem;
}

.investment-row.buy .inv-icon {
    background: rgba(34, 197, 94, 0.15);
    color: var(--accent-green);
}

.investment-row.sell .inv-icon {
    background: rgba(239, 68, 68, 0.15);
    color: var(--accent-red);
}

.investment-row.dividend .inv-icon {
    background: rgba(245, 158, 11, 0.15);
    color: var(--accent-gold);
}

.inv-info {
    flex: 1;
}

.inv-asset {
    font-size: 0.6rem;
    font-weight: 600;
    display: block;
}

.inv-detail {
    font-size: 0.5rem;
    color: var(--text-muted);
}

.inv-value {
    text-align: right;
}

.inv-price {
    font-size: 0.6rem;
    font-weight: 700;
    display: block;
}

.inv-time {
    font-size: 0.5rem;
    color: var(--text-muted);
}

/* Agreement Row */
.agreement-row {
    padding: 6px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    cursor: pointer;
    transition: all 0.2s ease;
}

.agreement-row:hover {
    background: rgba(255, 255, 255, 0.02);
    margin: 0 -10px;
    padding-left: 10px;
    padding-right: 10px;
}

.agreement-row:last-child {
    border-bottom: none;
}

.agreement-countries {
    font-size: 0.85rem;
    margin-bottom: 2px;
}

.agreement-title {
    font-size: 0.6rem;
    font-weight: 600;
    margin-bottom: 2px;
}

.agreement-meta {
    display: flex;
    gap: 6px;
    font-size: 0.5rem;
}

.agreement-type {
    color: var(--accent-cyan);
}

.agreement-date {
    color: var(--text-muted);
}

.agreement-impact {
    font-weight: 700;
}

/* Responsive */
@media (max-width: 1200px) {
    .exchange-main-layout {
        grid-template-columns: 1fr;
    }

    .exchange-right-panel {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        max-height: none;
    }
}

@media (max-width: 768px) {
    .exchange-nav-tabs {
        flex-wrap: wrap;
    }

    .exchange-nav-btn span {
        display: none;
    }

    .stocks-table .table-header,
    .stock-row {
        grid-template-columns: 80px 1fr 80px 80px 100px;
    }

    .col-volume,
    .col-mcap {
        display: none;
    }
}

/* =====================================================
   COMPANY MANAGEMENT MODALS
   ===================================================== */

/* Modal Overlay */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.modal-overlay.active {
    opacity: 1;
    visibility: visible;
}

.modal-container {
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.98), rgba(30, 41, 59, 0.95));
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    width: 90%;
    max-width: 500px;
    max-height: 85vh;
    overflow: hidden;
    transform: translateY(20px) scale(0.95);
    transition: transform 0.3s ease;
}

.modal-overlay.active .modal-container {
    transform: translateY(0) scale(1);
}

.wizard-modal {
    max-width: 700px;
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(0, 0, 0, 0.2);
}

.modal-header h2 {
    font-size: 1rem;
    font-weight: 700;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.modal-header h2 i {
    color: var(--accent-cyan);
}

.modal-close {
    width: 32px;
    height: 32px;
    border-radius: 6px;
    border: none;
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.2s ease;
}

.modal-close:hover {
    background: rgba(239, 68, 68, 0.2);
    color: var(--accent-red);
}

.modal-body {
    padding: 20px;
    overflow-y: auto;
    max-height: calc(85vh - 140px);
}

.modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 16px 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(0, 0, 0, 0.2);
}

/* Modal Buttons */
.btn-modal {
    padding: 10px 20px;
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 8px;
}

.btn-modal.secondary {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--text-secondary);
}

.btn-modal.secondary:hover {
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-primary);
}

.btn-modal.primary {
    background: linear-gradient(135deg, rgba(6, 182, 212, 0.2), rgba(6, 182, 212, 0.1));
    border: 1px solid rgba(6, 182, 212, 0.3);
    color: var(--accent-cyan);
}

.btn-modal.primary:hover {
    background: linear-gradient(135deg, rgba(6, 182, 212, 0.3), rgba(6, 182, 212, 0.2));
}

.btn-modal.success {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.2), rgba(34, 197, 94, 0.1));
    border: 1px solid rgba(34, 197, 94, 0.3);
    color: var(--accent-green);
}

.btn-modal.success:hover {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.3), rgba(34, 197, 94, 0.2));
}

/* Form Elements */
.form-group {
    margin-bottom: 16px;
}

.form-group label {
    display: block;
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--text-muted);
    margin-bottom: 6px;
}

.form-group input[type="text"],
.form-group input[type="number"],
.form-group textarea,
.form-group select {
    width: 100%;
    padding: 10px 14px;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    color: var(--text-primary);
    font-size: 0.8rem;
    transition: all 0.2s ease;
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
    outline: none;
    border-color: var(--accent-cyan);
    box-shadow: 0 0 0 3px rgba(6, 182, 212, 0.1);
}

.form-row {
    display: flex;
    gap: 12px;
}

.form-group.half {
    flex: 1;
}

/* Wizard Styles */
.wizard-body {
    padding: 0;
}

.wizard-step {
    display: none;
    padding: 20px;
}

.wizard-step.active {
    display: block;
}

.step-header {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.step-number {
    width: 36px;
    height: 36px;
    background: linear-gradient(135deg, var(--accent-cyan), #0891b2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    font-weight: 800;
    color: white;
    flex-shrink: 0;
}

.step-info h3 {
    font-size: 0.95rem;
    font-weight: 700;
    margin: 0 0 4px 0;
}

.step-info p {
    font-size: 0.7rem;
    color: var(--text-muted);
    margin: 0;
}

.step-content {
    padding: 0;
}

/* Capital Options */
.capital-options {
    display: flex;
    gap: 10px;
}

.capital-btn {
    flex: 1;
    padding: 16px;
    background: rgba(0, 0, 0, 0.2);
    border: 2px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

.capital-btn:hover {
    border-color: rgba(6, 182, 212, 0.3);
    background: rgba(6, 182, 212, 0.05);
}

.capital-btn.active {
    border-color: var(--accent-cyan);
    background: rgba(6, 182, 212, 0.1);
}

.capital-amount {
    display: block;
    font-size: 1rem;
    font-weight: 800;
    color: var(--accent-gold);
    margin-bottom: 4px;
}

.capital-label {
    font-size: 0.65rem;
    color: var(--text-muted);
}

/* Sector Categories */
.sector-categories {
    max-height: 350px;
    overflow-y: auto;
}

.sector-category {
    margin-bottom: 8px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    overflow: hidden;
}

.sector-category .category-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background: rgba(0, 0, 0, 0.2);
    cursor: pointer;
    transition: all 0.2s ease;
}

.sector-category .category-header:hover {
    background: rgba(0, 0, 0, 0.3);
}

.sector-category .category-header i {
    color: var(--accent-cyan);
}

.sector-category .category-header span {
    font-size: 0.75rem;
    font-weight: 600;
}

.category-count {
    margin-left: auto;
    padding: 2px 8px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    font-size: 0.6rem;
}

.category-professions {
    display: none;
    padding: 8px;
    background: rgba(0, 0, 0, 0.1);
}

.sector-category.expanded .category-professions {
    display: block;
}

.profession-option {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.profession-option:hover {
    background: rgba(255, 255, 255, 0.05);
}

.profession-option.selected {
    background: rgba(6, 182, 212, 0.1);
    border: 1px solid rgba(6, 182, 212, 0.3);
}

.profession-icon {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
}

.profession-info {
    flex: 1;
}

.profession-name {
    display: block;
    font-size: 0.75rem;
    font-weight: 600;
}

.profession-desc {
    display: block;
    font-size: 0.6rem;
    color: var(--text-muted);
    margin-top: 2px;
}

/* Company Preview */
.company-preview-card {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    padding: 20px;
    margin-bottom: 16px;
}

.preview-header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 16px;
}

.preview-icon {
    width: 56px;
    height: 56px;
    border-radius: 12px;
    background: rgba(6, 182, 212, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
}

.preview-info h3 {
    font-size: 1.1rem;
    font-weight: 700;
    margin: 0 0 4px 0;
}

.preview-info span {
    font-size: 0.7rem;
    font-weight: 600;
}

.preview-stats {
    display: flex;
    justify-content: space-between;
    padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.preview-stat {
    text-align: center;
}

.preview-stat .label {
    display: block;
    font-size: 0.6rem;
    color: var(--text-muted);
    margin-bottom: 4px;
}

.preview-stat .value {
    display: block;
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--text-primary);
}

.confirm-message {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px;
    background: rgba(59, 130, 246, 0.1);
    border: 1px solid rgba(59, 130, 246, 0.2);
    border-radius: 8px;
}

.confirm-message i {
    color: #3b82f6;
    margin-top: 2px;
}

.confirm-message p {
    font-size: 0.7rem;
    color: var(--text-secondary);
    margin: 0;
    line-height: 1.5;
}

/* Wizard Footer */
.wizard-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(0, 0, 0, 0.2);
}

.wizard-progress {
    display: flex;
    align-items: center;
    gap: 8px;
}

.progress-step {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--text-muted);
    transition: all 0.3s ease;
}

.progress-step.active {
    background: var(--accent-cyan);
    color: white;
}

.progress-step.completed {
    background: var(--accent-green);
    color: white;
}

.progress-line {
    width: 30px;
    height: 2px;
    background: rgba(255, 255, 255, 0.1);
}

.wizard-actions {
    display: flex;
    gap: 10px;
}

.btn-wizard {
    padding: 10px 20px;
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 8px;
}

.btn-wizard.secondary {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--text-muted);
}

.btn-wizard.primary {
    background: var(--accent-cyan);
    border: none;
    color: white;
}

.btn-wizard.success {
    background: var(--accent-green);
    border: none;
    color: white;
}

.btn-wizard:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn-wizard.hidden {
    display: none;
}

/* Quality Slider */
.quality-slider {
    position: relative;
}

.quality-slider input[type="range"] {
    width: 100%;
    height: 6px;
    -webkit-appearance: none;
    background: linear-gradient(to right, #ef4444, #fbbf24, #22c55e);
    border-radius: 3px;
    margin: 10px 0;
}

.quality-slider input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    background: white;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

.quality-labels {
    display: flex;
    justify-content: space-between;
    font-size: 0.6rem;
    color: var(--text-muted);
}

.quality-value {
    text-align: center;
    font-size: 0.85rem;
    font-weight: 700;
    margin-top: 8px;
    color: var(--text-primary);
}

.stock-cost-preview {
    display: flex;
    justify-content: space-between;
    padding: 12px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 6px;
    font-size: 0.75rem;
}

.stock-cost-preview .cost-value {
    font-weight: 700;
    color: var(--accent-gold);
}

/* Employee Modal */
.employee-overview {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-bottom: 20px;
}

.employee-stat-card {
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    padding: 12px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.employee-stat-card .stat-icon {
    width: 36px;
    height: 36px;
    background: rgba(6, 182, 212, 0.15);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent-cyan);
}

.employee-stat-card .stat-info {
    display: flex;
    flex-direction: column;
}

.employee-stat-card .stat-value {
    font-size: 1rem;
    font-weight: 800;
}

.employee-stat-card .stat-label {
    font-size: 0.6rem;
    color: var(--text-muted);
}

.employee-actions-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

.action-card {
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    padding: 16px;
}

.action-card.full-width {
    grid-column: span 2;
}

.action-card .action-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.action-card .action-header i {
    font-size: 1rem;
}

.action-card.hire .action-header i {
    color: var(--accent-green);
}

.action-card.fire .action-header i {
    color: var(--accent-red);
}

.action-card.upgrade .action-header i {
    color: var(--accent-cyan);
}

.action-card h4 {
    font-size: 0.8rem;
    font-weight: 700;
    margin: 0;
}

.action-card p {
    font-size: 0.65rem;
    color: var(--text-muted);
    margin: 0 0 12px 0;
}

.action-cost {
    display: flex;
    justify-content: space-between;
    font-size: 0.7rem;
    margin-bottom: 12px;
}

.action-cost .cost {
    font-weight: 700;
    color: var(--accent-gold);
}

.action-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-bottom: 12px;
}

.action-controls .btn-sm {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-primary);
    cursor: pointer;
    font-size: 1rem;
}

.action-controls span {
    font-size: 1.1rem;
    font-weight: 700;
    min-width: 30px;
    text-align: center;
}

.upgrade-preview {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-bottom: 12px;
    font-size: 0.85rem;
    font-weight: 600;
}

.upgrade-preview i {
    color: var(--accent-cyan);
}

.btn-action {
    width: 100%;
    padding: 10px;
    font-size: 0.7rem;
    font-weight: 600;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.btn-action.success {
    background: rgba(34, 197, 94, 0.15);
    border: 1px solid rgba(34, 197, 94, 0.3);
    color: var(--accent-green);
}

.btn-action.danger {
    background: rgba(239, 68, 68, 0.15);
    border: 1px solid rgba(239, 68, 68, 0.3);
    color: var(--accent-red);
}

.btn-action.primary {
    background: rgba(6, 182, 212, 0.15);
    border: 1px solid rgba(6, 182, 212, 0.3);
    color: var(--accent-cyan);
}

.btn-action:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Settings Modal */
.settings-section {
    margin-bottom: 20px;
}

.settings-section h4 {
    font-size: 0.8rem;
    font-weight: 700;
    margin: 0 0 12px 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.settings-section h4 i {
    color: var(--accent-cyan);
}

.settings-options {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.toggle-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 6px;
    cursor: pointer;
}

.toggle-option span:first-child {
    font-size: 0.75rem;
}

.toggle-option input {
    display: none;
}

.toggle-slider {
    width: 40px;
    height: 22px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 11px;
    position: relative;
    transition: all 0.3s ease;
}

.toggle-slider::after {
    content: '';
    position: absolute;
    width: 18px;
    height: 18px;
    background: white;
    border-radius: 50%;
    top: 2px;
    left: 2px;
    transition: all 0.3s ease;
}

.toggle-option input:checked+.toggle-slider {
    background: var(--accent-cyan);
}

.toggle-option input:checked+.toggle-slider::after {
    left: 20px;
}

/* Danger Zone */
.settings-section.danger-zone h4 {
    color: var(--accent-red);
}

.settings-section.danger-zone h4 i {
    color: var(--accent-red);
}

.danger-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.danger-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px;
    background: rgba(239, 68, 68, 0.05);
    border: 1px solid rgba(239, 68, 68, 0.1);
    border-radius: 6px;
}

.danger-info {
    display: flex;
    flex-direction: column;
}

.danger-title {
    font-size: 0.75rem;
    font-weight: 600;
}

.danger-desc {
    font-size: 0.6rem;
    color: var(--text-muted);
}

.btn-danger {
    padding: 8px 16px;
    font-size: 0.7rem;
    font-weight: 600;
    background: rgba(239, 68, 68, 0.15);
    border: 1px solid rgba(239, 68, 68, 0.3);
    border-radius: 6px;
    color: var(--accent-red);
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 6px;
}

.btn-danger:hover {
    background: rgba(239, 68, 68, 0.25);
}

/* Current Sector Display */
.current-sector-display {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 6px;
}

.current-sector-display i {
    font-size: 1rem;
}

.current-sector-display span {
    font-size: 0.75rem;
    font-weight: 600;
}

.btn-action.warning {
    background: rgba(245, 158, 11, 0.15);
    border: 1px solid rgba(245, 158, 11, 0.3);
    color: #f59e0b;
    font-size: 0.65rem;
}

.btn-action.info {
    background: rgba(59, 130, 246, 0.15);
    border: 1px solid rgba(59, 130, 246, 0.3);
    color: #3b82f6;
}

.btn-action.info:hover {
    background: rgba(59, 130, 246, 0.25);
}

/* =====================================================
   CONFIRMATION DIALOG
   ===================================================== */

.confirm-dialog-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10001;
    /* Above modal */
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s ease;
}

.confirm-dialog-overlay.active {
    opacity: 1;
    visibility: visible;
}

.confirm-dialog {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.98), rgba(15, 23, 42, 0.98));
    border: 1px solid rgba(245, 158, 11, 0.3);
    border-radius: 12px;
    padding: 24px;
    max-width: 380px;
    text-align: center;
    transform: scale(0.9);
    transition: transform 0.2s ease;
}

.confirm-dialog-overlay.active .confirm-dialog {
    transform: scale(1);
}

.confirm-dialog-icon {
    width: 56px;
    height: 56px;
    margin: 0 auto 16px;
    background: rgba(245, 158, 11, 0.15);
    border: 2px solid rgba(245, 158, 11, 0.3);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.confirm-dialog-icon i {
    font-size: 1.5rem;
    color: #f59e0b;
}

.confirm-dialog h3 {
    font-size: 1rem;
    font-weight: 700;
    margin: 0 0 8px 0;
    color: var(--text-primary);
}

.confirm-dialog p {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin: 0 0 20px 0;
    line-height: 1.5;
}

.confirm-dialog-actions {
    display: flex;
    gap: 10px;
    justify-content: center;
}

.btn-confirm-cancel,
.btn-confirm-ok {
    padding: 10px 20px;
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 6px;
}

.btn-confirm-cancel {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--text-secondary);
}

.btn-confirm-cancel:hover {
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-primary);
}

.btn-confirm-ok {
    background: rgba(239, 68, 68, 0.15);
    border: 1px solid rgba(239, 68, 68, 0.3);
    color: var(--accent-red);
}

.btn-confirm-ok:hover {
    background: rgba(239, 68, 68, 0.25);
}

/* =====================================================
   ADVANCED COMPANY MANAGEMENT MODAL
   ===================================================== */

.modal-large {
    max-width: 800px;
}

/* Modal Tabs */
.modal-tabs {
    display: flex;
    gap: 4px;
    padding: 0 20px;
    background: rgba(0, 0, 0, 0.2);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.modal-tab {
    padding: 12px 16px;
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--text-muted);
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 6px;
}

.modal-tab:hover {
    color: var(--text-secondary);
    background: rgba(255, 255, 255, 0.03);
}

.modal-tab.active {
    color: var(--accent-cyan);
    border-bottom-color: var(--accent-cyan);
}

.modal-tab i {
    font-size: 0.75rem;
}

.modal-body-tabs {
    min-height: 400px;
}

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

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

/* Company Edit Header */
.company-edit-header {
    display: flex;
    gap: 20px;
    margin-bottom: 24px;
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.company-logo-editor {
    position: relative;
    flex-shrink: 0;
}

.logo-preview {
    width: 80px;
    height: 80px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
}

.logo-change-btn {
    position: absolute;
    bottom: -5px;
    right: -5px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--accent-cyan);
    border: 2px solid var(--bg-primary);
    color: white;
    font-size: 0.7rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

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

.company-info-edit {
    flex: 1;
}

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

.input-large {
    font-size: 1rem !important;
    font-weight: 700;
    padding: 12px 16px !important;
}

.company-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.company-badges .badge {
    padding: 4px 10px;
    font-size: 0.6rem;
    font-weight: 600;
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: 4px;
}

.badge.level {
    background: rgba(251, 191, 36, 0.15);
    color: #fbbf24;
}

.badge.date {
    background: rgba(255, 255, 255, 0.08);
    color: var(--text-muted);
}

/* Form Section */
.form-section {
    margin-bottom: 20px;
}

.form-section h4 {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--text-secondary);
    margin: 0 0 10px 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.form-section h4 i {
    color: var(--accent-cyan);
    font-size: 0.8rem;
}

.char-counter {
    text-align: right;
    font-size: 0.6rem;
    color: var(--text-muted);
    margin-top: 4px;
}

/* Color Picker */
.color-picker-row {
    display: flex;
    gap: 10px;
}

.color-option {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 3px solid transparent;
    cursor: pointer;
    transition: all 0.2s ease;
}

.color-option:hover {
    transform: scale(1.1);
}

.color-option.active {
    border-color: white;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.3);
}

/* Select Styling */
.form-group select {
    width: 100%;
    padding: 10px 14px;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    color: var(--text-primary);
    font-size: 0.8rem;
    cursor: pointer;
}

.form-group select:focus {
    outline: none;
    border-color: var(--accent-cyan);
}

/* Sector Change Warning */
.sector-change-warning {
    display: flex;
    gap: 16px;
    padding: 16px;
    background: rgba(245, 158, 11, 0.1);
    border: 1px solid rgba(245, 158, 11, 0.2);
    border-radius: 10px;
    margin-bottom: 20px;
}

.sector-change-warning .warning-icon {
    width: 44px;
    height: 44px;
    background: rgba(245, 158, 11, 0.2);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    color: #f59e0b;
    flex-shrink: 0;
}

.sector-change-warning .warning-content h4 {
    font-size: 0.85rem;
    margin: 0 0 4px 0;
    color: #f59e0b;
}

.sector-change-warning .warning-content p {
    font-size: 0.7rem;
    color: var(--text-muted);
    margin: 0;
}

/* Current Sector Card */
.current-sector-card {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px;
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 10px;
    margin-bottom: 20px;
}

.sector-icon-large {
    width: 60px;
    height: 60px;
    border-radius: 12px;
    border: 2px solid;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    flex-shrink: 0;
}

.sector-details .sector-label {
    font-size: 0.6rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.sector-details h3 {
    font-size: 1rem;
    margin: 4px 0;
}

.sector-details p {
    font-size: 0.7rem;
    color: var(--text-muted);
    margin: 0;
}

/* Sector Cost Breakdown */
.sector-cost-breakdown {
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 10px;
    padding: 16px;
    margin-bottom: 20px;
}

.sector-cost-breakdown h4 {
    font-size: 0.75rem;
    margin: 0 0 12px 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.sector-cost-breakdown h4 i {
    color: var(--accent-cyan);
}

.cost-items {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.cost-item {
    display: flex;
    justify-content: space-between;
    font-size: 0.7rem;
    padding: 8px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.cost-item:last-of-type {
    border-bottom: none;
}

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

.cost-total {
    display: flex;
    justify-content: space-between;
    font-size: 0.85rem;
    font-weight: 700;
    padding-top: 12px;
    margin-top: 8px;
    border-top: 2px solid rgba(255, 255, 255, 0.1);
}

.total-value {
    color: var(--accent-gold);
}

/* New Sector Selection */
.new-sector-selection h4 {
    font-size: 0.75rem;
    margin: 0 0 12px 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.new-sector-selection h4 i {
    color: var(--accent-cyan);
}

.sector-grid {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 200px;
    overflow-y: auto;
}

.sector-category-card {
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    overflow: hidden;
}

.category-header-card {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.category-header-card:hover {
    background: rgba(255, 255, 255, 0.03);
}

.category-header-card i:first-child {
    color: var(--accent-cyan);
}

.category-header-card span {
    font-size: 0.75rem;
    font-weight: 600;
}

.expand-icon {
    margin-left: auto;
    transition: transform 0.2s ease;
}

.sector-category-card.expanded .expand-icon {
    transform: rotate(180deg);
}

.category-options {
    display: none;
    padding: 8px;
    background: rgba(0, 0, 0, 0.15);
}

.sector-category-card.expanded .category-options {
    display: block;
}

.sector-option {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.sector-option:hover:not(.current) {
    background: rgba(255, 255, 255, 0.05);
}

.sector-option.current {
    opacity: 0.5;
    cursor: not-allowed;
}

.sector-option.selected {
    background: rgba(6, 182, 212, 0.15);
    border: 1px solid rgba(6, 182, 212, 0.3);
}

.sector-option-icon {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
}

.sector-option-info {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 8px;
}

.sector-option-name {
    font-size: 0.75rem;
    font-weight: 600;
}

.current-badge {
    font-size: 0.55rem;
    padding: 2px 6px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    color: var(--text-muted);
}

/* Sector Change Action */
.sector-change-action {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px;
    background: rgba(6, 182, 212, 0.1);
    border: 1px solid rgba(6, 182, 212, 0.2);
    border-radius: 10px;
    margin-top: 16px;
}

.selected-sector-preview {
    display: flex;
    align-items: center;
    gap: 12px;
}

.arrow-icon {
    width: 32px;
    height: 32px;
    background: rgba(6, 182, 212, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent-cyan);
}

.new-sector-preview {
    display: flex;
    align-items: center;
    gap: 10px;
}

.btn-sector-change {
    padding: 10px 20px;
    font-size: 0.75rem;
    font-weight: 600;
    background: var(--accent-cyan);
    border: none;
    border-radius: 6px;
    color: white;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 6px;
}

.btn-sector-change:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(6, 182, 212, 0.3);
}

/* Stats Tab */
.stats-overview {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-bottom: 20px;
}

.stat-card-large {
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 10px;
    padding: 16px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.stat-card-large .stat-icon {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
}

.stat-icon.green {
    background: rgba(34, 197, 94, 0.15);
    color: var(--accent-green);
}

.stat-icon.blue {
    background: rgba(59, 130, 246, 0.15);
    color: #3b82f6;
}

.stat-icon.purple {
    background: rgba(139, 92, 246, 0.15);
    color: #8b5cf6;
}

.stat-icon.orange {
    background: rgba(245, 158, 11, 0.15);
    color: #f59e0b;
}

.stat-content {
    display: flex;
    flex-direction: column;
}

.stat-value-large {
    font-size: 1rem;
    font-weight: 800;
}

.stat-label-large {
    font-size: 0.6rem;
    color: var(--text-muted);
}

/* Stats Details */
.stats-details {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

.stats-section {
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 10px;
    padding: 16px;
}

.stats-section h4 {
    font-size: 0.75rem;
    margin: 0 0 12px 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.stats-section h4 i {
    color: var(--accent-cyan);
}

.stats-rows {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.stats-row {
    display: flex;
    justify-content: space-between;
    font-size: 0.7rem;
    padding: 6px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.03);
}

.stats-row:last-child {
    border-bottom: none;
}

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

.stats-value {
    font-weight: 600;
}

/* Achievements */
.achievements-mini {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
}

.achievement-badge {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.achievement-badge i {
    font-size: 1rem;
}

.achievement-badge span {
    font-size: 0.65rem;
    font-weight: 600;
}

.achievement-badge.unlocked {
    background: rgba(251, 191, 36, 0.1);
    border-color: rgba(251, 191, 36, 0.2);
}

.achievement-badge.unlocked i {
    color: #fbbf24;
}

.achievement-badge.locked {
    opacity: 0.4;
}

.achievement-badge.locked i {
    color: var(--text-muted);
}

/* =====================================================
   REDESIGNED SECTOR CHANGE LAYOUT
   ===================================================== */

.sector-change-layout {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 20px;
    min-height: 380px;
}

/* Left Panel - Current Sector */
.sector-current-panel {
    background: linear-gradient(135deg, rgba(6, 182, 212, 0.08), rgba(6, 182, 212, 0.02));
    border: 1px solid rgba(6, 182, 212, 0.15);
    border-radius: 12px;
    padding: 16px;
    display: flex;
    flex-direction: column;
}

.panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.panel-header h4 {
    font-size: 0.75rem;
    font-weight: 700;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 6px;
}

.panel-header h4 i {
    color: var(--accent-cyan);
}

.sector-count {
    font-size: 0.6rem;
    padding: 3px 8px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    color: var(--text-muted);
}

/* Current Sector Showcase */
.current-sector-showcase {
    text-align: center;
    padding: 16px 0;
    flex: 1;
}

.showcase-icon {
    width: 80px;
    height: 80px;
    border-radius: 16px;
    margin: 0 auto 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.showcase-name {
    font-size: 1rem;
    font-weight: 700;
    margin: 0 0 6px 0;
}

.showcase-desc {
    font-size: 0.65rem;
    color: var(--text-muted);
    margin: 0 0 16px 0;
    line-height: 1.4;
}

.sector-features {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.feature-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 6px;
    font-size: 0.65rem;
}

.feature-item i {
    font-size: 0.75rem;
}

/* Cost Summary Card */
.cost-summary-card {
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.15), rgba(251, 191, 36, 0.05));
    border: 1px solid rgba(251, 191, 36, 0.2);
    border-radius: 10px;
    padding: 14px;
    text-align: center;
    margin-top: auto;
}

.cost-summary-card .cost-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 0.65rem;
    color: var(--text-muted);
    margin-bottom: 6px;
}

.cost-summary-card .cost-header i {
    color: #fbbf24;
}

.cost-summary-card .cost-amount {
    font-size: 1.4rem;
    font-weight: 800;
    color: #fbbf24;
    margin-bottom: 8px;
}

.cost-breakdown-mini {
    display: flex;
    gap: 6px;
    justify-content: center;
    flex-wrap: wrap;
}

.cost-breakdown-mini span {
    font-size: 0.55rem;
    padding: 2px 6px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 4px;
    color: var(--text-muted);
}

/* Right Panel - Sector Selection */
.sector-new-panel {
    display: flex;
    flex-direction: column;
}

.sector-cards-grid {
    flex: 1;
    overflow-y: auto;
    max-height: 340px;
}

.sector-category-block {
    margin-bottom: 16px;
}

.category-title {
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--text-secondary);
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 6px;
    padding-left: 4px;
}

.category-title i {
    color: var(--accent-cyan);
    font-size: 0.75rem;
}

.sector-cards-row {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 8px;
}

.sector-card {
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    padding: 14px 8px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
}

.sector-card:hover:not(.current) {
    background: rgba(6, 182, 212, 0.1);
    border-color: rgba(6, 182, 212, 0.3);
    transform: translateY(-3px);
}

.sector-card.current {
    opacity: 0.5;
    cursor: default;
}

.sector-card.selected {
    background: rgba(6, 182, 212, 0.15);
    border-color: var(--accent-cyan);
    box-shadow: 0 0 15px rgba(6, 182, 212, 0.2);
}

.sector-card-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    border: 1px solid;
    margin: 0 auto 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
}

.sector-card-name {
    font-size: 0.65rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.current-indicator {
    position: absolute;
    top: 4px;
    right: 4px;
    font-size: 0.5rem;
    padding: 2px 5px;
    background: rgba(34, 197, 94, 0.15);
    color: var(--accent-green);
    border-radius: 4px;
    display: flex;
    align-items: center;
    gap: 2px;
}

/* Sector Selection Footer */
.sector-selection-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px;
    background: linear-gradient(135deg, rgba(6, 182, 212, 0.12), rgba(6, 182, 212, 0.04));
    border: 1px solid rgba(6, 182, 212, 0.2);
    border-radius: 12px;
    margin-top: 16px;
    animation: slideUp 0.3s ease;
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

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

.selection-info {
    display: flex;
    align-items: center;
    gap: 14px;
}

.selection-arrow {
    width: 36px;
    height: 36px;
    background: linear-gradient(135deg, var(--accent-cyan), #0891b2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 0.9rem;
    animation: pulse 1.5s infinite;
}

@keyframes pulse {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.1);
    }
}

.selected-sector-card {
    display: flex;
    align-items: center;
    gap: 10px;
}

.btn-change-sector {
    padding: 12px 24px;
    font-size: 0.8rem;
    font-weight: 700;
    background: linear-gradient(135deg, var(--accent-cyan), #0891b2);
    border: none;
    border-radius: 8px;
    color: white;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 8px;
}

.btn-change-sector:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(6, 182, 212, 0.4);
}

/* Responsive */
@media (max-width: 768px) {
    .sector-change-layout {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .sector-current-panel {
        flex-direction: row;
        gap: 16px;
    }

    .current-sector-showcase {
        text-align: left;
        padding: 0;
    }

    .showcase-icon {
        margin: 0;
    }

    .sector-features {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .cost-summary-card {
        max-width: 200px;
    }
}

/* =====================================================
   FINANCIAL STATISTICS & P/L CHART
   ===================================================== */

.financial-stats-section {
    margin-top: 20px;
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.08), rgba(251, 191, 36, 0.02));
    border: 1px solid rgba(251, 191, 36, 0.15);
    border-radius: 12px;
    padding: 16px;
}

.financial-stats-section h4 {
    font-size: 0.8rem;
    font-weight: 700;
    margin: 0 0 16px 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.financial-stats-section h4 i {
    color: #fbbf24;
}

.financial-layout {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 20px;
}

.financial-cards {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.pl-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 8px;
    border-left: 3px solid transparent;
}

.pl-card.profit {
    border-left-color: var(--accent-green);
}

.pl-card.expense {
    border-left-color: var(--accent-red);
}

.pl-card.net.positive {
    border-left-color: #fbbf24;
    background: rgba(251, 191, 36, 0.1);
}

.pl-card.net.negative {
    border-left-color: var(--accent-red);
    background: rgba(239, 68, 68, 0.1);
}

.pl-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
}

.pl-card.profit .pl-icon {
    background: rgba(34, 197, 94, 0.15);
    color: var(--accent-green);
}

.pl-card.expense .pl-icon {
    background: rgba(239, 68, 68, 0.15);
    color: var(--accent-red);
}

.pl-card.net .pl-icon {
    background: rgba(251, 191, 36, 0.15);
    color: #fbbf24;
}

.pl-info {
    display: flex;
    flex-direction: column;
}

.pl-label {
    font-size: 0.6rem;
    color: var(--text-muted);
}

.pl-value {
    font-size: 0.85rem;
    font-weight: 700;
}

.pl-card.profit .pl-value {
    color: var(--accent-green);
}

.pl-card.expense .pl-value {
    color: var(--accent-red);
}

.pl-card.net.positive .pl-value {
    color: #fbbf24;
}

.pl-card.net.negative .pl-value {
    color: var(--accent-red);
}

/* P/L Chart Container */
.pl-chart-container {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 10px;
    padding: 14px;
}

.chart-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.chart-title {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--text-secondary);
}

.chart-legend {
    display: flex;
    gap: 12px;
}

.legend-item {
    font-size: 0.55rem;
    display: flex;
    align-items: center;
    gap: 4px;
    color: var(--text-muted);
}

.legend-dot {
    width: 8px;
    height: 8px;
    border-radius: 2px;
}

.legend-item.profit .legend-dot {
    background: var(--accent-green);
}

.legend-item.expense .legend-dot {
    background: var(--accent-red);
}

.chart-area {
    min-height: 80px;
    margin-bottom: 8px;
}

.chart-labels {
    display: flex;
    justify-content: space-between;
    padding: 0 10px;
}

.chart-labels span {
    font-size: 0.5rem;
    color: var(--text-muted);
    text-align: center;
    width: 26px;
}

/* Responsive */
@media (max-width: 600px) {
    .financial-layout {
        grid-template-columns: 1fr;
    }

    .financial-cards {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .pl-card {
        flex: 1;
        min-width: 100px;
    }
}

/* =====================================================
   NEW TAB STYLES - SECTOR, STAFF, FINANCE
   ===================================================== */

/* Sector Info Card */
.sector-info-card {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px;
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    margin-bottom: 16px;
}

.sector-info-icon {
    width: 70px;
    height: 70px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    flex-shrink: 0;
}

.sector-info-content {
    flex: 1;
}

.sector-info-label {
    font-size: 0.6rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.sector-info-content h3 {
    font-size: 1.1rem;
    margin: 4px 0 6px;
}

.sector-info-content p {
    font-size: 0.7rem;
    color: var(--text-muted);
    margin: 0;
}

.sector-info-stats {
    display: flex;
    gap: 20px;
}

.info-stat {
    text-align: center;
}

.info-stat .stat-num {
    display: block;
    font-size: 1.4rem;
    font-weight: 800;
    color: var(--accent-cyan);
}

.info-stat .stat-txt {
    font-size: 0.55rem;
    color: var(--text-muted);
    text-transform: uppercase;
}

/* Accordion */
.accordion-section {
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    overflow: hidden;
}

.accordion-header {
    display: flex;
    align-items: center;
    padding: 14px 16px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.accordion-header:hover {
    background: rgba(255, 255, 255, 0.03);
}

.accordion-title {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
    font-size: 0.8rem;
}

.accordion-title i {
    color: var(--accent-cyan);
}

.accordion-badge {
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 0.65rem;
    font-weight: 600;
    margin-right: 12px;
    display: flex;
    align-items: center;
    gap: 4px;
}

.accordion-badge.warning {
    background: rgba(251, 191, 36, 0.15);
    color: #fbbf24;
}

.accordion-arrow {
    color: var(--text-muted);
    transition: transform 0.3s ease;
}

.accordion-section.open .accordion-arrow {
    transform: rotate(180deg);
}

.accordion-content {
    padding: 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    background: rgba(0, 0, 0, 0.1);
}

.accordion-warning {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: rgba(245, 158, 11, 0.1);
    border: 1px solid rgba(245, 158, 11, 0.2);
    border-radius: 6px;
    font-size: 0.7rem;
    color: #f59e0b;
    margin-bottom: 16px;
}

/* Staff Tab */
.staff-intro {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px;
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.1), rgba(139, 92, 246, 0.02));
    border: 1px solid rgba(139, 92, 246, 0.15);
    border-radius: 10px;
    margin-bottom: 16px;
}

.staff-intro .intro-icon {
    width: 50px;
    height: 50px;
    background: rgba(139, 92, 246, 0.2);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    color: #8b5cf6;
}

.staff-intro .intro-text h4 {
    font-size: 0.9rem;
    margin: 0 0 4px;
}

.staff-intro .intro-text p {
    font-size: 0.7rem;
    color: var(--text-muted);
    margin: 0;
}

.staff-grid {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-height: 280px;
    overflow-y: auto;
}

.staff-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px;
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    transition: all 0.2s ease;
}

.staff-card:hover {
    border-color: rgba(255, 255, 255, 0.15);
}

.staff-card.hired {
    border-color: rgba(34, 197, 94, 0.3);
    background: rgba(34, 197, 94, 0.05);
}

.staff-icon {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    flex-shrink: 0;
}

.staff-info {
    flex: 1;
}

.staff-info h5 {
    font-size: 0.8rem;
    margin: 0 0 4px;
}

.staff-info p {
    font-size: 0.65rem;
    color: var(--text-muted);
    margin: 0 0 8px;
}

.staff-unlocks {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.unlock-tag {
    font-size: 0.5rem;
    padding: 2px 6px;
    background: rgba(6, 182, 212, 0.15);
    color: var(--accent-cyan);
    border-radius: 4px;
    text-transform: capitalize;
}

.staff-action {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
}

.hire-cost {
    font-size: 0.75rem;
    font-weight: 700;
    color: #fbbf24;
}

.btn-hire-staff {
    padding: 6px 12px;
    font-size: 0.65rem;
    font-weight: 600;
    background: var(--accent-cyan);
    border: none;
    border-radius: 5px;
    color: white;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 4px;
}

.btn-hire-staff:hover {
    transform: translateY(-1px);
    box-shadow: 0 3px 10px rgba(6, 182, 212, 0.3);
}

.hired-badge {
    font-size: 0.6rem;
    padding: 3px 8px;
    background: rgba(34, 197, 94, 0.15);
    color: var(--accent-green);
    border-radius: 4px;
    display: flex;
    align-items: center;
    gap: 4px;
}

.staff-salary {
    font-size: 0.6rem;
    color: var(--text-muted);
}

.btn-fire-staff {
    padding: 4px 8px;
    font-size: 0.6rem;
    background: rgba(239, 68, 68, 0.15);
    border: 1px solid rgba(239, 68, 68, 0.2);
    border-radius: 4px;
    color: var(--accent-red);
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-fire-staff:hover {
    background: rgba(239, 68, 68, 0.25);
}

.staff-summary {
    display: flex;
    gap: 20px;
    padding: 14px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 8px;
    margin-top: 14px;
}

.summary-item {
    display: flex;
    flex-direction: column;
}

.summary-label {
    font-size: 0.6rem;
    color: var(--text-muted);
}

.summary-value {
    font-size: 0.85rem;
    font-weight: 700;
}

/* Finance Tab */
.finance-balances {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    margin-bottom: 20px;
}

.balance-card {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
}

.balance-card.player {
    border-color: rgba(139, 92, 246, 0.3);
}

.balance-card.company {
    border-color: rgba(6, 182, 212, 0.3);
}

.balance-icon {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
}

.balance-card.player .balance-icon {
    background: rgba(139, 92, 246, 0.15);
    color: #8b5cf6;
}

.balance-card.company .balance-icon {
    background: rgba(6, 182, 212, 0.15);
    color: var(--accent-cyan);
}

.balance-info {
    display: flex;
    flex-direction: column;
}

.balance-label {
    font-size: 0.6rem;
    color: var(--text-muted);
}

.balance-value {
    font-size: 1.1rem;
    font-weight: 800;
}

.balance-arrow {
    width: 36px;
    height: 36px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
}

.transfer-section {
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    padding: 16px;
    margin-bottom: 16px;
}

.transfer-section h4 {
    font-size: 0.8rem;
    margin: 0 0 14px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.transfer-section h4 i {
    color: var(--accent-cyan);
}

.transfer-form {
    display: flex;
    gap: 16px;
}

.transfer-input-group {
    flex: 1;
}

.transfer-input-group label {
    font-size: 0.65rem;
    color: var(--text-muted);
    display: block;
    margin-bottom: 6px;
}

.amount-input {
    display: flex;
    align-items: center;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    overflow: hidden;
}

.amount-input input {
    flex: 1;
    border: none;
    background: transparent;
    padding: 10px 12px;
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-primary);
}

.amount-input input:focus {
    outline: none;
}

.amount-input .currency {
    padding: 0 12px;
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--accent-gold);
}

.quick-amounts {
    display: flex;
    gap: 6px;
    margin-top: 8px;
}

.quick-btn {
    padding: 4px 10px;
    font-size: 0.6rem;
    font-weight: 600;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s ease;
}

.quick-btn:hover {
    background: rgba(6, 182, 212, 0.15);
    border-color: rgba(6, 182, 212, 0.3);
    color: var(--accent-cyan);
}

.transfer-buttons {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.transfer-btn {
    padding: 10px 16px;
    font-size: 0.7rem;
    font-weight: 600;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 6px;
}

.transfer-btn.to-company {
    background: linear-gradient(135deg, var(--accent-cyan), #0891b2);
    color: white;
}

.transfer-btn.from-company {
    background: rgba(139, 92, 246, 0.2);
    border: 1px solid rgba(139, 92, 246, 0.3);
    color: #8b5cf6;
}

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

/* Company List */
.company-list-section {
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    padding: 16px;
}

.company-list-section h4 {
    font-size: 0.8rem;
    margin: 0 0 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.company-list-section h4 i {
    color: var(--accent-cyan);
}

.company-mini-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 150px;
    overflow-y: auto;
    margin-bottom: 12px;
}

.company-mini-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.company-mini-item:hover {
    border-color: rgba(255, 255, 255, 0.15);
}

.company-mini-item.active {
    border-color: rgba(6, 182, 212, 0.4);
    background: rgba(6, 182, 212, 0.08);
}

.company-mini-icon {
    width: 32px;
    height: 32px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
}

.company-mini-info {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.company-mini-name {
    font-size: 0.75rem;
    font-weight: 600;
}

.company-mini-sector {
    font-size: 0.55rem;
    color: var(--text-muted);
}

.company-mini-cash {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--accent-green);
}

.active-badge {
    font-size: 0.5rem;
    padding: 2px 6px;
    background: rgba(6, 182, 212, 0.2);
    color: var(--accent-cyan);
    border-radius: 4px;
    font-weight: 600;
}

.btn-new-company {
    width: 100%;
    padding: 10px;
    font-size: 0.75rem;
    font-weight: 600;
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.2), rgba(34, 197, 94, 0.1));
    border: 1px dashed rgba(34, 197, 94, 0.4);
    border-radius: 8px;
    color: var(--accent-green);
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.btn-new-company:hover {
    background: rgba(34, 197, 94, 0.2);
    border-style: solid;
}

.max-companies-notice {
    text-align: center;
    padding: 10px;
    font-size: 0.7rem;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

/* =====================================================
   COMPANY MANAGEMENT MODAL - COMPANIES TAB
   ===================================================== */

.btn-action.primary {
    background: linear-gradient(135deg, var(--accent-cyan), #0891b2);
    color: white;
    border-color: transparent;
}

.btn-action.primary:hover {
    box-shadow: 0 4px 15px rgba(6, 182, 212, 0.4);
    transform: translateY(-2px);
}

.companies-header {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 16px;
    background: linear-gradient(135deg, rgba(6, 182, 212, 0.1), rgba(6, 182, 212, 0.02));
    border: 1px solid rgba(6, 182, 212, 0.15);
    border-radius: 10px;
    margin-bottom: 16px;
}

.companies-count {
    display: flex;
    align-items: baseline;
    gap: 4px;
}

.count-big {
    font-size: 2rem;
    font-weight: 800;
    color: var(--accent-cyan);
}

.count-label {
    font-size: 0.9rem;
    color: var(--text-muted);
}

.companies-header p {
    flex: 1;
    font-size: 0.7rem;
    color: var(--text-muted);
    margin: 0;
}

.company-full-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-height: 300px;
    overflow-y: auto;
    margin-bottom: 16px;
}

.company-full-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    transition: all 0.2s ease;
}

.company-full-item:hover {
    border-color: rgba(255, 255, 255, 0.15);
}

.company-full-item.active {
    border-color: rgba(6, 182, 212, 0.4);
    background: rgba(6, 182, 212, 0.08);
}

.company-item-icon {
    width: 50px;
    height: 50px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    flex-shrink: 0;
}

.company-item-info {
    flex: 1;
}

.company-item-info h4 {
    font-size: 0.9rem;
    margin: 0 0 4px;
}

.company-item-meta {
    display: flex;
    gap: 12px;
}

.company-item-meta span {
    font-size: 0.6rem;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 4px;
}

.company-item-stats {
    display: flex;
    gap: 16px;
}

.item-stat {
    text-align: center;
}

.item-stat .stat-val {
    display: block;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--accent-green);
}

.item-stat .stat-lbl {
    font-size: 0.5rem;
    color: var(--text-muted);
    text-transform: uppercase;
}

.company-item-actions {
    flex-shrink: 0;
}

.active-company-badge {
    padding: 6px 12px;
    font-size: 0.65rem;
    font-weight: 600;
    background: rgba(6, 182, 212, 0.15);
    color: var(--accent-cyan);
    border-radius: 6px;
    display: flex;
    align-items: center;
    gap: 4px;
}

.btn-switch-company {
    padding: 8px 14px;
    font-size: 0.65rem;
    font-weight: 600;
    background: rgba(139, 92, 246, 0.15);
    border: 1px solid rgba(139, 92, 246, 0.3);
    border-radius: 6px;
    color: #8b5cf6;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 4px;
}

.btn-switch-company:hover {
    background: rgba(139, 92, 246, 0.25);
    transform: translateY(-1px);
}

.btn-new-company-large {
    width: 100%;
    padding: 16px;
    font-size: 0.85rem;
    font-weight: 600;
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.15), rgba(34, 197, 94, 0.05));
    border: 2px dashed rgba(34, 197, 94, 0.4);
    border-radius: 10px;
    color: var(--accent-green);
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.btn-new-company-large:hover {
    background: rgba(34, 197, 94, 0.2);
    border-style: solid;
    transform: translateY(-2px);
}

/* ========================================
   OVERVIEW V2 - PREMIUM KOMPAKT LAYOUT
   ======================================== */
.overview-compact-v2 {
    grid-template-columns: 260px 1fr 265px;
    gap: 12px;
    height: 100%;
}

.overview-column {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-height: 0;
    overflow: hidden;
}

.widget-card {
    background: linear-gradient(145deg, rgba(30, 41, 59, 0.7), rgba(15, 23, 42, 0.9));
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 10px;
    backdrop-filter: blur(12px);
    overflow: hidden;
    flex-shrink: 0;
    transition: border-color 0.25s, box-shadow 0.25s;
}

.widget-card:hover {
    border-color: rgba(59, 130, 246, 0.2);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.trade-tabbed-widget {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.trade-widget-tabs {
    display: flex;
    background: rgba(0, 0, 0, 0.25);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    flex-shrink: 0;
}

.trade-widget-tab {
    flex: 1;
    background: transparent;
    border: none;
    color: var(--text-muted);
    padding: 10px 12px;
    font-weight: 600;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 0.78rem;
    font-family: inherit;
    transition: all 0.2s ease;
}

.trade-widget-tab i {
    font-size: 0.72rem;
}

.trade-widget-tab:hover {
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.03);
}

.trade-widget-tab.active {
    color: #60a5fa;
    border-bottom-color: #3b82f6;
    background: linear-gradient(180deg, rgba(59, 130, 246, 0.08) 0%, transparent 100%);
}

.trade-tab-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 8px;
}

.trade-tab-body::-webkit-scrollbar-track {
    background: transparent;
}

.trade-tab-body::-webkit-scrollbar {
    width: 3px;
}

.trade-tab-body::-webkit-scrollbar-thumb {
    background: rgba(59, 130, 246, 0.3);
    border-radius: 3px;
}

.trade-tab-panel {
    display: none;
}

.trade-tab-panel.active {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.compact-news-item-v2 {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.08) 100%);
    border-radius: 8px;
    border-left: 3px solid var(--accent-blue);
    transition: all 0.2s ease;
}

.compact-news-item-v2:hover {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.08) 0%, rgba(0, 0, 0, 0.12) 100%);
    transform: translateX(2px);
}

.compact-news-item-v2:has(.news-icon-v2.breaking) {
    border-left-color: var(--accent-red);
}

.compact-news-item-v2:has(.news-icon-v2.market) {
    border-left-color: var(--accent-green);
}

.compact-news-item-v2:has(.news-icon-v2.trade) {
    border-left-color: var(--accent-purple);
}

.news-icon-v2 {
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    font-size: 0.68rem;
    background: rgba(59, 130, 246, 0.12);
    color: #60a5fa;
    flex-shrink: 0;
}

.news-icon-v2.breaking {
    background: rgba(239, 68, 68, 0.12);
    color: #f87171;
}

.news-icon-v2.market {
    background: rgba(34, 197, 94, 0.12);
    color: #4ade80;
}

.news-icon-v2.trade {
    background: rgba(139, 92, 246, 0.12);
    color: #a78bfa;
}

.news-icon-v2.economy {
    background: rgba(251, 191, 36, 0.12);
    color: #fbbf24;
}

.news-content-v2 {
    flex: 1;
    min-width: 0;
}

.news-title-v2 {
    font-size: 0.76rem;
    font-weight: 500;
    color: var(--text-primary);
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.news-time-v2 {
    font-size: 0.62rem;
    color: var(--text-muted);
    margin-top: 1px;
    display: block;
}

.news-impact-v2 {
    font-size: 0.6rem;
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    flex-shrink: 0;
}

.news-impact-v2.positive {
    color: #4ade80;
    background: rgba(34, 197, 94, 0.1);
}

.news-impact-v2.negative {
    color: #f87171;
    background: rgba(239, 68, 68, 0.1);
}

.news-impact-v2.neutral {
    color: var(--text-muted);
    background: rgba(100, 116, 139, 0.1);
}

.compact-inv-item-v2 {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.18) 0%, rgba(0, 0, 0, 0.06) 100%);
    border-radius: 8px;
    border-left: 3px solid transparent;
    transition: all 0.2s ease;
}

.compact-inv-item-v2:hover {
    background: rgba(255, 255, 255, 0.03);
    transform: translateX(2px);
}

.compact-inv-item-v2.buy {
    border-left-color: var(--accent-green);
}

.compact-inv-item-v2.sell {
    border-left-color: var(--accent-red);
}

.compact-inv-item-v2.dividend {
    border-left-color: var(--accent-gold);
}

.inv-icon-v2 {
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    font-size: 0.65rem;
    flex-shrink: 0;
}

.inv-icon-v2.buy-icon {
    background: rgba(34, 197, 94, 0.12);
    color: #4ade80;
}

.inv-icon-v2.sell-icon {
    background: rgba(239, 68, 68, 0.12);
    color: #f87171;
}

.inv-icon-v2.div-icon {
    background: rgba(251, 191, 36, 0.12);
    color: #fbbf24;
}

.inv-details-v2 {
    flex: 1;
    min-width: 0;
}

.inv-name-v2 {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--text-primary);
}

.inv-desc-v2 {
    font-size: 0.62rem;
    color: var(--text-muted);
    margin-left: 6px;
}

.inv-amount-v2 {
    text-align: right;
    flex-shrink: 0;
}

.inv-price-v2 {
    font-size: 0.76rem;
    font-weight: 600;
    color: var(--text-primary);
    display: block;
    font-variant-numeric: tabular-nums;
}

.inv-time-v2 {
    font-size: 0.6rem;
    color: var(--text-muted);
    display: block;
}

.logistics-widget-compact {
    flex: 1;
    min-height: 80px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.logistics-mini-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background: linear-gradient(135deg, rgba(6, 182, 212, 0.08) 0%, rgba(0, 0, 0, 0.2) 100%);
    border-bottom: 1px solid rgba(6, 182, 212, 0.1);
    flex-shrink: 0;
}

.logistics-mini-header h3 {
    margin: 0;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 7px;
}

.logistics-mini-header h3 i {
    color: var(--accent-cyan);
    font-size: 0.72rem;
}

.logistics-mini-body {
    padding: 6px 8px;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.logistics-mini-body::-webkit-scrollbar {
    width: 3px;
}

.logistics-mini-body::-webkit-scrollbar-thumb {
    background: rgba(6, 182, 212, 0.3);
    border-radius: 3px;
}

.shipment-mini-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    background: rgba(0, 0, 0, 0.15);
    border-radius: 6px;
    font-size: 0.73rem;
    transition: background 0.15s;
}

.shipment-mini-item:hover {
    background: rgba(6, 182, 212, 0.06);
}

.shipment-mini-icon {
    font-size: 0.62rem;
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
    flex-shrink: 0;
}

.shipment-mini-icon.transit {
    color: #60a5fa;
    background: rgba(59, 130, 246, 0.12);
}

.shipment-mini-icon.delivered {
    color: #4ade80;
    background: rgba(34, 197, 94, 0.12);
}

.shipment-mini-icon.pending {
    color: #fbbf24;
    background: rgba(251, 191, 36, 0.12);
}

.shipment-mini-route {
    flex: 1;
    color: var(--text-secondary);
    font-weight: 500;
}

.shipment-mini-status {
    font-weight: 600;
    font-size: 0.65rem;
}

.col-right .company-widget-compact,
.col-right .exchange-widget-compact {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.company-widget-compact .widget-stats {
    padding: 8px 12px;
    gap: 8px;
}

.company-widget-compact .stat-icon {
    width: 28px;
    height: 28px;
    font-size: 0.75rem;
}

.company-widget-compact .stat-value {
    font-size: 0.82rem;
}

.company-widget-compact .stat-label {
    font-size: 0.6rem;
}

.company-widget-compact .widget-header {
    padding: 8px 12px;
}

.company-widget-compact .widget-header h3 {
    font-size: 0.82rem;
}

.exchange-widget-compact .exchange-widget-content {
    padding: 10px;
    gap: 8px;
}

.exchange-widget-compact .index-value-large {
    font-size: 1.1rem;
}

.exchange-widget-compact .mover-card {
    padding: 6px 8px;
}

.exchange-widget-compact .movers-grid {
    gap: 6px;
}

.btn-widget-action {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: var(--text-muted);
    padding: 4px 12px;
    border-radius: 14px;
    font-size: 0.65rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    letter-spacing: 0.3px;
}

.btn-widget-action:hover {
    background: linear-gradient(135deg, #3b82f6, #8b5cf6);
    color: white;
    border-color: transparent;
    box-shadow: 0 2px 12px rgba(59, 130, 246, 0.3);
}

/* ========================================
   TİCARET TÜRLERİ WIDGET
   ======================================== */
.trade-types-header {
    padding: 8px 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    background: rgba(0, 0, 0, 0.15);
}

.trade-types-header h3 {
    margin: 0;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 7px;
}

.trade-types-header h3 i {
    color: #60a5fa;
    font-size: 0.72rem;
}

.trade-types-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    padding: 8px;
}

.trade-type-card {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px;
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.08));
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.04);
    cursor: pointer;
    transition: all 0.2s ease;
}

.trade-type-card:hover {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(59, 130, 246, 0.15);
    transform: translateY(-1px);
}

.trade-type-icon {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    font-size: 0.75rem;
    flex-shrink: 0;
}

.trade-type-info {
    flex: 1;
    min-width: 0;
}

.trade-type-name {
    display: block;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-primary);
}

.trade-type-desc {
    display: block;
    font-size: 0.6rem;
    color: var(--text-muted);
    margin-top: 1px;
}

.trade-type-arrow {
    font-size: 0.55rem;
    color: var(--text-muted);
    transition: 0.2s;
}

.trade-type-card:hover .trade-type-arrow {
    color: #60a5fa;
    transform: translateX(2px);
}

/* ========================================
   PORTFÖY ÖZET WİDGET
   ======================================== */
.portfolio-summary-header {
    padding: 8px 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.06), rgba(0, 0, 0, 0.15));
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
}

.portfolio-summary-header h3 {
    margin: 0;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 7px;
}

.portfolio-summary-header h3 i {
    color: #a78bfa;
    font-size: 0.72rem;
}

.portfolio-expand-hint {
    color: var(--text-muted);
    font-size: 0.65rem;
    transition: 0.2s;
}

.portfolio-summary-widget:hover .portfolio-expand-hint {
    color: #a78bfa;
}

.portfolio-summary-body {
    padding: 10px;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.portfolio-summary-body::-webkit-scrollbar {
    width: 3px;
}

.portfolio-summary-body::-webkit-scrollbar-thumb {
    background: rgba(139, 92, 246, 0.3);
    border-radius: 3px;
}

.portfolio-total {
    text-align: center;
    padding: 8px;
    background: rgba(0, 0, 0, 0.15);
    border-radius: 8px;
}

.portfolio-label {
    display: block;
    font-size: 0.62rem;
    color: var(--text-muted);
    margin-bottom: 2px;
}

.portfolio-value {
    display: block;
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
}

.portfolio-change {
    font-size: 0.7rem;
    font-weight: 600;
}

.portfolio-change.positive {
    color: #4ade80;
}

.portfolio-change.negative {
    color: #f87171;
}

.portfolio-holdings {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.holding-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 8px;
    background: rgba(0, 0, 0, 0.1);
    border-radius: 6px;
    font-size: 0.72rem;
}

.hold-ticker {
    font-weight: 700;
    color: var(--text-primary);
    width: 36px;
}

.hold-qty {
    flex: 1;
    color: var(--text-muted);
}

.hold-val {
    font-weight: 600;
}

.hold-val.positive {
    color: #4ade80;
}

.hold-val.negative {
    color: #f87171;
}

/* ========================================
   PORTFÖY POPUP
   ======================================== */
.portfolio-popup-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(8px);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: fadeIn 0.2s ease;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.portfolio-popup {
    background: linear-gradient(145deg, rgba(30, 41, 59, 0.98), rgba(15, 23, 42, 0.99));
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 14px;
    width: 580px;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    animation: popIn 0.25s ease;
}

@keyframes popIn {
    from {
        transform: scale(0.95);
        opacity: 0;
    }

    to {
        transform: scale(1);
        opacity: 1;
    }
}

.portfolio-popup-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 18px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(0, 0, 0, 0.2);
}

.portfolio-popup-header h2 {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 8px;
}

.portfolio-popup-header h2 i {
    color: #a78bfa;
}

.portfolio-popup-close {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: var(--text-muted);
    width: 28px;
    height: 28px;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.15s;
}

.portfolio-popup-close:hover {
    background: rgba(239, 68, 68, 0.2);
    color: #f87171;
}

.portfolio-popup-body {
    padding: 16px;
    flex: 1;
    overflow-y: auto;
}

.portfolio-popup-summary {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-bottom: 16px;
}

.pp-stat {
    text-align: center;
    padding: 12px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.04);
}

.pp-label {
    display: block;
    font-size: 0.65rem;
    color: var(--text-muted);
    margin-bottom: 4px;
}

.pp-value {
    display: block;
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-primary);
}

.pp-value.positive {
    color: #4ade80;
}

.pp-value.negative {
    color: #f87171;
}

.portfolio-popup-table {
    background: rgba(0, 0, 0, 0.15);
    border-radius: 10px;
    overflow: hidden;
}

.pp-table-header {
    display: grid;
    grid-template-columns: 1fr 0.7fr 1fr 1.2fr 0.8fr;
    gap: 4px;
    padding: 8px 12px;
    background: rgba(0, 0, 0, 0.2);
    font-size: 0.65rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.pp-table-body {
    padding: 4px 0;
}

.pp-row {
    display: grid;
    grid-template-columns: 1fr 0.7fr 1fr 1.2fr 0.8fr;
    gap: 4px;
    padding: 8px 12px;
    font-size: 0.76rem;
    color: var(--text-secondary);
    border-bottom: 1px solid rgba(255, 255, 255, 0.03);
    transition: background 0.15s;
}

.pp-row:hover {
    background: rgba(255, 255, 255, 0.02);
}

.pp-row:last-child {
    border-bottom: none;
}

.pp-ticker {
    font-weight: 700;
    color: var(--text-primary);
}

.pp-row .positive {
    color: #4ade80;
    font-weight: 600;
}

.pp-row .negative {
    color: #f87171;
    font-weight: 600;
}

/* ========================================
   DÜNYA HİSELERİ
   ======================================== */
.world-stocks-section .section-header h2 {
    display: flex;
    align-items: center;
}

.world-stocks-table .table-header,
.world-stocks-table .table-row {
    grid-template-columns: 0.7fr 1.4fr 0.9fr 0.8fr 0.9fr 0.9fr 0.5fr;
}

.world-stocks-table {
    display: flex;
    flex-direction: column;
    height: 480px;
    /* Sabit yükseklik */
}

.world-stocks-table .table-header {
    flex-shrink: 0;
    position: sticky;
    top: 0;
    z-index: 10;
    background: var(--bg-card);
    /* Scroll arkasında kalmaması için */
}

.world-stocks-table .table-body {
    flex-grow: 1;
    overflow-y: auto;
    padding-bottom: 10px;
}

/* Şık ve İnce Kaydırma Çubuğu */
.world-stocks-table .table-body::-webkit-scrollbar {
    width: 5px;
}

.world-stocks-table .table-body::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.02);
    border-radius: 10px;
}

.world-stocks-table .table-body::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    transition: all 0.2s;
}

.world-stocks-table .table-body::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.2);
}

.world-stock-row {
    transition: background 0.15s;
}

.world-stock-row:hover {
    background: rgba(255, 255, 255, 0.03);
}

.col-country {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.78rem;
}

.country-flag {
    font-size: 1rem;
    line-height: 1;
}

.country-name {
    color: var(--text-muted);
    font-size: 0.72rem;
}

.ticker-badge {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.12), rgba(139, 92, 246, 0.12));
    color: #93c5fd;
    padding: 2px 7px;
    border-radius: 4px;
    font-weight: 700;
    font-size: 0.72rem;
    letter-spacing: 0.5px;
}

.stock-company-name {
    font-size: 0.78rem;
    color: var(--text-primary);
    font-weight: 500;
}

.btn-trade-sm {
    background: none;
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: var(--text-muted);
    width: 28px;
    height: 28px;
    border-radius: 6px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.68rem;
    transition: all 0.15s;
}

.btn-buy-sm:hover {
    background: rgba(52, 211, 153, 0.15);
    border-color: rgba(52, 211, 153, 0.3);
    color: #34d399;
}

/* ========================================
   BORSA GENEL DASHBOARD (OVERVIEW)
   ======================================== */
.exchange-left-panel {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.exchange-dashboard-grid {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 10px 0;
}

.dashboard-top-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.dashboard-middle-row {
    display: block;
}

.dashboard-indices-row h3 {
    font-size: 0.9rem;
    color: var(--text-primary);
    margin: 0 0 12px 0;
    font-weight: 600;
}

.indices-grid-mega {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 15px;
}

.index-card-detailed {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.01) 100%);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    padding: 15px;
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
}

.index-card-detailed:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(59, 130, 246, 0.2);
    transform: translateY(-2px);
}

.index-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.index-card-header .index-name {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--text-primary);
}

.index-card-header .index-tag {
    font-size: 0.6rem;
    background: rgba(0, 0, 0, 0.2);
    padding: 2px 6px;
    border-radius: 4px;
    color: var(--text-muted);
}

.index-card-body {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin-bottom: 5px;
}

.index-card-body .index-value {
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--text-primary);
    letter-spacing: -0.5px;
}

.index-card-body .index-change {
    font-size: 0.75rem;
    font-weight: 600;
}

.index-card-body .index-change i {
    font-size: 0.65rem;
}

.index-mini-chart {
    height: 30px;
    margin-top: 5px;
}

/* Renkler */
.index-card-detailed.positive .index-change {
    color: #4ade80;
}

.index-card-detailed.negative .index-change {
    color: #f87171;
}

.index-card-detailed.positive:hover {
    box-shadow: 0 8px 24px rgba(74, 222, 128, 0.05);
}

.index-card-detailed.negative:hover {
    box-shadow: 0 8px 24px rgba(248, 113, 113, 0.05);
}

/* Aside yok olduğu için layout düzeltme */
.exchange-main-layout {
    display: flex;
    gap: 0;
}

.exchange-right-panel {
    display: none;
    /* Artık nav tab üzerinden yönetiliyor */
}

/* === CONSOLIDATED TRADE TABS === */
.consolidated-trade-tabs {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 400px;
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    transition: all var(--transition-normal);
}

.consolidated-trade-tabs .tabs-navigation {
    display: flex;
    gap: 4px;
    padding: 12px 16px;
    background: rgba(0, 0, 0, 0.2);
    border-bottom: 1px solid var(--card-border);
}

.trade-sub-tab {
    padding: 8px 16px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-normal);
}

.trade-sub-tab i {
    margin-right: 8px;
    font-size: 0.9rem;
}

.trade-sub-tab:hover {
    background: rgba(255, 255, 255, 0.08);
    color: var(--text-primary);
}

.trade-sub-tab.active {
    background: var(--gradient-primary);
    border-color: transparent;
    color: white;
    box-shadow: var(--shadow-glow-blue);
}

.tabs-content {
    flex: 1;
    position: relative;
    overflow: hidden;
}

.tab-pane {
    position: absolute;
    inset: 0;
    opacity: 0;
    pointer-events: none;
    transition: all 0.3s ease;
    transform: translateY(10px);
    overflow-y: auto;
}

.tab-pane.active {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

/* Tab içindeki kart başlıklarını gizle (Çünkü sekme adı zaten var) */
.tab-pane .sidebar-card .card-header {
    display: none;
}

.tab-pane .sidebar-card {
    background: transparent;
    border: none;
    box-shadow: none;
}

/* === PREMIUM INDICES DESIGN === */
.indices-container-premium {
    padding: 0;
    background: linear-gradient(145deg, rgba(19, 23, 34, 0.8), rgba(30, 34, 45, 0.6));
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 16px;
    overflow: hidden;
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.indices-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px 24px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    background: rgba(0, 0, 0, 0.15);
}

.title-with-desc h3 {
    margin: 0;
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: -0.3px;
    color: #e2e8f0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.title-with-desc h3::before {
    content: '';
    width: 3px;
    height: 16px;
    background: linear-gradient(180deg, #3b82f6, #06b6d4);
    border-radius: 2px;
    flex-shrink: 0;
}

.title-with-desc p {
    margin: 4px 0 0 0;
    font-size: 0.7rem;
    color: #475569;
    padding-left: 13px;
}

.market-badge {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 14px;
    background: rgba(34, 197, 94, 0.08);
    border: 1px solid rgba(34, 197, 94, 0.15);
    border-radius: 20px;
    font-size: 0.62rem;
    font-weight: 800;
    color: #4ade80;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.market-badge .dot.pulse {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #4ade80;
    box-shadow: 0 0 8px rgba(74, 222, 128, 0.6);
    animation: indexPulse 2s ease-in-out infinite;
}

@keyframes indexPulse {

    0%,
    100% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: 0.5;
        transform: scale(0.8);
    }
}

/* === OVERVIEW DASHBOARD (GENERAL) === */
.exchange-dashboard-grid {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 24px;
    height: 100%;
    overflow-y: auto;
}

.horizontal-widgets {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    width: 100%;
    margin-bottom: 10px;
}

.summary-widget {
    background: #1e222d;
    border: 1px solid #2a2e39;
    border-radius: 12px;
    padding: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
    transition: transform 0.2s ease, border-color 0.2s ease;
}

.summary-widget:hover {
    border-color: #363a45;
    transform: translateY(-4px);
}

.summary-widget .widget-header {
    background: rgba(255, 255, 255, 0.03);
    padding: 12px 18px;
    border-bottom: 1px solid #2a2e39;
}

.summary-widget .widget-header h4 {
    margin: 0;
    font-size: 0.82rem;
    font-weight: 800;
    color: #d1d4dc;
    display: flex;
    align-items: center;
    gap: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.summary-widget .widget-header h4 i {
    color: #2962ff;
}

.summary-widget .widget-body {
    padding: 15px;
    flex: 1;
}

/* ============================================
   PREMIUM INDEX CARDS - TradingView Grade 
   ============================================ */
.indices-grid-modern {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    padding: 0;
}

.premium-index-card {
    position: relative;
    background: linear-gradient(165deg, rgba(19, 23, 34, 0.95) 0%, rgba(26, 30, 42, 0.9) 100%);
    border: none;
    border-right: 1px solid rgba(255, 255, 255, 0.04);
    border-radius: 0;
    padding: 22px 24px 0;
    overflow: hidden;
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
}

.premium-index-card:last-child {
    border-right: none;
}

/* Hover Effects */
.premium-index-card:hover {
    background: linear-gradient(165deg, rgba(25, 30, 45, 0.98) 0%, rgba(30, 35, 50, 0.95) 100%);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

.premium-index-card:hover .card-chart-area {
    opacity: 1;
}

/* Card Top Row */
.premium-index-card .card-content {
    position: relative;
    z-index: 2;
}

.premium-index-card .card-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.index-ticker {
    font-size: 0.82rem;
    font-weight: 800;
    color: #94a3b8;
    letter-spacing: 0.5px;
}

.index-change-tag {
    font-size: 0.68rem;
    font-weight: 800;
    padding: 3px 10px;
    border-radius: 6px;
    letter-spacing: 0.3px;
}

.index-change-tag.positive {
    background: rgba(74, 222, 128, 0.1);
    color: #4ade80;
    border: 1px solid rgba(74, 222, 128, 0.15);
}

.index-change-tag.negative {
    background: rgba(248, 113, 113, 0.1);
    color: #f87171;
    border: 1px solid rgba(248, 113, 113, 0.15);
}

/* Price Value */
.premium-index-card .card-middle {
    margin-bottom: 6px;
}

.current-value {
    font-size: 1.6rem;
    font-weight: 800;
    color: #f1f5f9;
    font-variant-numeric: tabular-nums;
    letter-spacing: -1px;
    line-height: 1;
}

/* Chart Area */
.card-chart-area {
    margin-top: 14px;
    height: 70px;
    width: calc(100% + 48px);
    margin-left: -24px;
    margin-right: -24px;
    position: relative;
    opacity: 0.9;
    transition: opacity 0.3s ease;
}

.card-chart-area canvas {
    display: block;
    width: 100%;
    height: 100%;
}

@media (max-width: 992px) {
    .indices-grid-modern {
        grid-template-columns: 1fr;
    }

    .premium-index-card {
        border-right: none;
        border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    }

    .premium-index-card:last-child {
        border-bottom: none;
    }
}

/* === TRADING VIEW STYLE CHART EXTENSION === */
.exchange-page-header {
    background: #131722;
    padding: 0 20px;
    border-bottom: 2px solid #363a45;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 64px;
}

.exchange-full-view {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.exchange-main-layout {
    display: flex;
    flex: 1;
    overflow: hidden;
    gap: 12px;
    background: #0b0e14;
    padding: 2px;
}

.tv-chart-main-layout {
    display: flex;
    height: 100%;
    background: #0b0e14;
    overflow: hidden;
    /* Prevent main overflow since everything is inside widget now */
}

.tv-chart-left-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding-bottom: 20px;
}

.tv-chart-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    background: #131722;
    overflow-y: auto;
    /* Scroll inside the widget if content grows too much */
}

.chart-header {
    background: #131722;
    padding: 4px 12px;
    border-bottom: 1px solid #2a2e39;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 42px;
}

.chart-symbol .symbol-box {
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.chart-symbol .symbol {
    font-size: 1rem;
    font-weight: 800;
    color: #d1d4dc;
}

.chart-symbol .market {
    font-size: 0.65rem;
    color: #868993;
    background: #2a2e39;
    padding: 1px 4px;
    border-radius: 2px;
}

.price-box {
    display: flex;
    align-items: center;
    gap: 10px;
}

.price-box .price {
    font-size: 1.1rem;
    font-weight: 700;
    color: #d1d4dc;
}

.price-box .change.positive {
    color: #22c55e;
}

.price-box .change.negative {
    color: #f23645;
}

.chart-controls-group {
    display: flex;
    align-items: center;
    gap: 10px;
}

.chart-type-selector {
    display: flex;
    gap: 2px;
}

.chart-tool-btn {
    background: transparent;
    border: none;
    color: #868993 !important;
    font-size: 0.9rem;
    padding: 6px;
    cursor: pointer;
    border-radius: 4px;
    transition: 0.2s;
}

.chart-tool-btn:hover,
.chart-tool-btn.active {
    background: #2a2e39;
    color: #2962ff !important;
}

.divider {
    width: 1px;
    height: 20px;
    background: #2a2e39;
    margin: 0 5px;
}

.chart-area {
    flex: 1;
    background: #131722;
    min-height: 400px;
}

/* === INTERNAL WIDGET CONTENT === */
.chart-internal-content {
    background: #131722;
    padding: 15px;
}

/* Timeframe Tabs (Header Integrated) */
.timeline-tabs {
    display: flex;
    gap: 2px;
    background: rgba(0, 0, 0, 0.2);
    padding: 2px;
    border-radius: 4px;
}

.timeline-tabs .tf-btn {
    background: transparent;
    border: none;
    color: #868993;
    font-size: 0.68rem;
    font-weight: 700;
    padding: 4px 8px;
    cursor: pointer;
    border-radius: 3px;
    transition: 0.2s;
}

.timeline-tabs .tf-btn:hover {
    color: #d1d4dc;
    background: rgba(255, 255, 255, 0.05);
}

.timeline-tabs .tf-btn.active {
    color: #fff;
    background: #2962ff;
    box-shadow: 0 2px 6px rgba(41, 98, 255, 0.3);
}

.chart-internal-grid {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 15px;
    margin-top: 10px;
}

.internal-section {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid #2a2e39;
    border-radius: 6px;
    padding: 10px;
    margin-bottom: 10px;
}

.internal-section h4 {
    font-size: 0.65rem;
    font-weight: 800;
    color: #868993;
    letter-spacing: 1px;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.internal-section h4 i {
    color: #2962ff;
}

/* Mini News */
.stock-news-item.mini {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding: 6px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.03);
}

.stock-news-item.mini .news-title {
    font-size: 0.75rem;
    color: #d1d4dc;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.3;
}

.stock-news-item.mini .time {
    font-size: 0.6rem;
    color: #868993;
}

/* Mini Funds */
.funds-mini-row {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.f-mini-tag {
    background: #1e222d;
    color: #2962ff;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 4px 8px;
    border-radius: 4px;
    border: 1px solid rgba(41, 98, 255, 0.3);
}

/* Mini Chat */
.chat-messages.mini {
    height: 140px;
    overflow-y: auto;
    font-size: 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.chat-msg .u {
    font-weight: 800;
    color: #868993;
    margin-right: 5px;
}

.chat-msg .m {
    color: #d1d4dc;
}

.chat-input-area.mini {
    margin-top: 8px;
    display: flex;
    gap: 5px;
}

.chat-input-area.mini input {
    flex: 1;
    background: #1e222d;
    border: 1px solid #2a2e39;
    border-radius: 4px;
    color: #d1d4dc;
    padding: 5px 8px;
    font-size: 0.7rem;
}

.chat-input-area.mini .btn-chat-send {
    width: 28px;
    height: 28px;
    font-size: 0.7rem;
}

/* Cleanup old external detail classes if they were here */
/* Integrated internal styles end here */

/* Funds List */
.funds-mini-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 12px;
}

.fund-mini-card {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid #2a2e39;
    padding: 10px;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.fund-mini-card .f-ticker {
    font-size: 0.75rem;
    font-weight: 800;
    color: #2962ff;
}

.fund-mini-card .f-weight {
    font-size: 0.65rem;
    color: #868993;
}

/* Chat Box */
.chat-container {
    height: 400px;
    display: flex;
    flex-direction: column;
}

.chat-messages {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding-right: 5px;
}

.chat-msg {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.chat-msg .u {
    font-size: 0.65rem;
    font-weight: 700;
    color: #868993;
}

.chat-msg .m {
    font-size: 0.78rem;
    background: #1e222d;
    padding: 8px 12px;
    border-radius: 8px;
    color: #d1d4dc;
    max-width: 90%;
    line-height: 1.4;
}

.chat-msg.me .m {
    background: rgba(41, 98, 255, 0.2);
    align-self: flex-start;
}

.chat-input-area {
    margin-top: 15px;
    display: flex;
    gap: 8px;
}

.chat-input-area input {
    flex: 1;
    background: #1e222d;
    border: 1px solid #2a2e39;
    border-radius: 6px;
    color: #d1d4dc;
    padding: 8px 12px;
    font-size: 0.8rem;
}

.chat-messages::-webkit-scrollbar {
    width: 4px;
}

.chat-messages::-webkit-scrollbar-track {
    background: transparent;
}

.chat-messages::-webkit-scrollbar-thumb {
    background: #2a2e39;
    border-radius: 10px;
}

.btn-chat-send {
    background: #2962ff;
    color: white;
    border: none;
    width: 34px;
    height: 34px;
    border-radius: 6px;
    cursor: pointer;
}

/* === NEW TRADING BAR DESIGN === */
.chart-trading-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 15px;
    background: #131722;
    border-top: 1px solid #2a2e39;
    gap: 20px;
}

.sentiment-indicator {
    flex: 1;
    position: relative;
    height: 24px;
    background: rgba(239, 68, 68, 0.2);
    border-radius: 4px;
    overflow: hidden;
    display: flex;
    align-items: center;
}

.sentiment-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, #22c55e, #10b981);
    width: 65%;
    display: flex;
    align-items: center;
    padding-left: 10px;
    box-shadow: 0 0 15px rgba(34, 197, 94, 0.4);
    animation: sentimentPulse 2s infinite ease-in-out;
}

@keyframes sentimentPulse {
    0% {
        filter: brightness(1);
    }

    50% {
        filter: brightness(1.3);
    }

    100% {
        filter: brightness(1);
    }
}

.sentiment-label {
    position: absolute;
    width: 100%;
    text-align: center;
    font-size: 0.65rem;
    font-weight: 800;
    color: #fff;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
    z-index: 2;
    pointer-events: none;
    text-transform: uppercase;
    letter-spacing: 0.8px;
}

.quick-trade-buttons {
    display: flex;
    gap: 8px;
}

.q-trade-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4px 16px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    min-width: 90px;
    transition: all 0.2s;
}

.q-trade-btn.buy {
    background: linear-gradient(135deg, #10b981, #059669);
    color: white;
}

.q-trade-btn.sell {
    background: linear-gradient(135deg, #ef4444, #dc2626);
    color: white;
}

.q-trade-btn:hover {
    transform: translateY(-2px);
    filter: brightness(1.1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.q-trade-btn .action-label {
    font-size: 0.6rem;
    font-weight: 700;
    opacity: 0.9;
}

.q-trade-btn .action-price {
    font-size: 0.85rem;
    font-weight: 800;
}

/* Sidebar */
.chart-sidebar {
    width: 280px;
    background: #131722;
    display: flex;
    flex-direction: column;
    border-left: 1px solid #2a2e39;
    margin-left: 2px;
}

.sidebar-section {
    padding: 15px;
    border-bottom: 1px solid #2a2e39;
}

.sidebar-section.filler {
    flex: 1;
}

.section-title-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.sidebar-section h4 {
    font-size: 0.68rem;
    text-transform: uppercase;
    color: #d1d4dc;
    margin: 0;
    font-weight: 800;
    letter-spacing: 0.05em;
}

.watch-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.watch-item {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr 0.8fr;
    padding: 6px 10px;
    font-size: 0.72rem;
    border-radius: 4px;
    cursor: pointer;
    align-items: center;
    transition: background 0.2s;
}

.watch-item:hover {
    background: #1e222d;
}

.w-symbol {
    font-weight: 700;
    color: #d1d4dc;
    letter-spacing: -0.02em;
}

.w-price {
    text-align: right;
    color: #d1d4dc;
}

.w-change {
    text-align: right;
    font-weight: 600;
}

.w-change.positive {
    color: #22c55e;
}

.w-change.negative {
    color: #f23645;
}

.alert-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background: #1e222d;
    border: 1px solid #2a2e39;
    border-radius: 6px;
    margin-bottom: 5px;
}

.alert-symbol {
    font-size: 0.65rem;
    color: #868993;
    font-weight: 600;
}

.alert-price {
    font-size: 0.85rem;
    font-weight: 800;
    color: #fbbf24;
}

.btn-sidebar-add,
.btn-clear-alert {
    background: transparent;
    border: none;
    color: #868993;
    cursor: pointer;
    padding: 4px;
}

.btn-sidebar-add:hover {
    color: #2962ff;
}

.btn-clear-alert:hover {
    color: #f23645;
}

.no-alerts {
    font-size: 0.75rem;
    color: #5d606b;
    text-align: center;
    padding: 20px 0;
}

.selection-details .desc {
    font-size: 0.75rem;
    color: #868993;
    line-height: 1.5;
}

/* Portfolio Compact */
.portfolio-summary-compact {
    text-align: right;
    margin-left: 15px;
    padding-left: 15px;
    border-left: 1px solid rgba(255, 255, 255, 0.1);
}

.portfolio-summary-compact .label {
    font-size: 0.6rem;
    font-weight: 800;
    color: #868993;
}

.portfolio-summary-compact .val-group {
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.portfolio-summary-compact .value {
    font-size: 1rem;
    font-weight: 800;
    color: #fbbf24;
}

.header-actions {
    display: flex;
    gap: 8px;
    margin-right: 15px;
}

.btn-icon-header {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #d1d4dc;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    cursor: pointer;
    transition: 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-icon-header:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
}

.market-status.open .status-text {
    font-size: 0.65rem;
    font-weight: 800;
    color: #22c55e;
}

/* Consolidated layout styles in the Trading View section above */

.exchange-left-panel {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.exchange-view-panel {
    display: none;
    height: 100%;
}

.exchange-view-panel.active {
    display: flex;
    flex-direction: column;
}

/* Removed duplicate definitions - consolidated above */

.chart-type-selector {
    display: flex;
    gap: 2px;
    padding: 2px;
    background: rgba(255, 255, 255, 0.02);
    border-radius: 4px;
}

.chart-tool-btn {
    background: transparent;
    border: none;
    color: #868993 !important;
    font-size: 0.82rem;
    padding: 6px 10px;
    cursor: pointer;
    border-radius: 4px;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.chart-tool-btn:hover {
    background: #2a2e39;
    color: #d1d4dc !important;
}

.chart-tool-btn.active {
    background: rgba(41, 98, 255, 0.15);
    color: #2962ff !important;
    font-weight: 600;
}

.zoom-controls {
    display: flex;
    gap: 4px;
}

.zoom-controls .chart-tool-btn {
    padding: 5px;
    width: 28px;
    height: 28px;
}

.divider {
    width: 1px;
    height: 18px;
    background: #2a2e39;
    margin: 0 10px;
}

/* TimeScale Styles */
.chart-bottom-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 12px;
    background: #131722;
    border-top: 1px solid #2a2e39;
    height: 32px;
}

.chart-timeframes-bottom {
    display: flex;
    gap: 4px;
}

.chart-timeframes-bottom .tf-btn {
    background: transparent;
    border: none;
    color: #868993;
    font-size: 0.72rem;
    font-weight: 700;
    padding: 4px 10px;
    cursor: pointer;
    border-radius: 4px;
    transition: all 0.2s;
}

.chart-timeframes-bottom .tf-btn:hover {
    color: #d1d4dc;
    background: rgba(255, 255, 255, 0.03);
}

.chart-timeframes-bottom .tf-btn.active {
    color: #2962ff;
    background: rgba(41, 98, 255, 0.1);
}

/* Chart Area & Hint */
.chart-area {
    position: relative;
    flex: 1;
}

.zoom-hint {
    position: absolute;
    bottom: 20px;
    left: 20px;
    background: rgba(19, 23, 34, 0.9);
    color: #868993;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 0.65rem;
    pointer-events: none;
    z-index: 10;
    backdrop-filter: blur(4px);
    border: 1px solid #2a2e39;
    opacity: 0;
    transition: opacity 0.3s;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
}

.chart-area:hover .zoom-hint {
    opacity: 1;
}

/* === MODERN WORLD STOCKS VIEW === */
.world-stocks-section {
    padding: 24px;
    height: 100%;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.view-header-modern {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid #2a2e39;
}

.view-header-modern .title-group h2 {
    font-size: 1.5rem;
    font-weight: 800;
    color: #fff;
    margin: 0 0 4px 0;
    display: flex;
    align-items: center;
    gap: 12px;
}

.view-header-modern .title-group h2 i {
    color: #60a5fa;
}

.view-header-modern .title-group p {
    color: #868993;
    font-size: 0.9rem;
    margin: 0;
}

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

.search-box-modern {
    position: relative;
    width: 280px;
}

.search-box-modern i {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: #4b5563;
    font-size: 0.85rem;
}

.search-box-modern input {
    width: 100%;
    background: #1e222d;
    border: 1px solid #2a2e39;
    border-radius: 8px;
    padding: 10px 12px 10px 36px;
    color: #fff;
    font-size: 0.85rem;
    transition: all 0.2s;
}

.search-box-modern input:focus {
    border-color: #3b82f6;
    outline: none;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.filter-group-modern {
    display: flex;
    background: #1e222d;
    padding: 4px;
    border-radius: 10px;
    gap: 2px;
}

.filter-btn {
    background: transparent;
    border: none;
    color: #868993;
    font-size: 0.8rem;
    font-weight: 700;
    padding: 8px 16px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
}

.filter-btn:hover {
    color: #d1d4dc;
}

.filter-btn.active {
    background: #2a2e39;
    color: #fff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

/* Modern Stocks Table Structure */
.modern-stocks-table {
    display: flex;
    flex-direction: column;
}

.table-head {
    display: grid;
    grid-template-columns: 100px 2.5fr 1.2fr 1.2fr 1.5fr 1.5fr 140px;
    padding: 12px 20px;
    background: rgba(255, 255, 255, 0.02);
    border-radius: 8px;
    margin-bottom: 8px;
    border: 1px solid rgba(255, 255, 255, 0.03);
}

.th-col {
    font-size: 0.72rem;
    font-weight: 800;
    color: #4b5563;
    letter-spacing: 1px;
}

.modern-stock-row {
    display: grid;
    grid-template-columns: 100px 2.5fr 1.2fr 1.2fr 1.5fr 1.5fr 140px;
    padding: 14px 20px;
    align-items: center;
    background: transparent;
    border-bottom: 1px solid rgba(255, 255, 255, 0.03);
    transition: all 0.2s;
}

.modern-stock-row:hover {
    background: rgba(255, 255, 255, 0.02);
    border-color: rgba(255, 255, 255, 0.05);
}

.stock-ticker-box {
    background: #2a2e39;
    padding: 4px 10px;
    border-radius: 4px;
    display: inline-block;
}

.ticker-text {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.85rem;
    font-weight: 800;
    color: #d1d4dc;
}

.company-info-cell {
    display: flex;
    align-items: center;
    gap: 12px;
}

.company-logo-placeholder {
    width: 34px;
    height: 34px;
    background: linear-gradient(135deg, #3b82f6, #8b5cf6);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 0.9rem;
    color: #fff;
    flex-shrink: 0;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.company-full-name {
    font-weight: 700;
    color: #fff;
    font-size: 1rem;
}

.price-val {
    font-family: 'JetBrains Mono', monospace;
    font-weight: 700;
    color: #fff;
    font-size: 1rem;
}

.change-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    border-radius: 6px;
    font-size: 0.82rem;
    font-weight: 800;
}

.change-pill.up {
    background: rgba(74, 222, 128, 0.1);
    color: #4ade80;
    border: 1px solid rgba(74, 222, 128, 0.1);
}

.change-pill.down {
    background: rgba(248, 113, 113, 0.1);
    color: #f87171;
    border: 1px solid rgba(248, 113, 113, 0.1);
}

.cap-val {
    color: #9ca3af;
    font-weight: 600;
    font-size: 0.95rem;
}

.country-cell {
    display: flex;
    align-items: center;
    gap: 10px;
}

.flag-icon {
    font-size: 1.3rem;
}

.country-label {
    color: #d1d4dc;
    font-size: 0.88rem;
    font-weight: 600;
}

.btn-buy-modern {
    background: #2962ff;
    border: none;
    color: #fff;
    padding: 10px 18px;
    border-radius: 8px;
    font-size: 0.75rem;
    font-weight: 800;
    cursor: pointer;
    display: flex;
    align-items: center;
    white-space: nowrap;
    gap: 8px;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    width: fit-content;
}

.btn-buy-modern:hover {
    background: #1e40af;
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(41, 98, 255, 0.4);
}

.btn-buy-modern i {
    font-size: 0.85rem;
}

/* Scrollbar styling for world stocks */
.world-stocks-section::-webkit-scrollbar {
    width: 6px;
}

.world-stocks-section::-webkit-scrollbar-track {
    background: transparent;
}

.world-stocks-section::-webkit-scrollbar-thumb {
    background: #2a2e39;
    border-radius: 10px;
}

/* Sorting Styles */
.th-col.sortable {
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 8px;
    user-select: none;
}

.th-col.sortable:hover {
    color: #d1d4dc;
}

.th-col.sortable i {
    font-size: 0.65rem;
    color: #4b5563;
    transition: all 0.2s;
}

.th-col.sortable:hover i {
    color: #868993;
}

.th-col.sortable i[class*="fa-sort-up"],
.th-col.sortable i[class*="fa-sort-down"] {
    color: #fff;
}