/* ===== DROPDOWN MENU ===== */
.dropdown {
  position: relative;
  display: inline-block;
}

.dropbtn {
  background: var(--accent);
  color: var(--text-dark);
  padding: 8px 16px;
  border: none;
  border-radius: 20px;
  cursor: pointer;
  font-weight: 600;
  transition: all 0.3s ease;
}

.dropbtn:hover {
  background: #f1c94c;
  transform: scale(1.05);
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: var(--light);
  min-width: 140px;
  box-shadow: 0 8px 16px rgba(0,0,0,0.15);
  border-radius: 10px;
  z-index: 1;
}

.dropdown-content a {
  color: var(--primary);
  padding: 10px 16px;
  text-decoration: none;
  display: block;
  transition: background 0.3s ease;
}

.dropdown-content a:hover {
  background-color: var(--accent);
  color: var(--text-dark);
}

.dropdown:hover .dropdown-content {
  display: block;
}

/* Responsive helpers */
/* Make wide tables scrollable on small screens */
.table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table { width: 100%; border-collapse: collapse; }
/* Stack table rows on very small screens for readability */
@media (max-width: 640px) {
  table thead { display: none; }
  table, table tbody, table tr, table td { display: block; width: 100%; }
  table tr { margin-bottom: 12px; border-bottom: 1px solid #eee; }
  table td { text-align: right; padding-left: 50%; position: relative; }
  table td::before { content: attr(data-label); position: absolute; left: 12px; width: calc(50% - 24px); text-align: left; font-weight: 600; color: #333; }
}

/* General responsive layout tweaks */
@media (max-width: 900px) {
  main.dashboard { margin: 20px; padding: 16px; }
  .card, .form-section { padding: 14px; }
}

@media (max-width: 420px) {
  header, nav { padding: 12px; }
  .dropbtn { padding: 6px 10px; }
}

/* Improve table handling on narrow screens: keep the header aligned with scroll */
.table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 8px; margin-bottom: 12px; }
.table-responsive table { width: 100%; min-width: 100%; border-collapse: collapse; }
.table-responsive th, .table-responsive td { white-space: normal; word-break: break-word; }
.table-responsive thead th { position: sticky; top: 0; background: #007bff; color: #fff; z-index: 3; }

/* Allow specific columns to wrap to avoid horizontal scroll */
.table-responsive td.col-email,
.table-responsive td.col-desc,
.table-responsive td.col-title { max-width: 220px; word-break: break-word; white-space: normal; }

/* If we want stacked view on very small phones, hide the head and present rows as blocks */
@media (max-width: 520px) {
  .table-responsive table { min-width: 100%; }
  .table-responsive table thead { display: none; }
  .table-responsive table, .table-responsive tbody, .table-responsive tr, .table-responsive td { display: block; width: 100%; }
  .table-responsive tr { margin-bottom: 12px; border-bottom: 1px solid #eee; }
  .table-responsive td { text-align: right; padding-left: 50%; position: relative; }
  .table-responsive td::before { content: attr(data-label); position: absolute; left: 12px; width: calc(50% - 24px); text-align: left; font-weight: 600; color: #333; }
}

/* Media elements responsiveness */
.responsive-media, img.responsive-media, video.responsive-media, iframe.responsive-media {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Make embedded iframes and videos adapt inside containers */
iframe, video {
  max-width: 100%;
  height: auto;
}

/* Touch-friendly controls on small screens */
@media (max-width: 640px) {
  button, input[type="submit"], .dropbtn {
    padding: 12px 14px; font-size: 16px; border-radius: 10px;
  }
  input, textarea, select { padding: 12px; font-size: 16px; }
}

/* Improve hero/background handling on very small screens if present */
.hero { background-size: cover; background-position: center; }

/* Site logo (fixed top-left) */
.site-logo-link { position: fixed; top: 12px; left: 12px; z-index: 9999; display: block; }
.site-logo {
  width: 56px;
  height: 56px;
  object-fit: contain;
  border-radius: 8px;
  background: #fff;
  padding: 6px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.12);
  display: block;
}
@media (max-width: 480px) {
  .site-logo-link { top: 8px; left: 8px; }
  .site-logo { width: 48px; height: 48px; padding: 4px; }
}

/* Toolbar helper - used for filter/tool rows to wrap on small screens */
.toolbar { display: flex; gap: 8px; align-items: center; }

@media (max-width: 760px) {
  /* Allow the main dashboard to use most of the viewport on small devices */
  main.dashboard { margin: 12px; padding: 14px; width: auto; }

  /* Make toolbars wrap and make controls full-width for easier tapping */
  .toolbar { flex-wrap: wrap; }
  .toolbar > * { flex: 1 1 100%; min-width: 0; }

  /* Move site logo into flow on narrow screens so it doesn't overlap content */
  .site-logo-link { position: static; display: block; margin: 8px auto; }
  .site-logo { width: 44px; height: 44px; padding: 4px; }
}

@media (max-width: 420px) {
  .toolbar > * { font-size: 15px; padding: 10px; }
}