/* =========================================================
   Χρήστες (προφίλ): κουμπί χρήστη στην πάνω μπάρα (#btn-user) και
   παράθυρο «Χρήστες» (.modal-profiles: κάρτες χρηστών, νέος χρήστης,
   φάκελος χρηστών). Λογική στο js/profiles.js + App.showProfiles().
   ========================================================= */

/* ---- κουμπί της πάνω μπάρας: το avatar του τρέχοντος χρήστη + πλήθος χρηστών ---- */
#btn-user { padding: 0; position: relative; display: flex; align-items: center; justify-content: center; }
#btn-user svg { width: 44px; height: 44px; border-radius: 50%; display: block; }
#btn-user .pf-badge {
  position: absolute; right: -7px; bottom: -7px; min-width: 22px; height: 22px; line-height: 18px; padding: 0 4px;
  background: #ff7043; color: #fff; font-size: 13px; font-weight: 800; font-style: normal; text-align: center;
  border-radius: 12px; border: 2px solid #fff; box-shadow: 0 2px 4px rgba(0,0,0,.2);
}
html.mobile #btn-user svg { width: 30px; height: 30px; }
html.mobile #btn-user .pf-badge { min-width: 16px; height: 16px; line-height: 13px; font-size: 10px; right: -5px; bottom: -5px; }

/* ---- παράθυρο «Χρήστες» ---- */
.modal.modal-profiles { max-width: 920px; padding: 24px 34px 22px; }
.modal-profiles .pf-title { font-size: 38px; margin-bottom: 4px; }
.pf-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin: 6px 0 14px; max-height: 46vh; overflow-y: auto; padding: 10px 6px; }
.pf-card {
  position: relative; width: 150px; background: #fff; border: 3px solid #e3e8f0; border-radius: 20px; padding: 12px 8px 10px;
  cursor: pointer; transition: transform .12s, border-color .12s, box-shadow .12s; box-shadow: 0 4px 0 #e3e8f0;
}
.pf-card:hover { transform: translateY(-3px); border-color: #ffca28; box-shadow: 0 8px 18px rgba(0,0,0,.14); }
.pf-card.cur { border-color: #66bb6a; background: #f1f8e9; cursor: default; box-shadow: 0 4px 0 #a5d6a7; }
.pf-card.cur:hover { transform: none; }
.pf-av { display: flex; justify-content: center; }
.pf-av svg { width: 84px; height: 84px; border-radius: 50%; box-shadow: 0 4px 0 rgba(0,0,0,.12); }
.pf-av.pf-plus { width: 84px; height: 84px; margin: 0 auto; border-radius: 50%; background: #fff8e1; border: 3px dashed #ffb300; align-items: center; font-size: 38px; color: #ff8f00; }
.pf-new { border-style: dashed; background: #fffdf5; }
.pf-name { font-weight: 800; font-size: 18px; color: #37474f; margin-top: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pf-cls { display: inline-block; margin-left: 5px; padding: 0 7px; border-radius: 9px; background: #e1f5fe; color: #0277bd; font-size: 12px; font-weight: 800; vertical-align: 2px; }
.group-card .pf-cls { font-size: 13px; vertical-align: 3px; }
.pf-info { font-size: 13px; color: #78909c; font-weight: 600; margin-top: 2px; }
.pf-now { margin-top: 5px; font-size: 12px; font-weight: 800; color: #2e7d32; background: #c8e6c9; border-radius: 10px; padding: 2px 9px; display: inline-block; }
.pf-x {
  position: absolute; top: -9px; right: -9px; width: 28px; height: 28px; border-radius: 50%; border: 2px solid #fff;
  background: #ef5350; color: #fff; font-size: 13px; font-weight: 800; cursor: pointer; font-family: inherit; line-height: 1;
  opacity: 0; transition: opacity .12s, transform .12s; box-shadow: 0 2px 4px rgba(0,0,0,.2);
}
.pf-card:hover .pf-x { opacity: 1; }
.pf-x:hover { transform: scale(1.15); background: #d32f2f; }
html.touch .pf-x { opacity: 1; }

/* ---- φάκελος χρηστών ---- */
.pf-folder { background: #fff8e1; border-radius: 16px; padding: 10px 14px 12px; margin: 0 0 8px; font-size: 16px; color: #5d4037; font-weight: 700; line-height: 1.35; }
.pf-folder .pf-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 8px; }
.pf-folder .big-btn { font-size: 17px; padding: 8px 18px; }
.pf-save { background: #e8f5e9; color: #2e7d32; }
.modal-profiles.over { outline: 4px dashed #ffb300; outline-offset: -8px; }
.pf-folder small { display: block; color: #8d6e63; font-weight: 500; font-size: 13px; margin-top: 6px; }
.modal-profiles .code-msg { margin: 4px 0 6px; }
.modal-profiles .code-msg.err { background: #ffcdd2; color: #b71c1c; }

@media (max-height: 720px) {
  .modal.modal-profiles { padding: 14px 24px 14px; }
  .modal-profiles .pf-title { font-size: 28px; }
  .pf-grid { gap: 10px; max-height: 40vh; }
  .pf-card { width: 130px; padding: 8px 6px 8px; }
  .pf-av svg, .pf-av.pf-plus { width: 64px; height: 64px; }
  .pf-folder small { display: none; }
}
html.mobile .pf-card { width: 120px; }
html.mobile .pf-av svg, html.mobile .pf-av.pf-plus { width: 60px; height: 60px; }