@import 'variables.css';

/* Import Fonts from Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;700&family=Michroma&family=Rajdhani:wght@400;500;600;700&display=swap');

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

@keyframes pageIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

body {
    background-color: var(--color-bg-dark);
    color: var(--color-text-main);
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.5;
    overflow-x: hidden;
    animation: pageIn 0.15s ease-out;
    background-image:
        radial-gradient(circle at 15% 50%, rgba(112, 0, 255, 0.05) 0%, transparent 25%),
        radial-gradient(circle at 85% 30%, rgba(0, 240, 255, 0.05) 0%, transparent 25%);
}

/* Background Grid Effect */
body::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
    background-size: 50px 50px;
    z-index: -1;
    pointer-events: none;
}

/* --- Layout --- */
.app-container {
    display: grid;
    grid-template-areas:
        "sidebar main"
        "sidebar footer";
    grid-template-columns: 250px 1fr;
    grid-template-rows: 1fr 40px;
    height: 100vh;
    width: 100vw;
    padding-top: 80px;
    /* Reserve space for fixed header initially? Or just let it float. User wants auto-hide. Let's assume overlay behavior so no padding implies more space. */
    /* Update: If we want content to be visible BEHIND header when header is shown, we don't add padding. 
       But when header is hidden, we see full content. 
       Let's use a dynamic padding or just let sidebar/main start at top. 
       However, sidebar usually has logo... wait, logo is in header.
       If header is gone, user can't see logo. That's fine.
       Let's add a top spacer/margin to sidebar and main that matches header height, but only if we want to secure space.
       User says "auto hide", implies gaining screen real estate.
       So NO padding on container. */
}

/* --- Components --- */
.glass-panel {
    background: var(--color-bg-card);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: var(--border-glass);
    border-radius: 12px;
    box-shadow: var(--shadow-card);
}

