:root{
  --yc-blue:#2d6ea8;
  --yc-blue-dark:#1f5688;
  --yc-blue-deep:#173f66;
  --yc-orange:#e38300;
  --yc-orange-dark:#bc6900;
  --yc-ink:#243342;
  --yc-muted:#6d7882;
  --yc-line:#dfe5ea;
  --yc-line-soft:#edf1f4;
  --yc-bg:#f5f7f9;
  --yc-white:#fff;
  --yc-green:#16804a;
  --yc-red:#bb2d3b;
  --yc-yellow:#a46c00;
  --radius:8px;
  --shadow:0 1px 2px rgba(22,41,60,.05),0 7px 22px rgba(22,41,60,.05);
}

*{box-sizing:border-box}
html{background:var(--yc-bg);color:var(--yc-ink);font-family:Arial,Helvetica,sans-serif}
body{margin:0;background:var(--yc-bg);color:var(--yc-ink);font-size:14px;line-height:1.45}
a{color:var(--yc-blue);text-decoration:none}
a:hover{color:var(--yc-orange)}
img{max-width:100%}

.site-header,header{
  background:#fff;
  border-bottom:1px solid var(--yc-line);
  box-shadow:0 2px 12px rgba(20,45,65,.04);
  position:sticky;
  top:0;
  z-index:100;
}

.top{
  max-width:1480px;
  margin:0 auto;
  min-height:74px;
  padding:0 26px;
  display:flex;
  align-items:center;
  gap:28px;
}

.brand{
  display:inline-flex;
  align-items:center;
  flex:0 0 auto;
  color:var(--yc-blue)!important;
  font-weight:800;
  letter-spacing:-1.5px;
  font-size:28px;
  line-height:1;
  white-space:nowrap;
}
.brand-y,.brand-cardo{display:inline-block}
.brand-ball{
  width:25px;height:25px;margin:0 3px 0 1px;border-radius:50%;
  display:inline-block;position:relative;overflow:hidden;
  background:
    linear-gradient(31deg,transparent 43%,rgba(255,255,255,.9) 44% 50%,transparent 51%),
    linear-gradient(91deg,transparent 43%,rgba(255,255,255,.9) 44% 50%,transparent 51%),
    var(--yc-orange);
  box-shadow:inset 0 0 0 1px rgba(125,70,0,.08);
}
.brand-ball:after{
  content:"";position:absolute;left:-3px;top:8px;width:31px;height:9px;
  border:2px solid rgba(255,255,255,.92);border-radius:50%;transform:rotate(-18deg)
}
.brand-app{
  margin-left:11px;padding-left:12px;border-left:1px solid var(--yc-line);
  color:var(--yc-muted);font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase
}

