/* HM Self Apps — UI (MVP+) — centered app icon from the start */

/* ===== Vars ===== */
:root{
  --hmsa-text:#222;
  --hmsa-sub:#666;
  --hmsa-border:#e0e0e0;
  --hmsa-muted:#f7f7f7;
  --hmsa-radius:12px;
  --hmsa-radius-sm:8px;
  --hmsa-shadow:0 1px 2px rgba(0,0,0,.06);

  /* Icon */
  --hmsa-icon-size:96px;        /* μέγεθος app icon στο header */
  --hmsa-avatar-size:64px;      /* μέγεθος icon μέσα στις κάρτες */
}

/* ===== Helpers ===== */
.hmsa-align-center{ text-align:center; }

/* ===== App Header (κεντραρισμένο app icon) ===== */
.hmsa-app-header{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:10px;
  margin:20px 0 16px;
  text-align:center;
}

.hmsa-app-icon{
  width:var(--hmsa-icon-size);
  height:var(--hmsa-icon-size);
  border-radius:20%;
  background:linear-gradient(180deg,#f6f8ff,#eef2ff);
  border:1px solid var(--hmsa-border);
  box-shadow:inset 0 1px 2px rgba(0,0,0,.04);
  display:grid;
  place-items:center;
  overflow:hidden;
}

/* Εικόνα/SVG πάντα τέλεια στο κέντρο */
.hmsa-app-icon > img,
.hmsa-app-icon > svg{
  display:block;
  max-width:80%;
  max-height:80%;
  width:auto;
  height:auto;
  object-fit:contain;
  margin:auto;                 /* απόλυτο centering */
}

.hmsa-app-title{ margin:0; font-weight:700; font-size:18px; color:var(--hmsa-text); }
.hmsa-app-caption{ margin:0; font-size:13px; color:var(--hmsa-sub); }

/* ===== Grid (σταθερό gap) ===== */
.hmsa-store{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
  gap:20px;
  margin:12px 0;
  align-items:stretch;
  box-sizing:border-box;
}

/* Προαιρετικές manual στήλες */
.hmsa-cols-2{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.hmsa-cols-3{ grid-template-columns:repeat(3,minmax(0,1fr)); }
.hmsa-cols-4{ grid-template-columns:repeat(4,minmax(0,1fr)); }

@media (max-width:1024px){ .hmsa-cols-4{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:900px){  .hmsa-cols-3,.hmsa-cols-4{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:640px){
  .hmsa-store,
  .hmsa-cols-2,.hmsa-cols-3,.hmsa-cols-4{ grid-template-columns:1fr; }
}

/* ===== Cards (λευκά) ===== */
.hmsa-card{
  background:#fff;
  color:var(--hmsa-text);
  border:1px solid var(--hmsa-border);
  border-radius:var(--hmsa-radius);
  box-shadow:var(--hmsa-shadow);
  padding:16px;
  display:flex;
  flex-direction:column;
  gap:10px;
  height:100%;
  box-sizing:border-box;
}
.hmsa-card--center{ align-items:center; text-align:center; }
.hmsa-card-title{ margin:0; font-weight:600; font-size:16px; }
.hmsa-card-caption{ margin:0; color:var(--hmsa-sub); font-size:13px; }
.hmsa-card-footer{ margin-top:auto; }

/* ===== Avatar/Icon σε κάρτες (πάντα στο κέντρο) ===== */
.hmsa-card-icon{ display:flex; justify-content:center; }
.hmsa-avatar{
  width:var(--hmsa-avatar-size);
  height:var(--hmsa-avatar-size);
  border-radius:50%;
  display:grid;
  place-items:center;
  background:linear-gradient(180deg,#f6f8ff,#eef2ff);
  border:1px solid var(--hmsa-border);
  overflow:hidden;
  box-shadow:inset 0 1px 2px rgba(0,0,0,.04);
}
.hmsa-avatar img, .hmsa-avatar svg{
  display:block;
  max-width:80%;
  max-height:80%;
  width:auto;
  height:auto;
  object-fit:contain;
  margin:auto;                 /* πλήρες centering */
}

/* Μεγέθη παραλλαγών */
.hmsa-avatar.is-sm{ --hmsa-avatar-size:48px; }
.hmsa-avatar.is-lg{ --hmsa-avatar-size:80px; }
.hmsa-app-icon.is-lg{ --hmsa-icon-size:128px; }

/* ===== Buttons (λευκά) ===== */
.hmsa-btn{
  display:inline-block;
  padding:8px 12px;
  border:1px solid var(--hmsa-border);
  background:#fff;
  color:var(--hmsa-text);
  border-radius:var(--hmsa-radius-sm);
  text-decoration:none;
  cursor:pointer;
  transition:background .2s ease, transform .06s ease;
}
.hmsa-btn:hover{ background:var(--hmsa-muted); }
.hmsa-btn:active{ transform:translateY(1px); }

/* ===== App container ===== */
.hmsa-app-root{ min-height:160px; }
.hmsa-app-loading{ color:#666; font-size:14px; }

/* ===== Modal (λευκό) ===== */
.hmsa-modal[hidden]{ display:none; }
.hmsa-modal{ position:fixed; inset:0; z-index:9999; }
.hmsa-modal-backdrop{ position:absolute; inset:0; background:rgba(0,0,0,.38); }
.hmsa-modal-dialog{
  position:relative;
  max-width:720px; width:min(92vw,720px);
  margin:8vh auto; padding:16px;
  background:#fff; border-radius:14px; box-shadow:0 12px 48px rgba(0,0,0,.2);
}
.hmsa-modal-title{ margin:0; font-weight:600; }
.hmsa-modal-caption{ color:var(--hmsa-sub); }
.hmsa-modal-footer{ display:flex; gap:8px; justify-content:flex-end; }

/* ===== Notices ===== */
.hmsa-notice{
  padding:12px; border:1px dashed #ccc; border-radius:8px; background:#fff;
}