/* ============ BeeOp Admin — panel administratora ============ */
:root{
  --yellow:#F5B301;
  --yellow-dark:#DFA300;
  --yellow-soft:#FDF3D7;
  --black:#131007;
  --ink:#16130B;
  --muted:#6E6A5C;
  --muted-2:#9B968A;
  --cream:#FAF7F1;
  --card:#FFFFFF;
  --line:#EFEAE0;
  --blue:#4A7DFF;
  --green:#2FB673;
  --red:#E4574F;
  --radius:16px;
}

*{margin:0;padding:0;box-sizing:border-box}
body{
  font-family:'Plus Jakarta Sans',-apple-system,'Segoe UI',sans-serif;
  background:var(--cream);
  color:var(--ink);
  min-height:100vh;
}
a{text-decoration:none;color:inherit;cursor:pointer}
svg{display:block}
h3{font-size:18px;font-weight:800}
h4{font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);margin-bottom:10px}

/* ============ Topbar ============ */
.topbar{
  position:sticky;top:0;z-index:40;
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 28px;
  background:linear-gradient(180deg,var(--black),#1C1809);
  color:#EDEAE0;
}
.topbar-left{display:flex;align-items:center;gap:12px}
.logo-mark{width:38px;height:38px;filter:drop-shadow(0 0 8px rgba(245,179,1,.4))}
.topbar-title{display:flex;flex-direction:column;line-height:1.2}
.topbar-title strong{font-size:17px;font-weight:800}
.topbar-title span{font-size:12px;color:var(--yellow)}
.topbar-right{display:flex;align-items:center;gap:14px}
.topbar-user{font-size:14px;font-weight:600;color:#CFC9B8}

/* ============ Layout ============ */
.wrap{max-width:1060px;margin:0 auto;padding:28px 22px 60px;display:flex;flex-direction:column;gap:22px}

/* ============ Buttons ============ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:inherit;font-weight:700;font-size:14px;
  padding:11px 18px;border-radius:11px;border:none;cursor:pointer;
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
  white-space:nowrap;
}
.btn svg{width:17px;height:17px;flex:none}
.btn:hover:not(:disabled){transform:translateY(-1px)}
.btn:disabled{opacity:.55;cursor:not-allowed}
.btn-yellow{background:var(--yellow);color:var(--black);box-shadow:0 8px 20px -10px rgba(245,179,1,.7)}
.btn-yellow:hover:not(:disabled){background:var(--yellow-dark)}
.btn-outline{background:#fff;color:var(--ink);border:1.5px solid #E4DECF}
.btn-ghost{background:rgba(255,255,255,.08);color:#EDEAE0}
.btn-ghost:hover{background:rgba(255,255,255,.16)}
.btn-danger-outline{background:#fff;color:var(--red);border:1.5px solid #F3CBc8}
.btn-danger-outline:hover:not(:disabled){background:#FDF1F0}
.btn-sm{padding:8px 13px;font-size:13px;border-radius:9px}

/* ============ Stat cards ============ */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px}
.stat-card{
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:18px 20px;display:flex;flex-direction:column;gap:4px;
  box-shadow:0 1px 2px rgba(35,28,5,.04), 0 6px 20px -12px rgba(35,28,5,.08);
  font-family:inherit;text-align:left;
}
button.stat-card{cursor:pointer;touch-action:manipulation}
.stat-click{transition:transform .15s ease, border-color .15s ease, box-shadow .15s ease}
.stat-click:hover{transform:translateY(-2px);border-color:#E4DECF;box-shadow:0 3px 6px rgba(35,28,5,.06), 0 12px 28px -14px rgba(35,28,5,.14)}
.stat-click:active{transform:translateY(0)}
.stat-active{border-color:var(--yellow);box-shadow:0 0 0 2px var(--yellow-soft), 0 6px 20px -12px rgba(245,179,1,.35)}
.stat-hint{font-size:11px;color:var(--yellow-dark);font-weight:700;margin-top:2px}
.stat-value{font-size:26px;font-weight:800;line-height:1.1}
.stat-label{font-size:13px;color:var(--muted);font-weight:600}
.stat-yellow .stat-value{color:var(--yellow-dark)}
.stat-green .stat-value{color:var(--green)}
.stat-red .stat-value{color:var(--red)}
.stat-blue .stat-value{color:var(--blue)}
.stat-muted .stat-value{color:var(--muted-2)}

/* ============ Actions bar ============ */
.actions-bar{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
.actions-bar h2{font-size:21px;font-weight:800}
.actions-bar-right{display:flex;gap:10px}

/* ============ Cards ============ */
.card{
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:22px;
  box-shadow:0 1px 2px rgba(35,28,5,.04), 0 6px 20px -12px rgba(35,28,5,.08);
}

/* ============ Add client ============ */
.add-card h3{margin-bottom:16px}
.add-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px}
.add-grid label{display:flex;flex-direction:column;gap:6px;font-size:13px;font-weight:600;color:var(--muted)}
.add-grid input, .pay-form input{
  font-family:inherit;font-size:14px;color:var(--ink);
  padding:10px 12px;border:1.5px solid var(--line);border-radius:10px;background:#FDFCF9;
  transition:border-color .15s ease;
}
.add-grid input:focus, .pay-form input:focus{outline:none;border-color:var(--yellow)}
.add-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:18px}

/* ============ Client card ============ */
#clients{display:flex;flex-direction:column;gap:18px}
.client-card{display:flex;flex-direction:column;gap:18px}
.client-card-blocked{border-color:#F3CBC8;background:#FFFBFA}
.client-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;flex-wrap:wrap}
.client-head h3{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.client-meta{margin-top:8px;display:flex;gap:8px;flex-wrap:wrap}
.client-head-actions{display:flex;gap:8px;flex-wrap:wrap}

.client-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
@media (max-width:760px){.client-grid{grid-template-columns:1fr}}
.client-block{background:#FBF9F4;border:1px solid var(--line);border-radius:12px;padding:16px}

.disk-line{display:flex;align-items:baseline;gap:10px;margin-bottom:8px}
.disk-line strong{font-size:20px;font-weight:800}
.disk-line span{font-size:13px;color:var(--muted)}
.disk-bar{height:8px;border-radius:99px;background:var(--line);overflow:hidden}
.disk-bar-fill{height:100%;border-radius:99px;background:linear-gradient(90deg,var(--yellow),var(--yellow-dark));transition:width .3s ease}

.pay-form{display:flex;gap:8px;flex-wrap:wrap}
.pay-form input{flex:1;min-width:110px}
.pay-history{margin-top:12px;display:flex;flex-direction:column;gap:6px}
.pay-row{display:flex;gap:12px;font-size:13px;color:var(--muted);flex-wrap:wrap}
.pay-row span:nth-child(2){font-weight:700;color:var(--ink)}
.pay-note{font-style:italic}

/* ============ Users ============ */
.client-users h4{margin-bottom:8px}
.user-row{
  display:flex;align-items:center;gap:12px;
  padding:10px 14px;border:1px solid var(--line);border-radius:11px;margin-bottom:8px;background:#fff;
}
.user-blocked{background:#FFF7F6;border-color:#F3CBC8}
.user-info{flex:1;display:flex;flex-direction:column;line-height:1.35}
.user-info strong{font-size:14px}
.user-info span{font-size:12.5px;color:var(--muted)}

/* ============ Badges ============ */
.badge{
  display:inline-flex;align-items:center;
  font-size:12px;font-weight:700;
  padding:4px 10px;border-radius:99px;white-space:nowrap;
}
.badge-green{background:#E6F6EE;color:#1E8A55}
.badge-red{background:#FDECEB;color:#C4423B}
.badge-muted{background:#F2EFE7;color:var(--muted)}

/* ============ Notes / hints ============ */
.client-notes{font-size:13.5px;color:var(--muted);border-top:1px dashed var(--line);padding-top:12px}
.hint{font-size:12.5px;color:var(--muted-2)}
.mono{font-family:Consolas,monospace;font-size:11.5px;margin-top:8px;word-break:break-all}

/* ============ Log ============ */
.log-card h3{margin-bottom:14px}
.log-row{display:flex;align-items:center;gap:12px;padding:8px 0;border-bottom:1px solid var(--line);font-size:13.5px;flex-wrap:wrap}
.log-row:last-child{border-bottom:none}
.log-time{color:var(--muted-2);font-size:12.5px;min-width:110px}
.log-details{color:var(--ink)}

/* ============ Toast ============ */
.toast{
  position:fixed;bottom:24px;left:50%;transform:translateX(-50%);
  background:var(--black);color:#fff;font-size:14px;font-weight:600;
  padding:12px 22px;border-radius:12px;z-index:100;
  box-shadow:0 12px 30px -10px rgba(0,0,0,.4);
}
.toast-error{background:var(--red)}

/* ============ Filter bar / empty state ============ */
.filter-bar{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  font-size:14px;color:var(--muted);
  padding:12px 16px;margin-bottom:16px;
  background:var(--yellow-soft);border:1px solid #F3E3AE;border-radius:12px;
}
.filter-bar strong{color:var(--ink)}
.empty-card{text-align:center;color:var(--muted);font-size:15px;padding:34px 22px}

/* ============ Dotyk (telefon/tablet) ============ */
.btn{touch-action:manipulation}
@media (pointer:coarse){
  .btn{min-height:44px}
  .btn-sm{min-height:40px;padding:9px 16px}
  .user-row{padding:12px 14px}
  .add-grid input, .pay-form input{min-height:44px}
}

@media (max-width:600px){
  .topbar{padding:12px 16px}
  .wrap{padding:20px 14px 50px}
  .log-time{min-width:auto}
}