/* ============================
   MiniMe – Core UI (clean)
   ============================ */

:root{
  --mm-radius: 12px;
  --mm-shadow: 0 6px 16px rgba(0,0,0,.06);
  --mm-border: rgba(0,0,0,.08);
}

/* Cards */
.card{
  border-radius: var(--mm-radius);
  border: 1px solid var(--mm-border);
}
.card.shadow-sm{
  box-shadow: var(--mm-shadow);
}

/* Buttons */
.btn{
  border-radius: 10px;
  font-weight: 500;
}
.btn-primary{
  background: linear-gradient(135deg, #3b82f6, #6366f1);
  border: none;
}
.btn-primary:hover{ opacity: .95; }
.btn-outline-secondary{ border-color: var(--mm-border); }

/* Forms */
.form-control,
.form-select{
  border-radius: 10px;
}

/* Modals */
.modal-content{
  border-radius: 18px;
}

/* Babybook / List Groups:
   - nur leicht “cardiger” machen, ohne Bootstrap-Listgroup zu zerstören */
.list-group-item{
  border: 1px solid var(--mm-border);
}
.list-group .list-group-item + .list-group-item{
  margin-top: 10px; /* statt margin-bottom, damit es in Reihenfolge sauber ist */
  border-top: 1px solid var(--mm-border);
}
.list-group-item:first-child{
  border-top-left-radius: var(--mm-radius);
  border-top-right-radius: var(--mm-radius);
}
.list-group-item:last-child{
  border-bottom-left-radius: var(--mm-radius);
  border-bottom-right-radius: var(--mm-radius);
}

/* Thumbnails (Fotos) – EINMAL zentral */
.mm-thumb{
  width: 100%;
  height: 140px;               /* mobile-first */
  object-fit: cover;
  border-radius: 12px;
  transition: transform .15s ease;
}
.mm-thumb:hover{
  transform: scale(1.02);
}

/* Thumb Höhen je Breakpoint */
@media (min-width: 768px){
  .mm-thumb{ height: 130px; }
}
@media (min-width: 992px){
  .mm-thumb{ height: 110px; }
}

/* Links */
.mm-photo-link{
  display: block;
  text-decoration: none;
}

/* Mobile: Padding für Cards */
@media (max-width: 768px){
  .card-body{
    padding: 1rem;
  }
}

/* ============================
   MiniMe – Dashboard UI
   ============================ */

.mm-card .card-body{
  padding: 1rem; /* bewusst gleich wie mobile padding */
}

.mm-kpi{
  font-size: 1.6rem;
  font-weight: 800;
  letter-spacing: .2px;
  line-height: 1.1;
}
.mm-kpi-icon{
  font-size: 1.6rem;
  opacity: .75;
}

.mm-metrics{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .75rem;
}
.mm-metric{
  padding: .5rem .6rem;
  border: 1px solid var(--mm-border);
  border-radius: 12px;
  background: rgba(0,0,0,.02);
}
.mm-trend{
  font-weight: 700;
  margin-left: .35rem;
  opacity: .75;
}

/* ============================
   MiniMe – Module Tiles (Dashboard Links)
   ============================ */

.mm-modules{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .75rem;
}
@media (min-width: 768px){
  .mm-modules{ grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 1200px){
  .mm-modules{ grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

.mm-module-tile{
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .9rem 1rem;
  border-radius: 14px;
  border: 1px solid var(--mm-border);
  background: rgba(0,0,0,.02);
  text-decoration: none;
  color: inherit;
  box-shadow: var(--mm-shadow);
  transition: transform .12s ease;
}
.mm-module-tile:hover{
  transform: translateY(-1px);
}

.mm-module-icon{
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--mm-border);
  background: rgba(255,255,255,.6);
}
.mm-module-icon i{
  font-size: 1.25rem;
}

.mm-module-label{
  font-weight: 700;
  line-height: 1.2;
}

/* ============================
   MiniMe – Medical
   ============================ */

.table td, .table th { vertical-align: middle; }

/* ============================
   MiniMe – Photos
   ============================ */

.mm-photo-card{
  border: 1px solid var(--mm-border);
  border-radius: var(--mm-radius);
  overflow: hidden;
  box-shadow: var(--mm-shadow);
  background: rgba(0,0,0,.02);
}

.mm-photo-meta{
  padding: .6rem .7rem;
}

.mm-photo-title{
  font-weight: 700;
  font-size: .95rem;
}

.mm-photo-tags{
  display:flex;
  gap:.35rem;
  flex-wrap: wrap;
  margin-top: .35rem;
}

/* Photos: Lightbox Image smoother */
#mmLbImg { display:block; }

.mm-thumb{
  width: 100%;
  height: 160px;
  object-fit: cover;
  border-top-left-radius: var(--mm-radius);
  border-top-right-radius: var(--mm-radius);
  transition: transform .15s ease;
}
.mm-thumb:hover{ transform: scale(1.02); }

@media (max-width: 576px){
  .mm-thumb{ height: 140px; }
}

/* Lightbox navigation buttons */
.mm-lb-nav{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  opacity:.85;
  border-radius:999px;
  width:44px;
  height:44px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.mm-lb-prev{ left: 12px; }
.mm-lb-next{ right: 12px; }

/* =========================
   Dashboard (Hero + Tiles)
   ========================= */
.mm-hero-card {
  position: relative;
  overflow: hidden;
}

.mm-hero-card::before {
  content: "";
  position: absolute;
  inset: -80px -80px auto auto;
  width: 220px;
  height: 220px;
  border-radius: 999px;
  background: radial-gradient(circle at 30% 30%, rgba(96,165,250,.35), rgba(96,165,250,0) 60%);
  pointer-events: none;
}

.mm-hero-badge {
  width: 34px;
  height: 34px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(96,165,250,.12);
  border: 1px solid rgba(96,165,250,.25);
}

.mm-hero-sub {
  display: grid;
  grid-template-columns: 1fr;
  gap: .75rem;
}

@media (min-width: 768px) {
  .mm-hero-sub { grid-template-columns: 1fr 1fr; }
}

.mm-hero-subitem {
  border-radius: 14px;
  padding: .75rem .9rem;
  background: rgba(148,163,184,.08);
  border: 1px solid rgba(148,163,184,.18);
}

.mm-snapshot {
  border-radius: 16px;
  padding: .9rem;
  background: rgba(15,23,42,.03);
  border: 1px solid rgba(148,163,184,.18);
}

.mm-metric {
  border-radius: 14px;
  padding: .75rem .85rem;
  background: rgba(148,163,184,.07);
  border: 1px solid rgba(148,163,184,.16);
  height: 100%;
}

.mm-metric-val {
  font-weight: 800;
  font-size: 1.15rem;
  line-height: 1.2;
}

.mm-unit {
  font-weight: 700;
  font-size: .9rem;
  opacity: .75;
}

.mm-action-btn {
  display: flex;
  gap: .65rem;
  align-items: center;
  padding: .75rem .85rem;
  border-radius: 16px;
  text-decoration: none;
  background: rgba(148,163,184,.08);
  border: 1px solid rgba(148,163,184,.18);
  transition: transform .08s ease, background .15s ease, border-color .15s ease;
  color: inherit;
}

.mm-action-btn:hover {
  transform: translateY(-1px);
  background: rgba(148,163,184,.12);
  border-color: rgba(96,165,250,.35);
}

.mm-action-btn i {
  font-size: 1.15rem;
  width: 34px;
  height: 34px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(96,165,250,.12);
  border: 1px solid rgba(96,165,250,.22);
}

.mm-action-title { font-weight: 800; }
.mm-action-sub   { font-size: .85rem; opacity: .8; }

/* Module tiles (upgrade) */
.mm-modules-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .75rem;
}

@media (min-width: 768px) {
  .mm-modules-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (min-width: 1200px) {
  .mm-modules-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

.mm-module-tile2 {
  position: relative;
  overflow: hidden;
  border-radius: 18px;
  padding: .9rem .9rem;
  background: rgba(148,163,184,.08);
  border: 1px solid rgba(148,163,184,.18);
  text-decoration: none;
  color: inherit;
  transition: transform .08s ease, background .15s ease, border-color .15s ease;
  min-height: 86px;
}

.mm-module-tile2:hover {
  transform: translateY(-1px);
  background: rgba(148,163,184,.12);
  border-color: rgba(96,165,250,.35);
}

.mm-module-tile2::before {
  content: "";
  position: absolute;
  inset: auto -60px -60px auto;
  width: 160px;
  height: 160px;
  border-radius: 999px;
  background: radial-gradient(circle at 30% 30%, rgba(96,165,250,.28), rgba(96,165,250,0) 60%);
  pointer-events: none;
}

.mm-module-tile2 .mm-module-icon {
  width: 44px;
  height: 44px;
  border-radius: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(96,165,250,.12);
  border: 1px solid rgba(96,165,250,.22);
  margin-bottom: .55rem;
}

.mm-module-tile2 .mm-module-icon i {
  font-size: 1.2rem;
}

.mm-module-tile2 .mm-module-label {
  font-weight: 800;
  line-height: 1.1;
}

.mm-module-go {
  position: absolute;
  top: .75rem;
  right: .75rem;
  opacity: .65;
}

/* =========================
   Pregnancy – kleine Addons
   ========================= */
.mm-action-btn {
  display:flex;
  align-items:center;
  gap:.75rem;
  padding:.85rem .9rem;
  border:1px solid var(--mm-border, rgba(148,163,184,.25));
  border-radius:14px;
  text-decoration:none;
  background: var(--mm-card, rgba(15,23,42,.35));
  transition: transform .08s ease, border-color .15s ease;
}
.mm-action-btn:hover { transform: translateY(-1px); border-color: rgba(96,165,250,.45); }
.mm-action-btn i { font-size:1.25rem; }

.mm-action-title { font-weight:800; line-height:1.1; }
.mm-action-sub { font-size:.85rem; color: var(--mm-muted, #94a3b8); }

.mm-photo-link { display:block; text-decoration:none; }
.mm-thumb {
  width:100%;
  aspect-ratio: 1 / 1;
  object-fit:cover;
  border-radius: 14px;
  border:1px solid rgba(148,163,184,.25);
}

/* =========================
   Pregnancy Checklists
   ========================= */
.mm-chk-dot{
  width:12px;height:12px;border-radius:50%;
  border:2px solid rgba(148,163,184,.55);
  display:inline-block;flex:0 0 12px;
}
.mm-chk-dot.is-done{
  border-color: rgba(34,197,94,.75);
  box-shadow: 0 0 0 3px rgba(34,197,94,.12);
}

/* Pregnancy Inline-Subview: muss über allen Cards/Rows liegen, sonst frisst ein Overlay die Klicks */
#mm-pregnancy-subview{
  position: relative;
  z-index: 50;
  pointer-events: auto;
}

/* Sicherheitsnetz: falls irgendein Parent pointer-events deaktiviert */
#mm-pregnancy-subview *{
  pointer-events: auto;
}