/* =========================================================
   PROFIL – APP CSS (Layout + UI Standard)
   Ziel: KEINE Doppel-Definitionen zu site.css / diary.css
   ========================================================= */

/* =========================================================
   Reset
   ========================================================= */
*{ box-sizing:border-box; }

/* =========================================================
   Seiten-Spacing (nur Layout)
   ========================================================= */
main.page{
  padding:22px 0;
}
main.page > *{
  padding-left:22px;
  padding-right:22px;
}
@media (max-width:700px){
  main.page{ padding:18px 0; }
  main.page > *{
    padding-left:18px;
    padding-right:18px;
  }
}

/* Stack-Abstände (nur Layout) */
.stack > * + *{ margin-top:14px; }

/* =========================================================
   Card (app-spezifisch)
   ========================================================= */
.card{
  width:100%;
  background:#fff;
  border:1px solid #eee;
  box-shadow:0 2px 10px rgba(0,0,0,.04);
  padding:26px 28px;
}
@media (max-width:700px){
  .card{ padding:22px 18px; }
}

/* =========================================================
   Buttons – App-Standard
   (site.css enthält ebenfalls .btn – diese Regeln setzen nur Höhe/Abstände,
    Farben kommen aus app.css (grün/grau) und sind bewusst "sanft")
   ========================================================= */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  height:30px;
  padding:0 10px;

  font-size:13px;
  font-weight:700;
  line-height:1;

  border-radius:8px;
  border:1px solid transparent;

  cursor:pointer;
  text-decoration:none;
  white-space:nowrap;

  transition:background .15s ease, border-color .15s ease;
}

/* Grün */
.btn,
.btn-primary{
  background:#4CAF50;
  border-color:#4CAF50;
  color:#fff;
}
.btn:hover,
.btn-primary:hover{
  background:#3e9e44;
  border-color:#3e9e44;
}

/* Grau */
.btn-secondary,
.btn-logout{
  background:#f2f2f2;
  border-color:#cfcfcf;
  color:#111;
}
.btn-secondary:hover,
.btn-logout:hover{
  background:#e8e8e8;
}

.btn-group{
  display:flex;
  align-items:center;
  gap:10px;
}

/* =========================================================
   Userbar (app-spezifisch)
   ========================================================= */
.userbar{
  display:flex;
  align-items:stretch;
  gap:12px;
}

.userbar__info{
  flex:1;
  min-height:30px;
  display:flex;
  align-items:center;
  padding:0 16px;

  border:1px solid #d9e7d9;
  border-left:4px solid #4CAF50;
  background:#f4fbf4;
  font-weight:700;
}

.userbar__actions{
  display:flex;
  align-items:center;
  gap:10px;
  justify-content:flex-end;
}

@media (max-width:700px){
  .userbar{ flex-direction:column; gap:10px; }
  .userbar__actions{ justify-content:flex-start; }
}

/* =========================================================
   Forms (app-spezifisch)
   ========================================================= */
.form-grid-2{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px;
}
@media (max-width:700px){
  .form-grid-2{ grid-template-columns:1fr; }
}

.field label{
  display:block;
  font-weight:700;
  margin-bottom:6px;
}
.field input{
  width:100%;
  height:36px;
  padding:0 10px;
  border:1px solid #bdbdbd;
  border-radius:6px;
  font-size:14px;
}

.checkline{
  display:flex;
  align-items:center;
  gap:10px;
  margin-top:18px;
}

.small{
  margin-top:22px;
  font-size:.95rem;
  color:#666;
}

/* =========================================================
   Flash (app-spezifisch)
   ========================================================= */
.flash{
  margin:0 0 18px;
  padding:14px;
  border:1px solid #ffd0d0;
  border-left:4px solid #ff3b30;
  background:#fff1f1;
}

/* =========================================================
   Modal Buttons (app-spezifisch)
   ========================================================= */
.winmodal__btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  height:30px;
  padding:0 10px;

  font-size:13px;
  font-weight:700;

  border-radius:8px;
  border:1px solid #cfcfcf;

  background:#f2f2f2;
  color:#111;
  cursor:pointer;
}
.winmodal__btn:hover{
  background:#e8e8e8;
}

.winmodal__btn.primary{
  background:#e53935;
  border-color:#e53935;
  color:#fff;
}
.winmodal__btn.primary:hover{
  filter:brightness(0.95);
}

/* Helpers */
.mt-14{ margin-top:14px; }
.mt-22{ margin-top:22px; }