/* Sam ERP Custom Utilities & Layout Safeguards (TASK-066)
 * Aligns custom styles with Google Gemini M3 Design Tokens.
 * Zero external font CDNs, zero off-palette colors, zero unapproved gradients.
 */

/* ==========================================================================
   1. Scrollbars & Drag-and-Drop States
   ========================================================================== */

::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: var(--sam-border-default);
  border-radius: 9999px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--sam-text-muted);
}

.drag-over {
  border-color: var(--sam-accent) !important;
  background-color: var(--sam-accent-tint-active) !important;
  transform: scale(1.01);
}

/* ==========================================================================
   2. Responsive Layout Utilities
   ========================================================================== */

.table-responsive,
.overflow-x-auto {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

@media (max-width: 768px) {
  table {
    max-width: 100%;
  }
}

@media (max-width: 1023px) {
  button,
  a.inline-flex,
  input[type="button"],
  input[type="submit"],
  select {
    min-height: 40px;
  }
}

@media (max-width: 640px) {
  [id$="-modal"] > div,
  #createReminderModal > div,
  #editReminderModal > div {
    max-width: calc(100vw - 1.5rem) !important;
    padding: 1.25rem !important;
  }
}

#mobile-sidebar-drawer {
  will-change: transform;
}

/* The hamburger is for phones/iPad portrait only. .btn-icon sets display with
   !important, which beats Tailwind's lg:hidden, so hide it explicitly here. */
@media (min-width: 1024px) {
  #mobile-nav-toggle {
    display: none !important;
  }
}