/* ===== THEME GLOBAL DARK ===== */

:root {
    --accent: #fb923c;              /* portocaliul tău de accent */
    --bg-main: #020617;              /* fundal principal */
    --bg-gradient-center: #0f172a;   /* pentru radial gradient */
    --bg-card: rgba(15, 23, 42, 0.96);
    --bg-card-soft: rgba(15, 23, 42, 0.85);
    --border-subtle: rgba(148, 163, 184, 0.25);

    --text-main: #e5e7eb;            /* text normal */
    --text-muted: #9ca3af;
    --text-accent: #fb923c;

    --btn-gradient-from: #2563eb;
    --btn-gradient-to:   #4f46e5;

    --radius-lg: 24px;
    --radius-md: 16px;
    --shadow-soft: 0 24px 60px rgba(15, 23, 42, 0.7);
    --transition-fast: 0.18s ease-out;
    --font-main: system-ui, -apple-system, BlinkMacSystemFont, "SF Pro Text",
                 "Segoe UI", sans-serif;
}

html, body {
    margin: 0;
    padding: 0;
    min-height: 100vh;
    font-family: var(--font-main);
    color: var(--text-main);
}

body{
  margin: 0;
  background: none; /* mutăm fundalul pe pseudo-element */
  position: relative;
}

body::before{
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;

  background:
    radial-gradient(circle at top left, #2a4974 0, #020617 65%),
    radial-gradient(circle at bottom right, #17345c 0, #020617 50%);

  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

/* pentru texte mai mici sub titluri */
body, p, label, input, select, button, table {
    font-size: 14px;
}

/* ===== Buton primar global ===== */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.55rem 1.6rem;
    border-radius: 20px;
    border: 0;
    outline: none;
    cursor: pointer;

    font-weight: 500;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    font-size: 12px;

    color: #e5e7eb;
    background-image: linear-gradient(
        90deg,
        #38bdf8,
        #6366f1
    );
    box-shadow: 0 10px 22px rgba(37, 99, 235, 0.6);
    transition:
        transform 0.08s ease,
        box-shadow  0.08s ease,
        filter 0.08s ease,
        background-position 0.2s ease-out;
    background-size: 200% 200%;
    background-position: 0% 50%;
    text-decoration: none;
}

.btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 15px 25px rgba(37, 99, 235, 0.7);
    filter: brightness(1.08);
}

.btn:active {
    transform: translateY(0);
    box-shadow: 0 5px 14px rgba(15, 23, 42, 0.8);
    filter: brightness(0.96);
}

.btn[disabled],
.btn.disabled {
    opacity: 0.55;
    cursor: default;
    box-shadow: none;
}

/* ===== Card / panou standard ===== */

.app-card {
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-subtle);
    box-shadow: var(--shadow-soft);
    padding: 1.75rem 2rem;
    backdrop-filter: blur(16px);
}

/* pentru carduri mai mici (ex: secțiunile din Opțiuni) */
.app-card--compact {
    padding: 1.25rem 1.6rem;
}

/* titlu în card */
.app-card h2,
.app-card h3 {
    margin-top: 0;
    margin-bottom: 1.1rem;
    font-size: 16px;
    text-transform: uppercase;
    color: #fb923c;
}


/* ===== Floating top navigation ===== */

.top-nav {
    position: sticky;
    top: 1rem;
    z-index: 50;
    display: flex;
    justify-content: center;
    pointer-events: none;  /* bara „plutește” deasupra, dar inner rămâne clicabil */
}

.top-nav-inner {
    pointer-events: auto;
    max-width: 1100px;
    width: calc(100% - 3rem);
    padding: 0.55rem 1.6rem;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;

    background: var(--bg-card);
    border-radius: 999px;
    border: 1px solid var(--border-subtle);
    box-shadow: var(--shadow-soft);
    backdrop-filter: blur(18px);
}

/* stânga – logo + nume aplicație */

.top-nav-left {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.top-nav-logo img {
    height: 44px;         /* logo puțin mai mare, păstrează proporțiile */
    width: auto;
    display: block;
}


.top-nav-appname {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
}

.top-nav-title {
    font-size: 11px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--text-accent);
}

.top-nav-subtitle {
    font-size: 11px;
    color: var(--text-muted);
}

/* centrul – linkurile de meniu */

.top-nav-links {
    display: flex;
    align-items: center;
    gap: 1.4rem;
    font-size: 12px;
}

.top-nav-links a {
    position: relative;
    margin: 0 18px;              /* puțin mai mult spațiu între linkuri */
    font-size: 14px;             /* +2px față de 12, de ex. */
    font-weight: 500;
    text-transform: uppercase;   /* ALL CAPS */
    letter-spacing: 0.08em;      /* puțin spațiu între litere */
    color: var(--text-muted);
    text-decoration: none;
    padding-bottom: 4px;
    transition: color 0.2s ease, opacity 0.2s ease;
}


.top-nav-links a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    height: 2px;
    width: 0;
    background: var(--accent);   /* linia în culoare accent */
    border-radius: 999px;
    transition: width 0.2s ease;
}

.top-nav-links a:hover {
    color: var(--text-main);
}

.top-nav-links a:hover::after {
    width: 100%;
}

.top-nav-links a.active {
    color: var(--text-main);
}

.top-nav-links a.active::after {
    width: 100%;
}

/* dreapta – user + icon logout */

.top-nav-right {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 12px;
}

.top-nav-user {
    font-size: 13px;
    color: var(--text-muted);
    margin-right: 12px;
}

