/* -------------------------------------------------
   Base / Form
-------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;600;700&display=swap');

body {
    font-family: 'Montserrat', sans-serif;
    padding: 0!important;
    margin: 0!important;
}

.entry-content{
    padding: 0;
}

.gewinnrechner-wrapper {
    max-width: 1230px;
    margin: 0 auto;
    padding: 20px;
}

.form-wrap {
    background: #fff;
	max-width: 100%!important;
    padding: 50px 10px!important;
    border-radius: 10px;
    margin: 0!important;
    box-shadow: 0 0 40px rgba(0,0,0,0.08);
}

.form-label,
label {
    font-size: 14px;
    margin-bottom: 6px;
    display: block;
}

.form-control {
    height: 46px;
    border-radius: 8px;
    background: #f3f6f8;
    border: none;
    padding: 6px 10px;
}

.btn-primary {
    background: #153d45;
    border-color: #153d45;
    border-radius: 50px;
    padding: 10px 18px;
}

/* -------------------------------------------------
   Table (desktop)
-------------------------------------------------- */
.table-modern {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
    border-radius: 10px;
    overflow: hidden;
}

.table-modern th {
    background: #153d45;
    color: #fff;
    padding: 10px;
    text-align: left;
    font-weight: 600;
}

.table-modern td {
    padding: 10px;
    vertical-align: middle;
    border-bottom: 1px solid #e5e7eb;
}

.table-modern tbody tr:nth-child(odd) {
    background: #f7f8fa;
}

.text-end {
    text-align: right;
}

/* Foto small in table */
.foto-col img {
    max-width: 64px;
    border-radius: 6px;
}

@media (min-width: 769px) {
    .foto-col {
        width: 72px;
    }
}

/* -------------------------------------------------
   Mobile Cards – Full Styling
-------------------------------------------------- */
@media (max-width: 768px) {
    #historieTable {
        display: none !important;
    }

    #historyCardsContainer {
        display: block;
        margin-top: 12px;
    }
}

/* ===========================
   Modern Card Styles (universal)
   ------------------------------
   Updated to match the screenshot exactly
   Applies to:
   history-card, mobile-card, gr-card, card-*
   =========================== */

.history-card,
.mobile-card,
.gr-card {
  background: #ffffff;
  border-radius: 22px;
  padding: 20px;
  margin-bottom: 22px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
  border: 1px solid rgba(0, 0, 0, 0.04);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  margin-top: 12px;
  width: 100%;
}

/* Card image */
.history-card img,
.mobile-card img,
.gr-card img,
.card-img img {
  width: 100% !important;
  height: auto;
  display: block;
  border-radius: 18px;
  object-fit: cover;
  margin-bottom: 20px;
  border: 1px solid rgba(0,0,0,0.05);
}

/* Title */
.card-title {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 18px;
  color: #111827;
  line-height: 1.3;
}

/* 2×2 Grid */
.card-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  width: 100%;
  margin-bottom: 20px;
}

