/* QORE dashboard MVP 0.2.0 — vanilla CSS */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; background: #0d1117; color: #c9d1d9; height: 100%; }
a { color: #58a6ff; text-decoration: none; }
a:hover { text-decoration: underline; }
code, pre { font-family: "JetBrains Mono", Consolas, Menlo, monospace; }

/* ---- Login ---- */
.login-screen { display: flex; align-items: center; justify-content: center; min-height: 100vh; background: radial-gradient(circle at 20% 20%, #161b22 0%, #0d1117 60%); }
.login-card { background: #161b22; border: 1px solid #30363d; border-radius: 12px; padding: 2.5rem 2rem; width: min(380px, 92vw); text-align: center; box-shadow: 0 20px 60px rgba(0,0,0,0.5); }
.login-logo { width: 80px; height: 80px; }
.login-title { margin: 0.6rem 0 0.2rem; font-size: 2rem; letter-spacing: 0.05em; color: #f0f6fc; }
.login-subtitle { margin: 0 0 1.5rem; color: #8b949e; font-size: 0.9rem; }
.login-form { display: flex; flex-direction: column; gap: 0.9rem; text-align: left; }
.login-form label { display: flex; flex-direction: column; gap: 0.3rem; font-size: 0.85rem; color: #8b949e; }
.login-form input { background: #0d1117; border: 1px solid #30363d; color: #c9d1d9; padding: 0.6rem 0.7rem; border-radius: 6px; font-size: 1rem; }
.login-form input:focus { outline: none; border-color: #58a6ff; }
.btn-primary { background: #238636; color: white; border: none; padding: 0.7rem; border-radius: 6px; font-size: 1rem; cursor: pointer; font-weight: 600; transition: background 0.15s; }
.btn-primary:hover { background: #2ea043; }
.login-error { background: #490202; color: #ff7b72; padding: 0.6rem; border-radius: 6px; font-size: 0.85rem; }

/* ---- Layout app (sidebar a scomparsa + pin) ---- */
.sidebar-burger {
    position: fixed; top: 0.5rem; left: 0.5rem; z-index: 60;
    width: 36px; height: 36px; border-radius: 6px;
    background: #161b22; color: #c9d1d9; border: 1px solid #30363d;
    font-size: 1.4rem; line-height: 1; cursor: pointer;
}
.sidebar-burger:hover { background: #1f2937; }
.sidebar {
    position: fixed; top: 0; left: 0; bottom: 0; width: 240px;
    background: #010409; border-right: 1px solid #30363d;
    padding: 1rem 0.6rem; display: flex; flex-direction: column; gap: 1rem;
    transform: translateX(-100%); transition: transform 0.18s ease;
    z-index: 50;
}
.sidebar.open, .sidebar.pinned { transform: translateX(0); }
.sidebar:not(.pinned).open { box-shadow: 4px 0 24px rgba(0, 0, 0, 0.5); }
.sidebar-pin {
    margin-left: auto; background: transparent; border: 1px solid #30363d;
    color: #8b949e; border-radius: 6px; width: 28px; height: 28px;
    cursor: pointer; font-size: 0.9rem; line-height: 1; padding: 0;
    transition: transform 0.1s ease, color 0.1s ease, border-color 0.1s ease;
}
.sidebar-pin.active { color: #58a6ff; border-color: #58a6ff; transform: rotate(-25deg); }
.sidebar-pin:hover { color: #f0f6fc; }
.brand { display: flex; align-items: center; gap: 0.6rem; padding: 0.4rem 0.6rem; }
.brand-logo { width: 36px; height: 36px; }
.brand-name { font-size: 1.4rem; font-weight: 700; color: #f0f6fc; letter-spacing: 0.05em; }
.nav { display: flex; flex-direction: column; gap: 0.15rem; flex: 1; overflow-y: auto; }
.nav-item { display: flex; align-items: center; gap: 0.6rem; padding: 0.5rem 0.7rem; border-radius: 6px; color: #c9d1d9; font-size: 0.92rem; }
.nav-item:hover { background: #161b22; text-decoration: none; }
.nav-item.active { background: #1f6feb33; color: #58a6ff; font-weight: 600; }
.nav-icon { width: 16px; height: 16px; background: #c9d1d9; mask-size: contain; mask-repeat: no-repeat; mask-position: center; -webkit-mask-size: contain; -webkit-mask-repeat: no-repeat; -webkit-mask-position: center; }
.nav-item.active .nav-icon { background: #58a6ff; }
.sidebar-footer { border-top: 1px solid #30363d; padding-top: 0.8rem; }
.user-chip { display: flex; flex-direction: column; padding: 0.5rem 0.7rem; }
.user-chip strong { color: #f0f6fc; font-size: 0.95rem; }
.user-chip small { color: #8b949e; font-size: 0.7rem; margin-top: 0.15rem; }
.btn-logout { margin-top: 0.5rem; width: 100%; background: transparent; color: #ff7b72; border: 1px solid #30363d; padding: 0.45rem; border-radius: 6px; cursor: pointer; }
.btn-logout:hover { background: #161b22; border-color: #ff7b72; }

.main { margin-left: 0; min-height: 100vh; padding: 0.6rem 1.2rem 1.5rem 3.2rem; transition: margin-left 0.18s ease; }
.main.with-sidebar { margin-left: 240px; padding-left: 1.5rem; }
.main.with-sidebar .sidebar-burger { display: none; }
.banner { padding: 0.8rem 1rem; border-radius: 8px; margin-bottom: 1rem; font-size: 0.92rem; }
.banner-warn { background: #5a3a00; color: #ffd24a; border: 1px solid #ffa72f; }

.pill { padding: 0.2rem 0.6rem; border-radius: 999px; font-size: 0.75rem; font-weight: 600; }
.pill-live { background: #033a16; color: #3fb950; }
.pill-soon { background: #312e09; color: #d4a72c; }

.content { display: flex; flex-direction: column; gap: 1.2rem; }
.card { background: #161b22; border: 1px solid #30363d; border-radius: 10px; padding: 1.2rem 1.4rem; }
.card h2 { margin-top: 0; color: #f0f6fc; font-size: 1.2rem; }
.card-sub { color: #8b949e; font-size: 0.85rem; margin: -0.4rem 0 1rem; }
.card-warn { border-color: #ffa72f; }

.profile-grid { display: grid; grid-template-columns: max-content 1fr; gap: 0.5rem 1.5rem; margin: 0; }
.profile-grid dt { color: #8b949e; font-size: 0.85rem; }
.profile-grid dd { margin: 0; color: #c9d1d9; }
.role-badge { display: inline-block; background: #1f6feb33; color: #58a6ff; padding: 0.15rem 0.6rem; border-radius: 999px; font-size: 0.78rem; margin-right: 0.4rem; }

.pwd-form { display: flex; flex-direction: column; gap: 0.7rem; max-width: 380px; }
.pwd-form label { display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.85rem; color: #8b949e; }
.pwd-form input { background: #0d1117; border: 1px solid #30363d; color: #c9d1d9; padding: 0.55rem 0.7rem; border-radius: 6px; }
.msg { padding: 0.5rem 0.7rem; border-radius: 6px; font-size: 0.85rem; }
.msg-ok { background: #033a16; color: #3fb950; }
.msg-err { background: #490202; color: #ff7b72; }

/* ---- Trading ---- */
.grid-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }
.data-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.data-table th, .data-table td { padding: 0.55rem 0.7rem; text-align: left; border-bottom: 1px solid #30363d; }
.data-table th { color: #8b949e; font-weight: 600; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.05em; }
.kv { display: inline-block; margin-right: 0.8rem; font-size: 0.82rem; color: #8b949e; }
.kv em { color: #58a6ff; font-style: normal; font-family: "JetBrains Mono", monospace; }
.feed-log { background: #0d1117; border: 1px solid #30363d; border-radius: 6px; padding: 0.7rem; height: 360px; overflow-y: auto; font-family: "JetBrains Mono", Consolas, monospace; font-size: 0.78rem; line-height: 1.4; }
.feed-log .row { white-space: pre; color: #8b949e; }
.feed-log .row .subj { color: #d4a72c; }
.feed-log .row .ts { color: #58a6ff; }
.feed-log .row.candidate { color: #f0f6fc; background: #1f6feb22; padding: 0.15rem 0.3rem; border-radius: 3px; margin: 0.1rem 0; }

/* ---- Mock layouts (placeholder areas) ---- */
.mock-grid-3col { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; margin-top: 1rem; }
.mock-tile { background: #0d1117; border: 1px dashed #30363d; border-radius: 8px; padding: 1rem; }
.mock-tile h3 { margin-top: 0; font-size: 1rem; color: #f0f6fc; }
.mock-tile ul { padding-left: 1.2rem; color: #8b949e; font-size: 0.85rem; }
.mock-tile li { margin: 0.2rem 0; }

.mock-strategy-lab { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 1rem; min-height: 240px; }
.mock-chat, .mock-code { background: #0d1117; border: 1px dashed #30363d; border-radius: 8px; padding: 1rem; display: flex; flex-direction: column; gap: 0.5rem; }
.mock-msg-user { background: #1f6feb33; color: #c9d1d9; padding: 0.4rem 0.7rem; border-radius: 8px; align-self: flex-end; max-width: 80%; font-size: 0.85rem; }
.mock-msg-ai { background: #161b22; color: #c9d1d9; padding: 0.4rem 0.7rem; border-radius: 8px; align-self: flex-start; max-width: 80%; font-size: 0.85rem; }
.mock-input { margin-top: auto; background: #0d1117; border: 1px solid #30363d; color: #8b949e; padding: 0.5rem; border-radius: 6px; }
.mock-code pre { margin: 0; background: #010409; padding: 0.8rem; border-radius: 6px; font-size: 0.78rem; color: #79c0ff; overflow-x: auto; }

/* ---- Icons (inline SVG via data URL su mask) ---- */
.nav-icon-person { mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M8 8a3 3 0 100-6 3 3 0 000 6zM2 14a6 6 0 0112 0H2z'/></svg>"); -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M8 8a3 3 0 100-6 3 3 0 000 6zM2 14a6 6 0 0112 0H2z'/></svg>"); }
.nav-icon-chart { mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M2 14V2h2v12H2zm4-4V6h2v4H6zm4-7v7h2V3h-2zm4 4v3h-2V7h2z'/></svg>"); -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M2 14V2h2v12H2zm4-4V6h2v4H6zm4-7v7h2V3h-2zm4 4v3h-2V7h2z'/></svg>"); }
.nav-icon-lab { mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M5 2v4L2 12a2 2 0 002 2h8a2 2 0 002-2L11 6V2H5zm2 1h2v4l2 4H5l2-4V3z'/></svg>"); -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M5 2v4L2 12a2 2 0 002 2h8a2 2 0 002-2L11 6V2H5zm2 1h2v4l2 4H5l2-4V3z'/></svg>"); }
.nav-icon-history { mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M8 2a6 6 0 100 12A6 6 0 008 2zm0 1a5 5 0 110 10A5 5 0 018 3zm0 1v4l3 2-.5 1L7 9V4h1z'/></svg>"); -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M8 2a6 6 0 100 12A6 6 0 008 2zm0 1a5 5 0 110 10A5 5 0 018 3zm0 1v4l3 2-.5 1L7 9V4h1z'/></svg>"); }
.nav-icon-stats { mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M1 14h14v1H1zm2-2v-3h2v3H3zm4 0V6h2v6H7zm4 0V3h2v9h-2z'/></svg>"); -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M1 14h14v1H1zm2-2v-3h2v3H3zm4 0V6h2v6H7zm4 0V3h2v9h-2z'/></svg>"); }
.nav-icon-gear { mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M9.4 1l.6 2 1.7.7 2-.5 1.3 2-1.5 1.4v1.8l1.5 1.4-1.3 2-2-.5-1.7.7-.6 2H6.6l-.6-2L4.3 11l-2 .5L1 9.5 2.5 8V6.2L1 4.8l1.3-2 2 .5L6 2.6l.6-2h2.8zM8 5a3 3 0 100 6 3 3 0 000-6z'/></svg>"); -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M9.4 1l.6 2 1.7.7 2-.5 1.3 2-1.5 1.4v1.8l1.5 1.4-1.3 2-2-.5-1.7.7-.6 2H6.6l-.6-2L4.3 11l-2 .5L1 9.5 2.5 8V6.2L1 4.8l1.3-2 2 .5L6 2.6l.6-2h2.8zM8 5a3 3 0 100 6 3 3 0 000-6z'/></svg>"); }
.nav-icon-shield { mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M8 1L2 3v5c0 3.5 2.5 6.5 6 7 3.5-.5 6-3.5 6-7V3L8 1z'/></svg>"); -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M8 1L2 3v5c0 3.5 2.5 6.5 6 7 3.5-.5 6-3.5 6-7V3L8 1z'/></svg>"); }

@media (max-width: 900px) {
    .grid-2col, .mock-strategy-lab { grid-template-columns: 1fr; }
    .sidebar { width: 60px; }
    .brand-name, .nav-label, .user-chip, .btn-logout { display: none; }
    .main { margin-left: 60px; padding: 1rem; }
}