/*
 * UnderTorque App Dark Alignment
 * Phase 8I — global visual style pass
 *
 * Purpose:
 * - Give old light scaffold pages and newer dark pages one shared visual language.
 * - Keep the technical/blueprint UnderTorque identity.
 * - Improve form, flash message, table, badge and helper-card contrast.
 */

:root {
  --ut-bg: #070a12;
  --ut-panel: rgba(15, 23, 42, 0.78);
  --ut-panel-strong: rgba(15, 23, 42, 0.92);
  --ut-panel-soft: rgba(30, 41, 59, 0.58);
  --ut-border: rgba(148, 163, 184, 0.22);
  --ut-border-strong: rgba(148, 163, 184, 0.34);
  --ut-text: rgba(248, 250, 252, 0.95);
  --ut-muted: rgba(203, 213, 225, 0.78);
  --ut-faint: rgba(148, 163, 184, 0.68);
  --ut-cyan: #2fe6d1;
  --ut-blue: #4da3ff;
  --ut-orange: #f59e0b;
  --ut-red: #fb7185;
  --ut-green: #34d399;
}

/* Main app surface */
.ut-surface {
  color: var(--ut-text);
}

.ut-surface > *:first-child {
  margin-top: 0;
}

/* Base typography inside the app shell */
.ut-surface h1,
.ut-surface h2,
.ut-surface h3,
.ut-surface h4,
.ut-surface h5,
.ut-surface h6,
.ut-surface legend,
.ut-surface label,
.ut-surface th,
.ut-surface strong {
  color: var(--ut-text) !important;
}

.ut-surface p,
.ut-surface li,
.ut-surface td,
.ut-surface dd,
.ut-surface span,
.ut-surface small {
  color: inherit;
}

.ut-surface p,
.ut-surface td,
.ut-surface .help,
.ut-surface .hint,
.ut-surface .muted {
  color: var(--ut-muted);
}

.ut-surface a {
  color: #67e8f9;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.ut-surface a:hover {
  color: #a5f3fc;
}

/* Old/light Tailwind panels converted to technical dark panels */
.ut-surface .bg-white,
.ut-surface .bg-white\/5,
.ut-surface .bg-white\/10,
.ut-surface .bg-white\/20,
.ut-surface .bg-white\/30,
.ut-surface .bg-white\/40,
.ut-surface .bg-white\/50,
.ut-surface .bg-white\/60,
.ut-surface .bg-white\/70,
.ut-surface .bg-white\/80,
.ut-surface .bg-white\/90,
.ut-surface .bg-white\/95,
.ut-surface .bg-slate-50,
.ut-surface .bg-slate-50\/80,
.ut-surface .bg-slate-100,
.ut-surface .bg-gray-50,
.ut-surface .bg-gray-100 {
  background: var(--ut-panel) !important;
  color: var(--ut-text) !important;
  border-color: var(--ut-border) !important;
}

.ut-surface .bg-slate-950,
.ut-surface .bg-slate-950\/30,
.ut-surface .bg-slate-950\/50,
.ut-surface .bg-slate-950\/70,
.ut-surface .bg-slate-950\/90,
.ut-surface .bg-slate-900,
.ut-surface .bg-slate-900\/50,
.ut-surface .bg-slate-800,
.ut-surface .bg-slate-800\/50,
.ut-surface .bg-slate-800\/70 {
  background: var(--ut-panel-strong) !important;
  color: var(--ut-text) !important;
}

/* Keep accent/notice blocks dark but coloured */
.ut-surface .bg-orange-500\/10,
.ut-surface .bg-amber-500\/10,
.ut-surface .bg-yellow-500\/10 {
  background: rgba(245, 158, 11, 0.13) !important;
  border-color: rgba(245, 158, 11, 0.34) !important;
}

.ut-surface .bg-blue-50,
.ut-surface .bg-blue-100,
.ut-surface .bg-blue-500\/10,
.ut-surface .bg-cyan-500\/10 {
  background: rgba(77, 163, 255, 0.13) !important;
  border-color: rgba(77, 163, 255, 0.32) !important;
}

.ut-surface .bg-green-50,
.ut-surface .bg-green-100,
.ut-surface .bg-emerald-500\/10 {
  background: rgba(52, 211, 153, 0.13) !important;
  border-color: rgba(52, 211, 153, 0.32) !important;
}