/* Box styling (EK, VK, Netto, Gewinn) */
.card-box {
  background: #f1f2f4;
  padding: 14px 12px;
  border-radius: 16px;
  text-align: left;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.card-box .label {
  font-size: 15px;
  opacity: 0.75;
  margin-bottom: 4px;
  font-weight: 600;
}

.card-box .value {
  font-size: 17px;
  font-weight: 600;
  color: #111827;
}

.profit-pos { color: #15803d; }
.profit-neg { color: #b91c1c; }

/* responsive grid */
@media (max-width: 430px) {
  .card-grid {
    grid-template-columns: 1fr;
  }
}

/* Card Hover (Desktop only) */
@media (min-width: 769px) {
  .history-card:hover,
  .gr-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 14px 36px rgba(0, 0, 0, 0.10);
  }
}

/* ===========================
   Buttons unter der Card
   (bearbeiten / löschen)
   Matching Screenshot
   =========================== */

.card-actions {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 18px;
}

.card-btn {
  width: 100%;
  padding: 14px 0;
  font-size: 22px;
  border-radius: 12px;
  background: #ffffff;
  cursor: pointer;
  transition: 0.2s;
  text-align: center;
  border: 2px solid transparent;
}

/* Edit Button → Blau */
.card-btn.primary {
  border-color: #2a78ff;
  color: #2a78ff;
}
.card-btn.primary:hover {
  background: #e8f1ff;
}

/* Delete Button → Rot */
.card-btn.danger {
  border-color: #d9534f;
  color: #d9534f;
}
.card-btn.danger:hover {
  background: #ffecec;
}

/* Icons inside buttons */
.card-btn i {
  font-size: 24px;
}

/* mobile button size */
@media (max-width: 480px) {
  .card-btn {
    font-size: 20px;
    padding: 12px 0;
  }
  .btn-edit{
	width: 100% !important;
    margin: 0 auto;
    border: 0!important;
	background: transparent!important;
	}
}

/* -----------------------------------------
   MOBILE CARD – Screenshot Style (Final)
------------------------------------------ */

.history-card,
.mobile-card,
.gr-card {
  background: #ffffff;
  border-radius: 16px;
  padding: 18px;
  margin-bottom: 24px;
  box-shadow: 0 4px 18px rgba(0,0,0,0.08);
  border: 1px solid #f1f1f1;
}

/* --- Bild --- */
.card-img img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 12px;
  object-fit: cover;
  margin-bottom: 14px;
  border: none!important;
}

/* --- Titel --- */
.card-title {
  font-size: 20px;
  font-weight: 700;
  color: #1a1a1a;
  margin-bottom: 14px;
  line-height: 1.3;
  margin-bottom: 10px!important;
}

/* --- Grid für EK, VK, Netto, Gewinn% --- */
.card-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 18px;
}

/* --- Boxen --- */
.card-box {
  background: #f4f5f7;
  padding: 16px;
  border-radius: 14px;
  text-align: left;
  display: flex;
  flex-direction: column;
}

/* --- Label --- */
.card-box .lbl {
  font-size: 14px;
  color: #777;
  font-weight: 600;
  margin-bottom: 6px;
}

/* --- Value --- */
.card-box div:last-child {
  font-size: 18px;
  font-weight: 700;
  color: #111;
}

/* --- Buttons unter der Card --- */
.card-btns {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.card-btns button {
  width: 100%;
  padding: 14px 0;
  border-radius: 10px;
  font-size: 20px;
}

/* Edit Button */
.card-btns .btn-edit {
  border: 2px solid #1a73e8 !important;
  color: #1a73e8 !important;
  width: 100%;
  background: #ffffff !important;
}

.card-btns .btn-edit img,
.card-btns .btn-delete img{
	width: 40px !important;
    margin: 0 auto;
    border: 0!important;
}

.table-action-btn{
	width: 40px;
    margin: 0 auto;
    border: 0!important;
	background: transparent!important;
}

.table-action-btn img{
	width: 100%;
	height: auto;
	background: transparent!important;
}

/* Delete Button */
.card-btns .btn-delete {
  border: 2px solid #d93025 !important;
  color: #d93025 !important;
  background: #ffffff !important;
}

/* Hover (falls gewünscht) */
.card-btns button:hover {
  opacity: 0.85;
  transform: translateY(-2px);
  transition: 0.15s ease;
}
.ios-select {
  appearance: none;
  -webkit-appearance: none;
  background: #fff url("data:image/svg+xml;utf8,<svg fill='gray' height='24' width='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/></svg>") no-repeat right 12px center;
  background-size: 18px;
  padding-right: 42px;
  border-radius: 12px;
  border: 1px solid #ddd;
  height: 46px;
  font-size: 16px;
}
.ios-select:focus {
  border-color: #007aff;
  box-shadow: 0 0 6px rgba(0,122,255,0.3);
}