:root{ --maxw:1100px; }

*{box-sizing:border-box} html,body{height:100%}
body{
  margin:0; color:var(--text);
  font:16px/1.6 "Inter",system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;
  background:
    radial-gradient(1200px 800px at 15% 0%, var(--bg2), transparent 60%),
    radial-gradient(1000px 700px at 85% 0%, var(--bg3), transparent 60%),
    var(--bg1);
  background-repeat: no-repeat;
  overflow-x:hidden;
}

/* Container + Card */
.wrap{min-height:calc(100dvh - 140px); padding:16px; display:grid; place-items:flex-start}
.sheet{
  width:100%; max-width:var(--maxw); background:var(--card);
  border-radius:var(--r-out); box-shadow:var(--shadow-lg);
  padding:clamp(20px,3vw,28px); position:relative; isolation:isolate; margin:0 auto;
  border:1px solid var(--glass-border);
}
.sheet::before{
  content:""; position:absolute; inset:-2px; border-radius:inherit; z-index:-1;
  background:linear-gradient(135deg,rgba(59,130,246,.15),rgba(96,165,250,.15));
  filter:blur(8px);
}

/* Title block */
.doc-header{
  display:flex; align-items:center; gap:14px; padding:10px 12px; border-radius:var(--r-in);
  background:linear-gradient(180deg,rgba(59,130,246,.10),rgba(59,130,246,.04));
  border:1px solid var(--glass-border); box-shadow:var(--shadow-md); margin-bottom:18px;
}
.badge{width:40px; height:40px; display:grid; place-items:center; border-radius:12px; background:var(--card); border:1px solid var(--glass-border)}
.title{margin:0; font-weight:900; letter-spacing:.2px; line-height:1.15; font-size:clamp(20px,2.4vw,28px)}
.subtitle{margin:2px 0 0; color:var(--muted); font-weight:600; font-size:14px}

/* Buttons */
.toolbar{display:flex; gap:10px; justify-content:flex-end; margin-bottom:10px}
.btn{border:1px solid transparent; cursor:pointer; font-weight:800; letter-spacing:.2px; padding:10px 14px; border-radius:12px; box-shadow:var(--shadow-md)}
.btn-primary{color:#fff;justify-content:center; background:linear-gradient(135deg,var(--accent),var(--accent-2))}
.btn-danger{color:#fff; background:#ef4444}
.btn-outline{background:var(--btn-bg); color:var(--text); border:1px solid var(--glass-border)}

/* Form add */
.card{
  background:var(--card); border:1px solid var(--glass-border); border-radius:16px;
  box-shadow:var(--shadow-md); padding:12px; margin-bottom:12px;
}
.card h2{margin:0 0 8px; font-size:18px; font-weight:900}
textarea.wide{
  width:100%; min-height:110px; resize:vertical; padding:12px 14px; border-radius:14px;
  border:1px solid var(--glass-border); background:var(--card); outline:none; box-shadow:var(--shadow-md);
  color:var(--text);
}

/* Filters grid */
.grid{display:grid; gap:10px}
.grid.four{grid-template-columns: repeat(4, 1fr)}
.grid.five{grid-template-columns: repeat(5, 1fr)}
.form-group label{display:block; font-size:13px; font-weight:700; color:var(--muted); margin-bottom:4px}
.form-group input, .form-group select{
  width:100%; padding:8px 10px; border:1px solid var(--glass-border); border-radius:10px; font:14px/1.4 "Inter",system-ui;
  background:var(--card); color:var(--text);
}

/* DataTable */
table.dataTable{border-collapse:separate; border-spacing:0 6px !important; width:100%}
table.dataTable thead th{
  background:linear-gradient(180deg,rgba(59,130,246,.10),rgba(59,130,246,.04));
  border:1px solid var(--glass-border); padding:10px; font-weight:800; color:var(--text);
}
table.dataTable tbody tr{background:var(--card);}
table.dataTable tbody td{border:1px solid var(--glass-border); padding:10px; color:var(--text)}
table.dataTable tbody tr:hover{box-shadow:0 4px 12px rgba(0,0,0,.06)}

/* Select mic */
select.small{padding:6px 8px; border-radius:8px; border:1px solid var(--glass-border); background:var(--card); color:var(--text)}

/* Login modal */
.backdrop{position:fixed; inset:0; background:rgba(0,0,0,.5); display:none; align-items:center; justify-content:center}
.modal{background:var(--card); border-radius:16px; border:1px solid var(--glass-border); box-shadow:var(--shadow-lg); padding:16px; width:320px; color:var(--text)}
.modal h3{margin:0 0 10px; font-size:18px; font-weight:900}
.modal .row{margin-bottom:10px}
.modal input[type="password"]{width:100%; padding:10px; border:1px solid var(--glass-border); border-radius:10px; background:var(--card); color:var(--text)}
.modal .actions{display:flex; gap:8px; justify-content:flex-end}

/* Responsive */
@media (max-width:780px){
  .grid.five{grid-template-columns:1fr 1fr}
  .grid.four{grid-template-columns:1fr 1fr}
  .sheet{border-radius:20px; padding:18px}
}
.filter-actions{
  display:flex;
  gap:10px;
  justify-content:flex-start;
}

.filter-actions .btn{
  flex:0 0 50%;   /* fiecare buton ocupă 50% */
  width:50%;
  text-align:center;
}
select.small,
input.small {
  padding:8px 6px;
  border-radius:8px;
  border:1px solid var(--glass-border);
  background:var(--card);
  color:var(--text);
  
}
input.small[type="number"] {
  width: 60px;       /* mai scurtă, poți pune 50px sau 70px după preferință */
  font-size: 16px;   /* text mai mare; default era 14px */
  text-align: center; /* opțional, ca să fie cifra centrată frumos */
}
input.small[type="number"] { appearance:textfield; -moz-appearance:textfield; }
input.small[type="number"]::-webkit-inner-spin-button,
input.small[type="number"]::-webkit-outer-spin-button { -webkit-appearance:none; margin:0; }