nav{
  display:flex;align-items:center;gap:4px;flex:1;min-width:0
}
nav a{
  display:inline-flex;align-items:center;min-height:40px;padding:0 12px;border-radius:6px;
  color:#455463;font-weight:600;transition:background .15s,color .15s
}
nav a:hover{background:#f3f7fa;color:var(--yc-blue)}
nav a.active{
  color:var(--yc-blue-dark);background:#edf5fb;box-shadow:inset 0 -2px 0 var(--yc-orange)
}
nav span[style]{font-size:13px!important;color:var(--yc-muted)!important}

main{max-width:1480px;margin:0 auto;padding:28px 26px 48px}
h1,h2,h3{color:#273b4e;line-height:1.2}
h1{font-size:28px;margin:0 0 22px;font-weight:700;letter-spacing:-.02em}
h2{font-size:19px;margin:30px 0 14px;font-weight:700;border-bottom:1px solid var(--yc-line);padding-bottom:9px}
h3{font-size:15px;margin:20px 0 10px}
p{margin:8px 0}

.cards{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:12px;
  margin:0 0 22px;
}
.card{
  background:#fff;border:1px solid var(--yc-line);border-radius:var(--radius);
  padding:16px 18px;box-shadow:var(--shadow)
}
.card .label,.label{
  color:var(--yc-muted);font-size:11px;font-weight:700;letter-spacing:.055em;text-transform:uppercase
}
.metric{margin-top:4px;font-size:26px;font-weight:700;color:var(--yc-blue-deep)}
.metric.small{font-size:20px}

.filters,.product-toolbar{
  background:#fff;border:1px solid var(--yc-line);border-radius:var(--radius);
  padding:14px;display:flex;align-items:flex-end;gap:10px;flex-wrap:wrap;
  box-shadow:var(--shadow);margin-bottom:16px
}
.filters label,.product-toolbar label{
  display:flex;flex-direction:column;gap:5px;color:var(--yc-muted);
  font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.035em
}

input,select,textarea{
  width:100%;min-height:38px;border:1px solid #cfd7de;border-radius:5px;
  background:#fff;color:var(--yc-ink);padding:7px 10px;font:inherit;outline:none
}
input:focus,select:focus,textarea:focus{
  border-color:var(--yc-blue);box-shadow:0 0 0 3px rgba(45,110,168,.12)
}

button,.button,input[type=submit]{
  display:inline-flex;align-items:center;justify-content:center;min-height:38px;
  border:1px solid var(--yc-blue);border-radius:5px;padding:7px 14px;
  background:var(--yc-blue);color:#fff;font:inherit;font-weight:700;cursor:pointer;
  transition:background .15s,border-color .15s,transform .03s
}
button:hover,.button:hover,input[type=submit]:hover{
  background:var(--yc-blue-dark);border-color:var(--yc-blue-dark);color:#fff
}
button:active,.button:active{transform:translateY(1px)}
.button.secondary,button.secondary{
  background:#fff;color:var(--yc-blue);border-color:#c9d8e4
}
.button.secondary:hover,button.secondary:hover{background:#f0f6fa;color:var(--yc-blue-dark)}

.tablewrap{
  overflow:auto;background:#fff;border:1px solid var(--yc-line);border-radius:var(--radius);
  box-shadow:var(--shadow)
}
table{width:100%;border-collapse:separate;border-spacing:0;background:#fff}
th{
  position:sticky;top:0;z-index:5;
  background:#f7f9fb;color:#586775;border-bottom:1px solid var(--yc-line);
  padding:10px 12px;text-align:left;font-size:11px;font-weight:700;
  text-transform:uppercase;letter-spacing:.035em;white-space:nowrap
}
td{padding:10px 12px;border-bottom:1px solid var(--yc-line-soft);vertical-align:middle}
tbody tr:hover td{background:#fbfdff}
tbody tr:last-child td{border-bottom:0}
.right{text-align:right}
.nowrap{white-space:nowrap}

.badge{
  display:inline-flex;align-items:center;border-radius:999px;padding:3px 8px;
  background:#eef4f8;color:var(--yc-blue-dark);font-size:11px;font-weight:700
}
.small{font-size:12px}.muted{color:var(--yc-muted)}

.product-image{
  width:48px;height:48px;object-fit:contain;background:#fff;border:1px solid var(--yc-line);
  border-radius:5px;padding:2px
}
.product-image-empty{
  width:48px;height:48px;border:1px dashed #d3dbe2;border-radius:5px;
  display:flex;align-items:center;justify-content:center;color:#a7b0b8
}
.product-title a{font-weight:700;color:#2a4f71}
.product-title a:hover{color:var(--yc-orange)}
.stock-request{font-weight:700}

.column-picker-panel,.column-group{
  background:#fff;border:1px solid var(--yc-line);border-radius:6px;padding:12px
}
.column-groups{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px}
.column-picker-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}

.login-wrap{
  min-height:100vh;display:grid;place-items:center;padding:24px;
  background:
    radial-gradient(circle at 15% 12%,rgba(45,110,168,.09),transparent 28%),
    radial-gradient(circle at 88% 86%,rgba(227,131,0,.08),transparent 25%),
    var(--yc-bg)
}
.login-card{
  width:min(430px,100%);background:#fff;border:1px solid var(--yc-line);
  border-radius:10px;padding:30px;box-shadow:0 18px 45px rgba(23,63,102,.10)
}
.login-card h1{color:var(--yc-blue);margin-bottom:6px}
.login-card label{display:block;margin:14px 0 5px;font-weight:700;color:#53616e}
.login-error{
  margin:12px 0;padding:10px 12px;border-radius:5px;
  background:#fff1f2;border:1px solid #f0c6cb;color:#9b2430
}

footer{
  display:flex;justify-content:center;gap:8px;align-items:center;
  color:#85909a;font-size:12px;padding:32px 0 10px
}
footer span:first-child{color:var(--yc-blue);font-weight:700}
.footer-dot{color:var(--yc-orange)}

@media(max-width:900px){
  .top{align-items:flex-start;flex-direction:column;gap:10px;padding:15px 18px}
  .brand{font-size:24px}
  nav{width:100%;overflow-x:auto;padding-bottom:5px}
  nav a{white-space:nowrap}
  main{padding:20px 16px 38px}
  th{top:0}
}

@media(max-width:560px){
  .brand-app{display:none}
  .cards{grid-template-columns:1fr 1fr}
  .filters>*{width:100%}
  .filters button{width:100%}
  .card{padding:14px}
}

/* Original YoCardo logo supplied by the site owner */
.brand-original{letter-spacing:0}
.brand-original img{display:block;width:auto;height:30px;max-width:160px;object-fit:contain}
@media(max-width:560px){
  .brand-original img{height:28px;max-width:145px}
}