.top-nav-logout {
    width: 26px;
    height: 26px;
    border-radius: 999px;
    border: 1px solid rgba(248, 113, 113, 0.6);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    text-decoration: none;
    color: #fecaca;
    background: radial-gradient(circle at 30% 0%, #ef4444 0, transparent 55%);
    box-shadow: 0 0 0 rgba(239, 68, 68, 0.0);
    transition:
        box-shadow var(--transition-fast),
        transform var(--transition-fast),
        background var(--transition-fast),
        border-color var(--transition-fast);
}

.top-nav-logout:hover {
    transform: translateY(-1px);
    box-shadow: 0 0 16px rgba(239, 68, 68, 0.75);
    border-color: rgba(248, 113, 113, 0.9);
}

.top-nav-logout:active {
    transform: translateY(0);
    box-shadow: 0 0 8px rgba(15, 23, 42, 0.9);
}

/* responsive – pe ecrane mai mici micșorăm puțin nav-ul */

@media (max-width: 900px) {
    .top-nav-inner {
        padding-inline: 1rem;
        gap: 1rem;
    }

    .top-nav-links {
        gap: 0.9rem;
        font-size: 12px;
    }

    .top-nav-subtitle {
        display: none;
    }
}

@media (max-width: 640px) {
    .top-nav-inner {
        flex-wrap: wrap;
        row-gap: 0.5rem;
    }

    .top-nav-left {
        flex: 1 1 100%;
        justify-content: center;
    }

    .top-nav-links {
        flex-wrap: wrap;
        justify-content: center;
    }

    .top-nav-right {
        display: none; /* la nevoie putem afișa doar icon logout */
    }
}



/* =========================
   BASE UI
   ========================= */

h1, h2, h3{
  margin:0 0 10px 0;
  font-weight:600;
}

h2{
  font-size:20px;
}

h3{
  font-size:16px;
}

/* Container generic pentru pagini */
.page-wrap{
  max-width:1000px;
  margin:0 auto;
}

/* Tabele generice */
table{
  border-collapse:collapse;
  width:100%;
}

th, td{
  font-size:13px;
}

/* Form controls generice */
input[type="text"],
input[type="number"],
input[type="password"],
input[type="email"],
select{
  font:inherit;
  padding:3px 6px;
  border:1px solid #ccc;
  border-radius:3px;
  box-sizing:border-box;
}

/* Modal editare tranzactie */
#editModal{
  display:none;
  position:fixed;
  z-index:999;
  left:0; top:0;
  width:100%; height:100%;
  background:rgba(0,0,0,0.4);
}

#editModalContent{
  background:#fff;
  padding:15px;
  max-width:600px;
  margin:60px auto;
  border:1px solid #ccc;
}

.edit-icon{
  text-decoration:none;
  font-size:18px;
}

/* Spacing filtre */
.filters-year{
  margin-bottom:10px;
}

.filters-form{
  margin-bottom:10px;
}

/* (opțional, dar util pentru ordine) */
.summary{
  margin-bottom:10px;
}

/* Linkuri ani */
.year-link{
  font-weight: normal;
}

.year-link.active{
  font-weight: bold;
}

/* =========================
   OPTIONS PAGE
   ========================= */

.options-page{
  display:flex;
  padding-top: 60px;  /* distanță sub nav-bar */
  padding-bottom: 40px;
  justify-content:center;
}

.options-wrap{
  width:100%;
  max-width:1100px;
  text-align:center;
}

.options-section{
  border:1px solid #ddd;
  padding:18px;
  margin:14px auto;
}

.options-title{
  padding: 10px 0px;
  margin:0 0 14px 0;
  color: #fb923c;
  
}

.options-card {
    width: min(1120px, 100% - 40px);
    padding: 1rem 0.8rem 1.5rem;
    margin: 0 auto 32px;               /* centrat + spațiu între carduri */
    border: 1px solid rgba(148, 163, 184, 0.25);
    border-radius: 32px;               /* la fel ca nav-bar */
    background: radial-gradient(circle at top left, #111827, #020617);
    box-shadow: 0 20px 60px rgba(15, 23, 42, 0.75);
}

/* Account block */
.account-box{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
}

.avatar {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  overflow: hidden;
  margin: 0 auto 12px auto;
  box-shadow: 0 18px 45px rgba(15, 23, 42, 0.85);
  border: 2px solid rgba(248, 250, 252, 0.08);
}

.avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}


.account-name{
  font-weight:bold;
  font-size:18px;
}

.account-sub{
  opacity:0.7;
}

.account-actions{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  margin-top:8px;
}

/* Admin buttons layout */
.admin-actions{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
}

/* =========================
   MODALS (generic)
   ========================= */

.modal-overlay{
  display:none;
  position:fixed;
  z-index:999;
  left:0; top:0;
  width:100%; height:100%;
  background:rgba(0,0,0,0.4);
}

/* --- Modal card generic (add/edit rule) --- */