/* Header */
.header {
    /* grid-area: header; Removed from grid flow */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 80px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 2rem;
    border-bottom: var(--border-glass);
    z-index: 1000;
    background: rgba(13, 17, 23, 0.9);
    /* Darker bg for readability when overlaying */
    backdrop-filter: blur(15px);
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.header.hidden {
    transform: translateY(-100%);
}

.brand-logo {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    color: var(--color-primary);
    text-shadow: var(--glow-primary);
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Brand Logo - Neon Filter Effect */
.brand-logo-img {
    height: 40px;
    /* Slightly larger for PNG */
    width: auto;
    object-fit: contain;
    margin-right: 15px;
    /* Removed heavy filters, kept subtle glow */
    /* filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.5)); */
}

.brand-name-img {
    height: 48px;
    width: auto;
    object-fit: contain;
}

.system-clock {
    font-family: var(--font-mono);
    color: var(--color-text-muted);
}

/* Heal HUD Badge — 自癒計數 widget */
.heal-hud-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 600;
    font-family: system-ui, -apple-system, sans-serif;
    color: white;
    cursor: default;
    transition: background 0.3s ease;
    user-select: none;
}
.heal-hud-label { opacity: 0.85; font-size: 11px; }
.heal-hud-count { font-size: 15px; font-variant-numeric: tabular-nums; }
.heal-hud-gray   { background: #6b7280; }  /* -- (loading / unreachable) */
.heal-hud-green0 { background: #16a34a; }  /* 0 */
.heal-hud-green  { background: #22c55e; }  /* 1-2 */
.heal-hud-yellow { background: #eab308; color: #111; }  /* 3-5 */
.heal-hud-orange { background: #f97316; }  /* 6-10 */
.heal-hud-red    { background: #dc2626; }  /* 11+ */

/* Sidebar Navigation */
.sidebar {
    grid-area: sidebar;
    padding: 1rem;
    padding-top: 90px;
    /* Add padding so top items aren't covered by header initially */
    border-right: var(--border-glass);
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    transition: all 0.3s ease;
    position: relative;
    z-index: 100;
    /* Below header */
}

.sidebar-header {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 1rem;
}

.sidebar-toggle {
    background: transparent;
    border: none;
    color: var(--color-text-muted);
    cursor: pointer;
    font-size: 1.2rem;
    padding: 5px;
    transition: color 0.2s;
}

.sidebar-toggle:hover {
    color: var(--color-primary);
}

.nav-item {
    display: flex;
    align-items: center;
    padding: 12px 1rem;
    color: var(--color-text-muted);
    text-decoration: none;
    border-radius: 8px;
    border: 1px solid transparent;
    transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease;
    white-space: nowrap;
    /* Prevent text wrap during collapse transition */
    overflow: hidden;
}

.nav-item:hover,
.nav-item.active {
    background: var(--color-bg-glass);
    color: var(--color-primary);
    border: var(--border-active);
    box-shadow: var(--glow-primary);
}

.nav-item:active {
    background: rgba(0, 255, 135, 0.15);
    color: var(--color-primary);
    transform: scale(0.97);
    transition: none;
}

.nav-item i {
    margin-right: 12px;
    font-size: 1.2rem;
    min-width: 24px;
    /* Ensure icon stays centered when text hidden */
    text-align: center;
}

/* Collapsed State */
.app-container {
    transition: grid-template-columns 0.3s ease;
}

.app-container.collapsed {
    grid-template-columns: 80px 1fr;
}

/* HQ 專用: 有 market-sidebar 時啟用三欄 */
.app-container.has-market-sidebar {
    grid-template-areas:
        "sidebar main marketbar"
        "sidebar footer marketbar";
    grid-template-columns: 250px 1fr 340px;
}

.app-container.has-market-sidebar.collapsed {
    grid-template-columns: 80px 1fr 340px;
}

.sidebar.collapsed .nav-item span {
    opacity: 0;
    width: 0;
    display: none;
}

.sidebar.collapsed .nav-item {
    justify-content: center;
    padding: 12px 0;
}

.sidebar.collapsed .nav-item i {
    margin-right: 0;
}

.sidebar.collapsed .sidebar-header {
    justify-content: center;
}

/* Main Content Area */
.main-content {
    grid-area: main;
    padding: 2rem;
    padding-top: 100px;
    /* Space for header */
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
}

/* Right Sidebar (Trading Room) */
.right-sidebar {
    position: fixed;
    top: 80px;
    /* Below header */
    right: -100%;
    /* Hidden by default */
    width: calc(100vw - 80px);
    /* Occupy full width minus collapsed sidebar */
    height: calc(100vh - 80px);
    background: var(--color-bg-dark);
    border-left: var(--border-glass);
    z-index: 900;
    transition: right 0.4s cubic-bezier(0.16, 1, 0.3, 1), transform 0.4s ease;
    box-shadow: -10px 0 30px rgba(0, 0, 0, 0.5);
    display: flex;
    flex-direction: column;
}

.right-sidebar.open {
    right: 0;
}

.right-sidebar iframe {
    width: 100%;
    height: 100%;
    border: none;
}

/* Market Sidebar (Global Markets) */
.market-sidebar {
    grid-area: marketbar;
    background: var(--color-bg-dark, #05070a);
    border-left: var(--border-glass);
    overflow-y: auto;
    overflow-x: hidden;
    padding-top: 80px;
}

.ms-header {
    position: sticky;
    top: 0;
    z-index: 5;
    padding: 12px 16px;
    background: rgba(15, 20, 30, 0.95);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid rgba(255,255,255,0.06);
}

.ms-title {
    font-family: var(--font-heading, 'Inter');
    font-size: 0.9rem;
    color: var(--color-text-main, #e0e6ed);
    font-weight: 700;
}

.ms-title i {
    margin-right: 6px;
    color: var(--color-primary, #00f0ff);
}

.ms-content {
    padding: 0;
}

.ms-group-label {
    padding: 6px 16px 4px;
    font-size: 0.65rem;
    color: var(--color-text-muted, #64748b);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    background: rgba(255,255,255,0.02);
}

.ms-item {
    display: flex;
    align-items: center;
    padding: 10px 16px;
    border-bottom: 1px solid rgba(255,255,255,0.04);
    transition: background 0.15s;
    cursor: pointer;
    text-decoration: none;
    color: inherit;
}

.ms-item:hover {
    background: rgba(255,255,255,0.06);
}

.ms-item-info {
    flex: 0 0 90px;
    min-width: 0;
}

.ms-item-name {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--color-text-main, #e0e6ed);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ms-item-symbol {
    font-size: 0.62rem;
    color: var(--color-text-muted, #64748b);
    font-family: var(--font-mono, monospace);
}

.ms-item-spark {
    flex: 1;
    height: 28px;
    margin: 0 8px;
}

.ms-item-spark canvas {
    width: 100%;
    height: 100%;
    display: block;
}

.ms-item-price-col {
    flex: 0 0 auto;
    text-align: right;
    min-width: 80px;
}

.ms-item-price {
    font-size: 0.88rem;
    font-weight: 700;
    font-family: var(--font-mono, monospace);
}

.ms-item-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.68rem;
    font-weight: 700;
    font-family: var(--font-mono, monospace);
    margin-top: 2px;
}

.ms-item-badge.up {
    background: #ef4444;
    color: #fff;
}

.ms-item-badge.down {
    background: #10b981;
    color: #fff;
}

.ms-item-badge.flat {
    background: rgba(255,255,255,0.1);
    color: #94a3b8;
}

.agent-card {
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 180px;
    position: relative;
    overflow: hidden;
    transition: transform 0.3s ease;
}

.agent-card:hover {
    transform: translateY(-5px);
    border-color: var(--color-primary);
}

.agent-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.agent-role {
    font-family: var(--font-heading);
    font-size: 1.1rem;
    color: var(--color-text-main);
}

.status-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: var(--color-text-muted);
    box-shadow: 0 0 5px var(--color-text-muted);
}

.status-online {
    background-color: var(--color-success);
    box-shadow: 0 0 8px var(--color-success);
}

.status-busy {
    background-color: var(--color-warning);
    box-shadow: 0 0 8px var(--color-warning);
}

.agent-footer {
    font-family: var(--font-mono);
    font-size: 0.85rem;
    color: var(--color-text-muted);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.btn-action {
    background: transparent;
    border: var(--border-glass);
    color: var(--color-primary);
    padding: 5px 12px;
    border-radius: 4px;
    cursor: pointer;
    font-family: var(--font-body);
    transition: all 0.2s;
}

.btn-action:hover {
    background: var(--color-primary);
    color: #000;
}

/* Glitch Effect Utility */
.glitch-text {
    position: relative;
}

.glitch-text::before,
.glitch-text::after {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0.8;
}

.glitch-text::before {
    color: var(--color-secondary);
    z-index: -1;
    animation: glitch-anim-1 2s infinite linear alternate-reverse;
}

.glitch-text::after {
    color: var(--color-accent);
    z-index: -2;
    animation: glitch-anim-2 3s infinite linear alternate-reverse;
}

@keyframes glitch-anim-1 {
    0% {
        clip-path: inset(20% 0 80% 0);
        transform: translate(-2px, 0);
    }

    20% {
        clip-path: inset(60% 0 10% 0);
        transform: translate(2px, 0);
    }

    40% {
        clip-path: inset(40% 0 50% 0);
        transform: translate(-2px, 0);
    }

    60% {
        clip-path: inset(80% 0 5% 0);
        transform: translate(2px, 0);
    }

    80% {
        clip-path: inset(10% 0 60% 0);
        transform: translate(-2px, 0);
    }

    100% {
        clip-path: inset(30% 0 30% 0);
        transform: translate(2px, 0);
    }
}

@keyframes glitch-anim-2 {
    0% {
        clip-path: inset(10% 0 60% 0);
        transform: translate(2px, 0);
    }

    20% {
        clip-path: inset(80% 0 5% 0);
        transform: translate(-2px, 0);
    }

    40% {
        clip-path: inset(30% 0 30% 0);
        transform: translate(2px, 0);
    }

    60% {
        clip-path: inset(50% 0 20% 0);
        transform: translate(-2px, 0);
    }

    80% {
        clip-path: inset(20% 0 70% 0);
        transform: translate(2px, 0);
    }

    100% {
        clip-path: inset(70% 0 10% 0);
        transform: translate(-2px, 0);
    }
}