.ut-surface .bg-red-50,
.ut-surface .bg-red-100,
.ut-surface .bg-red-500\/10 {
  background: rgba(251, 113, 133, 0.14) !important;
  border-color: rgba(251, 113, 133, 0.34) !important;
}

.ut-surface .bg-purple-50,
.ut-surface .bg-purple-100,
.ut-surface .bg-purple-500\/10 {
  background: rgba(168, 85, 247, 0.14) !important;
  border-color: rgba(168, 85, 247, 0.32) !important;
}

/* Text utility clean-up for old light pages */
.ut-surface .text-slate-900,
.ut-surface .text-slate-800,
.ut-surface .text-gray-900,
.ut-surface .text-gray-800,
.ut-surface .text-black {
  color: var(--ut-text) !important;
}

.ut-surface .text-slate-700,
.ut-surface .text-slate-600,
.ut-surface .text-gray-700,
.ut-surface .text-gray-600,
.ut-surface .text-gray-500,
.ut-surface .text-slate-500,
.ut-surface .text-slate-400,
.ut-surface .text-slate-300,
.ut-surface .text-slate-200\/70,
.ut-surface .text-white\/80,
.ut-surface .text-white\/70,
.ut-surface .text-white\/60,
.ut-surface .text-white\/50 {
  color: var(--ut-muted) !important;
}

.ut-surface .text-orange-700,
.ut-surface .text-orange-800,
.ut-surface .text-amber-900,
.ut-surface .text-amber-800,
.ut-surface .text-yellow-800 {
  color: #fcd34d !important;
}

.ut-surface .text-blue-700,
.ut-surface .text-blue-800,
.ut-surface .text-cyan-700,
.ut-surface .text-cyan-800 {
  color: #7dd3fc !important;
}

.ut-surface .text-green-700,
.ut-surface .text-green-800,
.ut-surface .text-emerald-700,
.ut-surface .text-emerald-800 {
  color: #86efac !important;
}

.ut-surface .text-red-700,
.ut-surface .text-red-800,
.ut-surface .text-rose-700,
.ut-surface .text-rose-800 {
  color: #fda4af !important;
}

.ut-surface .text-purple-700,
.ut-surface .text-purple-800 {
  color: #d8b4fe !important;
}

/* Borders and dividers */
.ut-surface .border,
.ut-surface .border-slate-200,
.ut-surface .border-slate-200\/70,
.ut-surface .border-slate-300,
.ut-surface .border-gray-200,
.ut-surface .border-gray-300,
.ut-surface .divide-slate-200 > :not([hidden]) ~ :not([hidden]),
.ut-surface .divide-gray-200 > :not([hidden]) ~ :not([hidden]) {
  border-color: var(--ut-border) !important;
}

.ut-surface hr {
  border-color: var(--ut-border);
}

/* Forms */
.ut-surface input[type="text"],
.ut-surface input[type="email"],
.ut-surface input[type="password"],
.ut-surface input[type="number"],
.ut-surface input[type="search"],
.ut-surface input[type="url"],
.ut-surface input[type="date"],
.ut-surface input[type="datetime-local"],
.ut-surface input[type="file"],
.ut-surface select,
.ut-surface textarea,
.ut-surface .ut-input,
.ut-surface .ut-select,
.ut-surface .ut-textarea {
  width: 100%;
  background: rgba(2, 6, 23, 0.72) !important;
  color: var(--ut-text) !important;
  border: 1px solid rgba(148, 163, 184, 0.30) !important;
  border-radius: 0.85rem;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
  outline: none;
}

.ut-surface input[type="file"] {
  padding: 0.65rem;
}

.ut-surface input::placeholder,
.ut-surface textarea::placeholder {
  color: rgba(148, 163, 184, 0.78) !important;
}

.ut-surface input:focus,
.ut-surface select:focus,
.ut-surface textarea:focus,
.ut-surface .ut-input:focus,
.ut-surface .ut-select:focus,
.ut-surface .ut-textarea:focus {
  border-color: rgba(47, 230, 209, 0.78) !important;
  box-shadow: 0 0 0 3px rgba(47, 230, 209, 0.16) !important;
}

.ut-surface option {
  background: #020617;
  color: var(--ut-text);
}

