/* Supply · aprovizionări — platformă de lucru: bară laterală întunecată cu meniul, galerie de tichete,
   panou lateral pentru tichet. Identitate Moldabela: albastru #223A7C, soare #F8AF00, font Ubuntu. */

@font-face { font-family: "Ubuntu"; src: url("fonts/brand-300.ttf") format("truetype"); font-weight: 300; font-display: swap; }
@font-face { font-family: "Ubuntu"; src: url("fonts/brand-400.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Ubuntu"; src: url("fonts/brand-500.ttf") format("truetype"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Ubuntu"; src: url("fonts/brand-700.ttf") format("truetype"); font-weight: 700; font-display: swap; }

:root {
  --albastru: #223a7c; --albastru-hover: #1b2f66; --albastru-apasat: #16275a; --albastru-50: #eef1f8; --albastru-100: #dde3f1;
  --soare: #f8af00;
  --text: #1f2635; --text-2: #4b5467; --text-3: #6b7383;
  --linie: #e3e6ec; --linie-tare: #cfd4dd; --fond: #f6f7f9; --suprafata: #ffffff;
  --atentie: #a35f00; --atentie-fond: #fff5e0; --pericol: #b3261e; --pericol-fond: #fdeceb; --succes: #1e6b45; --succes-fond: #e7f4ec;
  --bara-fond: #616670; --bara-text: #e9eaed; --bara-activ: #53575f;   /* exact ca bara laterala Airtable */
  --raza-mica: 6px; --raza: 10px;
  --umbra-1: 0 1px 2px rgba(34, 58, 124, .06), 0 1px 1px rgba(34, 58, 124, .04);
  --umbra-2: 0 6px 20px -6px rgba(34, 58, 124, .18), 0 2px 6px rgba(34, 58, 124, .06);
  --ease: cubic-bezier(.23, 1, .32, 1);
  --bara: 232px; --panou: 760px;
  color-scheme: light;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font: 400 14.5px/1.5 "Ubuntu", system-ui, -apple-system, "Segoe UI", sans-serif; color: var(--text); background: var(--fond); -webkit-font-smoothing: antialiased; }
::selection { background: var(--albastru-100); color: var(--text); }
:focus-visible { outline: 2px solid var(--albastru); outline-offset: 2px; border-radius: 4px; }
a { color: var(--albastru); text-underline-offset: 3px; }
h1, h2, h3 { margin: 0; font-weight: 500; letter-spacing: -.01em; text-wrap: balance; }
h1 { font-size: 1.35rem; }
h2 { font-size: 1rem; }
h3 { font-size: .95rem; }
.i { width: 1.15em; height: 1.15em; flex: none; vertical-align: -.2em; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.i.rotit { transform: rotate(180deg); }
.slab { color: var(--text-3); font-weight: 400; }
.pericol { color: var(--pericol); }
.atentie-text { color: var(--atentie); }
[hidden] { display: none !important; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.sari { position: absolute; left: 1rem; top: -3rem; z-index: 100; background: var(--albastru); color: #fff; padding: .5rem .9rem; border-radius: var(--raza-mica); }
.sari:focus { top: .75rem; }
form.inline { display: inline; margin: 0; }

/* ---------- controale ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .45rem; height: 38px; padding: 0 .95rem; border-radius: var(--raza-mica); font: 500 .9rem/1 inherit; font-family: inherit; white-space: nowrap; text-decoration: none; cursor: pointer; border: 1px solid transparent; transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease, transform 120ms var(--ease); }
.btn:active:not(:disabled) { transform: scale(.97); }
.btn:disabled { opacity: .55; cursor: default; }
.btn-primar { background: var(--albastru); color: #fff; }
.btn-primar:hover:not(:disabled) { background: var(--albastru-hover); }
.btn-negru { background: #1f2635; color: #fff; }
.btn-negru:hover:not(:disabled) { background: #000; }
.btn-secundar { background: var(--suprafata); color: var(--text); border-color: var(--linie-tare); }
.btn-secundar:hover:not(:disabled) { border-color: var(--albastru); color: var(--albastru); }
.btn-lat { width: 100%; height: 44px; }
.btn-fisier { height: 32px; font-size: .83rem; }
.link-btn { display: inline-flex; align-items: center; gap: .3rem; background: none; border: 0; padding: 0; font: inherit; font-size: .86rem; color: var(--albastru); cursor: pointer; text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 3px; transition: text-decoration-color 160ms ease; }
.link-btn:hover { text-decoration-color: currentColor; }
.link-btn.pericol { color: var(--pericol); }
.icon-btn { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: var(--raza-mica); border: 0; background: none; color: var(--text-2); cursor: pointer; text-decoration: none; transition: background-color 160ms ease, color 160ms ease; }
.icon-btn:hover { background: var(--albastru-50); color: var(--albastru); }
.icon-btn-mic { width: 26px; height: 26px; }
.icon-btn-mic .i { width: 14px; height: 14px; }
.icon-btn-alb { color: var(--bara-text); }
.icon-btn-alb:hover { background: var(--bara-activ); color: #fff; }
.btn-mic { display: inline-flex; align-items: center; gap: .25rem; height: 29px; padding: 0 .6rem; border: 1px solid var(--linie-tare); border-radius: var(--raza-mica); background: var(--suprafata); color: var(--text-2); font: 500 .79rem/1 inherit; font-family: inherit; cursor: pointer; white-space: nowrap; transition: border-color 160ms ease, color 160ms ease; }
.btn-mic:hover:not(:disabled) { border-color: var(--albastru); color: var(--albastru); }
.btn-mic-pericol:hover:not(:disabled) { border-color: var(--pericol); color: var(--pericol); }
.btn-mic:disabled { opacity: .55; cursor: default; }
.btn-mic .i { width: 13px; height: 13px; }

.camp { width: 100%; height: 38px; padding: 0 .7rem; border-radius: var(--raza-mica); border: 1px solid var(--linie-tare); background: var(--suprafata); color: var(--text); font: inherit; font-size: .9rem; transition: border-color 160ms ease, box-shadow 160ms ease; }
.camp:hover { border-color: #b3bac6; }
.camp:focus { outline: none; border-color: var(--albastru); box-shadow: 0 0 0 3px var(--albastru-100); }
.camp::placeholder { color: #9aa1ad; }
.camp-mic { height: 32px; font-size: .84rem; }
textarea.camp, .camp-text { height: auto; min-height: 38px; padding: .5rem .7rem; line-height: 1.45; resize: vertical; }
select.camp { padding-right: 2rem; appearance: none; background: var(--suprafata) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234b5467' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3C/svg%3E") no-repeat right .55rem center / 16px; cursor: pointer; }
.camp-fisier { padding: .45rem .7rem; height: auto; }
label { display: block; font-size: .78rem; font-weight: 500; color: var(--text-2); }
label > .camp { margin-top: .3rem; }
.opt { font-weight: 400; color: var(--text-3); }
input[type=checkbox] { accent-color: var(--albastru); width: 16px; height: 16px; margin: 0; }
.bifa { display: flex; align-items: center; gap: .55rem; padding: .32rem .25rem; border-radius: 5px; cursor: pointer; color: var(--text); font-size: .88rem; font-weight: 400; }
.segment { display: inline-flex; padding: 3px; gap: 2px; background: var(--fond); border: 1px solid var(--linie); border-radius: 8px; }
.segment button, .segment a { display: inline-grid; place-items: center; height: 30px; padding: 0 .6rem; border: 0; border-radius: 6px; background: none; font: 500 .83rem/1 inherit; font-family: inherit; color: var(--text-2); cursor: pointer; text-decoration: none; transition: background-color 160ms ease, color 160ms ease, box-shadow 160ms ease; }
.segment button[aria-pressed="true"], .segment a[aria-pressed="true"] { background: var(--suprafata); color: var(--albastru); box-shadow: var(--umbra-1); }
.segment-vedere a { width: 34px; padding: 0; }
.camp-grup .segment { display: flex; }
.camp-grup .segment button { flex: 1; height: 34px; }
.eticheta-camp { display: block; font-size: .78rem; font-weight: 500; color: var(--text-2); margin-bottom: .3rem; }

/* ---------- aplicatia: bara laterala + continut ---------- */
.aplicatie { display: flex; min-height: 100dvh; }
.bara { position: sticky; top: 0; align-self: flex-start; display: flex; flex-direction: column; width: var(--bara); height: 100dvh; flex: none; background: var(--bara-fond); color: var(--bara-text); padding: 1rem .75rem; }
.bara-brand { display: flex; align-items: center; gap: .5rem; padding: .35rem .4rem 1.1rem; color: #fff; text-decoration: none; }
.bara-brand img { height: 19px; display: block; filter: brightness(0) invert(1); } /* logo-ul albastru, facut alb pe fondul inchis */
.bara-brand span { font-weight: 500; font-size: .95rem; letter-spacing: .02em; padding-left: .5rem; border-left: 1px solid rgba(255,255,255,.25); }
.bara-meniu { display: flex; flex-direction: column; gap: 2px; }
.bara-meniu a { display: flex; align-items: center; gap: .6rem; padding: .5rem .65rem; border-radius: 7px; color: var(--bara-text); text-decoration: none; font-size: .9rem; font-weight: 500; transition: background-color 140ms ease, color 140ms ease; }
.bara-meniu a .i { width: 17px; height: 17px; opacity: .8; }
.bara-meniu a:hover { background: var(--bara-activ); color: #fff; }
.bara-meniu a[aria-current="page"] { background: var(--bara-activ); color: #fff; font-weight: 700; }
.bara-meniu a[aria-current="page"] .i { opacity: 1; }
.bara-sep { height: 1px; margin: .5rem .4rem; background: rgba(255,255,255,.12); }
.pagina-login { background: var(--bara-fond); }
.bara-jos { margin-top: auto; display: flex; align-items: center; gap: .5rem; padding: .6rem .3rem 0; border-top: 1px solid rgba(255,255,255,.12); font-size: .85rem; }
.bara-jos form { margin: 0 0 0 auto; }
.bara-user { color: #fff; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.continut-principal { flex: 1; min-width: 0; }

/* ---------- ecran (pagina de lucru) ---------- */
.ecran { padding: 1.1rem 1.5rem 3rem; }
.ecran-ingust { max-width: 1100px; }
.ecran-cap { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: .8rem; }
.ecran-cap h1 { font-size: 1.5rem; }
.fir { display: block; font-size: .8rem; color: var(--text-3); }
.fir-sep { margin: 0 .2rem; }
.ecran-titlu h1 { margin-top: .1rem; }
.ecran-actiuni { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.ecran-descriere { margin: 0 0 1rem; color: var(--text-2); max-width: 80ch; }
.ecran-bara { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; flex-wrap: wrap; border-bottom: 1px solid var(--linie-tare); margin-bottom: 1.1rem; }
.taburi { display: flex; gap: .15rem; overflow-x: auto; scrollbar-width: none; }
.taburi::-webkit-scrollbar { display: none; }
.tab { display: inline-flex; align-items: center; gap: .4rem; flex: none; padding: .6rem .9rem .65rem; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; background: none; color: var(--text-2); font: 500 .92rem/1 inherit; font-family: inherit; cursor: pointer; text-decoration: none; transition: color 140ms ease, border-color 140ms ease; }
.tab:hover { color: var(--text); }
.tab[aria-selected="true"] { color: var(--text); border-bottom-color: var(--albastru); }
.tab-numar { min-width: 1.3rem; padding: .12rem .38rem; border-radius: 999px; background: var(--linie); color: var(--text-2); font-size: .72rem; font-weight: 700; font-variant-numeric: tabular-nums; text-align: center; }
.tab[aria-selected="true"] .tab-numar { background: var(--albastru-50); color: var(--albastru); }
.filtre { margin-bottom: 1rem; }
.filtre-rand { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.filtre-mici { padding-bottom: .4rem; }
.filtre-rand .camp { width: auto; min-width: 9rem; }
.cautare { position: relative; flex: 1 1 14rem; display: flex; align-items: center; margin: 0; min-width: 0; }
.cautare > .i { position: absolute; left: .7rem; color: var(--text-3); width: 16px; height: 16px; }
.cautare .camp { width: 100%; padding-left: 2.3rem; margin: 0; }
.cautare-cap { flex: 0 1 260px; }

/* ---------- galeria de tichete: carduri mari, putin text ---------- */
.galerie { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 1.25rem; }
.card-tichet { display: flex; flex-direction: column; background: var(--suprafata); border-radius: 12px; box-shadow: 0 1px 2px rgba(31, 38, 53, .05), 0 0 0 1px rgba(31, 38, 53, .05); overflow: hidden; cursor: pointer; transition: box-shadow 180ms ease, transform 180ms var(--ease); }
.card-tichet:hover { box-shadow: var(--umbra-2), 0 0 0 1px rgba(31, 38, 53, .06); transform: translateY(-2px); }
.card-tichet.selectat { box-shadow: 0 0 0 2px var(--albastru), var(--umbra-2); }
.card-tichet.done { opacity: .7; }
.card-poza { position: relative; display: block; aspect-ratio: 4 / 3; background: #eef0f3; overflow: hidden; }
.card-poza img { width: 100%; height: 100%; object-fit: cover; display: block; }
.card-fara-poza { display: grid; place-items: center; width: 100%; height: 100%; color: #cdd1d9; }
.card-fara-poza .i { width: 48px; height: 48px; stroke-width: 1.1; }
.card-nr-poze, .card-hold { position: absolute; bottom: .6rem; display: inline-flex; align-items: center; gap: .25rem; padding: .2rem .55rem; border-radius: 999px; font-size: .74rem; font-weight: 500; }
.card-nr-poze { right: .6rem; background: rgba(31, 38, 53, .65); color: #fff; }
.card-hold { left: .6rem; background: rgba(255, 255, 255, .92); color: var(--atentie); }
.card-hold-rau { color: var(--pericol); }
.card-corp { padding: 1rem 1.15rem 1.1rem; display: flex; flex-direction: column; gap: .45rem; }
.card-corp h3 { font-size: 1.12rem; line-height: 1.3; font-weight: 500; }
.card-corp h3 a { color: var(--text); text-decoration: none; }
.card-linie { margin: 0; display: flex; align-items: center; gap: .45rem; flex-wrap: wrap; font-size: .86rem; min-width: 0; }
.card-linie .i { width: 15px; height: 15px; color: var(--text-3); }
.card-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.card-update { margin: .35rem 0 0; padding-top: .55rem; border-top: 1px solid var(--linie); font-size: .82rem; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.galerie-gol { grid-column: 1 / -1; }
.filtre-active { margin: -.4rem 0 .9rem; font-size: .85rem; color: var(--text-2); }
.camp-discret { border-color: transparent; background-color: transparent; color: var(--text-2); font-weight: 500; }
.camp-discret:hover { border-color: var(--linie-tare); }
.mini-rand { width: 32px; height: 32px; object-fit: cover; border-radius: 5px; margin-right: .5rem; vertical-align: middle; border: 1px solid var(--linie); }

/* ---------- panoul lateral (tichetul deschis din galerie) ---------- */
.panou-fundal { position: fixed; inset: 0; z-index: 60; background: rgba(15, 22, 40, .35); }
.panou-lateral { position: fixed; top: 0; right: 0; bottom: 0; z-index: 61; width: min(var(--panou), 100vw); display: flex; flex-direction: column; background: var(--fond); box-shadow: -12px 0 40px -12px rgba(15, 22, 40, .45); transition: width 220ms var(--ease); }
.panou-lateral[hidden] { display: none; }
body.panou-plin .panou-lateral { width: 100vw; }
.panou-cap-bara { display: flex; align-items: center; justify-content: space-between; padding: .5rem .75rem; background: var(--suprafata); border-bottom: 1px solid var(--linie); }
.panou-nav, .panou-actiuni { display: flex; gap: .15rem; }
.panou-continut { flex: 1; overflow-y: auto; padding: 1.1rem 1.4rem 3rem; overscroll-behavior: contain; }
.panou-incarca { padding: 2rem 0; text-align: center; }
body.panou-deschis { overflow: hidden; }
body.panou-plin .panou-continut { padding: 1.25rem 2rem 3rem; }
body.panou-plin .panou-continut .tichet { max-width: 1400px; margin: 0 auto; }

/* ---------- tichet ---------- */
.tichet-cap { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
.tichet-titlu { font-size: 1.45rem; line-height: 1.25; }
.meta { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; margin: .35rem 0 0; font-size: .85rem; color: var(--text-2); }
.schimba-status { align-self: center; }
.tichet-poze { display: flex; gap: .5rem; overflow-x: auto; padding-bottom: .35rem; margin-bottom: .9rem; scrollbar-width: thin; }
.tichet-poze a { flex: none; }
.tichet-poze img { height: 150px; width: auto; max-width: 260px; object-fit: cover; border-radius: var(--raza-mica); border: 1px solid var(--linie); background: #fff; display: block; }
.tichet-layout { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 1.1rem; align-items: start; }
.tichet-dreapta { position: sticky; top: 1rem; }
.panou-continut .tichet-layout { grid-template-columns: minmax(0, 1fr); }
.panou-continut .tichet-dreapta { position: static; }
body.panou-plin .panou-continut .tichet-layout { grid-template-columns: minmax(0, 1fr) 380px; }
body.panou-plin .panou-continut .tichet-dreapta { position: sticky; top: 0; }
.panou { background: var(--suprafata); border-radius: 12px; box-shadow: 0 0 0 1px rgba(31, 38, 53, .06); padding: 1.1rem 1.25rem; margin-bottom: 1rem; }
.camp-titlu { font-size: 1.05rem; font-weight: 500; height: 42px; }
.mai-multe { margin-top: .9rem; }
.mai-multe summary { cursor: pointer; font-size: .85rem; font-weight: 500; color: var(--albastru); list-style: none; display: inline-flex; gap: .4rem; align-items: center; }
.mai-multe summary::-webkit-details-marker { display: none; }
.mai-multe summary::before { content: "▸"; font-size: .7rem; transition: transform 160ms ease; }
.mai-multe[open] summary::before { transform: rotate(90deg); }
.mai-multe[open] summary { margin-bottom: .8rem; }
.tichet-nr { font-size: .9rem; font-weight: 400; color: var(--text-3); }
.panou > h2 { margin-bottom: .8rem; }
.panou-cap { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: .7rem; }
.panou-cap h2 { margin: 0; }
.campuri { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: .85rem 1rem; align-items: start; }
.camp-lat { grid-column: 1 / -1; }
.actiuni-form { display: flex; gap: .6rem; align-items: center; margin-top: 1rem; }
.ajutor { margin: .9rem 0 0; font-size: .85rem; color: var(--text-2); max-width: 75ch; }
.gol-mic { margin: 0; font-size: .86rem; }
.sectiune { margin-top: 1.5rem; }
.sectiune h2 { margin-bottom: .7rem; }
.rand-legat { padding: .7rem 0; border-top: 1px solid var(--linie); }
.rand-legat:first-of-type { border-top: 0; padding-top: 0; }
.rand-legat-cap { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; font-size: .88rem; }
.rand-legat-titlu { font-weight: 500; text-decoration: none; display: inline-flex; align-items: center; gap: .3rem; }
.rand-legat-titlu:hover { text-decoration: underline; }
.rand-legat-actiune { margin-left: auto; }
.rand-legat-text { margin: .3rem 0 0; font-size: .86rem; white-space: pre-wrap; color: var(--text-2); }
.panou-log .form-log { display: grid; gap: .5rem; margin-bottom: .9rem; }
.panou-log .form-log .btn { justify-self: end; }
.log { list-style: none; margin: 0; padding: 0; }
.tichet-dreapta .log { max-height: calc(100dvh - 16rem); overflow-y: auto; scrollbar-width: thin; }
.panou-continut .log { max-height: none; }
.log li { position: relative; padding: .5rem 0 .5rem 1.1rem; border-top: 1px solid var(--linie); }
.log li::before { content: ""; position: absolute; left: 0; top: 1rem; width: 8px; height: 8px; border-radius: 50%; background: var(--albastru); }
.log li.automat::before { background: var(--linie-tare); }
.log li.automat p { color: var(--text-2); }
.log-meta { display: flex; align-items: center; gap: .3rem; flex-wrap: wrap; font-size: .76rem; color: var(--text-3); }
.log-meta form { margin-left: auto; opacity: 0; transition: opacity 120ms ease; }
.log li:hover .log-meta form, .log-meta form:focus-within { opacity: 1; }
.log p { margin: .1rem 0 0; font-size: .87rem; white-space: pre-wrap; overflow-wrap: anywhere; }
.log-global { background: var(--suprafata); border: 1px solid var(--linie); border-radius: var(--raza); padding: .3rem 1.2rem; }
.log-global li { padding-left: 1.2rem; }
.log-global li:first-child { border-top: 0; }
.log-global .log-meta a { font-weight: 500; text-decoration: none; }
.log-global .log-meta a:hover { text-decoration: underline; }
.sterge-tichet { margin-top: .8rem; text-align: right; }
.inapoi { display: inline-block; margin-bottom: .6rem; font-size: .86rem; text-decoration: none; }
.inapoi:hover { text-decoration: underline; }

/* ---------- pagini simple (proforme, colete, informatii, utilizatori) ---------- */
.pagina { max-width: 1180px; padding: 1.1rem 1.5rem 3rem; }
.pagina-lata { max-width: 1480px; }
.pagina-cap { margin-bottom: 1rem; }
.pagina-cap p { margin: .3rem 0 0; color: var(--text-2); max-width: 80ch; }
.pagina-cap-rand { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.mesaj-pagina { margin: 0 0 1rem; padding: .7rem 1rem; border-radius: var(--raza); font-size: .9rem; }
.mesaj-pagina.succes { background: var(--succes-fond); color: var(--succes); }
.mesaj-pagina.info { background: var(--albastru-50); color: var(--albastru); }
.mesaj-pagina.avertisment { background: var(--atentie-fond); color: var(--atentie); }
.flash-wrap { position: fixed; left: 50%; bottom: 1.25rem; transform: translateX(-50%); z-index: 70; width: min(560px, calc(100vw - 2rem)); transition: opacity 400ms ease, transform 400ms ease; }
.flash-wrap .mesaj-pagina { margin: 0; box-shadow: var(--umbra-2); }
.flash-wrap.se-stinge { opacity: 0; transform: translate(-50%, 8px); pointer-events: none; }

.tabel-wrap { position: relative; overflow-x: auto; background: var(--suprafata); border: 1px solid var(--linie); border-radius: var(--raza); }
.tabel { width: 100%; border-collapse: collapse; font-size: .88rem; font-variant-numeric: tabular-nums; }
.tabel th, .tabel td { padding: .65rem .85rem; text-align: left; white-space: nowrap; border-bottom: 1px solid var(--linie); vertical-align: top; }
.tabel tbody tr:last-child td { border-bottom: 0; }
.tabel tbody tr:hover { background: #fafbfc; }
.tabel th { font-size: .72rem; font-weight: 500; color: var(--text-3); text-transform: uppercase; letter-spacing: .05em; background: #fafbfc; }
.tabel .num { text-align: right; }
.tabel .col-text, .tabel .col-titlu, .tabel .col-miscare, .tabel .col-resp { white-space: normal; }
.tabel .col-titlu { min-width: 16rem; }
.tabel .col-miscare { min-width: 12rem; max-width: 20rem; font-size: .84rem; }
.tabel .col-resp { max-width: 11rem; }
.tabel tr.done td { color: var(--text-3); }
.tabel tr.done .titlu-tichet { color: var(--text-2); }
.tabel-tichete tbody tr { cursor: pointer; }
.tabel-tichete tr.selectat td { background: var(--albastru-50); }
.titlu-tichet { font-weight: 500; text-decoration: none; }
.titlu-tichet:hover { text-decoration: underline; }
.sub { display: flex; flex-wrap: wrap; gap: .25rem .7rem; margin-top: .2rem; font-size: .78rem; color: var(--text-3); }
.sub .i { width: 13px; height: 13px; }
.filtru-gol { padding: 2rem 1rem !important; text-align: center; color: var(--text-3); white-space: normal !important; }
.actiuni-rand-td { text-align: right; }
.ultimul-text { color: var(--text-2); }

.insigna { display: inline-flex; align-items: center; gap: .25rem; padding: .12rem .5rem; border-radius: 999px; font-size: .76rem; font-weight: 500; white-space: nowrap; }
.insigna-mic { font-size: .7rem; padding: .04rem .42rem; }
.insigna-ok { background: var(--succes-fond); color: var(--succes); }
.insigna-atentie { background: var(--atentie-fond); color: var(--atentie); }
.insigna-gri { background: var(--linie); color: var(--text-2); }
.insigna-albastru { background: var(--albastru-50); color: var(--albastru); }
.insigna-soare { background: #fff1cc; color: #7a4f00; }
.insigna-pericol { background: var(--pericol-fond); color: var(--pericol); }
.insigna .i { width: 13px; height: 13px; }

.select-status { width: auto; min-width: 8.5rem; font-weight: 500; }
.select-status.status-ok { color: var(--succes); border-color: #bfe0cc; background-color: var(--succes-fond); }
.select-status.status-albastru { color: var(--albastru); border-color: var(--albastru-100); background-color: var(--albastru-50); }
.select-status.status-atentie { color: var(--atentie); border-color: #f1d9a8; background-color: var(--atentie-fond); }
.select-status.status-soare { color: #7a4f00; border-color: #f3d98a; background-color: #fff1cc; }

/* ---------- fisiere ---------- */
.fisiere { list-style: none; margin: 0; padding: 0; display: grid; gap: .3rem; }
.fisiere li { display: flex; align-items: center; gap: .6rem; min-height: 32px; font-size: .86rem; }
.fisiere a { display: inline-flex; align-items: center; gap: .45rem; min-width: 0; text-decoration: none; color: var(--text); }
.fisiere a:hover .fisier-nume { text-decoration: underline; color: var(--albastru); }
.fisiere a .i { color: var(--text-3); width: 18px; height: 18px; }
.fisier-nume { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 34rem; }
.fisier-mini { width: 40px; height: 40px; object-fit: cover; border-radius: 4px; border: 1px solid var(--linie); background: #fff; }
.fisier-meta { margin-left: auto; font-size: .76rem; }
.fisiere-compact { display: flex; flex-wrap: wrap; gap: .3rem .9rem; margin-top: .3rem; }
.fisiere-compact li { min-height: 0; font-size: .79rem; }
.fisiere-compact .fisier-mini { width: 28px; height: 28px; }
.fisiere-compact .fisier-nume { max-width: 14rem; }
.incarcare { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; margin: 0; font-size: .78rem; }

/* ---------- informatii ---------- */
.carduri { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1rem; }
.card { background: var(--suprafata); border: 1px solid var(--linie); border-radius: var(--raza); padding: 1rem 1.1rem; }
.card h3 a { text-decoration: none; }
.card h3 a:hover { text-decoration: underline; }
.card-text { margin: .4rem 0 0; font-size: .85rem; color: var(--text-2); white-space: pre-line; }

/* ---------- login ---------- */
.pagina-login { background: var(--bara-fond); min-height: 100dvh; }
.login { min-height: 100dvh; display: grid; place-items: center; padding: 1.5rem; }
.login-panou { width: 100%; max-width: 400px; background: var(--suprafata); border-radius: 14px; padding: 2.25rem 2rem 2rem; box-shadow: 0 24px 60px -20px rgba(10, 20, 50, .5); }
.login-logo { height: 30px; display: block; margin-bottom: 1.75rem; }
.login h1 { font-size: 1.4rem; }
.login-sub { margin: .3rem 0 1.5rem; color: var(--text-2); font-size: .93rem; }
.login-form { display: grid; gap: 1rem; }
.alerta { display: flex; gap: .5rem; align-items: center; margin: 0; padding: .65rem .8rem; border-radius: var(--raza-mica); background: var(--pericol-fond); color: var(--pericol); font-size: .88rem; }

/* ---------- utilizatori ---------- */
.campuri-parola { margin-top: 1rem; grid-template-columns: auto minmax(320px, 1fr) auto; align-items: end; }
.parola-rand { display: flex; gap: .5rem; margin-top: .3rem; }
.parola-rand .camp { flex: 1; min-width: 0; margin: 0; font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; letter-spacing: .02em; }
.parola-rand .btn { flex: none; }
.camp-temporara { margin-top: .9rem; }
.tabel-conturi td { vertical-align: top; line-height: 1.45; }
.tabel-conturi tr.inactiv td { color: var(--text-3); }
.actiuni-cont { text-align: right; }
.tabel-conturi td.actiuni-cont { white-space: normal; min-width: 15rem; }
.tabel-conturi td.actiuni-cont .btn-mic { margin: .15rem 0 .15rem .25rem; }
.dialog { width: min(480px, calc(100vw - 2rem)); padding: 0; border: 0; border-radius: 14px; box-shadow: var(--umbra-2), 0 24px 64px -12px rgba(31, 38, 53, .35); color: var(--text); }
.dialog::backdrop { background: rgba(31, 38, 53, .45); }
.dialog-corp { display: grid; gap: 1rem; padding: 1.4rem 1.5rem 1.3rem; }
.dialog-corp h2 { margin: 0; font-size: 1.15rem; }
.dialog-corp .ajutor { margin: 0; }
.dialog-eroare { margin: 0; padding: .6rem .8rem; border-radius: var(--raza-mica); background: var(--pericol-fond); color: var(--pericol); font-size: .85rem; }
.dialog-actiuni { display: flex; justify-content: flex-end; gap: .5rem; margin-top: .25rem; }

/* ---------- fisa tichetului (stil Airtable: eticheta stanga, valoarea dreapta) ---------- */
.fisa-sectiune { padding: .9rem 0 1rem; border-bottom: 1px solid var(--linie); }
.fisa-sectiune:last-child { border-bottom: 0; }
.fisa-titlu { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: .6rem; }
.fisa-titlu h2 { font-size: .95rem; text-transform: uppercase; letter-spacing: .04em; color: var(--text-2); }
.fisa { display: grid; gap: .55rem; }
.fisa-rand { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: .75rem; align-items: center; margin: 0; font-size: inherit; font-weight: 400; color: inherit; }
.fisa-rand-sus { align-items: start; }
.fisa-rand > .camp { margin: 0; }
.fisa-rand .et { font-size: .82rem; font-weight: 500; color: var(--text-2); padding-top: .1rem; }
.fisa-rand-sus .et { padding-top: .6rem; }
.fisa-valoare { display: grid; gap: .5rem; min-width: 0; }
.fisa .camp-titlu { font-size: 1rem; }
.legat { padding: .7rem 0; border-top: 1px solid var(--linie); }
.legat:first-of-type { border-top: 0; padding-top: .2rem; }
.et-legat { display: flex; flex-direction: column; align-items: flex-start; gap: .25rem; font-size: .82rem; }
.legat-titlu { font-weight: 500; font-size: .92rem; color: var(--text); text-decoration: none; display: inline-flex; align-items: center; gap: .3rem; }
.legat-titlu:hover { text-decoration: underline; color: var(--albastru); }
.legat-text { margin: 0; font-size: .85rem; white-space: pre-wrap; color: var(--text-2); }
.legat-actiune { justify-self: start; }
.mai-multe { margin-top: .6rem; }
.mai-multe[open] summary { margin-bottom: .6rem; }

/* caseta de atasamente (ca in Airtable): miniaturi pe un rand, derulabile, sageti dedesubt */
.atasamente { border: 1px solid var(--linie-tare); border-radius: 8px; background: var(--suprafata); padding: .55rem .6rem .35rem; min-width: 0; }
.atasamente-rand { display: flex; gap: .55rem; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; padding-bottom: .2rem; }
.atasamente-rand::-webkit-scrollbar { display: none; }
.atas { position: relative; flex: none; width: 150px; margin: 0; scroll-snap-align: start; }
.atas-previz { display: block; height: 118px; border-radius: 6px; overflow: hidden; background: #f0f1f4; border: 1px solid var(--linie); transition: box-shadow 140ms ease, transform 140ms ease; }
.atas-previz:hover { box-shadow: var(--umbra-2); transform: translateY(-1px); }
.atas-previz img { width: 100%; height: 100%; object-fit: cover; display: block; }
.atas-doc { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .3rem; width: 100%; height: 100%; color: var(--text-3); font-size: .72rem; letter-spacing: .06em; }
.atas-doc .i { width: 30px; height: 30px; stroke-width: 1.3; }
.atas-doc.atas-pdf { color: #c2341b; background: #fff4f1; }
.atas-nume { margin: .3rem .1rem 0; font-size: .74rem; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.atas-sterge { position: absolute; top: .3rem; right: .3rem; margin: 0; opacity: 0; transition: opacity 120ms ease; }
.atas-sterge .icon-btn { background: rgba(255,255,255,.92); color: var(--text-2); box-shadow: var(--umbra-1); }
.atas:hover .atas-sterge, .atas-sterge:focus-within { opacity: 1; }
.atasamente-sageti { display: flex; align-items: center; justify-content: center; gap: .6rem; padding-top: .25rem; font-size: .75rem; }
.atasamente-sageti [data-deruleaza="-1"] .i { transform: rotate(180deg); }
.atasamente-mici .atas { width: 108px; }
.atasamente-mici .atas-previz { height: 82px; }
.atasamente-mici .atas-doc .i { width: 24px; height: 24px; }
.incarcare { justify-self: start; }
.tabel .atasamente { border: 0; padding: 0; background: none; }
.tabel .atasamente-mici .atas { width: 84px; }
.tabel .atasamente-mici .atas-previz { height: 56px; }
.tabel .atasamente-sageti { display: none; }
.carduri .atasamente { margin-top: .6rem; }
.panou-continut .tichet-stanga .fisa-sectiune:first-child { padding-top: 0; }

/* previzualizarea fisierului, peste tot */
.previz { position: fixed; inset: 0; z-index: 90; display: flex; flex-direction: column; background: rgba(20, 24, 33, .93); }
.previz-bara { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .5rem .9rem; color: #fff; }
.previz-stanga { display: flex; align-items: baseline; gap: .7rem; min-width: 0; }
.previz-nume { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.previz-bara .slab { color: rgba(255,255,255,.6); }
.previz-actiuni { display: flex; gap: .15rem; }
.previz-actiuni .icon-btn:disabled { opacity: .3; cursor: default; }
.previz-corp { flex: 1; display: grid; place-items: center; padding: 0 1rem 1rem; min-height: 0; }
.previz-corp img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 4px; box-shadow: 0 20px 60px rgba(0,0,0,.5); }
.previz-corp iframe { width: min(1100px, 100%); height: 100%; border: 0; border-radius: 6px; background: #fff; }
.previz-altceva { text-align: center; color: #fff; line-height: 1.8; }
.previz-altceva .btn { margin-top: .6rem; }
body.previz-deschis { overflow: hidden; }

/* ---------- ecrane mici ---------- */
@media (max-width: 760px) {
  .fisa-rand { grid-template-columns: minmax(0, 1fr); gap: .25rem; }
  .fisa-rand-sus .et, .fisa-rand .et { padding-top: 0; }
}
@media (max-width: 1100px) {
  .tichet-layout, body.panou-plin .panou-continut .tichet-layout { grid-template-columns: minmax(0, 1fr); }
  .tichet-dreapta, body.panou-plin .panou-continut .tichet-dreapta { position: static; }
  .tichet-dreapta .log { max-height: none; }
}
@media (max-width: 900px) {
  :root { --bara: 100%; }
  .aplicatie { flex-direction: column; }
  .bara { position: static; height: auto; width: 100%; flex-direction: row; align-items: center; flex-wrap: wrap; gap: .25rem .5rem; padding: .5rem .75rem; }
  .bara-brand { padding: .25rem .4rem; }
  .bara-meniu { order: 5; flex-direction: row; flex-basis: 100%; overflow-x: auto; scrollbar-width: none; }
  .bara-meniu a { flex: none; padding: .4rem .55rem; font-size: .85rem; }
  .bara-sep { width: 1px; height: auto; margin: .2rem .15rem; }
  .bara-jos { margin: 0 0 0 auto; padding: 0; border: 0; }
  .bara-user { display: none; }
  .panou-lateral { width: 100vw; }
}
@media (max-width: 760px) {
  .ecran, .pagina { padding: .9rem .9rem 2.5rem; }
  .galerie { grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); }
  .campuri-parola { grid-template-columns: minmax(0, 1fr); }
  .parola-rand { flex-wrap: wrap; }
  .parola-rand .camp { flex-basis: 100%; }
  .filtre-rand .camp { min-width: 0; flex: 1 1 8rem; }
  .cautare-cap { flex-basis: 100%; }
  .panou-continut { padding: .9rem .9rem 3rem; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: 1ms !important; animation-duration: 1ms !important; } }