/* Aspectul e cel al unui program de contabilitate: fara culori tari, totul se sprijina pe chenare subtiri si pe tipografie. Randurile sunt joase inadins — pe un ecran obisnuit trebuie sa incapa cat mai multe facturi fara derulare. */ :root{ --acc:#2f4a6d; --acc-2:#22384f; --acc-slab:#eef2f7; --fundal:#f4f5f7; --card:#fff; --panou:#fbfbfc; --panou-2:#f2f4f6; --text:#161a20; --slab:#5f6672; --f-slab:#8a919c; --linie:#dcdfe4; --linie-2:#eceef1; --ok:#0f6b4f; --ok-bg:#e8f4ef; --err:#a4262c; --err-bg:#fdf0f0; --warn:#8a5a00; --warn-bg:#fdf6e6; --info:#1f4d8f; --info-bg:#eef4fc; --umbra:none; --umbra-2:0 6px 16px rgba(20,26,36,.10); --lat-bara:180px; --lat-bara-mic:56px; } *{box-sizing:border-box} html,body{height:100%} body{margin:0;font:13px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif; background:var(--fundal);color:var(--text);-webkit-font-smoothing:antialiased} a{color:var(--acc-2);text-decoration:none} a:hover{text-decoration:underline} h1{font-size:17px;font-weight:650;margin:0;letter-spacing:-.2px} h2{font-size:14px;font-weight:650;margin:0 0 8px} h3{font-size:10.5px;font-weight:700;margin:0 0 10px;color:var(--slab); text-transform:uppercase;letter-spacing:.6px} /* ======================= structura cu bara laterala ======================= Meniul e compact: 188 px desfasurat, 56 px restrans (doar pictograme). Starea se tine minte in localStorage, ca sa nu o realegi la fiecare pagina. */ .aplicatie{display:flex;min-height:100vh} .bara{width:var(--lat-bara);background:var(--panou);color:#4a5261;flex-shrink:0; border-right:1px solid var(--linie); display:flex;flex-direction:column;position:fixed;top:0;bottom:0;left:0;z-index:40; transition:width .16s ease} /* aplicata din inainte de randare, ca meniul sa nu sara la incarcare */ html.meniu-restrans .bara{width:var(--lat-bara-mic)} html.meniu-restrans .bara .txt, html.meniu-restrans .bara .sageata, html.meniu-restrans .bara .bulina{display:none} html.meniu-restrans .bara .marca, html.meniu-restrans .bara .firma{justify-content:center} html.meniu-restrans .bara .meniu a, html.meniu-restrans .bara .iesire{justify-content:center;padding-left:0;padding-right:0} html.meniu-restrans .bara .plie svg{transform:rotate(180deg)} html.meniu-restrans .continut{margin-left:var(--lat-bara-mic)} .bara.restrans{width:var(--lat-bara-mic)} .bara.restrans .txt,.bara.restrans .sageata,.bara.restrans .bulina{display:none} .bara.restrans .marca{justify-content:center} .bara.restrans .firma{justify-content:center;padding:10px 0} .bara.restrans .meniu a,.bara.restrans .iesire{justify-content:center;padding-left:0;padding-right:0} .bara.restrans .plie svg{transform:rotate(180deg)} .bara-sus{display:flex;align-items:center;justify-content:space-between; height:44px;padding:0 8px 0 12px;border-bottom:1px solid var(--linie)} .marca{display:flex;align-items:center;gap:9px;color:var(--text);font-weight:650;font-size:14px; letter-spacing:-.2px;overflow:hidden} .marca:hover{text-decoration:none;color:var(--text)} .marca .pic{width:22px;height:22px;border-radius:5px;background:var(--acc);color:#fff; display:grid;place-items:center;font-size:13px;font-weight:700;flex-shrink:0} .plie{background:none;border:0;color:var(--slab);cursor:pointer;padding:5px;border-radius:6px; display:grid;place-items:center;flex-shrink:0} .plie:hover{background:#eceef1;color:var(--text)} .plie svg{width:15px;height:15px;transition:transform .16s} /* Blocul firmei e un buton care deschide lista firmelor contului. Zona exterioara tine pozitionarea meniului; butonul tine aspectul. */ .firma-zona{position:relative;display:block;border-bottom:1px solid var(--linie)} .firma{display:flex;align-items:center;gap:9px;padding:8px 11px;min-height:44px; width:100%;background:none;border:0;font:inherit;color:inherit;text-align:left;cursor:pointer} .firma:hover{background:#eceef1} .firma .ini{width:24px;height:24px;border-radius:5px;background:#e3e7ed; color:var(--acc);display:grid;place-items:center;font-size:11px;font-weight:700;flex-shrink:0} .firma .txt{display:flex;flex-direction:column;min-width:0;line-height:1.25} .firma .nume{color:var(--text);font-size:12px;font-weight:600; overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .firma .cui{color:var(--slab);font-size:10.5px} .firma .sageata{width:13px;height:13px;margin-left:auto;color:var(--f-slab);flex-shrink:0} /* Bara care spune ca lucrezi pe firma altcuiva. Sta sus, pe toata latimea, si nu se poate inchide: cu drepturi depline, o factura emisa pe firma gresita e un document fiscal, nu o greseala de tastare. */ .bara-straina{background:var(--warn-bg);border-bottom:1px solid #e8d5a8; color:#70490a;font-size:12.5px;padding:8px 18px;position:sticky;top:0;z-index:35} @media(max-width:900px){.bara-straina{padding-left:14px;padding-right:14px}} .meniu{flex:1;padding:7px;overflow-y:auto} .meniu a{display:flex;align-items:center;gap:10px;padding:6px 9px;border-radius:6px; color:#4a5261;font-size:12.5px;font-weight:500;margin-bottom:1px; transition:background .12s,color .12s} .meniu a:hover{background:#eceef1;color:var(--text);text-decoration:none} .meniu a.activ{background:var(--acc);color:#fff;font-weight:600} .meniu a svg{width:16px;height:16px;flex-shrink:0} .meniu .bulina{margin-left:auto;background:#e3e7ed;color:var(--acc); font-size:10.5px;padding:1px 6px;border-radius:9px;font-weight:700} .meniu a.activ .bulina{background:rgba(255,255,255,.24);color:#fff} .meniu .sep{height:1px;background:var(--linie);margin:8px 9px} .iesire{display:flex;align-items:center;gap:10px;padding:8px 16px;color:var(--slab);font-size:12px; border-top:1px solid var(--linie)} .iesire:hover{color:var(--text);text-decoration:none;background:#eceef1} .iesire svg{width:15px;height:15px;flex-shrink:0} .iesire .txt{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .continut{flex:1;margin-left:var(--lat-bara);min-width:0;display:flex;flex-direction:column; transition:margin-left .16s ease} .bara.restrans ~ .continut{margin-left:var(--lat-bara-mic)} .zona-flash{padding:10px 18px 0} .antet{background:#fff;border-bottom:1px solid var(--linie);padding:9px 18px; display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap; position:sticky;top:0;z-index:30} .antet .titlu p{margin:1px 0 0;font-size:11.5px;color:var(--slab)} main{padding:14px 18px 40px;flex:1} @media(max-width:900px){ .bara{position:static;width:100%;height:auto; border-right:0;border-bottom:1px solid var(--linie)} .bara .plie,.bara .iesire .txt{display:none} .aplicatie{flex-direction:column} .continut,.bara.restrans ~ .continut{margin-left:0} .meniu{display:flex;flex-wrap:wrap;gap:3px;padding:6px} .meniu a{margin:0} .meniu .sep{display:none} .antet,main,.zona-flash{padding-left:14px;padding-right:14px} } /* detaliul facturii: continut lat + coloana de stare; pe ecrane mici coloanele se aseaza una sub alta */ .factura-doua-coloane{grid-template-columns:minmax(0,2fr) minmax(280px,1fr);align-items:start} @media(max-width:1100px){.factura-doua-coloane{grid-template-columns:minmax(0,1fr)}} /* ================================ carduri ================================ */ .card{background:var(--card);border:1px solid var(--linie);border-radius:6px; box-shadow:var(--umbra);margin-bottom:12px} .card-cap{padding:9px 14px;border-bottom:1px solid var(--linie-2); display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap} .card-cap h2,.card-cap h3{margin:0} .card-corp{padding:14px} .card-corp.stramt{padding:0} .grid{display:grid;gap:12px;min-width:0} .grid > *{min-width:0} .g2{grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr))} .g3{grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr))} .g4{grid-template-columns:repeat(auto-fit,minmax(min(190px,100%),1fr))} /* =============================== indicatori =============================== */ .kpi{background:var(--card);border:1px solid var(--linie);border-radius:6px; padding:11px 14px;box-shadow:var(--umbra)} .kpi .et{font-size:11px;color:var(--slab);font-weight:500;display:flex;align-items:center;gap:6px} .kpi .vl{font-size:21px;font-weight:680;letter-spacing:-.5px;margin-top:5px; font-variant-numeric:tabular-nums} .kpi .su{font-size:11px;color:var(--slab);margin-top:3px} .kpi.ac{border-left:3px solid var(--acc)} .kpi.wr{border-left:3px solid var(--warn)} .kpi.ok{border-left:3px solid var(--ok)} /* ================================ formulare =============================== */ label{display:block;font-size:11.5px;color:var(--text);margin:0 0 3px;font-weight:600} input[type=text],input[type=email],input[type=password],input[type=number], input[type=date],input[type=search],select,textarea{ width:100%;padding:6px 9px;border:1px solid #cbd0d8;border-radius:6px;font:inherit; background:#fff;color:var(--text);transition:border-color .12s,box-shadow .12s} input:focus,select:focus,textarea:focus{outline:none;border-color:var(--acc); box-shadow:0 0 0 3px rgba(47,74,109,.14)} input[readonly]{background:#f5f6f8;color:var(--slab)} textarea{min-height:60px;resize:vertical} .camp{margin-bottom:10px} .randuri{display:grid;gap:10px} .r2{grid-template-columns:1fr 1fr} .r3{grid-template-columns:1fr 1fr 1fr} .r4{grid-template-columns:1fr 1fr 1fr 1fr} @media(max-width:760px){.r2,.r3,.r4{grid-template-columns:1fr}} .bifa{display:flex;align-items:center;gap:8px;font-size:12.5px;font-weight:500;cursor:pointer} .bifa input{width:auto;margin:0;accent-color:var(--acc);width:15px;height:15px} /* bifa cu explicatie dedesubt: caseta sus, textul aliniat langa ea */ .bifa-mare{display:flex;align-items:flex-start;gap:10px;cursor:pointer} .bifa-mare input{width:16px;height:16px;margin:2px 0 0;flex:none;accent-color:var(--acc)} .bifa-mare strong{display:block;font-size:13.5px} .bifa-mare .ajutor{margin-top:3px} .ajutor{font-size:11px;color:var(--slab);margin-top:3px} /* ---------------------------- casute de data ------------------------------ Campul text scrie data romaneste; casuta nativa ramane in formular, doar ca nu se vede, si duce valoarea in forma ISO. Vezi src/public/data.js. */ .data-ro{position:relative;display:block} .data-ro-text{padding-right:32px} .data-ro-nativ{position:absolute;left:0;bottom:0;width:1px;height:1px; opacity:0;pointer-events:none;border:0;padding:0;margin:0} .data-ro-calendar{position:absolute;right:1px;top:1px;bottom:1px;width:28px; display:grid;place-items:center;background:none;border:0;border-radius:0 5px 5px 0; color:var(--slab);cursor:pointer} .data-ro-calendar:hover{background:#eceef1;color:var(--text)} .data-ro-calendar svg{width:15px;height:15px} .data-ro-text:invalid{border-color:var(--err)} /* ================================= butoane ================================ */ .btn{display:inline-flex;align-items:center;gap:6px;padding:6px 11px;border-radius:6px; border:1px solid #cbd0d8;background:#fff;color:var(--text);font:inherit;font-size:12.5px; font-weight:550;cursor:pointer;white-space:nowrap;transition:all .12s} .btn:hover{background:#f5f6f8;border-color:#b0b7c1;text-decoration:none} .btn:disabled{opacity:.5;cursor:not-allowed} .btn svg{width:15px;height:15px} .btn-primar{background:var(--acc);border-color:var(--acc);color:#fff} .btn-primar:hover{background:var(--acc-2);border-color:var(--acc-2)} .btn-pericol{color:var(--err);border-color:#e8bfbf} .btn-pericol:hover{background:var(--err-bg);border-color:#d99f9f} .btn-mic{padding:3px 8px;font-size:11.5px} .btn-gol{border-color:transparent;background:transparent} .btn-gol:hover{background:#eceef1} .actiuni{display:flex;gap:8px;flex-wrap:wrap;align-items:center} /* ============================== meniu contextual ========================== */ .men{position:relative;display:inline-block} .men-buton{padding:5px 8px;line-height:1} .men-lista{position:absolute;right:0;top:calc(100% + 4px);background:#fff; border:1px solid var(--linie);border-radius:6px;box-shadow:var(--umbra-2); min-width:190px;padding:4px;z-index:50;display:none} .men.deschis .men-lista{display:block} .men-lista a,.men-lista button{display:flex;align-items:center;gap:8px;width:100%; padding:6px 9px;border:0;background:none;font:inherit;font-size:12.5px;color:var(--text); text-align:left;border-radius:5px;cursor:pointer} .men-lista a:hover,.men-lista button:hover{background:#eceef1;text-decoration:none} .men-lista .rau{color:var(--err)} .men-lista hr{border:0;border-top:1px solid var(--linie-2);margin:5px 0} /* Lista firmelor contului. Se ancoreaza la stanga: bara laterala e ingusta, iar ancorarea la dreapta ar impinge meniul in afara ecranului. Regulile astea trebuie sa stea DUPA .men-lista, nu inainte. Amandoua au aceeasi specificitate, asa ca invinge ultima scrisa: cand blocul era mai sus, "right:0" de la .men-lista batea "right:auto" de aici, lista se intindea intre cele doua margini si nu se mai derula cum trebuie. */ .men-firme{left:8px;right:auto;min-width:236px;max-width:calc(100vw - 24px); max-height:70vh;overflow-y:auto} .men-firme .cap{padding:5px 9px 3px;font-size:10px;font-weight:700;color:var(--f-slab); text-transform:uppercase;letter-spacing:.5px} .men-firme .firma-optiune{flex-direction:column;align-items:flex-start;gap:1px;line-height:1.3} .men-firme .nume-o{font-weight:600} .men-firme .cui-o{font-size:11px;color:var(--slab);font-family:ui-monospace,Menlo,Consolas,monospace} .men-firme .firma-optiune.activa{background:var(--acc-slab)} .men-firme .firma-optiune.activa .nume-o{color:var(--acc)} .men-firme form{margin:0} /* firmele altor apicultori: acelasi rand, dar semnalat cu o dunga pe margine */ .men-firme .firma-optiune.straina{border-left:3px solid var(--warn);border-radius:0 5px 5px 0} /* ================================= tabele ================================= */ .tabel-scroll{overflow-x:auto} table{width:100%;border-collapse:collapse;font-size:13px} thead th{text-align:left;font-size:10.5px;text-transform:uppercase;letter-spacing:.5px; color:var(--slab);font-weight:700;padding:7px 12px;background:#f7f8fa; border-bottom:1px solid var(--linie);white-space:nowrap} tbody td{padding:6px 12px;border-bottom:1px solid var(--linie-2);vertical-align:middle} tbody tr:last-child td{border-bottom:0} tbody tr:hover{background:#f7f8fa} tbody tr.selectat{background:var(--acc-slab)} tfoot td{padding:7px 12px;background:#f7f8fa;font-weight:650; border-top:1px solid var(--linie)} .num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap} .col-bifa{width:36px} .col-actiuni{width:44px;text-align:right} td .princ{font-weight:600} td .sec{font-size:11px;color:var(--slab);margin-top:1px} /* ============================== stari, etichete =========================== */ .st{display:inline-flex;align-items:center;gap:5px;padding:2px 7px;border-radius:20px; font-size:11px;font-weight:650;white-space:nowrap;line-height:1.4} .st::before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor} .st-draft{background:#eceef1;color:#4a5261} .st-issued{background:var(--info-bg);color:var(--info)} .st-uploading,.st-sent{background:var(--warn-bg);color:var(--warn)} .st-accepted{background:var(--ok-bg);color:var(--ok)} .st-rejected,.st-error{background:var(--err-bg);color:var(--err)} /* ce s-a intamplat cu factura la ANAF, sub pastila de stare */ .spv{font-size:11px;color:var(--slab);margin-top:3px;line-height:1.45} .spv-nu{color:var(--err)} .spv-index{font-size:10.5px;color:var(--f-slab)} .spv-motiv{margin-top:2px;color:var(--err);font-size:10.5px;max-width:34ch} .eticheta{display:inline-block;padding:2px 6px;border-radius:4px;font-size:10.5px; font-weight:650;background:#eceef1;color:#4a5261} .eticheta-storno{background:#f6eef5;color:#7d2a63} .eticheta-incasat{background:var(--ok-bg);color:var(--ok)} .eticheta-test{background:#f1f0ec;color:#6b6558;border:1px dashed #c9c3b5} /* ============================ pastile de filtrare ========================= */ .pastile{display:flex;gap:5px;flex-wrap:wrap} .pastila{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:20px; border:1px solid var(--linie);background:#fff;font-size:12px;color:var(--slab); font-weight:550;cursor:pointer} .pastila:hover{border-color:#b0b7c1;text-decoration:none;color:var(--text)} /* atentie: fundalul activ e accentul, nu --panou; bara laterala e deschisa la culoare, deci --panou ar face pastila alba pe alb */ .pastila.activ{background:var(--acc);border-color:var(--acc);color:#fff} .pastila .nr{font-size:11px;padding:0 6px;border-radius:9px;background:#eceef1; color:var(--slab);font-weight:700} .pastila.activ .nr{background:rgba(255,255,255,.22);color:#fff} /* =============================== bara unelte ============================== */ .unelte{display:flex;gap:8px;align-items:center;flex-wrap:wrap; padding:9px 14px;border-bottom:1px solid var(--linie-2)} .cauta{position:relative;flex:1;min-width:200px;max-width:340px} /* padding-ul din stanga face loc lupei; daca se schimba unul, se schimba si celalalt, altfel pictograma ajunge peste text */ .cauta input{padding-left:29px} .cauta svg{position:absolute;left:9px;top:50%;transform:translateY(-50%); width:14px;height:14px;color:var(--slab);pointer-events:none} .unelte select{width:auto;min-width:120px} /* bara de selectie multipla */ .bara-sel{display:none;align-items:center;gap:12px;padding:8px 14px; background:var(--acc-slab);border-bottom:1px solid #ccd8e6;font-size:12.5px} .bara-sel.vizibil{display:flex} .bara-sel strong{font-weight:650} /* ================================= alerte ================================= */ .alerta{padding:9px 12px;border-radius:6px;margin-bottom:12px;font-size:12.5px; border:1px solid transparent;display:flex;gap:10px;align-items:flex-start} .alerta .txt{flex:1} .a-ok{background:var(--ok-bg);color:#0b503b;border-color:#b3d9c9} .a-err{background:var(--err-bg);color:#8a1f24;border-color:#e5bfc1} .a-warn{background:var(--warn-bg);color:#70490a;border-color:#e8d5a8} .a-info{background:var(--info-bg);color:#1a3f75;border-color:#c2d5ec} .alerta ul{margin:6px 0 0;padding-left:18px} .alerta a{color:inherit;text-decoration:underline} /* ================================ cronologie ============================== */ .cron{list-style:none;margin:0;padding:0} .cron li{position:relative;padding:0 0 14px 22px;border-left:2px solid var(--linie)} .cron li:last-child{border-left-color:transparent;padding-bottom:0} .cron li::before{content:'';position:absolute;left:-6px;top:2px;width:10px;height:10px; border-radius:50%;background:#fff;border:2px solid var(--linie)} .cron li.gata::before{background:var(--ok);border-color:var(--ok)} .cron li.lucru::before{background:var(--warn);border-color:var(--warn)} .cron li.rau::before{background:var(--err);border-color:var(--err)} .cron .t{font-weight:600;font-size:12.5px} .cron .d{font-size:11px;color:var(--slab);margin-top:2px} /* ================================= diverse ================================ */ .slab{color:var(--slab)} .mic{font-size:11.5px} .mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12px} .gol{text-align:center;padding:34px 20px;color:var(--slab)} .gol .em{font-size:32px;margin-bottom:10px;opacity:.5} .gol h2{color:var(--text);margin-bottom:6px} .gol p{margin:0 0 14px;font-size:12.5px} .centrat{max-width:404px;margin:56px auto;padding:0 20px} .centrat h1{text-align:center;margin-bottom:6px} .centrat .sub{text-align:center;color:var(--slab);font-size:12.5px;margin-bottom:20px} .centrat .card{padding:22px} .centrat .card .card-corp{padding:0} .legatura{text-align:center;margin-top:14px;font-size:12.5px} .dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:7px} .dot-ok{background:var(--ok)} .dot-nu{background:#bbb} .dot-err{background:var(--err)} .bara-progres{height:6px;border-radius:4px;background:var(--acc);min-width:3px} .desp{border:0;border-top:1px solid var(--linie-2);margin:14px 0} .paginare{display:flex;justify-content:space-between;align-items:center;gap:12px; padding:8px 14px;border-top:1px solid var(--linie-2);font-size:12px;color:var(--slab)}