.ut-surface input[type="checkbox"],
.ut-surface input[type="radio"] {
  accent-color: var(--ut-cyan);
}

/* Tables and old scaffold lists */
.ut-surface table {
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
}

.ut-surface thead,
.ut-surface thead tr,
.ut-surface .table-header {
  background: rgba(15, 23, 42, 0.88) !important;
}

.ut-surface tbody tr {
  background: rgba(15, 23, 42, 0.40);
}

.ut-surface tbody tr:nth-child(even) {
  background: rgba(30, 41, 59, 0.34);
}

.ut-surface tbody tr:hover {
  background: rgba(77, 163, 255, 0.10) !important;
}

.ut-surface th,
.ut-surface td {
  border-color: var(--ut-border) !important;
}

/* Buttons and actions */
.ut-surface button,
.ut-surface input[type="submit"],
.ut-surface .button,
.ut-surface a.button,
.ut-surface .btn,
.ut-surface .actions a {
  border-radius: 0.85rem;
}

.ut-surface input[type="submit"],
.ut-surface button[type="submit"],
.ut-surface .button.primary,
.ut-surface .btn-primary {
  background: linear-gradient(135deg, var(--ut-blue), var(--ut-cyan)) !important;
  color: #03131f !important;
  border: 0 !important;
  font-weight: 800;
  box-shadow: 0 12px 30px rgba(47, 230, 209, 0.18);
}

.ut-surface input[type="submit"]:hover,
.ut-surface button[type="submit"]:hover,
.ut-surface .button.primary:hover,
.ut-surface .btn-primary:hover {
  filter: brightness(1.06);
}

.ut-surface .bg-gradient-to-r,
.ut-surface .bg-gradient-to-br {
  color: #03131f !important;
}

/* Keep solid Tailwind accent buttons readable */
.ut-surface .bg-orange-500,
.ut-surface .bg-amber-500,
.ut-surface .bg-yellow-400,
.ut-surface .bg-yellow-500,
.ut-surface .bg-cyan-400,
.ut-surface .bg-cyan-500,
.ut-surface .bg-blue-400,
.ut-surface .bg-blue-500,
.ut-surface .bg-emerald-400,
.ut-surface .bg-emerald-500,
.ut-surface .bg-green-400,
.ut-surface .bg-green-500 {
  color: #03131f !important;
}

.ut-surface .bg-red-500,
.ut-surface .bg-rose-500,
.ut-surface .bg-purple-500,
.ut-surface .bg-indigo-500 {
  color: white !important;
}

/* Pills / badges */
.ut-surface .rounded-full.border,
.ut-surface [class*="rounded-full"][class*="border"] {
  background-color: rgba(15, 23, 42, 0.72);
  border-color: var(--ut-border-strong) !important;
}

/* Flash messages: covers Cake default .message and custom Tailwind flashes */
.message,
.ut-surface .message {
  margin-bottom: 1rem;
  padding: 0.9rem 1rem;
  border-radius: 1rem;
  border: 1px solid rgba(77, 163, 255, 0.35);
  background: rgba(77, 163, 255, 0.14);
  color: #bfdbfe !important;
  box-shadow: 0 14px 34px rgba(0,0,0,0.22);
  cursor: pointer;
}

.message.success,
.ut-surface .message.success,
.ut-surface .bg-green-50.text-green-800 {
  border-color: rgba(52, 211, 153, 0.36) !important;
  background: rgba(52, 211, 153, 0.14) !important;
  color: #bbf7d0 !important;
}

.message.error,
.ut-surface .message.error,
.ut-surface .bg-red-50.text-red-800 {
  border-color: rgba(251, 113, 133, 0.38) !important;
  background: rgba(251, 113, 133, 0.14) !important;
  color: #fecdd3 !important;
}

.message.warning,
.ut-surface .message.warning,
.ut-surface .bg-yellow-50,
.ut-surface .bg-amber-50 {
  border-color: rgba(245, 158, 11, 0.40) !important;
  background: rgba(245, 158, 11, 0.15) !important;
  color: #fde68a !important;
}

/* Legacy Cake scaffold bits */
.ut-surface .side-nav,
.ut-surface .actions,
.ut-surface .content,
.ut-surface .index,
.ut-surface .view,
.ut-surface .form {
  color: var(--ut-text);
}

