/* ===========================
   Measurement Section
   =========================== */

/* Container */
.measurement-container {
  margin-top: 1rem;
  color:#fff;
}

/* Header */
.measurement-header {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.75rem;
}
.measurement-header h4 {
  color: #fff;
  font-weight: 800;
  display:flex; align-items:center; gap:.5rem;
}
.measurement-header h4 .bi{ color:#d90404; }

/* Header actions (edit/delete) görünürlük + hizalama */
.measurement-header .measurement-actions{
  display:flex; align-items:center; gap:.5rem;
  flex-wrap:wrap; overflow:visible;
}
.measurement-header .measurement-actions > *{
  flex:0 0 auto; white-space:nowrap;
}

/* Edit Button (Kırmızı) */
.measurement-btn-edit {
  background: linear-gradient(135deg,#d90404,#730707);
  border: none;
  color: #fff;
  border-radius: 30px;
  transition: background .2s, transform .12s, box-shadow .12s;
  font-size: 14px;
  padding: 8px 16px;
  box-shadow:0 6px 16px rgba(217,4,4,.18);
}
.measurement-btn-edit:hover {
  background: linear-gradient(135deg,#730707,#d90404);
}

/* Delete Button (Beyaz) */
.measurement-btn-delete {
  background: transparent;
  border: 1px solid #fff;
  color: #fff;
  border-radius: 30px;
  transition: all .2s;
  font-size: 14px;
  padding: 8px 16px;
}
.measurement-btn-delete:hover {
  background: #fff;
  color: #000;
}

/* ✅ Fix: Equalize Edit & Delete button heights */
.measurement-btn-edit,
.measurement-btn-delete {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1.4;
  min-height: 40px;
  box-sizing: border-box;
}

/* Table */
.measurement-list{ margin-top:1rem; }
.measurement-table {
  background: #1b1b1b;
  color: #eee;
  border-color: #333;
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;   /* responsive için */
  word-break: break-word;
  border-radius:12px;
  overflow:hidden;
}
.measurement-table th {
  background: #222;
  color: #fff;
  font-weight: 700;
  width: 220px;
  padding: 10px;
  border-bottom:1px solid #333;
}
.measurement-table td {
  background: #2a2a2a;
  color: #ddd;
  padding: 10px;
  border-bottom:1px solid #333;
}

/* Form Fields */
.measurement-field label {
  color: #ddd;
  font-size: 13px;
  margin-bottom: 4px;
  display:flex; align-items:center; gap:.35rem;
}
.measurement-input {
  background: #222;
  border: 1px solid #444;
  color: #fff;
  font-size: 14px;
  border-radius:10px;
  min-height:44px;
}
.measurement-input:focus {
  border-color: #d90404;
  box-shadow: 0 0 0 .2rem rgba(217,4,4,.25);
  background: #111;
  color: #fff;
}

/* Modal */
.measurement-modal {
  background: linear-gradient(135deg,#0f0f0f,#1a1a1a);
  color: #fff;
  border:1px solid #2a2a2a;
  border-radius:16px;
}
.measurement-modal-header { border-bottom: 1px solid #333; }
.measurement-modal-footer { border-top: 1px solid #333; }

/* Save Button */
.measurement-btn-save {
  background: #d90404;
  border: none;
  color: #fff;
  padding: 8px 16px;
  border-radius: 30px;
  font-size: 14px;
  font-weight:700;
}
.measurement-btn-save:hover { background: #b30303; }

/* Cancel Button */
.measurement-btn-cancel {
  background: #444;
  color: #fff;
  border: none;
  padding: 8px 16px;
  border-radius: 30px;
  font-size: 14px;
}
.measurement-btn-cancel:hover { background: #555; }

/* Alerts spacing */
.measurement-container .alert { margin-top:10px; }

/* ---------- Mobile Guard Modal (info card) ---------- */
.msr-guard .modal-content{
  background: linear-gradient(135deg, #181818, #0f0f0f);
  border:1px solid rgba(255,255,255,.08);
  border-radius:16px; color:#fff;
}
.msr-guard .modal-body{ padding:18px; }
.msr-guard .msr-guard-icon{
  width:44px; height:44px; border-radius:12px;
  background:linear-gradient(135deg,#2a2a2a,#1a1a1a);
  color:#d90404; display:flex; align-items:center; justify-content:center;
  font-size:1.2rem; margin-bottom:10px;
}
.msr-guard .msr-guard-title{ font-weight:800; font-size:1rem; margin-bottom:6px; }
.msr-guard .msr-guard-text{ color:#ddd; font-size:.95rem; line-height:1.45; }
.msr-guard .msr-guard-btn{
  background: linear-gradient(135deg,#d90404,#730707);
  border:none; color:#fff; border-radius:30px; padding:.6rem 1.2rem; font-weight:700;
}

/* ===========================
   ✅ Responsive
   =========================== */
@media (max-width: 576px) {
  /* Header ayarı */
  .measurement-header {
    flex-direction: column;
    align-items: stretch;
    gap: .5rem;
  }

  .measurement-header .measurement-actions{
    width:100%; flex-wrap:wrap; justify-content:flex-start;
  }

  .measurement-btn-edit,
  .measurement-btn-delete {
    flex: 1;              /* eşit genişlik */
    font-size: 15px;
    min-width:140px;
  }

  /* Tablo kaydırılabilir */
  .measurement-list { overflow-x: auto; }

  .measurement-table th,
  .measurement-table td {
    font-size: 13px;
    padding: 8px;
  }
}