/*
 * account.css - sistemul vizual pentru AUTH (login/inregistrare/2FA/resetare)
 * si ZONA DE CONT (/contul-personal). Se sprijina pe tokenii si primitivele din
 * glass.css (--glass-*, --page-bg, --glass-ink); NU redefineste tokeni de tema.
 * Proprietar: stream CONT. Nu editati glass.css/hero.css din acest fisier.
 */

/* Tipografie pe corpul paginilor cont/auth. Fundalul il dau chrome-ul site-ului
 * (cb-plain-bg din glass.css) + overlay-ul de ploaie (_rain_overlay) - NU punem
 * fundal propriu aici, ca sa nu acoperim ploaia. */
body.cb-plain-bg {
  font-family: "Open Sans", system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
}


/* ================= AUTH SHELL ================= */
/* padding-top ca sa degajeze header-ul fix/transparent al site-ului */
.cb-auth-shell {
  max-width: 1000px; margin: 0 auto;
  padding: clamp(24px, 8vh, 90px) clamp(16px, 4vw, 40px) 72px;
  display: grid; grid-template-columns: 1fr; gap: 32px;
}
@media (min-width: 860px) {
  .cb-auth-shell { grid-template-columns: 1fr 1fr; align-items: center; gap: 56px; }
}
.cb-auth-aside { display: none; }
@media (min-width: 860px) { .cb-auth-aside { display: block; } }
.cb-auth-aside-title {
  font-family: Montserrat, "Open Sans", system-ui, sans-serif;
  font-size: clamp(1.9rem, 3vw, 2.6rem); line-height: 1.1; margin: 0 0 16px; letter-spacing: -.02em;
}
.cb-auth-aside-lead { font-size: 1.05rem; line-height: 1.55; opacity: .82; max-width: 40ch; margin: 0; }