.ut-surface .side-nav a,
.ut-surface .actions a {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin: 0.15rem 0.15rem 0.15rem 0;
  padding: 0.55rem 0.85rem;
  border-radius: 0.8rem;
  background: rgba(255,255,255,0.07);
  border: 1px solid var(--ut-border);
  color: #cffafe;
}

.ut-surface .side-nav a:hover,
.ut-surface .actions a:hover {
  background: rgba(47, 230, 209, 0.12);
  color: #ecfeff;
}

/* Error/validation hints */
.ut-surface .error-message,
.ut-surface .is-invalid,
.ut-surface .invalid-feedback {
  color: #fda4af !important;
}

.ut-surface .required label::after {
  color: #f59e0b;
}

/* Pagination */
.ut-surface .pagination a,
.ut-surface .pagination span {
  border: 1px solid var(--ut-border);
  background: rgba(15, 23, 42, 0.70);
  color: var(--ut-muted);
  border-radius: 0.65rem;
  padding: 0.35rem 0.65rem;
}

.ut-surface .pagination .current,
.ut-surface .pagination a:hover {
  background: rgba(47, 230, 209, 0.15);
  color: #cffafe;
  border-color: rgba(47, 230, 209, 0.36);
}

/* Hover utility fixes for converted cards */
.ut-surface .hover\:bg-slate-50:hover,
.ut-surface .hover\:bg-slate-100:hover,
.ut-surface .hover\:bg-white:hover,
.ut-surface .hover\:bg-white\/10:hover,
.ut-surface .hover\:bg-white\/15:hover {
  background: rgba(77, 163, 255, 0.12) !important;
}

/* Code/pre blocks */
.ut-surface code,
.ut-surface pre {
  background: rgba(2, 6, 23, 0.78);
  color: #bae6fd;
  border: 1px solid var(--ut-border);
  border-radius: 0.65rem;
}

.ut-surface code {
  padding: 0.1rem 0.35rem;
}

.ut-surface pre {
  padding: 1rem;
  overflow: auto;
}

/* Make embedded dark cards slightly cleaner rather than flat black. */
.ut-surface .ut-card {
  background: rgba(15, 23, 42, 0.70) !important;
  border-color: var(--ut-border) !important;
  color: var(--ut-text) !important;
}

/* Subtle scrollbar polish */
.ut-surface::-webkit-scrollbar,
.ut-surface *::-webkit-scrollbar {
  height: 10px;
  width: 10px;
}

.ut-surface::-webkit-scrollbar-thumb,
.ut-surface *::-webkit-scrollbar-thumb {
  background: rgba(148, 163, 184, 0.35);
  border-radius: 999px;
}

.ut-surface::-webkit-scrollbar-thumb:hover,
.ut-surface *::-webkit-scrollbar-thumb:hover {
  background: rgba(148, 163, 184, 0.55);
}

@media (max-width: 767px) {
  .ut-surface {
    border-radius: 1.1rem !important;
  }

  .ut-surface table {
    min-width: 720px;
  }
}

/*
 * Phase 8I-b — Premium technical visual refinement
 * This pass moves the app away from a flat dark block and towards the
 * UnderTorque technical glass style: blueprint background, elevated graphite
 * cards, cyan action glow and orange warning accents.
 */
:root {
  --ut-bg: #07111f;
  --ut-panel: rgba(46, 53, 68, 0.88);
  --ut-panel-strong: rgba(38, 45, 60, 0.94);
  --ut-panel-soft: rgba(62, 71, 90, 0.68);
  --ut-panel-deep: rgba(9, 16, 31, 0.88);
  --ut-border: rgba(203, 213, 225, 0.18);
  --ut-border-strong: rgba(203, 213, 225, 0.30);
  --ut-text: rgba(248, 250, 252, 0.98);
  --ut-muted: rgba(213, 220, 232, 0.82);
  --ut-faint: rgba(181, 191, 207, 0.66);
  --ut-cyan: #2fe6d1;
  --ut-blue: #4da3ff;
  --ut-orange: #f59e0b;
  --ut-orange-soft: #fbbf24;
}

/* Let the blueprint identity breathe. The layout still gives spacing, but the
   content now feels like panels placed on the technical background rather than
   one large flat dark rectangle. */
