/* ─────────── Глобальное ─────────── */
* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: system-ui, sans-serif; background:#f5f7fb; color:#333; }

/* ─────────── Topbar ─────────── */
.topbar {
  background:#fff; padding:1rem; display:flex; justify-content:space-between;
  align-items:center; box-shadow:0 2px 6px rgba(0,0,0,.06);
}
.topbar h2 { font-size:1.2rem; }
.topbar nav { display:flex; gap:.6rem; }

/* ─────────── Buttons ─────────── */
.btn {
  background:#2b7cff; color:#fff; padding:.4rem .8rem;
  border:none; border-radius:6px; text-decoration:none; font-size:.9rem;
  cursor:pointer; display:inline-block;
}
.btn.small   { padding:.2rem .5rem; font-size:.8rem; }
.btn.danger  { background:#c62828; }
.btn:hover   { filter:brightness(1.1); }

/* ─────────── Tables ─────────── */
.invoice-table { width:100%; border-collapse:collapse; background:#fff;
  margin-top:1rem; border-radius:12px; overflow:hidden;
  box-shadow:0 3px 8px rgba(0,0,0,.05);
}
.invoice-table th, .invoice-table td { padding:.7rem .9rem; text-align:left; }
.invoice-table thead { background:#f1f4f9; font-weight:600; }
.invoice-table tbody tr:not(:last-child) { border-bottom:1px solid #f1f4f9; }

/* ─────────── Метки статуса ─────────── */
.badge {
  display:inline-block; padding:.25rem .6rem; border-radius:20px;
  font-size:.8rem; font-weight:600;
}
.badge.signed   { background:#e7f6e8; color:#2e7d32; }
.badge.unsigned { background:#fdecea; color:#c62828; }
.js-sign { cursor:pointer; border:none; background:#fdecea; color:#c62828; }

/* ─────────── Flash messages ─────────── */
.success { color:#2e7d32; margin:.6rem 0; }
.error   { color:#c62828; margin:.6rem 0; }

/* ─────────── Формы ─────────── */
form label { display:block; margin:.8rem 0 .3rem; }
form input, form select {
  width:100%; padding:.55rem .7rem; border:1px solid #bbb;
  border-radius:6px; font-size:.9rem;
}


/* ─────────── Login page ─────────── */
.login-body { display:flex; align-items:center; justify-content:center; min-height:100vh; }
.login-container {
  background:#fff; padding:2rem 1.5rem; width:100%; max-width:380px;
  border-radius:12px; box-shadow:0 4px 14px rgba(0,0,0,.1);
}
.login-container .hint { font-size:.8rem; color:#666; text-align:center; margin-top:1rem; }

/* ─────────── Responsive (моб.) ─────────── */
@media (max-width:640px){
  .invoice-table thead{display:none;}
  .invoice-table, .invoice-table tbody, .invoice-table tr, .invoice-table td{
    display:block; width:100%;
  }
  .invoice-table tr{margin-bottom:1rem; border:1px solid #f1f4f9; border-radius:8px;}
  .invoice-table td{
    display:flex; justify-content:space-between; padding:.55rem .9rem; font-size:.9rem;
  }
  .invoice-table td::before{
    content:attr(data-label); font-weight:600; color:#555; margin-right:1rem;
  }
}
/* ─────────── login card ─────────── */
.login-body{
  display:flex;align-items:center;justify-content:center;height:100vh;background:#f5f7fb;
}
.login-card{
  width:100%;max-width:360px;background:#fff;padding:2rem 2.2rem;border-radius:14px;
  box-shadow:0 8px 22px rgba(0,0,0,.08);text-align:center;
}
.login-card h2{margin-bottom:1.3rem;font-weight:600;}
.login-form label{display:block;text-align:left;margin-bottom:1.1rem;position:relative;}
.login-form label span{font-size:.85rem;color:#666;}
.login-form input{
  width:100%;border:none;border-bottom:2px solid #ccc;padding:.55rem .2rem;
  font-size:1rem;background:transparent;outline:none;transition:border-color .25s;
}
.login-form input:focus{border-color:#2b7cff;}
.login-form label.pw svg{
  position:absolute;right:0;bottom:.55rem;width:22px;height:22px;color:#888;cursor:pointer;
}

.gradient-btn{
  width:100%;padding:.55rem 1rem;border:none;border-radius:30px;font-weight:600;
  background:linear-gradient(90deg,#3b8dff 0%,#9f3bff 100%);color:#fff;font-size:.9rem;
  cursor:pointer;transition:filter .2s;
}
.gradient-btn:hover{filter:brightness(1.1);}

/* ─────────── cards layout ─────────── */
.cards-container{padding:1rem;display:flex;flex-direction:column;gap:1rem;}
.inv-card{
  background:#fff;border-radius:12px;box-shadow:0 3px 10px rgba(0,0,0,.05);
  padding:1rem .9rem;position:relative;
}
.inv-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:.6rem;}
.inv-number{font-weight:600;font-size:1rem;}
.inv-details{list-style:none;font-size:.9rem;color:#444;line-height:1.45;}
.inv-details li+li{margin-top:.2rem;}

/* статус-бейдж уже есть (.badge) */

/* ─────────── действия ─────────── */
.inv-actions{display:flex;gap:.6rem;margin-top:.8rem;}
.act{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;
  border:none;border-radius:6px;font-size:1.1rem;cursor:pointer;text-decoration:none;}
.act.edit{background:#2979ff;color:#fff;}
.act.del {background:#c62828;color:#fff;}

/* ─────────── нижняя панель ─────────── */
.bottom-bar{
  position:fixed;bottom:0;left:0;right:0;padding:.7rem 1rem;display:flex;gap:.8rem;
  backdrop-filter:blur(10px);background:rgba(255,255,255,.92);box-shadow:0 -2px 8px rgba(0,0,0,.06);
}
.btn.wide{flex:1;text-align:center;}

/* ─────────── icon button ─────────── */
.icon-btn{width:32px;height:32px;display:inline-flex;align-items:center;justify-content:center;
  color:#444;text-decoration:none;}
.icon-btn svg{width:22px;height:22px;}

/* ─────────── pill buttons в карточке ─────────── */
.pill{
  display:inline-block;padding:.35rem 1.1rem;border:none;
  font-size:.78rem;font-weight:600;color:#fff;text-decoration:none;cursor:pointer;
  transition:filter .2s;
}
.pill:hover{filter:brightness(1.1);}

.pill.edit{
  background:linear-gradient(90deg,#3b8dff 0%,#9f3bff 100%);
}
.pill.del {
  background:linear-gradient(90deg,#ff5f5f 0%,#ff2a2a 100%);
}
/* ─────────── user cards ─────────── */
.user-card{
  background:#fff;border-radius:12px;box-shadow:0 3px 10px rgba(0,0,0,.05);
  padding:1rem .9rem;display:flex;flex-direction:column;gap:.6rem;
}
.user-head{display:flex;justify-content:space-between;align-items:center;}
.user-name{font-weight:600;font-size:1rem;}
.role-tag{
  font-size:.75rem;font-weight:600;padding:.25rem .6rem;border-radius:12px;color:#fff;text-transform:uppercase;
}
.role-tag.admin    {background:#9f3bff;}
.role-tag.operator {background:#2b7cff;}
.role-tag.rep      {background:#00b37a;}

.user-details{list-style:none;font-size:.9rem;color:#444;line-height:1.45;padding-left:0;}
.user-details li+li{margin-top:.2rem;}
/* подчёркнутые поля select, чтобы совпадало со стилем input */
.login-form select{
  width:100%;border:none;border-bottom:2px solid #ccc;padding:.55rem .2rem;
  font-size:1rem;background:transparent;outline:none;appearance:none;
}
.login-form select:focus{border-color:#2b7cff;}
/* подчёркнутый стиль для input[type=date] и select */
.login-form input[type="date"],
.login-form select{
  width:100%;border:none;border-bottom:2px solid #ccc;padding:.55rem .2rem;
  font-size:1rem;background:transparent;outline:none;appearance:none;
}
.login-form input[type="date"]:focus,
.login-form select:focus{border-color:#2b7cff;}
/* ─────────── modal ─────────── */
.modal-overlay{
  position:fixed;inset:0;background:rgba(0,0,0,.45);display:flex;
  align-items:center;justify-content:center;z-index:999;
}
.modal-card{
  background:#fff;border-radius:14px;padding:1.6rem 1.4rem;width:90%;max-width:340px;
  box-shadow:0 8px 24px rgba(0,0,0,.15);text-align:center;animation:pop .25s ease;
}
.modal-text{font-size:.95rem;margin-bottom:1rem;line-height:1.35;}
.modal-actions{display:flex;gap:.8rem;justify-content:center;margin-top:.4rem;}
@keyframes pop{from{transform:scale(.8);opacity:0}to{transform:scale(1);opacity:1}}