/* ArbitrageLab shared styling — matches the DARKLY palette used by the
   related_project dashboard (sidebar #1a1a1a, borders #444, muted footer). */

body {
    background-color: #222;        /* DARKLY body background */
    color: #e6e6e6;
}

/* --- Brand (logo + wordmark), shared by login + sidebar ------------------ */
.brand {
    display: flex;
    align-items: center;
    gap: .6rem;
}
.brand img { height: 40px; width: auto; }
.brand .brand-name {
    font-weight: 700;
    font-size: 1.15rem;
    color: #fff;
    letter-spacing: .3px;
}

/* --- Login card ---------------------------------------------------------- */
.login-wrapper {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}
.login-card {
    background-color: #1a1a1a;
    border: 1px solid #444;
    border-radius: .75rem;
    padding: 2rem 2.25rem;
    width: 320px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, .45);
}
.login-card .brand { justify-content: center; margin-bottom: 1.5rem; }

/* --- App shell: fixed sidebar + content (mirrors the dashboard) ---------- */
#sidebar {
    width: 15rem;
    position: fixed; top: 0; left: 0; bottom: 0; z-index: 1000;
    background-color: #1a1a1a;
    border-right: 1px solid #444;
    padding: 1rem .75rem;
    display: flex; flex-direction: column;
}
#page-content { margin-left: 15rem; padding: 2rem; }

#sidebar .sidebar-footer {
    margin-top: auto;
    padding-top: 1rem;
    border-top: 1px solid #333;
    font-size: .78rem;
    color: #888;
    line-height: 1.35;
}
#sidebar .sidebar-footer a { color: #9bb8d6; text-decoration: none; }
#sidebar .sidebar-footer a:hover { color: #cfe0f2; text-decoration: underline; }

/* Sidebar nav items (mirrors the related_project dashboard) */
#sidebar .sidebar-nav .nav-link {
    display: flex;
    align-items: center;
    gap: .8rem;
    padding: .7rem .85rem;
    margin-bottom: .35rem;
    border-radius: .6rem;
    color: #ccc;
    line-height: 1.15;
}
#sidebar .sidebar-nav .nav-link:hover { background-color: #2c2c2c; color: #fff; }
#sidebar .sidebar-nav .nav-link.active {
    background-color: #454545;
    color: #fff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .35);
}
#sidebar .sidebar-nav .nav-link i {
    flex: 0 0 1.4rem;
    width: 1.4rem;
    font-size: 1.3rem;
    text-align: center;
}

/* DataTable: keep native filter inputs + pagination legible on the dark theme */
.dash-table-container .dash-filter input,
.dash-table-container input.dash-filter {
    color: #e6e6e6 !important;
}
.dash-table-container .dash-filter input::placeholder { color: #777 !important; }
.dash-table-container .previous-next-container,
.dash-table-container .page-number,
.dash-table-container .column-actions { color: #e6e6e6; }
.dash-table-container .dash-spreadsheet-menu .show-hide,
.dash-table-container .previous-next-container button { color: #9bb8d6; }