.ut-surface {
  background:
    radial-gradient(900px 420px at 8% 0%, rgba(77, 163, 255, 0.10), transparent 64%),
    radial-gradient(900px 420px at 92% 0%, rgba(47, 230, 209, 0.08), transparent 64%),
    rgba(255,255,255,0.035) !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  box-shadow: 0 28px 90px rgba(0,0,0,0.30) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* Premium graphite cards. This catches older white scaffold cards and newer
   white Tailwind panels and makes them feel like the edit-sharing-rule style,
   but with more depth and less flatness. */
.ut-surface .bg-white,
.ut-surface .bg-white\/5,
.ut-surface .bg-white\/10,
.ut-surface .bg-white\/20,
.ut-surface .bg-white\/30,
.ut-surface .bg-white\/40,
.ut-surface .bg-white\/50,
.ut-surface .bg-white\/60,
.ut-surface .bg-white\/70,
.ut-surface .bg-white\/80,
.ut-surface .bg-white\/90,
.ut-surface .bg-white\/95,
.ut-surface .bg-slate-50,
.ut-surface .bg-slate-50\/80,
.ut-surface .bg-slate-100,
.ut-surface .bg-gray-50,
.ut-surface .bg-gray-100,
.ut-surface .ut-card {
  background:
    linear-gradient(180deg, rgba(74, 84, 105, 0.86), rgba(43, 50, 66, 0.92)),
    radial-gradient(700px 300px at 12% 0%, rgba(77, 163, 255, 0.12), transparent 70%),
    radial-gradient(700px 300px at 90% 0%, rgba(47, 230, 209, 0.08), transparent 70%) !important;
  color: var(--ut-text) !important;
  border-color: rgba(226, 232, 240, 0.14) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.06),
    0 18px 50px rgba(0,0,0,0.24) !important;
}

/* Heavier inner cards/field groups should be visible but not dead-flat. */
.ut-surface .bg-slate-950,
.ut-surface .bg-slate-950\/30,
.ut-surface .bg-slate-950\/50,
.ut-surface .bg-slate-950\/70,
.ut-surface .bg-slate-950\/90,
.ut-surface .bg-slate-900,
.ut-surface .bg-slate-900\/50,
.ut-surface .bg-slate-800,
.ut-surface .bg-slate-800\/50,
.ut-surface .bg-slate-800\/70 {
  background:
    linear-gradient(180deg, rgba(31, 39, 54, 0.94), rgba(15, 23, 42, 0.96)) !important;
  border-color: rgba(226, 232, 240, 0.13) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04) !important;
}

/* Large first panel on many pages: make it feel designed, not scaffolded. */
.ut-surface > .mx-auto,
.ut-surface > .max-w-6xl,
.ut-surface > .max-w-5xl,
.ut-surface > .max-w-4xl,
.ut-surface > .space-y-6,
.ut-surface > .space-y-8 {
  position: relative;
}

/* Section kicker labels: orange technical identity. */
.ut-surface [class*="tracking-"][class*="uppercase"],
.ut-surface .uppercase.tracking-wider,
.ut-surface .uppercase.tracking-\[0\.2em\] {
  color: var(--ut-orange-soft) !important;
  letter-spacing: 0.22em !important;
}

/* Titles need to pop strongly against graphite cards. */
.ut-surface h1,
.ut-surface h2,
.ut-surface h3 {
  color: #ffffff !important;
  text-shadow: 0 1px 0 rgba(0,0,0,0.25);
}

/* Body/helper text: clearer, less muddy than the earlier flat pass. */
.ut-surface p,
.ut-surface td,
.ut-surface li,
.ut-surface small,
.ut-surface .help,
.ut-surface .hint,
.ut-surface .muted {
  color: var(--ut-muted) !important;
}

/* Labels should look crisp on dark forms. */
.ut-surface label,
.ut-surface legend,
.ut-surface th {
  color: rgba(248,250,252,0.94) !important;
  font-weight: 700;
}

