/* ── Stock Portal — shared styles ─────────────────────────── */
:root {
    --ink: #1a1a2e;
    --ink-2: #1e293b;
    --muted: #64748b;
    --muted-2: #94a3b8;
    --line: #e2e8f0;
    --bg: #f0f2f5;
    --card: #fff;
    --accent: #3b82f6;
    --success: #10b981;
    --warn: #f59e0b;
    --danger: #ef4444;
    --orange: #f97316;
}

* { box-sizing: border-box; }

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    background: var(--bg);
    color: var(--ink);
    min-height: 100vh;
}

/* ── NAVBAR ── */
.topnav {
    background: #fff;
    box-shadow: 0 2px 12px rgba(0, 0, 0, .07);
    display: flex;
    align-items: center;
    padding: 0 24px;
    height: 56px;
    position: sticky;
    top: 0;
    z-index: 100;
}
.topnav .brand {
    font-weight: 800;
    font-size: 1.05rem;
    color: var(--ink);
    margin-right: 28px;
    text-decoration: none;
}
.topnav .tabs { display: flex; gap: 4px; }
.topnav .tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 56px;
    padding: 0 18px;
    font-size: .88rem;
    font-weight: 500;
    color: var(--muted);
    text-decoration: none;
    border-bottom: 3px solid transparent;
    transition: color .15s;
}
.topnav .tab:hover { color: var(--ink); }
.topnav .tab.active {
    color: var(--accent);
    border-bottom-color: var(--accent);
    font-weight: 700;
}
.badge-clock {
    background: #e2e8f0;
    color: var(--ink-2);
    font-family: monospace;
    font-size: .72rem;
    padding: .35rem .6rem;
    border-radius: 6px;
}
.avatar {
    width: 26px; height: 26px; border-radius: 50%; object-fit: cover;
}
.avatar-letter {
    width: 26px; height: 26px; border-radius: 50%;
    background: var(--accent); color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: .8rem;
}

/* ── CARDS ── */
.card-pro {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 14px;
    box-shadow: 0 1px 6px rgba(0, 0, 0, .04);
    padding: 20px;
}
.card-dark {
    background: var(--ink-2);
    color: #e2e8f0;
    border-radius: 14px;
    box-shadow: 0 4px 20px rgba(30, 41, 59, .3);
    padding: 20px;
}

/* ── AUTH ── */
.auth-wrap {
    min-height: calc(100vh - 56px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
}
.auth-card {
    width: 100%;
    max-width: 420px;
    background: #fff;
    border-radius: 18px;
    padding: 36px 32px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, .08);
}
.auth-card h1 {
    font-size: 1.6rem;
    font-weight: 800;
    text-align: center;
    margin-bottom: 4px;
}
.auth-card .subtitle {
    color: var(--muted);
    text-align: center;
    font-size: .9rem;
    margin-bottom: 24px;
}
.auth-card .form-label {
    font-size: .72rem;
    font-weight: 700;
    color: var(--muted-2);
    letter-spacing: .08em;
    text-transform: uppercase;
}
.auth-card .form-control {
    border: 1.5px solid #cbd5e1;
    border-radius: 10px;
    font-size: .95rem;
    padding: 11px 14px;
}
.auth-card .btn-primary-solid {
    background: var(--ink-2);
    color: #fff;
    width: 100%;
    border: 0;
    border-radius: 10px;
    padding: 12px;
    font-weight: 700;
    font-size: .95rem;
}
.auth-card .btn-primary-solid:hover { background: #0f172a; }
.auth-card .divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 20px 0;
    color: var(--muted-2);
    font-size: .75rem;
}
.auth-card .divider::before,
.auth-card .divider::after {
    content: ""; flex: 1; border-top: 1px solid var(--line);
}
.btn-google {
    width: 100%;
    background: #fff;
    color: var(--ink);
    border: 1.5px solid var(--line);
    border-radius: 10px;
    padding: 11px;
    font-weight: 600;
    font-size: .9rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    text-decoration: none;
}
.btn-google:hover { background: #f8fafc; color: var(--ink); }

/* ── DASHBOARD ── */
.filter-bar {
    display: flex; flex-wrap: wrap; gap: 10px; align-items: end;
    background: #fff; padding: 14px 18px; border-radius: 12px;
    border: 1px solid var(--line); margin-bottom: 16px;
}
.filter-bar label {
    font-size: .68rem; font-weight: 700; color: var(--muted-2);
    letter-spacing: .08em; text-transform: uppercase; margin-bottom: 3px;
}
.filter-bar input, .filter-bar select {
    border: 1.5px solid #cbd5e1; border-radius: 8px;
    padding: 7px 12px; font-size: .88rem; min-width: 120px;
}

.stock-table { width: 100%; }
.stock-table th {
    background: #f8fafc; font-size: .7rem; font-weight: 700;
    color: var(--muted-2); letter-spacing: .06em;
    text-transform: uppercase; padding: 10px 12px;
    border-bottom: 1px solid var(--line);
}
.stock-table td {
    padding: 10px 12px; border-bottom: 1px solid var(--line);
    font-size: .92rem;
}
.stock-table tr:hover { background: #f8fafc; }
.star-btn {
    background: none; border: 0; font-size: 1.1rem;
    color: #cbd5e1; cursor: pointer;
}
.star-btn.active { color: var(--warn); }
.star-btn:hover { color: var(--warn); }

.pill {
    display: inline-block; padding: 3px 10px; border-radius: 999px;
    font-size: .7rem; font-weight: 700;
}
.pill-green { background: #d1fae5; color: #065f46; }
.pill-red { background: #fee2e2; color: #991b1b; }
.pill-gray { background: #e2e8f0; color: var(--ink-2); }

/* ── PORTFOLIO ── */
.kpi-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 18px; }
.kpi { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 16px; }
.kpi .k-label {
    font-size: .65rem; font-weight: 700; color: var(--muted-2);
    letter-spacing: .08em; text-transform: uppercase;
}
.kpi .k-value { font-size: 1.4rem; font-weight: 800; margin-top: 4px; }
.kpi .k-sub { font-size: .75rem; color: var(--muted); }
@media (max-width: 768px) { .kpi-strip { grid-template-columns: repeat(2, 1fr); } }

.positive { color: var(--success); }
.negative { color: var(--danger); }

/* ── EMPTY STATES ── */
.empty-state {
    text-align: center; padding: 60px 20px; color: var(--muted);
}
.empty-state .bi { font-size: 3rem; opacity: .4; }