.modal-card {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 350px;
  max-width: 90%;
  background: radial-gradient(circle at top left, #1f2937, #020617);
  border-radius: 24px;
  border: 1px solid rgba(148, 163, 184, 0.25);
  box-shadow:
    0 20px 40px rgba(0, 0, 0, 0.7),
    0 0 0 1px rgba(15, 23, 42, 0.8);
  padding: 28px 32px 24px;
  color: #e5e7eb;
  font-family: inherit;
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
}

.modal-title {
  margin: 0;
  font-size: 16px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #f97316; /* accent portocaliu */
}

.modal-actions {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  margin-top: 20px;
}

.modal-actions .btn{
  height: 38px;
  padding: 0 16px;
  border-radius: 999px;
  font-size: 10px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
}

.modal-close-btn {
  background: transparent;
  border: none;
  color: #9ca3af;
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  padding: 4px 6px;
  border-radius: 999px;
  transition: background 0.2s, color 0.2s;
}

.modal-close-btn:hover {
  background: rgba(148, 163, 184, 0.15);
  color: #e5e7eb;
}

/* Form fields in modal – doar mici ajustări */
.modal-card form p {
  margin-bottom: 14px;
}

/* Etichete deasupra câmpurilor */
.modal-card label {
  display: block;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #9ca3af;
  margin-bottom: 4px;
}

/* Câmpuri text / număr / parolă din modale */
.modal-card input[type="text"],
.modal-card input[type="number"],
.modal-card input[type="password"] {
  width: 100%;
  background: rgba(15, 23, 42, 0.95);
  border: 1px solid #1f2937;              /* stroke fin pentru toate câmpurile */
  border-radius: 10px;
  padding: 9px 12px;
  font-size: 14px;
  color: #e5e7eb;
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.modal-card select {
  width: 100%;
  background: rgba(15, 23, 42, 0.95);
  border: 1px solid #1f2937;              /* același stroke subtil */
  border-radius: 10px;
  padding: 9px 12px;
  font-size: 14px;
  color: #e5e7eb;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: linear-gradient(90deg, #1e293b, #020617);
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 10px 6px;
}


/* săgeată personalizată portocalie pentru select-uri */
.modal-select,
.rules-table select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  position: relative;
  background-image:
    linear-gradient(45deg, transparent 50%, #f97316 50%),
    linear-gradient(135deg, #f97316 50%, transparent 50%);
  background-position:
    calc(100% - 18px) calc(50% - 4px),
    calc(100% - 12px) calc(50% - 4px);
  background-size: 7px 7px, 7px 7px;
  background-repeat: no-repeat;
  padding-right: 32px; /* loc pentru săgeată */
}

/* păstrăm glow-ul de focus deja definit pe .modal-select,
   doar ne asigurăm că nu se pierde săgeata */
.modal-select:focus,
.rules-table select:focus {
  background-image:
    linear-gradient(45deg, transparent 50%, #f97316 50%),
    linear-gradient(135deg, #f97316 50%, transparent 50%);
}


/* Placeholder mai discret */
.modal-card input::placeholder {
  color: #6b7280;
}

/* Stare de focus – efect “neon” albastru + accent portocaliu ușor */
.modal-card input[type="text"]:focus,
.modal-card input[type="number"]:focus,
.modal-card input[type="password"]:focus,
.modal-card select:focus {
  background: #020617;
  border: 1px;
  border-color: #f97316;                       /* stroke 1px în culoarea accent */
  box-shadow:
    0 0 0 1px #f97316,                         /* outline subțire, 1px */
    0 0 18px rgba(249, 115, 22, 0.35);         /* glow portocaliu mai fin */
}


/* Checkbox-ul "Activă" să nu fie afectat de stilurile de mai sus */
.modal-card input[type="checkbox"] {
  width: auto;
  margin-right: 6px;
}


.modal-card .form-row {
  margin-bottom: 12px;
}

.modal-card input[type="text"],
.modal-card input[type="number"],
.modal-card select {
  width: 100%;
  box-sizing: border-box;
}

/* Ascunde săgețile standard pentru input number (Chrome/Firefox) */

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input[type="number"] {
  -moz-appearance: textfield;
}


.dashboard-grid { display: grid; gap: 16px; }

.card {
  border: 1px solid #ddd;
  padding: 16px;
  border-radius: 10px;
}

.two-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

.mini-card {
  border: 1px solid #eee;
  padding: 12px;
  border-radius: 10px;
}

.label { font-size: 12px; opacity: 0.7; }
.value { font-size: 20px; font-weight: 700; }

.tva-table { width: 100%; border-collapse: collapse; }
.tva-table th, .tva-table td { border: 1px solid #ddd; padding: 8px; }

.placeholder {
  border: 1px dashed #bbb;
  padding: 18px;
  border-radius: 10px;
  opacity: 0.7;
}

/* =========================
   RULES TABLE (Options)
   ========================= */

.rules-toolbar{
  margin-bottom: 10px;
}

.rules-table-wrapper {
    max-width: 100%;
    margin: 0 0; /* centrat în card */
    overflow-x: auto;
}

.rules-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}

.rules-table th,
.rules-table td {
    padding: 6px 8px;
}

/* Zebra shading pentru tabelul de reguli */
.rules-table tbody tr:nth-child(even) {
    background-color: rgba(28, 40, 56, 0.7);
    /* randurile 2,4,6,... */
}

.rules-table tbody tr:nth-child(odd) {
    background-color: transparent; /* randurile 1,3,5,... raman ca acum */
}

/* coloane procente în tabelul de import */
.rules-table .col-percent {
  width: 90px;
}


.rules-table .input-percent {
  width: 72px;
  text-align: right;
  padding-right: 12px;
}

/* Coloane procente – mai înguste ca să lase loc descrierii */

.rules-table .col-percent {
  width: 90px;
}

.rules-table td:nth-child(6) input[type="number"],
.rules-table td:nth-child(7) input[type="number"],
.rules-table td:nth-child(8) input[type="number"] {
  width: 72px;
  text-align: right;
  padding-right: 12px;
}

/* Coloana "Conține" – text aliniat la stânga */
.rules-col-contains {
    text-align: left;
    padding-left: 1.2rem; /* optional, doar sa respire un pic textul */
}

.rules-actions{
  display: flex;
  gap: 6px;
  justify-content: center;
  align-items: center;
}

.rules-delete-form{
  display: inline;
  margin: 0;
}

.rules-icon-btn{
  border: none;
  background: none;
  cursor: pointer;
  font: inherit;
  padding: 0 2px;
}

.rules-edit-link{
  text-decoration: none;
}

.rule-switch {
    position: relative;
    display: inline-block;
    width: 34px;
    height: 18px;
}

.rule-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.rule-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #0f172a;
    border-radius: 999px;
    transition: background 0.25s;
}

.rule-slider::before {
    content: "";
    position: absolute;
    height: 14px;
    width: 14px;
    left: 2px;
    top: 2px;
    border-radius: 999px;
    background: #64748b;
    transition: transform 0.25s, background 0.25s;
}

.rule-switch input:checked + .rule-slider {
    background: linear-gradient(90deg, #3b82f6, #38bdf8);
}

.rule-switch input:checked + .rule-slider::before {
    transform: translateX(16px);
    background: #f97316; /* accent portocaliu */
}


/* =========================
   LOGIN PAGE
   ========================= */

.login-page {
  min-height: 100vh;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(circle at top left, #2a4974 0, #020617 65%),
    radial-gradient(circle at bottom right, #334155 0, #020617 50%);
  color: #e5e7eb;
}

/* wrapper general (logo + card) */
.login-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}

/* blocul de logo + text FINANCE APP */
.login-logo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.login-logo img {
  width: 140px;
  height: 140px;
  object-fit: contain;
  border-radius: 30px;
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.4);
}

.login-logo-text {
  font-size: 13px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: #fb923c; /* portocaliu */
  font-weight: 600;
  text-align: center;
}

/* cardul propriu-zis de login (stil inspirat din Uiverse) */
.login-card {
  width: 320px;
  max-width: 90vw;
  padding: 24px 22px 28px;
  border-radius: 20px;
  background: rgba(15, 23, 42, 0.92);
  border: 1px solid rgba(148, 163, 184, 0.4);
  box-shadow:
    0 24px 60px rgba(15, 23, 42, 0.95),
    0 0 0 1px rgba(15, 23, 42, 0.7);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-sizing: border-box;
}

.login-card-title {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 4px;
}

.login-card-subtitle {
  font-size: 12px;
  color: #9ca3af;
  margin-bottom: 16px;
}

/* mesaj eroare */
.login-error {
  font-size: 12px;
  color: #f97373;
  background: rgba(127, 29, 29, 0.25);
  border: 1px solid rgba(248, 113, 113, 0.5);
  padding: 6px 8px;
  border-radius: 8px;
  margin-bottom: 12px;
}

/* campurile formularului */
.login-field {
  margin-bottom: 12px;
}

.login-field label {
  display: block;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #9ca3af;
  margin-bottom: 4px;
}

.login-field input[type="email"],
.login-field input[type="password"] {
  width: 100%;
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid #1f2937;
  background: #020617;
  color: #e5e7eb;
  font-size: 13px;
  box-sizing: border-box;
}

.login-field input[type="email"]::placeholder,
.login-field input[type="password"]::placeholder {
  color: #6b7280;
}

.login-field input[type="email"]:focus,
.login-field input[type="password"]:focus {
  outline: none;
  border-color: #38bdf8;
  box-shadow: 0 0 0 1px #38bdf8;
}

/* buton login */
.login-btn {
  width: 100%;
  margin-top: 8px;
  padding: 9px 0;
  border-radius: 999px;
  border: none;
  background-image: linear-gradient(90deg, #38bdf8, #6366f1);
  color: #f9fafb;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform 0.08s ease, box-shadow 0.08s ease, filter 0.08s ease;
  box-shadow: 0 10px 22px rgba(37, 99, 235, 0.6);
}

.login-btn:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
}

.login-btn:active {
  transform: translateY(0);
  box-shadow: 0 5px 14px rgba(15, 23, 42, 0.8);
}

/* mic text de jos (optional) */
.login-footnote {
  margin-top: 10px;
  font-size: 11px;
  color: #6b7280;
  text-align: center;
}

/* ===== Import MT940 – drag & drop upload (pătrat 400x400) ===== */

.import-upload-form {
  text-align: center;
}

/* pătratul de drag & drop */
.file-dropzone {
  position: relative;
  width: 300px;
  height: 300px;
  margin: 24px auto 8px;  /* centrat + spațiu mic jos */
  border-radius: 26px;
  padding: 24px;
  background: radial-gradient(circle at top left, #020617, #020617);
  border: 1px dashed rgba(148, 163, 184, 0.5);
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.8);
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  transition: border-color 0.25s, box-shadow 0.25s, background 0.25s;
}

.file-dropzone.dragover,
.file-dropzone:hover {
  border-color: #f97316;
  box-shadow:
    0 0 0 1px rgba(249, 115, 22, 0.4),
    0 24px 55px rgba(15, 23, 42, 0.95);
  background: radial-gradient(circle at top, #020617, #020617);
}

/* input-ul real care acoperă toată zona */
.file-input-hidden {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

/* conținutul interior, centrat vertical */
.file-dropzone-inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  text-align: center;
}

/* iconiță rotundă */
.file-dropzone-icon {
  width: 64px;
  height: 64px;
  border-radius: 999px;
  background: radial-gradient(circle at 30% 0%, #1e293b, #020617);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  color: #e5e7eb;
  box-shadow: 0 0 0 1px rgba(148, 163, 184, 0.3);
}

/* textele din interior */
.file-dropzone-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.file-dropzone-title {
  font-size: 16px;
  font-weight: 600;
  color: #e5e7eb;
}

.file-dropzone-sub {
  font-size: 13px;
  color: #9ca3af;
}

/* butonul „alege fișiere” */
.file-dropzone-btn {
  margin-top: 6px;
  padding: 6px 16px;
  border-radius: 999px;
  background: linear-gradient(135deg, #3b82f6, #38bdf8);
  color: #f9fafb;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  cursor: pointer;
  box-shadow:
    0 0 0 1px rgba(15, 23, 42, 0.9),
    0 12px 25px rgba(56, 189, 248, 0.6);
  transition: transform 0.15s, box-shadow 0.15s, background 0.15s;
}

.file-dropzone-btn:hover {
  transform: translateY(-1px);
  box-shadow:
    0 0 0 1px rgba(15, 23, 42, 0.9),
    0 16px 35px rgba(56, 189, 248, 0.7);
}

/* numele fișierelor – sub pătrat */
.file-dropzone-filename {
  font-size: 13px;
  color: #9ca3af;
  max-width: 300px;
  margin: 4px auto 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}


/* ===== IMPORT – tabel preview tranzacții ===== */

.import-preview-table {
  width: 100%;
}

/* Descriere scurtă – câmp întins pe tot spațiul coloanei */
.import-preview-table td:nth-child(4) .field-table-text {
  width: 100%;
}

/* Lățimi de coloane – lăsăm descrierea să ia restul spațiului */
.import-preview-table th:nth-child(1),
.import-preview-table td:nth-child(1) { width: 40px; text-align: center; }

.import-preview-table th:nth-child(2),
.import-preview-table td:nth-child(2) { width: 110px; }

.import-preview-table th:nth-child(3),
.import-preview-table td:nth-child(3) { width: 130px; }

.import-preview-table th:nth-child(5),
.import-preview-table td:nth-child(5) { width: 180px; }

.import-preview-table th:nth-child(6),
.import-preview-table td:nth-child(6),
.import-preview-table th:nth-child(7),
.import-preview-table td:nth-child(7),
.import-preview-table th:nth-child(8),
.import-preview-table td:nth-child(8) {
  width: 80px;
}

/* Câmpuri generale din tabel – dark, ca în modale */
.field-table {
  width: 100%;
  box-sizing: border-box;
  background: rgba(15, 23, 42, 0.95);
  border: 1px solid #1f2937;
  border-radius: 8px;
  padding: 6px 10px;
  font-size: 13px;
  color: #e5e7eb;
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

/* focus cu portocaliu + glow subtil */
.field-table:focus {
  border-color: #f97316;
  box-shadow: 0 0 0 1px rgba(249, 115, 22, 0.5);
}

/* Select – săgeată portocalie */
.field-table-select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding-right: 28px;

  background-image:
    linear-gradient(90deg, #020617, #020617),
    linear-gradient(135deg, #f97316 0%, #f97316 50%, transparent 50%, transparent 100%),
    linear-gradient(225deg, #f97316 0%, #f97316 50%, transparent 50%, transparent 100%);
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-position:
    right 10px center,
    right 14px center,
    right 8px center;
  background-size:
    18px 24px,
    8px 5px,
    8px 5px;
}

/* Numere – câmpuri înguste, aliniate la dreapta */
.field-table-number {
  max-width: 72px;
  text-align: right;
}

/* Forțăm look-ul dark pentru câmpurile din tabelul de import */
.import-preview-table .field-table {
  background: rgba(15, 23, 42, 0.98);
  border: 1px solid #1f2937;          /* stroke fin, închis, NU alb */
  color: #e5e7eb;
  outline: none;
}

/* Focus pe câmpurile din preview – highlight portocaliu + glow fin */
.import-preview-table .field-table:focus {
  border-color: #f97316;
  box-shadow: 0 0 0 1px rgba(249, 115, 22, 0.35);
}


/* Scoatem spin buttons pentru toate number fields (inclusiv modale + preview) */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input[type="number"] {
  -moz-appearance: textfield;
}

/* TRANZACTII: 2 carduri sus (Sumar + TVA) */
.txn-top-grid{
  width: min(1100px, calc(100% - 40px));
  margin: 0 auto 22px auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
}

.txn-top-grid .options-card{
  width: 1100px;
  margin: 0;
}

@media (max-width: 980px){
  .txn-top-grid{ grid-template-columns: 1fr; }
}

/* TRANZACTII: fix suprapunere carduri sus */
.txn-top-grid{
  align-items: start;
}

.txn-top-grid > .options-card{
  width: 100% !important;
  min-width: 0;            /* foarte important pentru grid + tabele */
  box-sizing: border-box;
  margin-top: 10px; 
}

/* dacă în interior ai tabele, nu le lăsa să împingă cardul */
.txn-top-grid table{
  width: 100%;
  max-width: 100%;
}

/* TRANZACTII: filtru sus, centrat, sub meniu */

.txn-filters-top .filters-form{
  width: min(1120px, calc(100% - 40px));
  margin: 0 auto 34px auto;   /* spațiu după filtru (înainte de carduri) */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;                  /* spațiu între ani și linia cu checkbox-uri */
}

.txn-filters-top{
  padding-top: 60px;      /* spațiu sub meniu */
  display: flex;
  justify-content: center;
}

.year-pills{
  display: flex;
  gap: 14px;              /* un pic mai aerisit */
  justify-content: center;
  flex-wrap: wrap;
}

.year-pill{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border: 1px solid rgba(148,163,184,0.18);
  background: rgba(2,6,23,0.35);
  color: #9ca3af;
  text-decoration: none;
  font-weight: 700;
  font-size: 17px;        /* ~2x față de 13-14px uzual */
  padding: 14px 22px;     /* mai “butucănos” */
  letter-spacing: 0.08em;
}

.year-pill.active{
  border-color: rgba(249,115,22,0.55);
  color: #f97316;
  box-shadow: 0 0 0 2px rgba(249,115,22,0.12);
}

/* Form: păstrăm totul compact, fără stacking inutil */
.txn-filters-top .filters-inline{
  display: flex;
  justify-content: center;
}

/* Checkbox-uri + buton refresh pe aceeași linie */
.filters-toggles{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 10px;       /* spațiu între ani și linia de filtre */
}


/* Checkbox UI (dark + accent portocaliu) */
.chk{
  min-height: 40px;          /* fix: nu mai sare când se schimbă starea */
  box-sizing: border-box;  
  align-self: center;
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  user-select: none;
  padding: 6px 10px;      /* mai mic */
  border-radius: 12px;
  border: 1px solid rgba(148,163,184,0.14);
  background: rgba(2,6,23,0.25);
}

.chk input{
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.chk-ui{
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
  border-radius: 6px;
  border: 1px solid rgba(148,163,184,0.28);
  background: rgba(15,23,42,0.85);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}

.chk-text{
  font-size: 10px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: #cbd5e1;
}

.chk input:checked + .chk-ui{
  border-color: rgba(249,115,22,0.65);
  box-shadow: 0 0 0 2px rgba(249,115,22,0.14);
  background: rgba(249,115,22,0.18);
}

/* bifa */
.chk input:checked + .chk-ui::after{
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 3px;
  background: #f97316;
}

.filters-inline .btn{
  height: 40px;
  display: inline-flex;
  align-items: center;
}

/* buton rotund refresh */
.btn-round{
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid rgba(148,163,184,0.18);
  background: rgba(2,6,23,0.35);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .2s ease, border-color .2s ease;
}

.btn-round svg{
  width: 20px;
  height: 20px;
  fill: none;
  stroke: #f97316;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.btn-round:hover{
  border-color: rgba(249,115,22,0.55);
  box-shadow: 0 0 0 2px rgba(249,115,22,0.12);
  transform: translateY(-1px);
}

/* TRANZACTII: card + tabel tranzactii */
.txn-card{
  width: min(1120px, calc(100% - 40px));
  margin: 0 auto 22px auto;
}

/* rânduri puțin mai înalte + aer */
.txn-table th,
.txn-table td{
  padding: 10px 10px;
  vertical-align: middle;
}

/* subheader lună */
.txn-table .txn-month td{
  padding: 10px 12px;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(203,213,225,0.85);
  background: rgba(2,6,23,0.35);
  border-top: 1px solid rgba(148,163,184,0.18);
  border-bottom: 1px solid rgba(148,163,184,0.18);
}

/* badge data (zi mare + lună mică) */
.txn-date{
  width: 56px;
  height: 56px;
  border-radius: 14px;
  border: 1px solid rgba(148,163,184,0.18);
  background: rgba(2,6,23,0.35);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
}

.txn-date-day{
  font-size: 20px;
  font-weight: 800;
  line-height: 1;
  color: #e5e7eb;
}

.txn-date-mon{
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(203,213,225,0.75);
  line-height: 1;
  font-weight: bold;
}

/* CELULA "Descriere" – centru vertical (soluția robustă) */
/* DESCRIERE – centrare verticală stabilă (wrapper intern) */
td.txn-desc-cell{
  vertical-align: middle;     /* pentru tabel */
  padding-top: 0;
  padding-bottom: 0;
}

/* wrapper-ul face centrare pe înălțimea celulei */
td.txn-desc-cell .txn-desc-wrap{
  display: flex;
  align-items: center;        /* centru vertical */
  height: 100%;
  min-height: inherit;        /* ajută dacă ai min-height pe td/tr */
  padding: 18px 0;            /* dacă restul rândului are padding, îl replicăm aici */
}

/* textul descrierii */
td.txn-desc-cell .txn-desc{
  color: #e5e7eb;
  max-width: 360px;
  white-space: normal;
  overflow-wrap: anywhere;
}

/* clamp 2 rânduri + ellipsis */
td.txn-desc-cell .txn-desc.clamp{
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* sume + TVA (verde/roșu) */
.txn-amount,
.txn-vat{
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.txn-amount.in,
.txn-vat.in{
  color: rgba(34,197,94,0.95);
  font-weight: 500;
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.txn-amount.out,
.txn-vat.out{
  color: rgba(239,68,68,0.95);
  font-weight: 500;
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.muted{
  color: rgba(148,163,184,0.75);
}

/* distributie (cerc mic cu conic-gradient) */
.dist-pill{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(148,163,184,0.14);
  background: rgba(2,6,23,0.25);
}

.dist-donut{
  width: 22px;
  height: 22px;
  border-radius: 999px;

  /* procent A în --a (0..100) */
  background: conic-gradient(#f97316 calc(var(--a)*1%), rgba(96,165,250,0.95) 0);

  /* gaură în centru (donut) */
  -webkit-mask: radial-gradient(circle, transparent 56%, #000 57%);
          mask: radial-gradient(circle, transparent 56%, #000 57%);
}

.dist-ring{
  --a: 50; /* procent A (Razvan) */
  width: 22px;
  height: 22px;
  border-radius: 999px;

  /* procent Razvan în --a (0..100) */
  background: conic-gradient(#f97316 calc(var(--a) * 1%), rgba(96,165,250,0.95) 0);

  /* centru gol (donut) */
  -webkit-mask: radial-gradient(circle, transparent 40%, #000 41%);
          mask: radial-gradient(circle, transparent 40%, #000 41%);

  display: inline-block;
}

.dist-text{
  color: #cbd5e1;
  letter-spacing: 0.06em;
  white-space: nowrap;
}

/* solduri coloane */
.txn-bank, .txn-a, .txn-b{
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: rgba(226,232,240,0.92);
  text-align: right;
}

/* sold initial/final evidențiat */
.txn-sold td{
  background: rgba(2,6,23,0.40);
}
.txn-sold-initial td{
  border-top: 1px solid rgba(249,115,22,0.18);
}
.txn-sold-final td{
  border-bottom: 1px solid rgba(249,115,22,0.18);
}

/* buton edit mare, ca refresh */
.btn-round.btn-round-sm{
  width: 44px;
  height: 44px;
}

.btn-round.btn-round-sm svg{
  width: 20px;
  height: 20px;
}

/* Tranzacții: subheader lună */
.txn-month-row td{
  font-size: 14px;                 /* +2px față de 12px uzual */
  color: #f97316;                  /* portocaliul vostru */
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 40px 18px 10px 18px;              /* spațiu sus/jos dublu */
  opacity: 0.95;
  font-weight: 700;
  border-bottom: 2px solid rgba(249,115,22,0.55);
}

/* Tranzacții: lățimi fixe pe coloane (stabil între ani) */
.txn-table.txn-fixed{
  width: 100%;
  table-layout: fixed; /* cheia */
}

.txn-table.txn-fixed col.c-date{ width: 70px; }
.txn-table.txn-fixed col.c-desc{ width: 180px; }
.txn-table.txn-fixed col.c-amt { width: 140px; }
.txn-table.txn-fixed col.c-vat { width: 100px; }
.txn-table.txn-fixed col.c-dist{ width: 90px; }
.txn-table.txn-fixed col.c-bank{ width: 150px; }
.txn-table.txn-fixed col.c-a   { width: 150px; }
.txn-table.txn-fixed col.c-b   { width: 150px; }
.txn-table.txn-fixed col.c-act { width: 60px; }

/* dacă descrierea e lungă: nu împinge, se taie frumos */
.txn-table.txn-fixed td.txn-desc-cell{
  overflow: hidden;
}

/* descriere: font consistent peste tot */
td.txn-desc-cell .txn-desc{
  font-size: 13px;
  line-height: 1.25;
  font-weight: 500;
}

/* ZEBRA: doar pe rânduri normale, excluzând soldurile */
.txn-table tbody tr.txn-row:not(.txn-sold):nth-child(odd) td{
  background: rgba(2,6,23,0.18) !important;
}

.txn-table tbody tr.txn-row:not(.txn-sold):nth-child(even) td{
  background: rgba(2,6,23,0.28) !important;
}

/* Subheader lună: background propriu (rămâne peste zebra) */
.txn-table tbody tr.txn-month-row td{
  background: rgba(2,6,23,0.35) !important;
}

/* dacă există background pe <tr>, îl neutralizăm ca să se vadă zebra pe td */
.txn-table tbody tr.txn-row:not(.txn-sold){
  background: transparent !important;
}

/* Linie portocalie sub header */
.txn-table thead th{
  border-bottom: 2px solid rgba(249,115,22,0.55);
}

/* Sold inițial: linie după rând */
.txn-table tbody tr.txn-sold-initial td{
  border-bottom: 2px solid rgba(249,115,22,0.30);
}

/* Sold final: linie înainte + linie după rând */
.txn-table tbody tr.txn-sold-final td{
  border-top: 2px solid rgba(249,115,22,0.30);
  border-bottom: 2px solid rgba(249,115,22,0.30);
}

/* ZEBRA controlată din PHP: z1 / z2 */
.txn-table tbody tr.txn-row.z1 td{
  background: rgba(2,6,23,0.18) !important;
}
.txn-table tbody tr.txn-row.z2 td{
  background: rgba(2,6,23,0.28) !important;
}

/* Solduri rămân evidențiate separat */
.txn-table tbody tr.txn-sold td{
  background: rgba(2,6,23,0.40) !important;
}

/* Subheader lună */
.txn-table tbody tr.txn-month-row td{
  background: rgba(2,6,23,0.35) !important;
}

/* DASHBOARD */
.dash-page{
  padding-top: 60px; /* ca în Import/Transactions */
}

.dash-filters{
  width: min(1120px, calc(100% - 40px));
  margin: 0 auto 18px auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

.dash-cards{
  width: min(920px, calc(100% - 40px));
  margin: 0 auto 22px auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 50px;
}

@media (max-width: 920px){
  .dash-cards{ grid-template-columns: 1fr; }
}

.dash-card{
    padding: 25px 20px 15px 20px; /* mărește interiorul (ajustezi dacă vrei) */
}

.dash-head{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 10px;
}

.dash-head.dash-head-grid{
  display: grid;
  grid-template-columns: 120px 1fr; /* avatar + rest */
  column-gap: 22px;
  align-items: start;
}

.dash-metrics{
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  text-align: right;
  white-space: nowrap;
  margin-left: auto;   /* împinge totalul + vs în dreapta */
  margin-top: 12px;
}

.dash-asof{
  text-align: right;
  color: rgba(226,232,240,0.85);
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  font-size: 11px;
  margin-bottom: 6px;
}

.dash-total{
  font-size: 26px;
  font-weight: 900;
  letter-spacing: .02em;
  color: rgba(226,232,240,0.96);
  line-height: 1.1;
}

.dash-ident{
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.dash-avatar{
  width: 110px;               /* păstrezi cât ai acum (sau ajustez) */
  height: 110px;
  border-radius: 999px;
  padding: 1px;               /* grosimea inelului */
  
  background: rgba(148,163,184,0.7); /* culoarea inelului */
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.dash-avatar img{
  width: 100%;
  height: 100%;
  border-radius: 999px;      /* ca să fie perfect rotund în interior */
  object-fit: cover;
  display: block;
  border: 1px solid rgba(2,6,23,0.35); /* linie fină suplimentară (opțional) */
}


.dash-avatar.dash-avatar-lg{
  width: 115px;
  height: 115px;
  border: 1px solid rgba(148,163,184,0.18);  
  border-radius: 999px;
}

.dash-name{
  font-weight: 900;
  color: #f97316; /* accent */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: .02em;
}

.dash-title{
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #f97316; /* accent portocaliu */
  white-space: nowrap;
}


.dash-right{
  flex: 1;
  min-width: 0;
}

/* Rând titlu + linie care se întinde spre avatar */
.dash-title-row{
  display: grid;
  grid-auto-rows: auto;
  row-gap: 10px;     /* distanța titlu -> linie */
  margin-top: 6px;
  justify-items: end;   /* pentru grid */
}

.dash-title{
  justify-self: end;    /* titlul la dreapta */
  text-align: right;
}

.dash-title-line{
  height: 2px;
  width: 100%;
  background: rgba(249,115,22,0.55);
  border-radius: 2px;
  justify-self: stretch;
}


.dash-vs{
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-weight: 700;
  text-align: right;
  white-space: nowrap;
  color: rgba(148,163,184,0.75); /* default */
}

.dash-vs-label{
  opacity: 0.75;
  margin-right: 6px;
}

.dash-vs-val{
  opacity: 1;
}

.dash-vs.pos{ color: rgba(34,197,94,0.95); }
.dash-vs.neg{ color: rgba(239,68,68,0.95); }
.dash-vs.muted{ color: rgba(148,163,184,0.75); }

.dash-kpi{
  margin-top: 14px;
}

.dash-kpi table{
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed; /* cheia */
}

.dash-kpi td{
  padding: 10px 0;
  border-top: 1px solid rgba(148,163,184,0.10);
}

.dash-kpi td:first-child{
  color: rgba(203,213,225,0.85);
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  font-size: 11px;
  width: 52%;
  text-align: left;
}


.dash-kpi td:nth-child(2){
  text-align: right;
  width: 38%;
  font-variant-numeric: tabular-nums;
  color: rgba(226,232,240,0.92);
  white-space: nowrap;
}

.dash-kpi td:nth-child(3){
  text-align: right;
  width: 10%;
  font-size: 12px;
  letter-spacing: .02em;
  white-space: nowrap;
  padding-left: 14px; /* spațiu între sumă și delta */
}

.dash-kpi td:first-child{
  text-align: left !important;
}

/* culori pt delta */
.dash-delta.pos{ color: rgba(34,197,94,0.95); }
.dash-delta.neg{ color: rgba(239,68,68,0.95); }
.dash-delta.muted{ color: rgba(148,163,184,0.75); }

/* CHART CARD (Dashboard) */
.chart-card{
  width: min(920px, calc(100% - 40px));
  margin: 0 auto 22px auto;
  padding: 22px 22px 18px 22px; /* premium inset */
  overflow: visible;
  padding-bottom: 50px;

}

.chart-band{
  width: 100%;
  padding: 26px 0 60px;

  background: rgba(10, 10, 10, 0.70); /* dark gray, nu albastru */
  position: relative;

  /* linii sus / jos */
  border-top: 1px solid rgba(148, 163, 184, 0.4);
  border-bottom: 1px solid rgba(148, 163, 184, 0.3);

  /* inner shadow premium */
  box-shadow:
    inset 0 12px 24px rgba(0,0,0,0.45),
    inset 0 -12px 24px rgba(0,0,0,0.35);
}

.chart-band-inner{
  width: min(920px, calc(100% - 40px));
  margin: 0 auto;

  /* păstrează aer și separare */
  padding: 6px 0 0;
}

/* full-bleed band, chiar dacă e în .options-wrap (max-width) */
.options-wrap .chart-band{
  width: 100vw;
  max-width: 100vw;

  /* scoate elementul din centrul containerului cu max-width */
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);

  /* păstrează spațierile verticale pe care le-ai ales */
  margin-top: 20px;
  margin-bottom: 40px;
}

.chart-head{
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.chart-title{
  font-weight: 700;
  letter-spacing: .05em;
  font-size: 13px;
  text-transform: uppercase;
  color: #f97316;
  
}

.chart-subtitle{
  color: rgba(148,163,184,0.85);
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.chart-accent{
  height: 2px;
  width: 100%;
  margin-top: 12px;
  background: rgba(249,115,22,0.75);
  border-radius: 999px;
}

.chart-wrap{
  margin-top: 16px;
  height: 320px; /* ajustezi după gust */
  position: relative;
}

/* Tooltip premium */
.chart-tooltip{
  position: absolute;
  min-width: 260px;
  padding: 12px 12px;
  border-radius: 14px;
  border: 1px solid rgba(148,163,184,0.18);
  background: rgba(2,6,23,0.90);
  box-shadow: 0 18px 50px rgba(0,0,0,0.35);
  backdrop-filter: blur(10px);
  pointer-events: none;
  opacity: 0;
  transition: opacity .12s ease;
}

.chart-tooltip .ct-title{
  font-weight: 900;
  color: rgba(226,232,240,0.96);
  letter-spacing: .02em;
  margin-bottom: 8px;
}

.chart-tooltip .ct-lines{
  display: grid;
  gap: 6px;
}

.chart-tooltip .ct-row{
  display: flex;
  justify-content: space-between;
  gap: 12px;
  color: rgba(203,213,225,0.90);
  font-size: 12px;
}

.chart-tooltip .ct-row strong{
  color: rgba(226,232,240,0.96);
  font-variant-numeric: tabular-nums;
}

.chart-tooltip .ct-row.ct-prev{
  color: rgba(148,163,184,0.75);
  font-size: 11px;
}

.chart-tooltip .ct-row.ct-prev em{
  font-style: normal;
  color: rgba(148,163,184,0.85);
  font-variant-numeric: tabular-nums;
}

.chart-legend{
  margin-top: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}

.chart-legend .leg-item{
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: rgba(226,232,240,0.85);
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
  font-weight: 500;
}

.leg-swatch{
  width: 10px;
  height: 10px;
  border-radius: 3px;
  display: inline-block;
  box-shadow: 0 0 0 1px rgba(148,163,184,0.20);
}

/* culori conform RGB-urilor tale */
.leg-swatch.leg-inc{
  background: rgb(67,118,202);
}

.leg-swatch.leg-ch{
  background: rgb(202,87,100);
}

/* „An precedent” = linie */
.leg-line{
  width: 18px;
  height: 0;
  border-top: 3px solid rgba(249,115,22,0.95); /* portocaliul vostru */
  display: inline-block;
  border-radius: 2px;
  transform: translateY(0.5px);
}

/* ===== Donut grid (2 carduri) ===== */
.dash-donut-grid{
  width: min(920px, calc(100% - 40px));
  margin: 34px auto 16px auto;  /* mai mult sus, puțin mai puțin jos */
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 50px;                    /* mai mult între carduri */
}

@media (max-width: 920px){
  .dash-donut-grid{ grid-template-columns: 1fr; }
}

/* ===== Donut layout ===== */
.donut-wrap{
  position: relative;
  width: 100%;
  display: grid;
  place-items: center;
  padding: 10px 8px 6px 8px;
}

.donut-svg{
  width: min(320px, 100%);
  height: auto;
  display: block;
  overflow: visible;
}

.donut-slice{
  cursor: pointer;
  transition: transform 160ms ease, filter 160ms ease, opacity 160ms ease;
  filter: drop-shadow(0 2px 10px rgba(0,0,0,0.20));
  opacity: 0.96;
}

.donut-slice.is-active{
  opacity: 1;
  filter: drop-shadow(0 6px 18px rgba(0,0,0,0.35));
}

/* centru donut */
.donut-center{
  position: absolute;
  text-align: center;
  pointer-events: none;
  transform: translateY(1px);
}

.donut-center-label{
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(148,163,184,0.80);
}

.donut-center-val{
  margin-top: 6px;
  font-size: 16px;
  font-weight: 700;
  color: rgba(226,232,240,0.95);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* tooltip */
.donut-tooltip{
  position: absolute;
  min-width: 200px;
  padding: 12px 12px;
  border-radius: 14px;
  border: 1px solid rgba(148,163,184,0.18);
  background: rgba(2,6,23,0.90);
  box-shadow: 0 18px 50px rgba(0,0,0,0.35);
  backdrop-filter: blur(10px);
  pointer-events: none;
  opacity: 0;
  transition: opacity .12s ease;
}

.donut-tip-title{
  font-weight: 900;
  color: rgba(226,232,240,0.96);
  letter-spacing: .02em;
  margin-bottom: 8px;
}

.donut-tip-row{
  color: rgba(226,232,240,0.92);
  font-variant-numeric: tabular-nums;
  font-size: 12px;
}

.donut-tip-sub{
  margin-top: 6px;
  font-size: 12px;
  letter-spacing: .06em;
  color: rgba(148,163,184,0.80);
}

/* legend */
.donut-legend{
  margin-top: 10px;
  padding-bottom: 10px;
  display: flex;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
}

.donut-leg-item{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: rgba(203,213,225,0.88);
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  font-size: 11px;
}

.donut-leg-swatch{
  width: 10px;
  height: 10px;
  border-radius: 4px;
  border: 1px solid rgba(226,232,240,0.22);
  flex: 0 0 auto;
}

/* legendă grafic Profit/Cashflow */
.leg-swatch.leg-profit{ background: rgba(34,197,94,0.90); }  /* verde default; culoarea finală e scriptabilă */
.leg-swatch.leg-avA{ background: rgba(176,110,38,0.95); }    /* portocaliu închis */
.leg-swatch.leg-avB{ background: rgba(214,150,76,0.95); }    /* portocaliu deschis */

.leg-line.leg-profit-prev{
  background: rgba(239,68,68,0.95); /* roșu marker an precedent */
  height: 4px;
  width: 26px;
  border-radius: 99px;
  display: inline-block;
}

.leg-line.leg-cash{
  background: rgba(203,213,225,0.65); /* cashflow */
  height: 4px;
  width: 26px;
  border-radius: 99px;
  display: inline-block;
}

.donut-card{
  padding-bottom: 14px; /* mai mic decât la options-card implicit */
}

.donut-wrap{
  padding-bottom: 2px;  /* era 6px */
}

.donut-legend{
  margin-top: 8px;
  padding-bottom: 2px;  /* era 10px */
}

/* Bottom block (legend + table) */
.donut-bottom{
  margin-top: 10px;
}

/* Important: forțează legenda să ocupe aceeași înălțime în ambele carduri,
   astfel încât tabelele să înceapă aliniat */
.donut-legend{
  min-height: 44px;   /* ajustezi după cât wrap ai în practică (ex: 44-60) */
}

/* Tabel discret, stil similar cu KPI */
.donut-table{
  margin-top: 10px;
}

.dash-kpi-table{
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.dash-kpi-table td{
  padding: 10px 0;
  border-top: 1px solid rgba(148,163,184,0.10);
}

.dash-kpi-table td:first-child{
  text-align: left;
  color: rgba(203,213,225,0.85);
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  font-size: 11px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dash-kpi-table td.num{
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: rgba(226,232,240,0.92);
  white-space: nowrap;
}

/* 3 coloane fixe */
.dash-kpi-table-3 col.c1{ width: 48%; }
.dash-kpi-table-3 col.c2{ width: 32%; }
.dash-kpi-table-3 col.c3{ width: 20%; }

.dash-kpi-table td.pct{
  font-size: 11px;
}

.dash-kpi-table td.pct .pct-label{
  display: block;
  opacity: .75;
  letter-spacing: .06em;
  text-transform: uppercase;
  font-size: 10px;
}

.dash-kpi-table td.pct .pct-val{
  display: block;
  font-weight: 800;
}

.dash-kpi-table td.pct.pos{ color: rgba(34,197,94,0.95); }
.dash-kpi-table td.pct.neg{ color: rgba(239,68,68,0.95); }
.dash-kpi-table td.pct.muted{ color: rgba(148,163,184,0.75); }