body {
  background: #f5f6f8;
  font-size: 14px;
}

.app-header {
  background: #244b3b;
  color: white;
}

.sidebar {
  background: white;
  min-height: calc(100vh - 65px);
  border-right: 1px solid #e9ecef;
}

.menu-item {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  text-align: left;
  border: 0;
  background: white;
  padding: 13px 15px;
  border-bottom: 1px solid #eee;
  color: #333;
  font-weight: 500;
}

.menu-item:hover,
.menu-item.active {
  background: #edf4f0;
  color: #244b3b;
}

.menu-item i {
  font-size: 17px;
  width: 22px;
  text-align: center;
  color: #718078;
}

.menu-item.active i {
  color: #244b3b;
}

.menu-item.home-item i {
  color: #244b3b;
}

.page {
  background: white;
  border-radius: 10px;
  padding: 18px;
  box-shadow: 0 2px 8px rgba(0,0,0,.03);
}

.excel-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 12px;
  background: white;
  border: 1px solid #e5e7eb;
  margin-bottom: -1px;
  cursor: pointer;
}

.excel-row:hover {
  background: #f5f8f6;
}

.table th {
  background: #f1f4f2;
  white-space: nowrap;
}

.table td {
  white-space: nowrap;
  vertical-align: middle;
}

.back-link {
  color: #244b3b;
  cursor: pointer;
  font-weight: 600;
}

.btn-farm {
  background: #244b3b;
  color: white;
}

.btn-farm:hover {
  background: #19392c;
  color: white;
}

.mobile-menu {
  max-height: 75vh;
  overflow: auto;
}

/* NOT LİSTESİ */
.note-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 8px;
  border-bottom: 1px solid #e9ecef;
  background: white;
}

.note-row:last-child {
  border-bottom: 0;
}

.note-text {
  flex: 1;
  overflow-wrap: anywhere;
}

.note-date {
  color: #8a929a;
  font-size: 12px;
}

.note-row.completed {
  opacity: .42;
  background: #f5f6f6;
}

.note-row.completed .note-text {
  text-decoration: line-through;
}

.note-delete {
  border: 0;
  background: transparent;
  color: #dc3545;
  padding: 5px 8px;
}

.note-check {
  width: 17px;
  height: 17px;
  cursor: pointer;
  accent-color: #244b3b;
}

@media (max-width: 767px) {
  .page {
    padding: 13px;
  }

  .table {
    font-size: 12px;
  }
}

/* Mobil kullanım: ilk tasarımın renkleri, menüsü ve kartları korunur. */
.alert { white-space: pre-line; }
.note-text { min-width: 0; }
.trash-row { display: flex; align-items: center; gap: 12px; padding: 14px 12px; border-bottom: 1px solid #e9ecef; }
.trash-row:last-child { border-bottom: 0; }
.trash-info { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.trash-meta { color: #8a929a; font-size: 12px; }
.restore-button { flex-shrink: 0; min-height: 44px; }
.section-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
@media (max-width: 767px) {
  .app-header .navbar-brand { font-size: 17px; }
  .menu-item { min-height: 48px; }
  .form-control, .form-select { font-size: 16px; min-height: 44px; }
  .modal-footer .btn, .section-actions .btn, .note-delete { min-height: 44px; }
  .note-check { width: 22px; height: 22px; }
  .modal-dialog { margin: 10px; }
  .modal-body { max-height: 65vh; max-height: 65dvh; overflow-y: auto; }
  .modal-footer .btn { width: 100%; }
  .record-table thead { display: none; }
  .record-table, .record-table tbody { display: block; width: 100%; border: 0; }
  .record-table tr { display: block; background: white; border: 1px solid #e5e7eb; border-radius: 10px; padding: 8px 12px; margin-bottom: 12px; }
  .record-table td { display: grid; grid-template-columns: minmax(90px, 38%) minmax(0, 1fr); gap: 10px; padding: 9px 0; border: 0; border-bottom: 1px solid #eee; white-space: normal; overflow-wrap: anywhere; }
  .record-table td::before { content: attr(data-label); font-weight: 600; color: #244b3b; }
  .record-table td:last-child { border-bottom: 0; }
  .record-table td.record-actions { display: flex; gap: 8px; flex-wrap: wrap; }
  .record-table td.record-actions::before { content: none; }
  .record-actions .btn { flex: 1; min-height: 44px; margin: 0 !important; }
  .record-table td.table-message { display: block; }
  .record-table td.table-message::before { content: none; }
  .trash-row { flex-wrap: wrap; }
}