/* ERP Yuksel — bundle.css v1 Clase de componente. Toate culorile, spațiile și razele vin din tokens.css (variabile --*). Prefix: .yk- . Folosit identic pe calculator și telefon; layout-ul îl aleg .yk-app--desktop / .yk-app--phone. */ .yk, .yk * { box-sizing: border-box; } /* margin 0: fără marginea implicită a lui (8 px bej în jurul aplicației și 16 px de derulat în plus) */ .yk { margin: 0; font-family: var(--font-sans); color: var(--ink); background: var(--surface-0); font-size: var(--text-body); line-height: var(--leading-body); font-variant-numeric: tabular-nums; -webkit-font-smoothing: antialiased; } .yk a { color: var(--action); text-decoration: none; } .yk a:hover { color: var(--action-hover); text-decoration: underline; } .yk :focus-visible { outline: none; box-shadow: var(--shadow-focus); border-color: var(--action); } /* linkurile care sunt componente (buton, meniu, rând, pastilă, filă) își țin culoarea componentei, nu pe cea de link */ .yk a.yk-btn--primary, .yk a.yk-btn--ok { color: var(--on-action); } .yk a.yk-btn--primary:hover { color: var(--on-action); } .yk a.yk-btn--secondary, .yk a.yk-btn--secondary:hover { color: var(--ink); } .yk a.yk-btn--danger { color: var(--danger); } .yk a.yk-btn:hover, .yk a.yk-nav:hover, .yk a.yk-sem:hover, .yk a.yk-row:hover, .yk a.yk-pill:hover, .yk a.yk-tab:hover, .yk a.yk-sidebar__brand:hover { text-decoration: none; } .yk a.yk-nav { color: var(--ink); } .yk a.yk-nav.is-active { color: var(--brand-text); } .yk a.yk-sem, .yk a.yk-row, .yk a.yk-sidebar__brand { color: inherit; } .yk a.yk-tab { color: var(--ink-muted); } .yk a.yk-tab.is-active { color: var(--action-text); } /* ---------- Text ---------- */ /* mărimile vin numai din scara --text-* (tokens.json, type.sizes); minimul e --text-min (13 px). Titlurile se scriu cu fiecare cuvânt cu majusculă de filtrul `titlu` / blocul {% titluri %}, nu din CSS; nicio etichetă nu mai e pe majuscule mărunte și spațiate. */ .yk-display-lg { font-family: var(--font-serif); font-size: var(--text-display-lg); line-height: var(--leading-display-lg); font-weight: 700; margin: 0; } .yk-display-sm { font-family: var(--font-serif); font-size: var(--text-display-sm); line-height: var(--leading-display-sm); font-weight: 600; margin: 0; } .yk-heading { font-size: var(--text-heading); line-height: var(--leading-heading); font-weight: 700; margin: 0; } .yk-body { font-size: var(--text-body); line-height: var(--leading-body); } .yk-small { font-size: var(--text-small); line-height: var(--leading-small); color: var(--ink-muted); } .yk-label { font-size: var(--text-small); line-height: var(--leading-small); font-weight: 600; color: var(--ink-muted); } .yk-number-lg { font-size: var(--text-number-lg); line-height: var(--leading-number-lg); font-weight: 700; font-variant-numeric: tabular-nums; } .yk-number { font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; } .yk-muted { color: var(--ink-muted); } .yk-nowrap { white-space: nowrap; } /* coduri și date care nu se rup la cratimă („FA-2026-09-001”, „07.09.2026”) */ .yk-ok { color: var(--ok); } .yk-warn { color: var(--warn); } .yk-danger { color: var(--danger); } /* ---------- Butoane ---------- */ .yk-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: var(--control-h); padding: 0 var(--space-4); border-radius: var(--radius-md); font: inherit; font-weight: 600; cursor: pointer; border: 1.5px solid transparent; white-space: nowrap; } .yk-btn--primary { background: var(--action); color: var(--on-action); } .yk-btn--primary:hover { background: var(--action-hover); } .yk-btn--secondary { background: var(--surface-1); color: var(--ink); border-color: var(--line-strong); } .yk-btn--secondary:hover { background: var(--surface-2); } .yk-btn--ok { background: var(--ok); color: var(--on-action); } .yk-btn--danger { background: var(--surface-1); color: var(--danger); border-color: var(--danger); } .yk-btn--ghost { background: transparent; color: var(--action); padding: 0 var(--space-2); } .yk-btn--lg { min-height: var(--control-h-lg); font-size: var(--text-heading); width: 100%; } .yk-btn--sm { min-height: 36px; padding: 0 var(--space-3); font-size: var(--text-min); } .yk-btn:disabled { opacity: .5; cursor: not-allowed; } .yk-btn__icon { width: 18px; height: 18px; flex: none; } /* ---------- Badge și bulină ---------- */ .yk-badge { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px; border-radius: var(--radius-pill); font-size: var(--text-min); font-weight: 700; white-space: nowrap; } .yk-badge--ok { background: var(--ok-soft); color: var(--ok-text); } .yk-badge--warn { background: var(--warn-soft); color: var(--warn-text); } .yk-badge--danger { background: var(--danger-soft); color: var(--danger-text); } .yk-badge--info { background: var(--action-soft); color: var(--action-text); } .yk-badge--brand { background: var(--brand-soft); color: var(--brand-text); } .yk-badge--neutral { background: var(--surface-2); color: var(--ink-muted); } /* badge cu propoziție (semnalele unui rând de registru): se rupe pe mai multe rânduri în loc să lățească tabelul sau să iasă din rând */ .yk-badge--wrap { display: inline-block; height: auto; max-width: 100%; padding: 3px 10px; margin: 2px 0; line-height: var(--leading-min); white-space: normal; border-radius: var(--radius-md); } .yk-dot { display: inline-block; width: 14px; height: 14px; border-radius: 50%; flex: none; } .yk-dot--ok { background: var(--ok); } .yk-dot--warn { background: var(--warn); } .yk-dot--danger { background: var(--danger); } .yk-dot--neutral { background: var(--neutral-dot); } .yk-count { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; padding: 0 7px; border-radius: var(--radius-pill); background: var(--danger); color: var(--on-action); font-size: var(--text-min); font-weight: 700; } /* ---------- Card ---------- */ .yk-card { background: var(--surface-1); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--space-5); } .yk-card--tight { padding: 0; overflow: hidden; overflow-x: auto; } .yk-card__title { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-3); } .yk-card__title .yk-label { margin: 0; } .yk-card + .yk-card { margin-top: var(--space-4); } /* ---------- Rând de semafor ---------- */ .yk-sem { display: flex; align-items: center; gap: var(--space-3); min-height: 60px; padding: var(--space-3) var(--space-4); background: var(--surface-1); border: 1px solid var(--line); border-radius: var(--radius-lg); color: inherit; } a.yk-sem:hover { background: var(--surface-2); text-decoration: none; color: inherit; } .yk-sem__text { flex: 1; min-width: 0; } .yk-sem__title { font-weight: 700; } .yk-sem__sub { font-size: var(--text-small); line-height: var(--leading-small); color: var(--ink-muted); } .yk-sem__chev { width: 20px; height: 20px; color: var(--ink-muted); flex: none; } .yk-sem--off { background: var(--surface-2); border-style: dashed; color: var(--ink-muted); } /* ---------- Stat tile ---------- */ .yk-stat { background: var(--surface-1); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--space-4); } .yk-stat__value { font-size: var(--text-number-lg); line-height: var(--leading-number-lg); font-weight: 700; margin-top: var(--space-1); } .yk-stat__delta { font-size: var(--text-small); line-height: var(--leading-small); margin-top: var(--space-1); } .yk-stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--space-3); } /* linia de comparație sub cifră: săgeata și textul; culoarea numai la o schimbare mare (ok = favorabilă, warn = nefavorabilă) */ .yk-stat__calificativ { font-size: var(--text-small); line-height: var(--leading-small); color: var(--ink-muted); margin-top: 2px; } .yk-stat__mesaj { font-size: var(--text-body); line-height: var(--leading-body); font-weight: 600; } /* în locul cifrei, fără „lei” („nu intră în filtrul ales”) */ .yk-stat__comparatie { display: flex; align-items: flex-start; gap: 4px; font-size: var(--text-small); line-height: var(--leading-small); color: var(--ink-muted); margin-top: var(--space-2); } .yk-stat__comparatie svg { width: 14px; height: 14px; flex: none; margin-top: 2px; } .yk-stat__comparatie--ok { color: var(--ok-text); font-weight: 600; } .yk-stat__comparatie--warn { color: var(--warn-text); font-weight: 600; } /* suma și unitatea ei („1.702.994,56 lei”) nu se despart: pe calculator, într-o casetă de cel puțin 170 px, cifra cu unitate stă pe un rând; în casetele strâmte (patru pe rând la 1280 px) cifrele rândului coboară o treaptă din scară (display-sm, apoi xl), toate la fel. Rândurile fără unitate (Tabloul de bord) rămân cum erau; casetele sub 170 px (ecranele mici cu meniul lateral) rup rândul ca înainte. :where() ține regula sub cele ale paginilor (.rl-cifre, .yk-stat--card), care își păstrează mărimea lor. */ @media (min-width: 900px) { :where(.yk-stat-grid > .yk-stat) { container-type: inline-size; } @container (min-width: 170px) { :where(.yk-stat-grid:has(.yk-stat__value > .yk-small)) .yk-stat__value { white-space: nowrap; } } @container (min-width: 190px) and (max-width: 215.98px) { :where(.yk-stat-grid:has(.yk-stat__value > .yk-small)) .yk-stat__value { font-size: var(--text-display-sm); line-height: var(--leading-display-sm); } } @container (min-width: 170px) and (max-width: 189.98px) { :where(.yk-stat-grid:has(.yk-stat__value > .yk-small)) .yk-stat__value { font-size: var(--text-xl); line-height: var(--leading-xl); } } } /* pe telefon, cifrele devin rânduri: eticheta sus, comparația dedesubt, cifra la dreapta */ @media (max-width: 899px) { .yk-stat-grid--rand { display: flex; flex-direction: column; gap: 0; background: var(--surface-1); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; } .yk-stat-grid--rand > .yk-stat { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--space-3); align-items: center; min-height: 72px; padding: 10px var(--space-4); border: 0; border-bottom: 1px solid var(--line); border-radius: 0; } .yk-stat-grid--rand > .yk-stat:last-child { border-bottom: 0; } .yk-stat-grid--rand > .yk-stat > * { grid-column: 1 / -1; margin-top: 0; } .yk-stat-grid--rand > .yk-stat > .yk-label { grid-column: 1; grid-row: 1; font-size: var(--text-small); line-height: var(--leading-small); font-weight: 600; color: var(--ink); } .yk-stat-grid--rand > .yk-stat > .yk-stat__value { grid-column: 2; grid-row: 1; font-size: var(--text-lg); line-height: var(--leading-lg); text-align: right; white-space: nowrap; } .yk-stat-grid--rand .yk-stat__comparatie { margin-top: 2px; } } /* ---------- Tabel ---------- */ .yk-table { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--surface-1); font-size: var(--text-body); } .yk-table th { text-align: left; font-size: var(--text-small); line-height: var(--leading-small); font-weight: 700; color: var(--ink-muted); background: var(--surface-2); padding: 10px var(--space-3); border-bottom: 1px solid var(--line); position: sticky; top: 0; white-space: nowrap; } .yk-table td { padding: 12px var(--space-3); border-bottom: 1px solid var(--line); vertical-align: middle; } .yk-table tr:last-child td { border-bottom: 0; } .yk-table tbody tr:hover td { background: var(--surface-0); } .yk-table tr.is-selected td { background: var(--action-soft); } .yk-table th.num, .yk-table td.num { text-align: right; font-variant-numeric: tabular-nums; } .yk-table td.num { font-weight: 600; } .yk-table .sub { display: block; font-size: var(--text-min); line-height: var(--leading-min); color: var(--ink-muted); } .yk-table tfoot td { background: var(--surface-2); font-weight: 700; border-top: 1px solid var(--line-strong); } .yk-table th.sortable { cursor: pointer; } .yk-table th.sortable.asc::after { content: " ↑"; } .yk-table th.sortable.desc::after { content: " ↓"; } /* ---------- Formular ---------- */ .yk-field { display: flex; flex-direction: column; gap: 6px; } .yk-field + .yk-field { margin-top: var(--space-3); } .yk-field__label { font-size: var(--text-small); line-height: var(--leading-small); font-weight: 600; color: var(--ink-muted); } .yk-input, .yk-select, .yk-textarea { width: 100%; min-height: var(--control-h); padding: 0 var(--space-3); font: inherit; color: var(--ink); background: var(--surface-1); border: 1.5px solid var(--line-strong); border-radius: var(--radius-md); } .yk-textarea { padding: 10px var(--space-3); min-height: 88px; resize: vertical; } .yk-input::placeholder { color: var(--ink-faint); } .yk-input:disabled, .yk-select:disabled { background: var(--surface-2); color: var(--ink-faint); } .yk-field--error .yk-input, .yk-field--error .yk-select { border-color: var(--danger); } .yk-field__help { font-size: var(--text-small); line-height: var(--leading-small); color: var(--ink-muted); } .yk-field--error .yk-field__help { color: var(--danger); } .yk-select { appearance: none; background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 40px; } .yk-input--money { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; } /* câmp numeric cu text greșit (Yuksel.verificaCamp, regula numerelor scrise de mână): bordura și motivul, sub câmp, pe tot rândul */ .yk input[type][aria-invalid="true"], .yk-input[aria-invalid="true"], .yk-select[aria-invalid="true"] { border-color: var(--danger); } /* [type]: peste .yk input[type=text] din erp.css */ .yk-numar-mesaj { flex-basis: 100%; width: 100%; margin-top: var(--space-1); font-size: var(--text-small); line-height: var(--leading-small); color: var(--danger); } /* ---------- Casetă de notă (sugestie / atenție) ---------- */ .yk-note { display: flex; gap: 10px; align-items: flex-start; padding: 10px var(--space-3); border-radius: var(--radius-md); font-size: var(--text-small); line-height: var(--leading-small); } .yk-note--info { background: var(--action-soft); color: var(--action-text); } .yk-note--warn { background: var(--warn-soft); color: var(--warn-text); } .yk-note--danger { background: var(--danger-soft); color: var(--danger-text); } .yk-note--ok { background: var(--ok-soft); color: var(--ok-text); } .yk-note__icon { width: 18px; height: 18px; flex: none; margin-top: 1px; } /* ---------- Structura aplicației ---------- */ .yk-app { min-height: 100vh; } .yk-app--desktop { display: grid; grid-template-columns: var(--sidebar-w) 1fr; } .yk-topbar { height: var(--topbar-h); display: flex; align-items: center; gap: var(--space-4); padding: 0 var(--space-6); background: var(--surface-1); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 10; } .yk-topbar__search { flex: 1; max-width: 520px; position: relative; } /* `.yk .yk-topbar__search` bate regula generală `.yk input[type=search]` din erp.css (padding 12 px): lupa nu acoperă textul */ .yk .yk-topbar__search .yk-input, .yk-topbar__search .yk-input { min-height: 38px; padding-left: 38px; background: var(--surface-0); border-color: var(--line); } .yk-topbar__search svg { position: absolute; left: 12px; top: 10px; width: 18px; height: 18px; color: var(--ink-muted); } .yk-topbar__user { display: flex; align-items: center; gap: 10px; font-size: var(--text-small); color: var(--ink-muted); } .yk-avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--brand-soft); color: var(--brand-text); display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: var(--text-min); } .yk-main { padding: var(--space-6); max-width: var(--content-max); } .yk-page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-6); } .yk-page-head__meta { font-size: var(--text-small); line-height: var(--leading-small); color: var(--ink-muted); margin-top: var(--space-1); } .yk-toolbar { display: flex; gap: var(--space-2); flex-wrap: wrap; } /* Meniu lateral */ .yk-sidebar { background: var(--surface-1); border-right: 1px solid var(--line); padding: var(--space-4) var(--space-2); display: flex; flex-direction: column; gap: var(--space-1); position: sticky; top: 0; height: 100vh; } .yk-sidebar__brand { display: flex; align-items: center; gap: 10px; padding: 6px var(--space-2) var(--space-4); } .yk-sidebar__brand img { width: 32px; height: 32px; border-radius: 8px; } .yk-sidebar__brand b { font-family: var(--font-serif); font-size: var(--text-lg); font-weight: 700; display: block; line-height: var(--leading-lg); } .yk-sidebar__brand span { font-size: var(--text-min); line-height: var(--leading-min); color: var(--ink-muted); } /* grupele meniului (Achiziții, Bani …): grupa-mamă e cel puțin cât intrările ei (text-heading, îngroșat, pictograma de 20 px), cu titlul scris normal (fiecare cuvânt cu majusculă), nu pe majuscule mărunte */ .yk-sidebar__section { font-size: var(--text-heading); line-height: var(--leading-heading); font-weight: 700; color: var(--ink); padding: var(--space-4) var(--space-2) var(--space-1); } .yk-sidebar__section svg { width: 20px; height: 20px; flex: none; } .yk-nav { display: flex; align-items: center; gap: var(--space-2); min-height: 40px; padding: 0 var(--space-2); border-radius: var(--radius-md); color: var(--ink); font-size: var(--text-nav); line-height: var(--leading-nav); font-weight: 500; } .yk-nav:hover { background: var(--surface-2); text-decoration: none; color: var(--ink); } .yk-nav.is-active { background: var(--brand-soft); color: var(--brand-text); font-weight: 700; } .yk-nav svg { width: 20px; height: 20px; flex: none; } .yk-nav .yk-count { margin-left: auto; } .yk-sidebar__foot { margin-top: auto; padding: var(--space-3) var(--space-2) 0; font-size: var(--text-min); line-height: var(--leading-min); color: var(--ink-muted); } /* Telefon (regulile se aplică doar sub 900 px: rădăcina poartă ambele clase) */ @media (max-width: 899px) { .yk-app--phone { max-width: 480px; margin: 0 auto; padding-bottom: calc(var(--bottomnav-h) + 24px); } .yk-app--phone .yk-main { padding: var(--space-4); } } .yk-phonebar { display: flex; align-items: center; gap: var(--space-3); min-height: 52px; padding: 0 var(--space-4); } .yk-phonebar .yk-display-sm { flex: 1; } .yk-bottomnav { position: fixed; left: 0; right: 0; bottom: 0; height: calc(var(--bottomnav-h) + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom); display: flex; justify-content: space-around; background: var(--surface-1); border-top: 1px solid var(--line); z-index: 10; } /* bara de jos: cele cel mult 5 intrări împart lățimea în mod egal; eticheta e forma scurtă din meniu („Plăți”, „Etichetat”), la text-min, pe un singur rând, iar pictograma și eticheta stau în mijlocul barei, nu lipite de marginea de jos */ .yk-bottomnav a { display: flex; flex: 1 1 0; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-1); min-width: 0; padding: 0 2px; font-size: var(--text-min); line-height: var(--leading-min); font-weight: 600; text-align: center; color: var(--ink-muted); } .yk-bottomnav a > span:not(.yk-count) { max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .yk-bottomnav a svg { width: 24px; height: 24px; flex: none; } .yk-bottomnav a.is-active { color: var(--action); font-weight: 700; } .yk-bottomnav a:hover { text-decoration: none; } /* ---------- Stare goală ---------- */ .yk-empty { text-align: center; padding: var(--space-10) var(--space-6); color: var(--ink-muted); } .yk-empty svg { width: 48px; height: 48px; color: var(--line-strong); margin-bottom: var(--space-3); } .yk-empty h3 { font-family: var(--font-serif); font-size: var(--text-xl); line-height: var(--leading-xl); color: var(--ink); margin: 0 0 var(--space-1); } /* ---------- Listă de rânduri (fișă) ---------- */ .yk-rows { display: flex; flex-direction: column; } .yk-row { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); min-height: 56px; padding: 10px var(--space-4); border-bottom: 1px solid var(--line); } .yk-row:last-child { border-bottom: 0; } .yk-row__main { min-width: 0; } .yk-row__title { font-weight: 600; } .yk-row__sub { font-size: var(--text-small); line-height: var(--leading-small); color: var(--ink-muted); } .yk-row__end { text-align: right; flex: none; } .yk-kv { display: flex; justify-content: space-between; gap: var(--space-3); padding: 6px 0; border-bottom: 1px solid var(--line); } .yk-kv:last-child { border-bottom: 0; } .yk-kv--total { font-weight: 700; border-top: 1px solid var(--line-strong); margin-top: 4px; padding-top: 10px; } /* ---------- Secțiune închisă (Pliabil): „Detalii”, „Cum s-a calculat”; se deschide la cerere, închisă implicit ---------- */ .yk-pliabil { background: var(--surface-1); border: 1px solid var(--line); border-radius: var(--radius-lg); margin-bottom: var(--space-4); } .yk-pliabil > summary { display: flex; align-items: center; gap: var(--space-2); min-height: 52px; padding: var(--space-3) var(--space-4); cursor: pointer; list-style: none; } .yk-pliabil > summary::-webkit-details-marker { display: none; } /* săgeata: pictograma „chevron” din Yuksel.icon, rotită la deschidere */ .yk-pliabil__semn { flex: none; width: 18px; height: 18px; color: var(--ink-muted); transition: transform .15s ease; } .yk-pliabil[open] > summary > .yk-pliabil__semn { transform: rotate(90deg); } .yk-pliabil__titlu { font-size: var(--text-heading); line-height: var(--leading-heading); font-weight: 700; } .yk-pliabil__rezumat { font-size: var(--text-small); line-height: var(--leading-small); color: var(--ink-muted); margin-left: auto; text-align: right; } .yk-pliabil__corp { padding: 0 var(--space-4) var(--space-4); min-width: 0; } .yk-pliabil .yk-pliabil { border: 0; border-top: 1px solid var(--line); border-radius: 0; margin: 0; } .yk-pliabil .yk-pliabil > summary { min-height: 48px; padding-left: 0; padding-right: 0; } .yk-pliabil .yk-pliabil .yk-pliabil__titlu { font-size: var(--text-body); line-height: var(--leading-body); } .yk-pliabil .yk-pliabil > .yk-pliabil__corp { padding: 0 0 var(--space-4); } .yk-pliabil__corp > .yk-pliabil:first-child { border-top: 0; } /* ---------- Ce conține (design/componente/CeContine.md): părțile unei sume, cu suma la dreapta; sub o cifră mare, la vedere; într-un tabel, la atingerea semnului „i” de lângă numele rândului (merge și pe telefon, nu doar cu mausul) ---------- */ .yk-contine { list-style: none; margin: var(--space-2) 0 0; padding: 0; font-size: var(--text-small); line-height: var(--leading-small); font-weight: 400; color: var(--ink); text-align: left; } /* eticheta la stânga, suma la dreapta; într-o casetă îngustă (patru cifre pe rând), suma trece sub etichetă, tot la dreapta */ .yk-contine__rand { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; column-gap: var(--space-3); padding: 2px 0; } .yk-contine__rand + .yk-contine__rand { border-top: 1px solid var(--line); } .yk-contine__et { flex: 1 1 6em; min-width: 0; overflow-wrap: break-word; } .yk-contine__suma { margin-left: auto; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; text-align: right; } .yk-contine__rand--din { padding-left: var(--space-3); color: var(--ink-muted); } .yk-contine__rand--din .yk-contine__suma { font-weight: 500; } .yk-contine__nr { color: var(--ink-muted); white-space: nowrap; } .yk-contine__nota { flex-basis: 100%; display: block; font-size: var(--text-min); line-height: var(--leading-min); color: var(--ink-muted); } .yk-contine + .yk-contine__nota, .yk-contine__nota + .yk-contine__nota { margin-top: var(--space-1); } .yk-stat > .yk-contine__nota { font-size: var(--text-min); line-height: var(--leading-min); color: var(--ink-muted); } /* Pliabilul „Ce conține” din caseta unei cifre: fără chenar propriu, cu o linie deasupra, titlul mic */ .yk-stat .yk-pliabil { border: 0; border-top: 1px solid var(--line); border-radius: 0; margin: var(--space-2) 0 0; background: transparent; } .yk-stat .yk-pliabil > summary { min-height: 40px; padding: var(--space-2) 0; } .yk-stat .yk-pliabil .yk-pliabil__titlu { font-size: var(--text-small); line-height: var(--leading-small); } .yk-stat .yk-pliabil > .yk-pliabil__corp { padding: 0 0 var(--space-2); } .yk-stat .yk-pliabil .yk-contine { margin-top: 0; } /* semnul „i” al unui rând de tabel: se deschide la atingere; semnul rămâne lângă nume (deschis, caseta e „inline”), iar corpul trece dedesubt, pe toată lățimea celulei */ .yk-ce { display: inline-block; vertical-align: middle; margin-left: var(--space-1); } .yk-ce[open] { display: inline; } .yk-ce[open] > .yk-ce__corp { display: block; } .yk-ce > summary { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: var(--radius-pill); color: var(--ink-muted); cursor: pointer; list-style: none; } .yk-ce > summary::-webkit-details-marker { display: none; } .yk-ce > summary:hover, .yk-ce[open] > summary { color: var(--action-text); background: var(--action-soft); } .yk-ce__icon { width: 16px; height: 16px; flex: none; } .yk-ce__corp { margin: var(--space-1) 0 var(--space-1); padding: var(--space-2) var(--space-3); max-width: 560px; background: var(--surface-0); border: 1px solid var(--line); border-radius: var(--radius-md); font-size: var(--text-small); line-height: var(--leading-small); font-weight: 400; color: var(--ink); white-space: normal; text-align: left; } .yk-ce__corp .yk-contine { margin-top: 0; } .yk-ce__text { display: block; color: var(--ink-muted); } .yk-ce__text + .yk-contine, .yk-contine + .yk-ce__text { margin-top: var(--space-1); } /* „Ce conține fiecare coloană”: aceeași deschidere, cu textul la vedere în loc de semn */ .yk-ce--coloane, .yk-ce--coloane[open] { display: block; margin: var(--space-2) 0 0; } .yk-ce--coloane > summary { width: auto; height: auto; min-height: 32px; gap: var(--space-1); padding: 0 var(--space-2); font-size: var(--text-small); font-weight: 600; color: var(--action-text); } .yk-ce__coloane { margin: 0; } .yk-ce__coloane dt { font-weight: 600; } .yk-ce__coloane dd { margin: 0 0 var(--space-1); color: var(--ink-muted); } /* pe telefon, într-un rând (yk-row), caseta deschisă ia toată lățimea rândului, iar cifra rândului trece dedesubt, la dreapta, ca totalul unui bon (în coloana numelui, caseta ar fi prea îngustă) */ @media (max-width: 899px) { .yk-row:has(> .yk-row__main .yk-ce[open]) { flex-wrap: wrap; } .yk-row:has(> .yk-row__main .yk-ce[open]) > .yk-row__main { flex: 1 1 100%; } .yk-row:has(> .yk-row__main .yk-ce[open]) > .yk-row__end { margin-left: auto; } .yk-row .yk-ce__corp { max-width: none; } } /* ---------- Text numai pentru cititorul de ecran (starea unui comutator, gravitatea) ---------- */ .yk-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* ---------- Pragul: sub 900 px e telefon (același HTML) ---------- */ .yk-app { grid-template-columns: var(--sidebar-w) 1fr; } @media (max-width: 899px) { .yk-app--desktop { display: block; } .yk-sidebar, .yk-topbar { display: none; } .yk-main { padding: var(--space-4); } .yk-card { padding: var(--space-4); } .yk-page-head { display: none; } .yk-desk { display: none !important; } } /* pastilele pe un singur rând, derulat în interiorul lui, pe telefon — numai pentru perioade (lunile, săptămânile); filtrele (punctul, starea, casieria) nu poartă `yk-pills--rand` și se așază pe mai multe rânduri, ca să nu ascundă opțiuni; pe calculator, toate pe rânduri */ @media (max-width: 899px) { .yk-pills.yk-pills--rand { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; margin-left: calc(-1 * var(--space-4)); margin-right: calc(-1 * var(--space-4)); padding: 0 var(--space-4) 2px; } .yk-pills.yk-pills--rand::-webkit-scrollbar { display: none; } .yk-pills.yk-pills--rand > * { flex: none; } /* semnul că rândul continuă (yk.js pune `are-stanga` / `are-dreapta`): capătul cu pastile ascunse se estompează */ .yk-pills--rand.are-dreapta, .yk-tabs.are-dreapta { -webkit-mask-image: linear-gradient(to right, var(--ink) calc(100% - var(--space-10)), transparent); mask-image: linear-gradient(to right, var(--ink) calc(100% - var(--space-10)), transparent); } .yk-pills--rand.are-stanga, .yk-tabs.are-stanga { -webkit-mask-image: linear-gradient(to left, var(--ink) calc(100% - var(--space-10)), transparent); mask-image: linear-gradient(to left, var(--ink) calc(100% - var(--space-10)), transparent); } .yk-pills--rand.are-stanga.are-dreapta, .yk-tabs.are-stanga.are-dreapta { -webkit-mask-image: linear-gradient(to right, transparent, var(--ink) var(--space-10), var(--ink) calc(100% - var(--space-10)), transparent); mask-image: linear-gradient(to right, transparent, var(--ink) var(--space-10), var(--ink) calc(100% - var(--space-10)), transparent); } } @media (min-width: 900px) { .yk-phonebar, .yk-bottomnav { display: none; } .yk-tel { display: none !important; } }