/* ===== Basis ===== */
body{padding-top:20px}
textarea.form-control{min-height:40px}

/* Thumbnails bij bijlagen */
.note-attachments img{
  width:100px;height:100px;object-fit:cover;
  border:1px solid #ddd;border-radius:4px
}

/* Bestands-tile */
.note-attachments .file-tile{display:flex;align-items:center;gap:.5rem}

/* Algemeen (ook desktop): link-tiles netter */
.file-tile { display:flex; align-items:center; gap:.35rem; }

/* ===== iOS/Safari & algemene robuustheid ===== */
html { -webkit-text-size-adjust: 100%; }
body { word-break: break-word; overflow-wrap: anywhere; }

/* Voorkom dat afbeeldingen/tiles de breedte forceren */
img, .note-attachments img { max-width: 100%; height: auto; }

/* Lange bestandsnamen/links mogen afbreken */
a, .file-tile a {
  word-break: break-word;
  overflow-wrap: anywhere;
  text-decoration: none;
}

/* Toegankelijke hit-area op mobiel */
.btn { min-height: 44px; }

/* Soepele scroll in tabellen op iOS */
.table-responsive { -webkit-overflow-scrolling: touch; }

/* ===== Mobiel fine-tuning ===== */
@media (max-width: 576px) {

  /* Kaart-padding compacter op mobiel */
  .card .card-body { padding: 0.75rem; }

  /* Header van de notitiekaart: wrap + nette gap */
  .note-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem .75rem;
  }

  /* Badge + timestamp op 1 regel, daarna knoppen eronder */
  .note-meta {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex: 1 1 auto;
    min-width: 0; /* zodat text-truncate werkt */
  }
  .note-meta .text-truncate { min-width: 0; }

  /* Actieknoppen als 2 kolommen onder elkaar */
  .note-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .5rem;
    width: 100%;
  }
  .note-actions .btn { width: 100%; }

  /* Tekst van de notitie: kleinere marge */
  .note-content { margin-bottom: .25rem; }

  /* Initialen en labels subtieler */
  .note-foot { font-size: .9rem; color:#555; }

  /* Bijlage-tegel grid */
  .note-attachments {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 100px));
    gap: .5rem;
  }

  /* Thumbnails 100x100 */
  .note-attachments img {
    width: 100px; height: 100px; object-fit: cover;
    border: 1px solid #ddd; border-radius: 4px;
    display: block;
  }

  /* Niet-afbeeldingen: trunc naam + nette tile */
  .file-tile a {
    display: inline-block;
    max-width: 100px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: middle;
  }

  /* File input + upload-knop onder elkaar en full width */
  .attach-form {
    display: grid;
    grid-template-columns: 1fr;
    gap: .5rem;
    margin-top: .5rem;
  }
  .attach-form .form-control,
  .attach-form .btn { width: 100%; }

  /* Checklist-tabel: kolommen stapelen */
  .table-responsive table thead { display: none; }
  .table-responsive table tbody tr {
    display: grid;
    grid-template-columns: 60px 1fr;
    grid-template-areas:
      "check item"
      "check qty"
      "check note";
    gap: .25rem .75rem;
    padding: .5rem 0;
    border-top: 1px solid #eee;
  }
  .table-responsive tbody tr td:nth-child(1) { grid-area: check; }
  .table-responsive tbody tr td:nth-child(2) { grid-area: item; }
  .table-responsive tbody tr td:nth-child(3) { grid-area: qty; color:#666; }
  .table-responsive tbody tr td:nth-child(4) { grid-area: note; }

  /* Input zoom op iPhone voorkomen: font >= 16px */
  input, select, textarea { font-size: 16px; }

  /* ‘Nieuwe notitie’-knop compact */
  .card-header .btn { padding: .25rem .5rem; }
}

/* Actieknoppen notitiekaart */
.note-actions {
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
}


/* --- Fix: note-actions op mobiel onder elkaar --- */
@media (max-width: 576px) {
  .note-actions {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: .5rem !important;
    width: 100% !important;
    position: static !important;     /* neutraliseert absolute pos. */
    float: none !important;          /* neutraliseert floats */
    clear: both !important;
  }
  .note-actions .btn {
    width: 100% !important;          /* even brede knoppen */
  }
}
/* --- Hotfix iPhone: Edit/Remove onder elkaar, ook zonder container --- */
@media (max-width: 576px) {
  a[href*="edit_note.php"],
  a[href*="delete_note.php"] {
    display: block !important;
    width: 100% !important;
    position: static !important;
    float: none !important;
    clear: both !important;
    margin: .5rem 0 !important;
  }
}