/* ============================================================
   STELION Manager — dashboard claro
   Paleta blanco / negro / verde #7cd11a — alineada con la app
   (mobile/src/ui/theme.ts), la landing y stelion.com.uy.
   ============================================================ */
:root {
    /* Superficies */
    --m-bg: #f0f5fa;
    --m-card: #ffffff;
    --m-card-hover: #f6f9fc;
    --m-ink: #111111;              /* negro de marca: navbar */
    --m-border: #d1d5db;
    --m-border-soft: #e5e9ef;

    /* Texto */
    --m-text: #1e293b;
    --m-dim: #6f6a6a;
    --m-on-ink: #ffffff;
    --m-on-ink-dim: #b9bfc7;

    /* Acento */
    --m-accent: #7cd11a;                        /* verde puro: fills, barras, bordes */
    --m-accent-soft: rgba(124, 209, 26, 0.12);
    --m-accent-line: rgba(124, 209, 26, 0.38);
    --m-accent-dark: #1a2e05;                   /* texto SOBRE el verde */
    --m-accent-ink: #3d7a08;                    /* verde legible sobre blanco */

    /* Estados — mismos tonos que la app */
    --m-green: #16a34a;
    --m-amber: #d97706;
    --m-red: #dc2626;

    --m-font: 'Inter', system-ui, -apple-system, sans-serif;
    --m-display: 'Space Grotesk', var(--m-font);
}

body {
    background-color: var(--m-bg);
    color: var(--m-text);
    font-family: var(--m-font);
    -webkit-font-smoothing: antialiased;
}

.manager-bg {
    background-color: var(--m-bg);
    color: var(--m-text);
}

h2, h3, h4, h5, h6 {
    font-family: var(--m-display);
    color: var(--m-ink);
    letter-spacing: -0.01em;
}

/* ---------- Navbar (negra) ---------- */
.manager-navbar {
    background: var(--m-ink) !important;
    padding-top: 0.6rem;
    padding-bottom: 0.6rem;
}

.manager-navbar .navbar-brand {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-family: var(--m-display);
    font-weight: 700;
    color: var(--m-on-ink);
}

/* El logo es negro sobre transparente: invertido queda blanco sobre la navbar */
.manager-navbar .navbar-brand img {
    height: 30px;
    width: auto;
    filter: invert(1);
}

.manager-navbar .navbar-brand .brand-tag {
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--m-accent);
    border: 1px solid rgba(124, 209, 26, 0.45);
    border-radius: 999px;
    padding: 0.1rem 0.55rem;
}

.manager-navbar .nav-link {
    color: var(--m-on-ink-dim) !important;
    font-size: 0.92rem;
    font-weight: 500;
    transition: color 0.2s ease;
}

.manager-navbar .nav-link:hover,
.manager-navbar .nav-link.active {
    color: var(--m-accent) !important;
}

.manager-navbar .navbar-toggler {
    border-color: rgba(255, 255, 255, 0.25);
}

.manager-navbar .navbar-toggler-icon {
    filter: invert(1) grayscale(1) brightness(2);
}

/* ---------- Page heading ---------- */
.dash-head { margin-bottom: 1.6rem; }
.dash-head h2 { font-size: 1.7rem; font-weight: 700; margin-bottom: 0.15rem; }
.dash-head p { color: var(--m-dim); margin: 0; font-size: 0.95rem; }

/* ---------- Cards (override Bootstrap) ---------- */
.card {
    background: var(--m-card) !important;
    border: 1px solid var(--m-border) !important;
    border-radius: 16px !important;
    color: var(--m-text);
    box-shadow: 0 1px 3px rgba(17, 17, 17, 0.04);
}

.card-title { color: var(--m-ink); font-family: var(--m-display); }

/* ---------- Stat cards ---------- */
.stat-card {
    position: relative;
    overflow: hidden;
    height: 100%;
}

.stat-card .card-body { padding: 1.25rem 1.35rem; }

.stat-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--m-dim);
    margin-bottom: 0.6rem;
}