/* Form fields: deeper navy with cyan focus, matching the technical tool feel. */
.ut-surface input[type="text"],
.ut-surface input[type="email"],
.ut-surface input[type="password"],
.ut-surface input[type="number"],
.ut-surface input[type="search"],
.ut-surface input[type="url"],
.ut-surface input[type="date"],
.ut-surface input[type="datetime-local"],
.ut-surface input[type="file"],
.ut-surface select,
.ut-surface textarea,
.ut-surface .ut-input,
.ut-surface .ut-select,
.ut-surface .ut-textarea {
  background:
    linear-gradient(180deg, rgba(8, 16, 32, 0.96), rgba(4, 10, 22, 0.98)) !important;
  color: #f8fafc !important;
  border: 1px solid rgba(148, 163, 184, 0.24) !important;
  border-radius: 0.95rem !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.05),
    0 8px 20px rgba(0,0,0,0.14) !important;
}

.ut-surface input:focus,
.ut-surface select:focus,
.ut-surface textarea:focus,
.ut-surface .ut-input:focus,
.ut-surface .ut-select:focus,
.ut-surface .ut-textarea:focus {
  border-color: rgba(47, 230, 209, 0.90) !important;
  box-shadow:
    0 0 0 3px rgba(47, 230, 209, 0.18),
    0 0 28px rgba(47, 230, 209, 0.12),
    inset 0 1px 0 rgba(255,255,255,0.06) !important;
}

/* Primary action buttons: more deliberate UnderTorque gradient. */
.ut-surface input[type="submit"],
.ut-surface button[type="submit"],
.ut-surface .button.primary,
.ut-surface .btn-primary,
.ut-surface .bg-gradient-to-r,
.ut-surface .bg-gradient-to-br {
  background: linear-gradient(135deg, #4da3ff 0%, #2fe6d1 100%) !important;
  color: #03131f !important;
  font-weight: 850 !important;
  box-shadow:
    0 14px 36px rgba(47, 230, 209, 0.20),
    inset 0 1px 0 rgba(255,255,255,0.32) !important;
}

.ut-surface input[type="submit"]:hover,
.ut-surface button[type="submit"]:hover,
.ut-surface .button.primary:hover,
.ut-surface .btn-primary:hover {
  transform: translateY(-1px);
  filter: brightness(1.06) saturate(1.05);
}

/* Warning/info panels: use orange as an accent but keep text readable. */
.ut-surface .bg-orange-500\/10,
.ut-surface .bg-amber-500\/10,
.ut-surface .bg-yellow-500\/10,
.ut-surface .bg-yellow-50,
.ut-surface .bg-amber-50 {
  background:
    linear-gradient(180deg, rgba(245, 158, 11, 0.15), rgba(120, 53, 15, 0.12)) !important;
  border-color: rgba(245, 158, 11, 0.42) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05) !important;
}

.ut-surface .text-orange-700,
.ut-surface .text-orange-800,
.ut-surface .text-amber-900,
.ut-surface .text-amber-800,
.ut-surface .text-yellow-800,
.ut-surface .text-yellow-700 {
  color: #fcd34d !important;
}

/* Badges: clean technical chips. */
.ut-surface .rounded-full.border,
.ut-surface [class*="rounded-full"][class*="border"] {
  background: rgba(8, 16, 32, 0.72) !important;
  border-color: rgba(148, 163, 184, 0.30) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
}

/* Tables: less spreadsheet, more workshop dashboard. */
.ut-surface thead,
.ut-surface thead tr,
.ut-surface .table-header {
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.96), rgba(10, 17, 31, 0.98)) !important;
}

.ut-surface tbody tr {
  background: rgba(41, 49, 65, 0.58) !important;
}

.ut-surface tbody tr:nth-child(even) {
  background: rgba(33, 40, 55, 0.64) !important;
}

.ut-surface tbody tr:hover {
  background: rgba(47, 230, 209, 0.10) !important;
}

/* Flash/message overlay contrast: no muddy text on coloured glass. */
.message,
.ut-surface .message {
  color: #e0f2fe !important;
  background: linear-gradient(180deg, rgba(37, 99, 235, 0.22), rgba(14, 116, 144, 0.18)) !important;
  border-color: rgba(125, 211, 252, 0.46) !important;
  box-shadow: 0 18px 45px rgba(0,0,0,0.28) !important;
}

