/* ==========================================================================
   DARK MODE OVERRIDES
   Tailwind is loaded from the CDN with default config, so `dark:` variants
   follow the OS setting (prefers-color-scheme). This block force-overrides
   the light utility classes used across public/main.html and views/*.html.

   Palette (keep it to these values):
     page        #181818   html, body
     surface     #242424   bg-white, bg-slate-50
     surface-2   #2f2f2f   bg-gray-50, bg-gray-200, bg-neutral-100
     surface-3   #313131   bg-gray-100, bg-slate-100
     border      #2f2f2f   all border-* / divide-* / ring-*
     text        #f3f4f6   gray-100  (primary)
     text-muted  #a1a1aa   gray-400  (secondary)
     text-dim    #71717a   gray-500  (tertiary)
   ========================================================================== */
@media (prefers-color-scheme: dark) {
  html, body {
    background-color: #181818 !important;
    color: #f3f4f6 !important;
  }

  /* ---------- surfaces ---------- */
  .bg-white            { background-color: #242424 !important; }
  .bg-slate-50         { background-color: #242424 !important; }
  .bg-gray-50          { background-color: #2f2f2f !important; }
  .bg-gray-100         { background-color: #313131 !important; }
  .bg-slate-100        { background-color: #313131 !important; }
  .bg-gray-200         { background-color: #2f2f2f !important; }
  .bg-neutral-100      { background-color: #2f2f2f !important; }
  .bg-gray-800         { background-color: #242424 !important; }

  /* keep true-black surfaces readable against #181818 */
  .bg-black            { background-color: #242424 !important; }

  /* ---------- borders ---------- */
  .border-white,
  .border-gray-50,
  .border-gray-100,
  .border-gray-200,
  .border-slate-100,
  .border-slate-200   { border-color: #2f2f2f !important; }

  /* divide-* sets border-color on children; .divide-y-50 was a dead selector */
  .divide-gray-50 > :not([hidden]) ~ :not([hidden]),
  .divide-gray-100 > :not([hidden]) ~ :not([hidden]),
  .divide-slate-100 > :not([hidden]) ~ :not([hidden]) {
    border-color: #2f2f2f !important;
  }

  .ring-gray-100 { --tw-ring-color: #2f2f2f !important; }

  /* ---------- text ---------- */
  .text-black,
  .text-white,
  .text-slate-900,
  .text-gray-900       { color: #f3f4f6 !important; }

  .text-slate-700,
  .text-slate-600,
  .text-gray-600       { color: #d4d4d8 !important; }

  .text-slate-500,
  .text-gray-500       { color: #a1a1aa !important; }

  .text-slate-400,
  .text-gray-400       { color: #8b8b93 !important; }

  .text-slate-300,
  .text-gray-300,
  .text-gray-200,
  .text-gray-100       { color: #6b6b73 !important; }

  /* ---------- semantic accents (tinted, not saturated) ---------- */
  .bg-blue-50          { background-color: rgba(59, 130, 246, 0.14) !important; }
  .bg-amber-50         { background-color: rgba(245, 158, 11, 0.14) !important; }

  .text-blue-500,
  .text-blue-600       { color: #60a5fa !important; }
  .text-red-500        { color: #f87171 !important; }
  .text-green-500      { color: #4ade80 !important; }
  .text-amber-500      { color: #fbbf24 !important; }

  /* ---------- interaction states ---------- */
  /* active:bg-neutral-100 / hover:bg-gray-50 on the PIN numpad flashed white */
  .active\:bg-neutral-100:active { background-color: #313131 !important; }
  .hover\:bg-gray-50:hover       { background-color: #2f2f2f !important; }
  .hover\:bg-slate-50:hover      { background-color: #2f2f2f !important; }
  .hover\:bg-gray-100:hover      { background-color: #313131 !important; }

  /* ---------- form errors ---------- */
  .error-input {
    background-color: rgba(239, 68, 68, 0.12) !important;
    border-color: #ef4444 !important;
  }

  /* ---------- images / media ---------- */
  /* placeholders behind avatars & thumbnails */
  img.bg-slate-100,
  img.bg-gray-100 { background-color: #2f2f2f !important; }
}

/* ==========================================================================
   BASE
   ========================================================================== */
#content-container {
			transition: opacity 0.3s ease, transform 0.3s ease;
			opacity: 1;
			transform: translateY(0);
		}
		
		/* This class triggers the fade-out effect (loading out state) */
		.page-loading-out {
			opacity: 0 !important;
			transform: translateY(10px) !important;
		}

		/* Optional micro-spinner style */
		.ph-spin { animation: spin 1s linear infinite; display: inline-block; }
		@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
		button:disabled { opacity: 0.7; cursor: not-allowed; }
		.error-input { border: 2px solid #ef4444 !important; background-color: #fef2f2 !important; }
		
		/* Additional micro-interaction: prevent clicks during fade-out transition */
		.content-fade-transition {
			pointer-events: none;
		}
		
		/* ==================== TOAST + QUERY (app.js toggles .visible) ==================== */
		#customAlert,
		#queryAlert {
			position: fixed;
			left: 50%;
			bottom: 96px;
			transform: translate(-50%, 24px);
			z-index: 9999;
			opacity: 0;
			visibility: hidden;
			pointer-events: none;
			transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
			width: calc(100% - 32px);
			max-width: 28rem;
		}

		#customAlert.visible,
		#queryAlert.visible {
			opacity: 1;
			visibility: visible;
			pointer-events: auto;
			transform: translate(-50%, 0);
		}

		#customAlert > div,
		#queryAlert > div {
			width: 100%;
		}

		/* Header inline alert (#custom-alert-modal) — hidden by default,
		   shown by showAlert() via .visible or by removing .hidden */
		#custom-alert-modal:not(.hidden) {
			display: flex;
		}

		#nav-sidebar {
			transition: transform 0.3s ease, opacity 0.3s ease;
		}
		
		#nav-sidebar.sidebar-slide-in {
			animation: slideIn 0.3s ease forwards;
		}
		
		#nav-sidebar.sidebar-slide-out {
			animation: slideOut 0.3s ease forwards;
		}
		
		@keyframes slideIn {
			from {
				transform: translateX(-100%);
				opacity: 0;
			}
			to {
				transform: translateX(0);
				opacity: 1;
			}
		}
		
		@keyframes slideOut {
			from {
				transform: translateX(0);
				opacity: 1;
			}
			to {
				transform: translateX(-100%);
				opacity: 0;
			}
		}