/* Prototype-only fixes.
   Admina's compiled style.css is purged to THEIR demo pages, so a handful of
   utilities we use are absent here. In the real build (Approach A) these are
   compiled automatically by Tailwind from our blade content — this file exists
   ONLY so the static prototypes render faithfully. Do NOT port this file into
   the app; it must become unnecessary after `npm run build`. */

.sticky { position: sticky; }
.top-0 { top: 0px; }
.tracking-wide { letter-spacing: 0.025em; }
.normal-case { text-transform: none; }
.font-mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; }
.h-16 { height: 4rem; }
.h-20 { height: 5rem; }
.w-20 { width: 5rem; }
.inset-2 { inset: 0.5rem; }
.max-w-lg { max-width: 32rem; }
.mx-1 { margin-left: 0.25rem; margin-right: 0.25rem; }
.my-10 { margin-top: 2.5rem; margin-bottom: 2.5rem; }
.shadow-xl { box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1); }
.backdrop-blur-sm { backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.bg-black\/50 { background-color: rgb(0 0 0 / 0.5); }
.scroll-sm { scroll-behavior: smooth; }
.\!py-3 { padding-top: 0.75rem !important; padding-bottom: 0.75rem !important; }
.\!py-4 { padding-top: 1rem !important; padding-bottom: 1rem !important; }

/* --- round 2: utilities used by prototypes 06/07/08 --- */
.gap-0\.5 { gap: 0.125rem; }
.p-1\.5 { padding: 0.375rem; }
.space-y-0\.5 > * + * { margin-top: 0.125rem; }
.space-y-1 > * + * { margin-top: 0.25rem; }
.space-y-2 > * + * { margin-top: 0.5rem; }
.space-y-2\.5 > * + * { margin-top: 0.625rem; }
.space-y-3 > * + * { margin-top: 0.75rem; }
.top-0\.5 { top: 0.125rem; }
.bottom-0\.5 { bottom: 0.125rem; }
.left-0\.5 { left: 0.125rem; }
.right-0\.5 { right: 0.125rem; }
.top-1\.5 { top: 0.375rem; }
.left-1\.5 { left: 0.375rem; }
.inset-3 { inset: 0.75rem; }
.h-28 { height: 7rem; }
.w-28 { width: 7rem; }
.w-48 { width: 12rem; }
.w-52 { width: 13rem; }
.w-60 { width: 15rem; }
.max-w-xs { max-width: 20rem; }
.max-w-\[16rem\] { max-width: 16rem; }
.w-\[90\%\] { width: 90%; }
.w-1\/3 { width: 33.333333%; }
.w-2\/3 { width: 66.666667%; }
.w-3\/4 { width: 75%; }
.w-5\/6 { width: 83.333333%; }
.list-disc { list-style-type: disc; }
.text-neutral-300 { color: #D1D5DB; }
.text-warning-500 { color: #EAB308; }
.bg-black\/90 { background-color: rgb(0 0 0 / 0.9); }
.hover\:bg-primary-200:hover { background-color: #95C7FF; }
.hover\:bg-success-200:hover { background-color: #BBF7D0; }
.hover\:bg-warning-200:hover { background-color: #FEF08A; }
.hover\:text-neutral-700:hover { color: #374151; }
@media (min-width: 1024px) {
  .lg\:inline-flex { display: inline-flex; }
}
@media (min-width: 1280px) {
  .xl\:grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .xl\:grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

/* from _core-js.blade.php: center ApexCharts gauges */
.apex-gauge .apexcharts-canvas { margin: 0 auto; }

/* --- round 3: utilities introduced with the real-chart pass (prototypes 05/06) --- */
.text-neutral-200 { color: #E5E7EB; }
.text-\[11px\] { font-size: 11px; }

/* --- round 4: minimal datatables + refined filters (user feedback) ----------------
   Admina's compiled .table is a boxed, gray-headed, CENTER-aligned layout. The
   rebuild standard is a borderless minimal table: white sticky header with
   11px uppercase labels, hairline row dividers, left-aligned 14px cells and a
   subtle row hover. Loaded after style.css, so equal-specificity rules win. */
.table {
  border: 0;
  border-radius: 0;
}
.table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: #fff;
  border-bottom: 1px solid #ebebef;
  padding: 0.75rem 1.5rem;
  text-align: left;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #6b7280;
  white-space: nowrap;
}
.table tbody td {
  border-bottom: 1px solid #f3f4f6;
  padding: 0.875rem 1.5rem;
  text-align: left;
  font-size: 0.875rem;
  color: #404040;
  vertical-align: middle;
}
.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr { transition: background-color 0.15s ease; }
.table tbody tr:hover { background-color: #f5f6fa; }
/* alignment utilities inside cells must outrank the left-align default */
.table th.text-center, .table td.text-center { text-align: center; }
.table th.text-end, .table td.text-end { text-align: right; }
/* .navbar-search input declares width:24.25rem with (0,1,1) specificity, which
   outranks plain w-* utilities — restore the per-context widths prototypes ask for */
.navbar-search input.w-44 { width: 11rem; }
.navbar-search input.w-52 { width: 13rem; }
.navbar-search input.w-60 { width: 15rem; }
.navbar-search input.w-64 { width: 16rem; }

/* ---- utilities prototypes use that Admina's compiled CSS never generated ---- */
.pt-3 { padding-top: 0.75rem; }
.h-px { height: 1px; }
.max-w-sm { max-width: 24rem; }
.max-w-3xl { max-width: 48rem; }
.max-h-48 { max-height: 12rem; }
.overflow-auto { overflow: auto; }
.opacity-50 { opacity: 0.5; }
.top-full { top: 100%; }
.break-all { word-break: break-all; }
.transition-shadow {
  transition-property: box-shadow;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 0.15s;
}
.hover\:shadow-md:hover {
  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
}
.pe-11 { padding-inline-end: 2.75rem; }
.ps-3\.5 { padding-inline-start: 0.875rem; }
.end-2 { inset-inline-end: 0.5rem; }
@media (min-width: 640px) {
  .sm\:inline { display: inline; }
}
@media (min-width: 768px) {
  .md\:flex { display: flex; }
  .md\:flex-row { flex-direction: row; }
  .md\:items-center { align-items: center; }
  .md\:col-span-2 { grid-column: span 2 / span 2; }
}
@media (min-width: 1024px) {
  .lg\:col-span-2 { grid-column: span 2 / span 2; }
}

/* ===== Round 3: document-overflow fix =====================================
   .dashboard-main is a display:flex column container, so .dashboard-main-body
   (and .navbar-header) are flex items with min-width:auto. A .table with
   min-width:max-content inside (e.g. audit-logs) propagated its min-content up
   the chain, stretching the whole document (2308px on a 1376px viewport) and
   pushing card footers such as the pagination bar off-screen. Flooring the
   flex items at 0 keeps wide tables scrolling inside their .table-responsive
   instead of stretching the page. */
.dashboard-main > * {
  min-width: 0;
  max-width: 100%;
}