.message.success,
.ut-surface .message.success,
.ut-surface .bg-green-50.text-green-800 {
  color: #dcfce7 !important;
  background: linear-gradient(180deg, rgba(22, 163, 74, 0.20), rgba(6, 78, 59, 0.18)) !important;
  border-color: rgba(74, 222, 128, 0.44) !important;
}

.message.error,
.ut-surface .message.error,
.ut-surface .bg-red-50.text-red-800 {
  color: #ffe4e6 !important;
  background: linear-gradient(180deg, rgba(225, 29, 72, 0.20), rgba(127, 29, 29, 0.18)) !important;
  border-color: rgba(251, 113, 133, 0.50) !important;
}

.message.warning,
.ut-surface .message.warning {
  color: #fef3c7 !important;
  background: linear-gradient(180deg, rgba(245, 158, 11, 0.22), rgba(120, 53, 15, 0.18)) !important;
  border-color: rgba(251, 191, 36, 0.48) !important;
}

/* Links should feel alive but not noisy. */
.ut-surface a {
  color: #9eefff;
}
.ut-surface a:hover {
  color: #ffffff;
  text-shadow: 0 0 18px rgba(47, 230, 209, 0.25);
}

/* Mobile: reduce glow/blur so pages stay quick and readable. */
@media (max-width: 767px) {
  .ut-surface {
    background: rgba(8, 13, 25, 0.78) !important;
    backdrop-filter: blur(7px);
    -webkit-backdrop-filter: blur(7px);
  }

  .ut-surface .bg-white,
  .ut-surface .bg-white\/5,
  .ut-surface .bg-white\/10,
  .ut-surface .bg-slate-50,
  .ut-surface .bg-slate-100,
  .ut-surface .bg-gray-50,
  .ut-surface .bg-gray-100 {
    box-shadow: 0 12px 30px rgba(0,0,0,0.20) !important;
  }
}


/*
 * Phase 8I-c — page polish for old light panels
 * Fixes remaining light/cyan helper blocks and result cards that looked washed out
 * after the global dark pass. These classes are intentionally reusable so other
 * pages can use the same garage-hub style without rewriting every template.
 */
.ut-surface [class*="bg-white/"],
.ut-surface [class*="bg-cyan-50"],
.ut-surface [class*="bg-blue-50"],
.ut-surface [class*="bg-emerald-50"],
.ut-surface [class*="bg-red-50"],
.ut-surface [class*="bg-rose-50"],
.ut-surface [class*="bg-yellow-50"],
.ut-surface [class*="bg-amber-50"],
.ut-surface [class*="bg-purple-50"],
.ut-surface [class*="bg-indigo-50"] {
  background:
    linear-gradient(180deg, rgba(74, 84, 105, 0.86), rgba(43, 50, 66, 0.92)),
    radial-gradient(700px 260px at 12% 0%, rgba(77, 163, 255, 0.12), transparent 72%),
    radial-gradient(700px 260px at 92% 0%, rgba(47, 230, 209, 0.08), transparent 72%) !important;
  color: var(--ut-text) !important;
  border-color: rgba(226, 232, 240, 0.16) !important;
}

.ut-spotlight-panel,
.ut-side-panel,
.ut-result-card,
.ut-mini-stat,
.ut-inner-panel {
  border: 1px solid rgba(226, 232, 240, 0.14);
  color: var(--ut-text);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 18px 50px rgba(0,0,0,0.22);
}

.ut-spotlight-panel {
  border-radius: 1.5rem;
  background:
    linear-gradient(135deg, rgba(52, 64, 85, 0.92), rgba(28, 37, 54, 0.94)),
    radial-gradient(780px 300px at 0% 0%, rgba(47, 230, 209, 0.14), transparent 70%),
    radial-gradient(700px 280px at 95% 0%, rgba(77, 163, 255, 0.12), transparent 70%);
  border-color: rgba(47, 230, 209, 0.18);
}

.ut-side-panel {
  border-radius: 1.5rem;
  background:
    linear-gradient(180deg, rgba(70, 82, 104, 0.88), rgba(41, 50, 67, 0.94)),
    radial-gradient(650px 260px at 100% 0%, rgba(77, 163, 255, 0.10), transparent 72%);
}

.ut-result-card {
  border-radius: 1.5rem;
  background:
    linear-gradient(180deg, rgba(54, 65, 86, 0.92), rgba(31, 40, 57, 0.96)),
    radial-gradient(680px 260px at 0% 0%, rgba(77, 163, 255, 0.10), transparent 72%);
}