.stat-icon {
    width: 30px;
    height: 30px;
    border-radius: 9px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
    background: var(--m-accent-soft);
    color: var(--m-accent-ink);
}

.stat-value {
    font-family: var(--m-display);
    font-size: 1.85rem;
    font-weight: 700;
    line-height: 1.1;
    color: var(--m-ink);
}

.stat-card.accent { border-color: var(--m-accent-line) !important; }
.stat-card.accent::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(120% 100% at 100% 0%, rgba(124, 209, 26, 0.14), transparent 60%);
    pointer-events: none;
}
.stat-card.accent .stat-value { color: var(--m-accent-ink); }

.stat-card.green .stat-icon { background: rgba(22, 163, 74, 0.12); color: var(--m-green); }
.stat-card.amber .stat-icon { background: rgba(217, 119, 6, 0.12); color: var(--m-amber); }

.stat-note {
    margin-top: 0.5rem;
    font-size: 0.72rem;
    color: var(--m-dim);
}

/* ---------- Paneles redimensionables ---------- */
.resizable-panel {
    resize: both;
    overflow: auto;
    min-width: 240px;
    min-height: 200px;
    max-width: 100%;
}

/* Hace más visible la manija nativa de resize en la esquina. */
.resizable-panel::-webkit-resizer { background: var(--m-accent-soft); }

/* ---------- Recibo clickeable + desglose ---------- */
.receipt-link {
    background: none;
    border: none;
    padding: 0;
    color: var(--m-accent-ink);
    font: inherit;
    cursor: pointer;
    text-decoration: underline dotted;
    text-underline-offset: 3px;
}

.receipt-link:hover { color: var(--m-ink); }

.tx-detail-row > td { background: rgba(124, 209, 26, 0.06); padding: 0 !important; }

.tx-detail {
    padding: 0.85rem 1.1rem;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    max-width: 420px;
}

.tx-detail .d-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    font-size: 0.85rem;
    color: var(--m-dim);
}

.tx-detail .d-row strong { color: var(--m-text); font-weight: 600; }
.tx-detail .d-row.subtotal { border-top: 1px solid var(--m-border); padding-top: 0.3rem; }
.tx-detail .d-row.muted { font-size: 0.78rem; }
.tx-detail .d-row.total-stelion strong { color: var(--m-amber); }
.tx-detail .d-row.total-host strong { color: var(--m-accent-ink); }
.tx-detail .cap-applied { color: var(--m-amber); font-weight: 600; }

/* ---------- Chargers / progress ---------- */
.charger-line { color: var(--m-dim); font-size: 0.92rem; margin-bottom: 0.3rem; }
.charger-line strong { color: var(--m-ink); font-size: 1.05rem; }