/* card glass central */
.cb-auth-panel { width: 100%; }
.cb-auth-card {
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(180%);
          backdrop-filter: blur(var(--glass-blur)) saturate(180%);
  border: 1px solid var(--glass-border);
  box-shadow: 0 18px 50px var(--glass-shadow);
  border-radius: 20px;
  padding: clamp(24px, 4vw, 40px);
}
.cb-auth-title {
  font-family: Montserrat, "Open Sans", system-ui, sans-serif;
  font-size: clamp(1.5rem, 3vw, 2rem); margin: 0 0 6px; letter-spacing: -.02em;
}
.cb-auth-sub { margin: 0 0 20px; font-size: .95rem; opacity: .82; }
.cb-auth-sub a, .cb-link-sm, .cb-auth-fine a { color: #2FB5A8; text-decoration: none; font-weight: 600; }
.cb-auth-sub a:hover, .cb-link-sm:hover, .cb-auth-fine a:hover { text-decoration: underline; }
.cb-auth-text { margin: 0 0 20px; line-height: 1.55; opacity: .9; }
.cb-auth-fine { margin: 16px 0 0; font-size: .82rem; opacity: .7; line-height: 1.5; }

/* ================= FORMS ================= */
.cb-form { display: grid; gap: 18px; }
.cb-form-inline { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.cb-field { display: grid; gap: 7px; }
.cb-label { font-size: .82rem; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; opacity: .85; }
.cb-label-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.cb-label-hint { font-weight: 400; text-transform: none; opacity: .7; }
.cb-link-sm { font-size: .78rem; text-transform: none; letter-spacing: 0; }

.cb-input {
  width: 100%; box-sizing: border-box;
  padding: 12px 14px; font: inherit; font-size: 1rem;
  color: var(--glass-ink);
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid var(--glass-border);
  border-radius: 12px;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
html[data-theme="dark"] .cb-input { background: rgba(255, 255, 255, 0.08); color: #eef1ff; }
.cb-input::placeholder { color: var(--glass-ink); opacity: .45; }
.cb-input:focus {
  outline: none;
  border-color: #2FB5A8;
  box-shadow: 0 0 0 3px rgba(47, 181, 168, 0.28);
  background: rgba(255, 255, 255, 0.72);
}
html[data-theme="dark"] .cb-input:focus { background: rgba(255, 255, 255, 0.12); }
.cb-input-code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .3em; text-align: center; max-width: 220px;
}

.cb-check { display: flex; align-items: flex-start; gap: 10px; font-size: .9rem; line-height: 1.4; cursor: pointer; }
.cb-check input { margin-top: 2px; width: 16px; height: 16px; accent-color: #2FB5A8; flex: 0 0 auto; }
.cb-check a { color: #2FB5A8; }

.cb-field-hint { margin: 0; font-size: .8rem; opacity: .7; line-height: 1.45; }

/* butoane */
.cb-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 22px; font: inherit; font-size: .95rem; font-weight: 700;
  border-radius: 999px; border: 1px solid transparent; cursor: pointer;
  text-decoration: none; text-align: center; line-height: 1;
  transition: transform .06s ease, filter .15s ease, background .15s ease, color .15s ease;
}
.cb-btn:active { transform: translateY(1px); }
.cb-btn-sm { padding: 8px 16px; font-size: .85rem; }
.cb-btn-primary { background: var(--glass-ink); color: var(--page-bg, #fff); }
html[data-theme="dark"] .cb-btn-primary { background: #2FB5A8; color: #06121f; }
.cb-btn-primary:hover { filter: brightness(1.08); }
.cb-btn-ghost { background: var(--glass-bg); color: var(--glass-ink); border-color: var(--glass-border); }
.cb-btn-ghost:hover { filter: brightness(1.03); }
.cb-btn-danger { background: transparent; color: #c0392b; border-color: rgba(192, 57, 43, .55); }
html[data-theme="dark"] .cb-btn-danger { color: #ff8b7e; border-color: rgba(255, 139, 126, .5); }
.cb-btn-danger:hover { background: rgba(192, 57, 43, .1); }

/* ================= ALERTS ================= */
.cb-alert { border-radius: 12px; padding: 12px 16px; font-size: .92rem; line-height: 1.45; margin: 0 0 18px; border: 1px solid transparent; }
.cb-alert > div + div { margin-top: 4px; }
.cb-alert-ok { background: rgba(47, 181, 168, .14); border-color: rgba(47, 181, 168, .4); color: #12776c; }
html[data-theme="dark"] .cb-alert-ok { color: #6fe3d5; }
.cb-alert-err { background: rgba(192, 57, 43, .12); border-color: rgba(192, 57, 43, .4); color: #a53125; }
html[data-theme="dark"] .cb-alert-err { color: #ff9d92; }
.cb-alert-warn { background: rgba(224, 168, 0, .14); border-color: rgba(224, 168, 0, .45); color: #8a6a00; }
html[data-theme="dark"] .cb-alert-warn { color: #ffd76a; }

/* ================= ACCOUNT SHELL ================= */
/* container (nu edge-to-edge) + degajare de sub header/logo fix al site-ului.
 * margin-top 120px = ca sa nu intre continutul sub header. max-width ca la auth-shell. */
.cb-acc-wrap {
  max-width: 1000px;
  margin: 120px auto 0;
  padding: 0 clamp(16px, 4vw, 40px) 72px;
}

/* ================= ACCOUNT CONTENT (navigatia e in header) ================= */
.cb-acc-content { min-width: 0; }
.cb-acc-head { margin: 0 0 24px; }
.cb-acc-h1 { font-family: Montserrat, "Open Sans", system-ui, sans-serif; font-size: clamp(1.6rem, 3vw, 2.1rem); margin: 0 0 6px; letter-spacing: -.02em; }
.cb-acc-lead { margin: 0; opacity: .78; }

.cb-acc-grid { display: grid; grid-template-columns: 1fr; gap: 20px; }
@media (min-width: 680px) { .cb-acc-grid-2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px) { .cb-acc-grid:not(.cb-acc-grid-2) { grid-template-columns: repeat(2, 1fr); } }

/* card de panou */
.cb-panelcard {
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(170%);
          backdrop-filter: blur(var(--glass-blur)) saturate(170%);
  border: 1px solid var(--glass-border);
  box-shadow: 0 12px 34px var(--glass-shadow);
  border-radius: 18px; padding: 24px;
}
.cb-panelcard-accent { box-shadow: 0 12px 34px var(--glass-shadow), inset 0 0 0 2px rgba(224, 168, 0, .5); margin-bottom: 20px; }
.cb-panelcard-title { font-size: 1.05rem; font-weight: 700; margin: 0 0 12px; }
.cb-panelcard-text { margin: 0 0 12px; line-height: 1.55; opacity: .88; font-size: .95rem; }

/* empty states */
.cb-empty { padding: 8px 0 4px; }
.cb-empty p { margin: 0 0 4px; }
.cb-empty-note { font-size: .85rem; opacity: .65; }

/* definitii cont */
.cb-deflist { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 10px; }
.cb-deflist li { display: flex; justify-content: space-between; gap: 16px; font-size: .95rem; border-bottom: 1px solid var(--glass-border); padding-bottom: 8px; }
.cb-deflist li:last-child { border-bottom: 0; padding-bottom: 0; }
.cb-deflist span { opacity: .7; }
.cb-deflist strong { text-align: right; font-weight: 600; }
.cb-ok { color: #12a08f; font-style: normal; font-weight: 700; }
html[data-theme="dark"] .cb-ok { color: #6fe3d5; }
.cb-pending { color: #b5860b; font-style: normal; font-weight: 700; }
html[data-theme="dark"] .cb-pending { color: #ffd76a; }
.cb-danger { color: #c0392b; }
html[data-theme="dark"] .cb-danger { color: #ff8b7e; }

/* badges */
.cb-badge { display: inline-block; padding: 5px 12px; border-radius: 999px; font-size: .8rem; font-weight: 700; margin: 0 0 12px; }
.cb-badge-ok { background: rgba(47, 181, 168, .16); color: #12776c; }
html[data-theme="dark"] .cb-badge-ok { color: #6fe3d5; }
.cb-badge-warn { background: rgba(224, 168, 0, .16); color: #8a6a00; }
html[data-theme="dark"] .cb-badge-warn { color: #ffd76a; }

.cb-hr { border: 0; border-top: 1px solid var(--glass-border); margin: 22px 0; }

/* banner de confirmare email pe panou */
.cb-acc-verify { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.cb-inline-form { margin: 0; }

/* enrolare 2FA */
.cb-2fa-enroll { display: grid; gap: 24px; }
@media (min-width: 560px) { .cb-2fa-enroll { grid-template-columns: auto 1fr; align-items: start; } }
.cb-qr { background: #fff; padding: 10px; border-radius: 12px; border: 1px solid var(--glass-border); width: max-content; }
.cb-qr svg { display: block; width: 200px; height: 200px; }
.cb-2fa-enroll-side { min-width: 0; }
.cb-secret {
  display: block; margin: 0 0 14px; padding: 10px 12px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .95rem;
  word-break: break-all; user-select: all;
  background: rgba(255, 255, 255, 0.5); border: 1px solid var(--glass-border); border-radius: 10px;
}
html[data-theme="dark"] .cb-secret { background: rgba(255, 255, 255, 0.08); }

/* coduri de rezerva */
.cb-backup-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px 20px; margin-top: 8px; }
@media (min-width: 560px) { .cb-backup-grid { grid-template-columns: repeat(4, 1fr); } }
.cb-backup-code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .95rem; user-select: all; }

/* ================= HEADER CONT: link-uri custom ================= */
/* itemele top-level nu se strang / nu se rup pe 2 randuri */
#header-outer nav .sf-menu > li { flex: 0 0 auto; }
#header-outer nav .sf-menu .menu-title-text { white-space: nowrap; }

/* ORDINE INVERSATA (DOM swap in _cont_header): pilula de cont e ACUM prima, meniul
 * principal al doilea. nav e flex (tema); impingerea grupului la dreapta = margin-left:auto
 * pe PRIMA pilula. Glass pune auto pe .sf-menu:not(.buttons) (=meniul principal) -> dupa
 * swap ar impinge meniul singur si ar rupe grupul. Mutam rolul: pilula de cont preia auto
 * (impinge grupul la dreapta, right:0 = lipita de meniu), meniul devine pilula trailing
 * (left:10 gap catre cont + right:10 spatiu la marginea pill-ului) -> aliniament pastrat. */
#header-outer[data-format=centered-menu] #top .span_9 nav .sf-menu.cb-cont-menu {
  margin: 10px 0 10px auto;
}
#header-outer[data-format=centered-menu] #top .span_9 nav .sf-menu:not(.buttons):not(.cb-cont-menu) {
  margin: 10px auto 10px 10px;
}

/* pilula CONTUL MEU: layout avatar + margini exacte. Tema pune margin-left:10px +
 * margin-right:10px pe TOATE item-ele de meniu (#header-outer[data-lhe] #top nav>ul>li>a);
 * pilula de cont vrea margin-right:0 (sta lipita de marginea pill-ului). Specificitate
 * 2 ID + [data-lhe] + clase ca sa bata regula temei, scopat DOAR pe .cb-cont-menu. */
#header-outer[data-lhe=animated_underline] #top nav .sf-menu.cb-cont-menu > li > a {
  display: inline-flex; align-items: center; gap: 9px;
  margin-left: 10px; margin-right: 0;
}
#header-outer .cb-cont-avatar {
  width: 40px; height: 40px; border-radius: 999px; flex: 0 0 auto;
  object-fit: cover; border: 1px solid var(--glass-border);
  margin-bottom: 0;   /* tema pune margin-bottom default pe img -> il anulam ca avatarul sa nu impinga pilula */
}

/* FARA dropdown pe pilula de cont: pilula CONTUL MEU duce direct la /contul-personal.
 * Suprimam underline-ul animat al temei (.menu-title-text:after) pe pilula de cont
 * -> pe paginile de cont pilula e current-menu-item si underline-ul full-width arata
 * ca un border de dropdown. Specificitate 2 ID-uri (#header-outer #top) ca sa batem
 * regula temei. Scopat DOAR pe .cb-cont-menu -> restul meniului isi pastreaza underline. */
#header-outer #top nav .sf-menu.cb-cont-menu > li > a .menu-title-text:after {
  display: none !important;
}