.ut-mini-stat,
.ut-inner-panel {
  border-radius: 1rem;
  background: linear-gradient(180deg, rgba(18, 28, 46, 0.82), rgba(9, 17, 32, 0.88));
  border-color: rgba(148, 163, 184, 0.20);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04), 0 10px 24px rgba(0,0,0,0.16);
}

.ut-search-chip {
  display: inline-flex;
  align-items: center;
  border-radius: 0.9rem;
  border: 1px solid rgba(148, 163, 184, 0.24);
  background: linear-gradient(180deg, rgba(17, 27, 45, 0.92), rgba(8, 15, 30, 0.96));
  color: rgba(248, 250, 252, 0.94) !important;
  padding: 0.45rem 0.75rem;
  font-size: 0.875rem;
  font-weight: 800;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 8px 20px rgba(0,0,0,0.14);
  text-decoration: none !important;
  transition: transform .15s ease, border-color .15s ease, background .15s ease;
}

.ut-search-chip:hover {
  transform: translateY(-1px);
  border-color: rgba(47, 230, 209, 0.45);
  background: linear-gradient(135deg, rgba(77, 163, 255, 0.22), rgba(47, 230, 209, 0.16));
  color: #ffffff !important;
}

.ut-surface .ut-spotlight-panel p,
.ut-surface .ut-side-panel p,
.ut-surface .ut-result-card p,
.ut-surface .ut-inner-panel p,
.ut-surface .ut-mini-stat p {
  color: var(--ut-muted) !important;
}

.ut-surface .ut-spotlight-panel h2,
.ut-surface .ut-side-panel h2,
.ut-surface .ut-result-card h2,
.ut-surface .ut-result-card h3,
.ut-surface .ut-mini-stat div,
.ut-surface .ut-inner-panel div {
  color: #ffffff !important;
}

/* Keep coloured badge text punchy after generic dark conversion. */
.ut-surface .text-emerald-800,
.ut-surface .text-emerald-700 { color: #86efac !important; }
.ut-surface .text-cyan-800,
.ut-surface .text-cyan-700 { color: #67e8f9 !important; }
.ut-surface .text-amber-800,
.ut-surface .text-amber-700 { color: #fcd34d !important; }

/* Utility: old hover-to-light classes should never make a panel pale again. */
.ut-surface .hover\:bg-cyan-50:hover,
.ut-surface .hover\:bg-blue-50:hover,
.ut-surface .hover\:bg-emerald-50:hover,
.ut-surface .hover\:bg-orange-50:hover,
.ut-surface .hover\:bg-slate-50:hover {
  background: rgba(47, 230, 209, 0.12) !important;
}


/* Phase 8M/Style fix — keep the sidebar background running behind the full admin menu.
   The admin menu can be taller than the viewport, so the nav area scrolls inside
   a full-height shell instead of spilling onto the blueprint wallpaper. */
.ut-sidebar-shell {
  min-height: 100vh;
  min-height: 100dvh;
  background:
    radial-gradient(650px 360px at 0% 0%, rgba(77, 163, 255, 0.10), transparent 65%),
    radial-gradient(560px 320px at 100% 18%, rgba(47, 230, 209, 0.07), transparent 62%),
    linear-gradient(180deg, rgba(2, 6, 23, 0.96), rgba(7, 10, 18, 0.94));
  overflow: hidden;
}

.ut-sidebar-scroll {
  scrollbar-width: thin;
  scrollbar-color: rgba(148, 163, 184, 0.35) rgba(2, 6, 23, 0.35);
}

.ut-sidebar-scroll::-webkit-scrollbar {
  width: 8px;
}

.ut-sidebar-scroll::-webkit-scrollbar-track {
  background: rgba(2, 6, 23, 0.25);
}

.ut-sidebar-scroll::-webkit-scrollbar-thumb {
  background: rgba(148, 163, 184, 0.32);
  border-radius: 999px;
}

.ut-sidebar-scroll::-webkit-scrollbar-thumb:hover {
  background: rgba(148, 163, 184, 0.50);
}

@media (max-width: 767px) {
  .ut-sidebar-shell {
    height: 100vh;
    height: 100dvh;
  }
}