/* Stiluri partajate de module — login, dashboard, grafice, rapoarte, sync */

/* ---------- Login: o pagină de registru pe birou ---------- */
.login-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-sidebar);
    padding: var(--sp-4);
}

.login-card {
    width: 100%;
    max-width: 380px;
    background: var(--color-surface);
    border-radius: var(--radius-modal);
    box-shadow: var(--shadow-modal);
    padding: var(--sp-6) var(--sp-6) var(--sp-5);
    border-left: 3px double rgba(var(--color-rule-rgb), 0.5);
}

.login-brand {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-3);
    margin-bottom: var(--sp-6);
}
.login-brand .sidebar-brand-mark { width: 36px; height: 36px; font-size: var(--fs-14); }
.login-title { font-size: var(--fs-20); font-weight: 700; letter-spacing: -0.01em; }
.login-card .form-control { padding: 11px 12px; }
.login-card .btn-lg { margin-top: var(--sp-2); }

.login-error {
    background: var(--color-danger-soft);
    color: var(--color-danger);
    border: 1px solid rgba(var(--color-danger-rgb), 0.3);
    border-radius: var(--radius-input);
    padding: var(--sp-2) var(--sp-3);
    font-size: var(--fs-12);
    margin-bottom: var(--sp-3);
}

.login-footer {
    margin-top: var(--sp-5);
    text-align: center;
    color: var(--color-ink-faint);
    font-size: var(--fs-11);
    font-family: var(--font-mono);
}

/* ---------- Grafice ---------- */
.chart-card .card-body { min-height: 260px; position: relative; }
.chart-canvas-wrap { position: relative; height: 260px; }
.charts-grid { display: grid; grid-template-columns: 3fr 2fr; gap: var(--sp-4); }

.chart-legend-inline {
    display: flex;
    gap: var(--sp-4);
    flex-wrap: wrap;
    font-size: var(--fs-12);
    color: var(--color-ink-soft);
}

/* ---------- Dashboard ---------- */
.dash-grid { display: grid; grid-template-columns: 2fr 1fr; gap: var(--sp-4); }

.activity-item {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-3);
    padding: var(--sp-2) 0;
    border-bottom: 1px solid var(--color-border-soft);
    font-size: var(--fs-12);
}
.activity-item:last-child { border-bottom: none; }
.activity-icon {
    width: 28px; height: 28px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.activity-icon .material-icons { font-size: 15px; }
.activity-time { color: var(--color-ink-faint); font-family: var(--font-mono); font-size: var(--fs-11); }

/* ---------- Sync status ---------- */
.sync-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-2);
    padding: var(--sp-2) 0;
    border-bottom: 1px solid var(--color-border-soft);
    font-size: var(--fs-12);
}
.sync-row:last-child { border-bottom: none; }
.sync-row .sync-name { font-weight: 600; }
.sync-row .sync-time { color: var(--color-ink-faint); font-family: var(--font-mono); font-size: var(--fs-11); }

.sync-indicator {
    width: 8px; height: 8px;
    border-radius: 50%;
    display: inline-block;
    margin-right: 6px;
}
.sync-indicator.ok { background: var(--color-success); }
.sync-indicator.stale { background: var(--color-warning); }
.sync-indicator.error { background: var(--color-danger); }
.sync-indicator.running { background: var(--color-info); animation: pulse 1.2s ease infinite; }
@keyframes pulse { 50% { opacity: 0.35; } }

/* ---------- Rapoarte: P&L cu linii de registru ---------- */
.pl-line { display: flex; justify-content: space-between; padding: 7px 0; font-size: var(--fs-13); border-bottom: 1px solid var(--color-border-soft); }
.pl-line .pl-value { font-family: var(--font-mono); font-weight: 500; }
.pl-line.pl-total {
    border-top: 3px double var(--color-border-strong);
    border-bottom: none;
    font-weight: 700;
    padding-top: 10px;
}
.pl-line.pl-section { font-weight: 600; color: var(--color-ink-soft); border-bottom: none; padding-bottom: 2px; }
.pl-line .pl-indent { padding-left: var(--sp-4); color: var(--color-ink-soft); }

/* Comparativ: delta chips */
.delta { font-family: var(--font-mono); font-size: var(--fs-11); font-weight: 600; }
.delta.up { color: var(--color-success); }
.delta.down { color: var(--color-danger); }
.delta.flat { color: var(--color-ink-faint); }

/* ---------- Reglări: părți și flux ---------- */
.debt-parties { display: flex; align-items: center; gap: var(--sp-2); font-weight: 600; }
.debt-parties .material-icons { font-size: 15px; color: var(--color-ink-faint); }

/* ---------- Progres / bare mici ---------- */
.mini-bar {
    height: 6px;
    background: var(--color-neutral-soft);
    border-radius: 3px;
    overflow: hidden;
}
.mini-bar > span { display: block; height: 100%; border-radius: 3px; background: var(--color-accent); }

/* ---------- IBAN / cod ---------- */
.code-chip {
    font-family: var(--font-mono);
    font-size: var(--fs-11);
    background: var(--color-surface-subtle);
    border: 1px solid var(--color-border-soft);
    border-radius: 4px;
    padding: 1px 6px;
    letter-spacing: 0;
}