/* ---- teme: variabilele de culoare; tema se alege din meniu (html[data-tema]) ---- */
:root, html[data-tema="luminos"]{
  --navy:#101c2e; --navy2:#182a44; --accent:#2f5597; --accent-h:#254478; --accent2:#e67e22;
  --bg:#f2f4f8; --card:#fff; --line:#e2e6ee; --text:#1c2430; --mut:#6b7686; --titlu:#101c2e;
  --ok:#2e7d32; --err:#c00000; --warn:#8a4b00;
  --input:#fff; --input-line:#c8d0dd; --rand-hover:#f6f9ff;
  --soft-blue:#e8eefc; --soft-green:#e5f3e6; --soft-red:#fbe7e7; --soft-orange:#fff3df; --soft-gray:#eef1f6;
  --side-text:#cdd6e4; --side-mut:#8ea2c0; --side-line:#223349;
  color-scheme:light;
}
/* Crem — fundal cald, contrast moderat, fara alb pur (obosește cel mai puțin ochii ziua) */
html[data-tema="crem"]{
  --navy:#2e2a24; --navy2:#3d372f; --accent:#8a5a2b; --accent-h:#6f4822; --accent2:#c0652a;
  --bg:#ece5d6; --card:#f7f2e7; --line:#dcd2bd; --text:#2b2720; --mut:#766e5f; --titlu:#3a2f22;
  --ok:#3f7a34; --err:#b3261e; --warn:#8a4b00;
  --input:#fdfaf3; --input-line:#cfc3aa; --rand-hover:#f0e8d7;
  --soft-blue:#ebe2cf; --soft-green:#e2ebd4; --soft-red:#f3dcd4; --soft-orange:#f4e2c4; --soft-gray:#ebe4d4;
  --side-text:#e2dccf; --side-mut:#a89f8d; --side-line:#4a4238;
  color-scheme:light;
}
/* Gri — tonuri neutre, luminozitate redusă */
html[data-tema="gri"]{
  --navy:#1f2630; --navy2:#2b3440; --accent:#3a64a8; --accent-h:#2e5190; --accent2:#d9772b;
  --bg:#cfd4db; --card:#e3e7ec; --line:#c3c9d2; --text:#1b222c; --mut:#555f6d; --titlu:#1b2533;
  --ok:#2b6e30; --err:#b01515; --warn:#7a4200;
  --input:#eef1f4; --input-line:#aeb6c2; --rand-hover:#d8dde4;
  --soft-blue:#d3dcec; --soft-green:#d2e2d3; --soft-red:#ecd4d4; --soft-orange:#ecdcc4; --soft-gray:#d7dce3;
  --side-text:#cfd6e0; --side-mut:#8f9aab; --side-line:#34404f;
  color-scheme:light;
}
/* Întunecat — pentru ture lungi / lumină slabă */
html[data-tema="intunecat"]{
  --navy:#0d1117; --navy2:#1a2230; --accent:#5b8def; --accent-h:#4a7ad8; --accent2:#f0913a;
  --bg:#12161d; --card:#1b2129; --line:#2c3440; --text:#e1e6ed; --mut:#8e9aab; --titlu:#c9d6ea;
  --ok:#5cbf6a; --err:#ff6b6b; --warn:#f0b35a;
  --input:#232a34; --input-line:#3a4452; --rand-hover:#222a35;
  --soft-blue:#1d2c47; --soft-green:#1a3322; --soft-red:#3d1f24; --soft-orange:#3a2c16; --soft-gray:#232a34;
  --side-text:#c3ccd9; --side-mut:#7c889b; --side-line:#222b38;
  color-scheme:dark;
}
/* Noapte albastră — întunecat, cu tentă albastră și accent turcoaz */
html[data-tema="noapte"]{
  --navy:#0a1628; --navy2:#13243d; --accent:#3fb6c9; --accent-h:#2f9fb1; --accent2:#f2a444;
  --bg:#0f1c2e; --card:#16263b; --line:#24384f; --text:#dde8f4; --mut:#89a0b8; --titlu:#bfe3ec;
  --ok:#5fcf8a; --err:#ff7676; --warn:#f3be68;
  --input:#1c2f47; --input-line:#2f4863; --rand-hover:#1c2f47;
  --soft-blue:#183553; --soft-green:#173a30; --soft-red:#3f2130; --soft-orange:#3b3020; --soft-gray:#1c2e45;
  --side-text:#c0d2e6; --side-mut:#7891ad; --side-line:#1d3150;
  color-scheme:dark;
}
html[data-tema="intunecat"] .btn.primary, html[data-tema="noapte"] .btn.primary{color:#0d1117}
html[data-tema="crem"]{--link:#7a4a1c} html[data-tema="gri"]{--link:#1f4f9e}
html[data-tema="intunecat"]{--link:#8fb4ff} html[data-tema="noapte"]{--link:#6fd3e3}
html[data-tema]:not([data-tema="luminos"]) main a:not(.btn){color:var(--link)}
html[data-tema="intunecat"] nav a.act, html[data-tema="noapte"] nav a.act{color:#0d1117}
*{box-sizing:border-box; margin:0}
body{font-family:'Segoe UI',system-ui,Arial,sans-serif; background:var(--bg);
  color:var(--text); display:flex; min-height:100vh; font-size:14.5px}

/* --- sidebar --- */
.sidebar{width:225px; background:var(--navy); color:var(--side-text); display:flex;
  flex-direction:column; position:fixed; top:0; bottom:0}
.brand{padding:22px 18px 14px; border-bottom:1px solid var(--side-line)}
.brand img{max-width:160px; filter:invert(1) brightness(1.6)}
.wordmark{font-size:26px; font-weight:800; letter-spacing:.5px; color:#fff}
.wordmark sup{font-size:11px}
.wordmark.big{font-size:34px; color:var(--navy)}
.brand-sub{font-size:11.5px; color:var(--side-mut); text-transform:uppercase; letter-spacing:2px; margin-top:2px}
nav{flex:1; padding:14px 0}
nav a{display:block; padding:11px 20px; color:var(--side-text); text-decoration:none; font-size:14px}
nav a:hover{background:var(--navy2); color:#fff}
nav a.act{background:var(--accent); color:#fff; font-weight:600}
.side-foot{padding:14px 20px; border-top:1px solid var(--side-line); font-size:12.5px}
.side-foot a{color:var(--side-mut)}
.tema-alege{margin-top:10px}
.tema-alege select{width:100%; padding:5px 8px; font-size:12.5px; margin-top:3px; background:var(--navy2);
  color:var(--side-text); border:1px solid var(--side-line); min-height:0}

/* --- main --- */
main{margin-left:225px; padding:28px 34px; flex:1; max-width:1200px; min-width:0}   /* min-width:0 = nu iese din ecran */
main.lat{max-width:none}      /* listele mari folosesc toata latimea ecranului */
.filtre{display:flex; gap:8px; flex-wrap:wrap; align-items:center}
.filtre input,.filtre select{width:auto}
.filtre input.cauta{flex:1 1 240px; min-width:200px}
.celula-scurta{max-width:220px; overflow-wrap:break-word}
.actiuni-rand{display:flex; flex-wrap:wrap; gap:4px; justify-content:flex-end; min-width:150px}
.actiuni-rand form{margin:0}
.filtru-activ{margin-top:8px; padding:6px 10px; border-radius:8px; background:var(--soft-blue); font-size:13px}
.filtru-activ a{margin-left:8px; font-weight:600}
h1{font-size:22px; margin-bottom:18px}
h2{font-size:15px; margin-bottom:10px; color:var(--titlu)}
.cards{display:flex; gap:16px; flex-wrap:wrap; margin-bottom:18px}
.card{background:var(--card); border:1px solid var(--line); border-radius:10px;
  padding:18px 20px; margin-bottom:18px; flex:1; min-width:220px}
.card.grow{flex:2.2}
.card.stat{text-align:center; padding:20px}
.card.stat .num{font-size:30px; font-weight:800; color:var(--accent)}
.card-head{display:flex; justify-content:space-between; align-items:center;
  gap:12px; margin-bottom:12px; flex-wrap:wrap}
.card-head h2{margin:0}

/* --- tables --- */
table{width:100%; border-collapse:collapse}
th{font-size:12px; text-transform:uppercase; letter-spacing:.4px; color:var(--mut);
  text-align:center; vertical-align:middle; padding:8px 10px; border-bottom:2px solid var(--line)}
th.r{text-align:center}          /* titlurile coloanelor numerice: tot centrate in casuta */
td{padding:9px 10px; border-bottom:1px solid var(--line)}
tr[onclick]{cursor:pointer}
tr[onclick]:hover td{background:var(--rand-hover)}
.r{text-align:right}
.empty{color:var(--mut); text-align:center; padding:22px}
.pricing .hl td{background:var(--soft-orange); font-size:15px}
.pricing.small td, .pricing.small th{padding:4px 8px; font-size:12.5px}
details{margin-top:14px}
summary{cursor:pointer; color:var(--accent); font-weight:600}
dl dt{float:left; width:90px; color:var(--mut); font-size:12.5px; clear:both; padding:3px 0}
dl dd{margin-left:100px; padding:3px 0}

/* --- forms --- */
label{display:block; font-size:12.5px; color:var(--mut); margin-bottom:2px}
input,select,textarea{width:100%; padding:8px 10px; border:1px solid var(--input-line);
  border-radius:7px; font:inherit; background:var(--input); color:var(--text); margin-top:3px}
input:focus,select:focus,textarea:focus{outline:2px solid var(--accent); border-color:var(--accent)}
.form-grid{display:grid; grid-template-columns:1fr 1fr; gap:12px 18px}
.form-grid.three{grid-template-columns:1fr 1fr 1fr}
.form-grid.four{grid-template-columns:repeat(4,1fr)}
.span2{grid-column:span 2}.span3{grid-column:span 3}.span4{grid-column:span 4}
.form-grid h2{margin-bottom:0}
.hint{font-size:12.5px; color:var(--mut)}
.um{color:var(--mut); font-weight:400; font-size:11.5px}
.actions{display:flex; justify-content:flex-end; gap:10px}
.actions.sticky{position:sticky; bottom:0; background:linear-gradient(transparent,var(--bg) 40%);
  padding:14px 0}
.search{display:flex; gap:8px; flex:1; max-width:430px}
.inline{display:inline-flex; gap:6px}
.inline-form{display:flex; gap:10px}
.addmat{display:flex; gap:8px; margin-top:12px}
input.mini{width:110px}
.statusform{margin-top:14px}
.statusform select{width:auto}
.anaf-box{display:flex; gap:10px; align-items:flex-end}
.anaf-box .btn{white-space:nowrap; margin-bottom:1px}
.anaf-status{font-size:13px; min-height:16px}
.anaf-status.ok{color:var(--ok); font-weight:600}
.anaf-status.err{color:var(--err); font-weight:600}

/* --- buttons --- */
.btn{display:inline-block; padding:8px 16px; border-radius:7px; border:1px solid var(--input-line);
  background:var(--input); color:var(--text); font:inherit; font-weight:600; cursor:pointer;
  text-decoration:none; white-space:nowrap}
.btn:hover{border-color:var(--accent); color:var(--accent)}
.btn.primary{background:var(--accent); border-color:var(--accent); color:#fff}
.btn.primary:hover{background:var(--accent-h); color:#fff}
.btn.orange{background:var(--accent2); border-color:var(--accent2); color:#fff}
.btn.big{padding:12px 26px; font-size:15.5px}
.btn.wide{width:100%}
.btn.mini{padding:5px 10px; font-size:12px}
.btn.danger{color:var(--err)}
.btn.danger:hover{border-color:var(--err)}

/* --- tags & flash --- */
.tag{padding:3px 10px; border-radius:20px; font-size:11.5px; font-weight:700}
.tag.Emisă{background:var(--soft-blue); color:var(--accent)}
.tag.Acceptată{background:var(--soft-green); color:var(--ok)}
.tag.Refuzată{background:var(--soft-red); color:var(--err)}
.flash{padding:10px 16px; border-radius:8px; margin-bottom:14px; font-weight:600}
.flash.ok{background:var(--soft-green); color:var(--ok)}
.flash.err{background:var(--soft-red); color:var(--err)}

/* --- login --- */
.login-body{align-items:center; justify-content:center; background:var(--navy)}
.login-card{background:#fff; border-radius:14px; padding:42px 44px; width:360px;
  box-shadow:0 18px 60px rgba(0,0,0,.4)}
.login-card label{margin-top:12px}
.login-card .btn{margin-top:20px}

.page-head{display:flex; justify-content:space-between; align-items:center;
  margin-bottom:16px; flex-wrap:wrap; gap:10px}
.page-head h1{margin:0}
.head-actions{display:flex; gap:10px}

/* --- bara mobila --- */
.topbar{display:none; position:sticky; top:0; z-index:70; background:var(--navy);
  color:#fff; align-items:center; gap:14px; padding:10px 14px}
.topbar .wordmark{color:#fff}
.topbar-user{margin-left:auto; font-size:12.5px; color:var(--side-mut)}
.menu-btn{background:none; border:none; color:#fff; font-size:24px; cursor:pointer;
  padding:4px 8px; line-height:1}
.overlay{display:none}

@media(max-width:900px){
  body{flex-direction:column}
  .topbar{display:flex}
  .sidebar{left:-250px; transition:left .25s ease; z-index:80;
    box-shadow:8px 0 30px rgba(0,0,0,.35)}
  body.nav-open .sidebar{left:0}
  body.nav-open .overlay{display:block; position:fixed; inset:0;
    background:rgba(0,0,0,.45); z-index:75}
  main{margin-left:0; padding:16px 12px 40px; max-width:100%}
  h1{font-size:19px}
  /* tabele late -> derulare laterala, fara a rupe pagina */
  .card{overflow-x:auto; min-width:0; padding:14px}
  .card table{min-width:560px}
  .card.stat{min-width:calc(50% - 10px); flex:1 1 calc(50% - 10px); padding:14px 8px}
  .card.stat .num{font-size:24px}
  .cards{gap:10px}
  /* tinte de atins cu degetul + fara zoom fortat pe iOS */
  input,select,textarea{font-size:16px; min-height:44px}
  textarea{min-height:70px}
  .btn{padding:11px 16px}
  .btn.mini{padding:8px 10px; min-height:36px}
  .page-head{flex-direction:column; align-items:stretch}
  .head-actions{flex-wrap:wrap}
  .head-actions .btn{flex:1 1 45%; text-align:center}
  .card-head .search{max-width:none; width:100%}
  .card-head .btn{width:100%; text-align:center}
  .addmat,.inline-form{flex-wrap:wrap}
  .addmat input,.inline-form input{width:100%}
  .filtre input,.filtre select{width:100%}
  input.mini{width:100%}
  dl dt{float:none; width:auto} dl dd{margin-left:0; padding-bottom:6px}
  .login-card{width:calc(100vw - 32px); padding:30px 22px}
  .form-grid,.form-grid.three,.form-grid.four{grid-template-columns:1fr}
  .span2,.span3,.span4{grid-column:span 1}
  .actions.sticky{position:sticky; bottom:0}
  .actions.sticky .btn{width:100%}
}

/* --- butonul de ajutor (manual) --- */
.ajutor-btn{position:fixed; right:18px; bottom:18px; z-index:60; background:var(--accent); color:#fff !important;
  padding:9px 16px; border-radius:22px; font-weight:700; text-decoration:none; font-size:13.5px;
  box-shadow:0 6px 18px rgba(0,0,0,.25)}
.ajutor-btn:hover{background:var(--accent-h)}
html[data-tema="intunecat"] .ajutor-btn, html[data-tema="noapte"] .ajutor-btn{color:#0d1117 !important}
body.kiosk .ajutor-btn{display:none}
@media print{.ajutor-btn{display:none}}

/* --- steagul tarii comenzii (eMAG.ro / .hu / .bg) --- */
svg.steag{display:inline-block; vertical-align:-2px; border-radius:2px; box-shadow:0 0 0 1px rgba(0,0,0,.18); flex:none}
.platforma-cmd{display:inline-flex; align-items:center; gap:5px; font-size:11.5px; color:var(--mut); white-space:nowrap; margin-top:2px}
.platforma-cmd.platforma-hu span, .platforma-cmd.platforma-bg span{color:var(--warn); font-weight:700}
.platforma-cmd.platforma-shop span{color:var(--accent); font-weight:700}

/* numele modulului curent, ca titlu de grup in meniu (sub „Module”) */
.nav-modul{margin:14px 18px 4px; font-size:10.5px; letter-spacing:1.4px; text-transform:uppercase; color:var(--side-mut); font-weight:700}

/* ---- telefon: liste de carduri in loc de tabele (Comenzi, Facturi) + meniul de jos ---- */
.m-doar{display:none}
.nav-jos{display:none}
@media(max-width:900px){
  .m-doar{display:block}
  .d-doar{display:none !important}
  main.cu-nav-jos{padding-bottom:84px}
  .nav-jos{display:flex; position:fixed; left:0; right:0; bottom:0; z-index:65; background:var(--card);
    border-top:1px solid var(--line); padding-bottom:env(safe-area-inset-bottom); box-shadow:0 -2px 10px rgba(0,0,0,.06)}
  .nav-jos a, .nav-jos button{flex:1; text-align:center; font-size:11px; color:var(--mut); padding:7px 2px 8px; text-decoration:none;
    background:none; border:none; font-family:inherit; cursor:pointer}
  .nav-jos i{display:block; font-style:normal; font-size:20px; line-height:1.2}
  .nav-jos .act{color:var(--accent); font-weight:700}
  .nav-jos a.act{background:none !important; color:var(--accent) !important; font-weight:700}
  body.cu-nav-jos .ajutor-btn{bottom:80px; right:12px; font-size:0 !important; padding:9px 11px !important; border-radius:50%}
  body.cu-nav-jos .ajutor-btn::before{content:"❓"; font-size:17px}
}
body.kiosk .nav-jos{display:none !important}
.m-cauta{position:sticky; top:52px; z-index:20; background:var(--bg); margin:-4px -12px 0; padding:8px 12px 6px; display:flex; gap:8px}
.m-cauta input{flex:1; border-radius:10px}
.m-chips{display:flex; gap:8px; overflow-x:auto; padding:4px 0 10px; margin:0 -12px; padding-left:12px; padding-right:12px;
  scrollbar-width:none}
.m-chips::-webkit-scrollbar{display:none}
.m-chips a{flex:none; display:inline-flex; align-items:center; gap:5px; white-space:nowrap; border:1.5px solid var(--line);
  border-radius:18px; padding:6px 12px; font-size:14px; color:var(--text); text-decoration:none; background:var(--card)}
.m-chips a b{font-size:13px}
.m-chips a.act{background:var(--accent); border-color:var(--accent); color:#fff}
html[data-tema="intunecat"] .m-chips a.act, html[data-tema="noapte"] .m-chips a.act{color:#0d1117}
.m-chips a.rosu b{color:var(--err)} .m-chips a.act.rosu b{color:inherit}
.m-filtre{margin:0 0 8px}
.m-filtre summary{cursor:pointer; font-size:13px; color:var(--mut)}
.m-filtre form{display:flex; flex-direction:column; gap:8px; margin-top:8px}
.m-rez{display:flex; justify-content:space-between; gap:8px; font-size:12.5px; color:var(--mut); margin:0 2px 8px}
.m-card{background:var(--card); border:1px solid var(--line); border-radius:14px; padding:12px 14px; margin-bottom:10px}
.m-card > summary{list-style:none; cursor:pointer}
.m-card > summary::-webkit-details-marker{display:none}
.m-card h3{margin:0; font-size:16.5px; display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.m-card h3 a{text-decoration:none; color:var(--titlu)}
.m-card .platforma-cmd{font-size:11px}
.m-linie{font-size:13.5px; margin-top:5px; display:flex; align-items:center; gap:6px; flex-wrap:wrap; color:var(--text)}
.m-linie .hint{font-size:13px}
.m-tot{display:flex; align-items:center; margin-top:7px; font-weight:800; font-size:15.5px}
.m-tot .sageata{margin-left:auto; color:var(--accent); font-size:15px; transition:transform .15s}
.m-card[open] .m-tot .sageata{transform:rotate(180deg)}
.m-det{border-top:1px solid var(--line); margin-top:10px; padding-top:8px; font-size:13px}
.m-det .m-pr{display:flex; gap:8px; align-items:center; margin:5px 0}
.m-det .m-pr img{width:34px; height:34px; object-fit:contain; border:1px solid var(--line); border-radius:5px; background:#fff; flex:none}
.m-det dl{display:grid; grid-template-columns:auto 1fr; gap:3px 10px; margin:0 0 6px}
.m-det dt{color:var(--mut)} .m-det dd{margin:0; overflow-wrap:anywhere}
.m-act{display:flex; gap:6px; margin-top:10px; flex-wrap:wrap}
.m-act .btn{flex:1; text-align:center; min-width:30%}
.m-mai-multe{text-align:center; font-size:13px; color:var(--mut); margin:6px 0 14px}

/* banda „versiune noua” */
.versiune-noua { position: fixed; top: 10px; left: 50%; transform: translateX(-50%); z-index: 1000; display: flex;
  align-items: center; gap: 12px; padding: 10px 16px; border-radius: 10px; background: var(--accent, #2a62c9); color: #fff;
  font-weight: 600; box-shadow: 0 6px 24px rgba(0,0,0,.25); max-width: calc(100vw - 32px); }
.versiune-noua[hidden] { display: none; }
.versiune-noua .btn { background: #fff; color: var(--accent, #2a62c9); border-color: #fff; }

/* butoanele de la capatul randului din lista de comenzi: pe aceeasi linie, la mijlocul randului, fara latime minima */
.butoane-rand { display: flex; align-items: center; justify-content: flex-end; gap: 6px; }
.butoane-rand > *, .butoane-rand .awb-meniu > summary { margin: 0; }