.progress {
    background-color: var(--m-bg);
    border: 1px solid var(--m-border);
    border-radius: 999px;
    height: 12px;
    overflow: hidden;
}
.progress-bar.bg-danger { background-color: var(--m-amber) !important; }   /* ocupados */
.progress-bar.bg-info { background-color: var(--m-accent) !important; }    /* disponibles */
.progress-bar.bg-secondary { background-color: #cbd2da !important; }       /* offline */

/* ---------- Table ---------- */
.table {
    color: var(--m-text);
    --bs-table-bg: transparent;
    --bs-table-color: var(--m-text);
    margin-bottom: 0;
}
.table thead th {
    color: var(--m-dim);
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    border-bottom: 1px solid var(--m-border);
    background: transparent;
}
/* thead .table-light de Bootstrap dentro de nuestras cards */
.table thead.table-light th {
    background: var(--m-bg);
    color: var(--m-dim);
}
.table td {
    border-color: var(--m-border-soft);
    vertical-align: middle;
    color: var(--m-text);
}
.table-sm td, .table-sm th { padding: 0.7rem 0.6rem; }
.table.table-hover tbody tr:hover > * {
    background: var(--m-card-hover);
    color: var(--m-text);
}

tr.active-row > * { background: rgba(124, 209, 26, 0.09); transition: background 200ms ease-in-out; }

.amount-cell { font-variant-numeric: tabular-nums; }
/* `.table td` fija el color de la celda, asi que hace falta ganarle en especificidad. */
.table td.estimated-amount { font-weight: 700; color: var(--m-accent-ink); }

/* ---------- Badges ---------- */
.badge {
    font-weight: 600;
    padding: 0.4em 0.7em;
    border-radius: 999px;
}
.badge.bg-primary { background-color: var(--m-accent-soft) !important; color: var(--m-accent-ink) !important; }
.badge.bg-success { background-color: rgba(22, 163, 74, 0.14) !important; color: var(--m-green) !important; }
.badge.bg-warning { background-color: rgba(217, 119, 6, 0.14) !important; color: var(--m-amber) !important; }
.badge.bg-danger { background-color: rgba(220, 38, 38, 0.12) !important; color: var(--m-red) !important; }
.badge.bg-info { background-color: var(--m-accent-soft) !important; color: var(--m-accent-ink) !important; }
.badge.bg-secondary { background-color: rgba(17, 17, 17, 0.08) !important; color: var(--m-dim) !important; }

/* ---------- Buttons ---------- */
.btn-primary {
    background-color: var(--m-accent);
    border-color: var(--m-accent);
    color: var(--m-accent-dark);
    font-weight: 600;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
    background-color: #6fbd15;
    border-color: #6fbd15;
    color: var(--m-accent-dark);
}

.btn-outline-secondary {
    color: var(--m-ink);
    border-color: var(--m-border);
}
.btn-outline-secondary:hover {
    background-color: var(--m-ink);
    border-color: var(--m-ink);
    color: var(--m-on-ink);
}

.btn-outline-danger {
    color: var(--m-red);
    border-color: rgba(220, 38, 38, 0.45);
}
.btn-outline-danger:hover {
    background-color: var(--m-red);
    border-color: var(--m-red);
    color: #fff;
}

.text-muted { color: var(--m-dim) !important; }
.text-dark { color: var(--m-text) !important; }
.text-primary { color: var(--m-ink) !important; }

/* ---------- Formularios ---------- */
.form-label { color: var(--m-text); font-weight: 500; font-size: 0.9rem; }
.form-text { color: var(--m-dim); }

.form-control, .form-select {
    border-color: var(--m-border);
    color: var(--m-text);
    border-radius: 10px;
}
.form-control:focus, .form-select:focus {
    border-color: var(--m-accent);
    box-shadow: 0 0 0 0.2rem var(--m-accent-soft);
}

.form-check-input:checked {
    background-color: var(--m-accent);
    border-color: var(--m-accent);
}
.form-check-input:focus {
    border-color: var(--m-accent);
    box-shadow: 0 0 0 0.2rem var(--m-accent-soft);
}

.input-group-text {
    background-color: var(--m-bg);
    border-color: var(--m-border);
    color: var(--m-dim);
}

/* ---------- Alerts / code (OCPP ready) ---------- */
.alert-info {
    background-color: var(--m-accent-soft);
    border-color: var(--m-accent-line);
    color: var(--m-text);
}
.alert-danger {
    background-color: rgba(220, 38, 38, 0.08);
    border-color: rgba(220, 38, 38, 0.35);
    color: var(--m-red);
}

.bg-light { background-color: var(--m-bg) !important; }

code { color: var(--m-accent-ink); }

/* ---------- Spinner / active sessions ---------- */
.badge-spinner {
    display: inline-block;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    border: 2px solid rgba(124, 209, 26, 0.3);
    border-top-color: var(--m-accent-ink);
    animation: spin 1s linear infinite;
    margin-right: 6px;
    vertical-align: middle;
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.mini-progress {
    height: 6px;
    background: linear-gradient(90deg, rgba(124, 209, 26, 0.15) 0%, rgba(124, 209, 26, 0.75) 50%, rgba(124, 209, 26, 0.15) 100%);
    background-size: 200% 100%;
    animation: prog 1.2s linear infinite;
    border-radius: 6px;
    margin-top: 6px;
}

@keyframes prog {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

.active-session-time { font-size: 0.85rem; color: var(--m-dim); }