/*
 * This is a manifest file that'll be compiled into application.css
 */

/* Additional stylesheets are loaded separately via stylesheet_link_tag in layouts/application.html.erb */

.pmd-shell {
  min-height: 100vh;
  position: relative;
  overflow-x: clip;
  background: #020617;
  color: #f8fafc;
}

.pmd-shell::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  background:
    linear-gradient(180deg, rgb(2 6 23 / 0.42) 0%, rgb(2 6 23 / 0.78) 48%, rgb(2 6 23 / 0.96) 100%),
    linear-gradient(90deg, rgb(2 6 23 / 0.68) 0%, rgb(2 6 23 / 0.24) 48%, rgb(2 6 23 / 0.62) 100%),
    url("/assets/dashboard/calm-focus-background.png");
  background-position: center;
  background-size: cover;
  transform: scale(1.02);
}

.pmd-shell::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 20% 12%, rgb(45 212 191 / 0.12), transparent 28%),
    radial-gradient(circle at 78% 18%, rgb(251 191 36 / 0.10), transparent 28%),
    linear-gradient(180deg, transparent 0%, rgb(2 6 23 / 0.30) 72%, rgb(2 6 23 / 0.70) 100%);
}

.pmd-shell > * {
  position: relative;
  z-index: 1;
}

.pmd-shell > header {
  background: rgb(2 6 23 / 0.86) !important;
  border-bottom: 1px solid rgb(255 255 255 / 0.08);
  box-shadow: 0 1px 0 rgb(255 255 255 / 0.05);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.pmd-shell > header .text-gray-900,
.pmd-shell > header .text-gray-700,
.pmd-shell > header .text-gray-600,
.pmd-shell > header .text-gray-500 {
  color: rgb(226 232 240) !important;
}

.pmd-shell > header .bg-white {
  background: rgb(15 23 42 / 0.88) !important;
}

.pmd-shell > header .bg-primary-100 {
  background: rgb(20 184 166 / 0.18) !important;
}

.pmd-shell > header .text-primary-700 {
  color: rgb(153 246 228) !important;
}

.pmd-shell > header .hover\:bg-gray-50:hover {
  background: rgb(255 255 255 / 0.08) !important;
}

.pmd-shell .bg-white,
.pmd-shell .bg-white\/70,
.pmd-shell .bg-white\/80,
.pmd-shell .bg-gray-50,
.pmd-shell .bg-gray-100,
.pmd-shell .bg-gray-200,
.pmd-shell .bg-primary-50,
.pmd-shell .bg-blue-50,
.pmd-shell .bg-green-50,
.pmd-shell .bg-yellow-50,
.pmd-shell .bg-orange-50,
.pmd-shell .bg-red-50,
.pmd-shell .bg-slate-50,
.pmd-glass {
  background:
    linear-gradient(135deg, rgb(255 255 255 / 0.13), rgb(255 255 255 / 0.045)),
    linear-gradient(160deg, rgb(2 6 23 / 0.30), rgb(15 23 42 / 0.16)) !important;
  border-color: rgb(255 255 255 / 0.18) !important;
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.14),
    inset 0 -1px 0 rgb(255 255 255 / 0.04),
    0 24px 70px rgb(0 0 0 / 0.20) !important;
  backdrop-filter: blur(26px) saturate(145%);
  -webkit-backdrop-filter: blur(26px) saturate(145%);
}

.pmd-shell .text-gray-900,
.pmd-shell .text-gray-800,
.pmd-shell .text-gray-700 {
  color: rgb(248 250 252) !important;
}

.pmd-shell .text-gray-600,
.pmd-shell .text-gray-500,
.pmd-shell .text-gray-400,
.pmd-shell .text-slate-600,
.pmd-shell .text-slate-500,
.pmd-shell .text-slate-400 {
  color: rgb(203 213 225) !important;
}

.pmd-shell .text-slate-950,
.pmd-shell .text-slate-900,
.pmd-shell .text-slate-800,
.pmd-shell .text-slate-700 {
  color: rgb(248 250 252) !important;
}

.pmd-shell input:not([type="checkbox"]):not([type="radio"]),
.pmd-shell textarea,
.pmd-shell select {
  background: rgb(15 23 42 / 0.78) !important;
  border-color: rgb(255 255 255 / 0.14) !important;
  color: rgb(248 250 252) !important;
}

.pmd-shell input::placeholder,
.pmd-shell textarea::placeholder {
  color: rgb(148 163 184) !important;
}

.pmd-shell select option {
  background: #0f172a;
  color: #f8fafc;
}

.pmd-shell table,
.pmd-shell tbody,
.pmd-shell tr {
  color: rgb(226 232 240);
}

.pmd-shell .divide-gray-100 > :not([hidden]) ~ :not([hidden]),
.pmd-shell .divide-gray-200 > :not([hidden]) ~ :not([hidden]),
.pmd-shell .border-gray-100,
.pmd-shell .border-gray-200,
.pmd-shell .border-gray-300,
.pmd-shell .border-slate-200,
.pmd-shell .border-slate-300 {
  border-color: rgb(255 255 255 / 0.14) !important;
}

.pmd-shell .shadow-sm,
.pmd-shell .shadow,
.pmd-shell .shadow-md,
.pmd-shell .shadow-lg,
.pmd-shell .shadow-xl {
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.12),
    0 24px 70px rgb(0 0 0 / 0.20) !important;
}

.pmd-shell .hover\:bg-gray-50:hover,
.pmd-shell .hover\:bg-gray-100:hover,
.pmd-shell .hover\:bg-gray-200:hover,
.pmd-shell .hover\:bg-white:hover,
.pmd-shell .hover\:bg-primary-50:hover {
  background: rgb(255 255 255 / 0.08) !important;
}

.pmd-shell .bg-primary-600,
.pmd-shell .bg-primary-700 {
  background: rgb(20 184 166 / 0.86) !important;
}

.pmd-shell .text-primary-600,
.pmd-shell .text-primary-700,
.pmd-shell .text-blue-600,
.pmd-shell .text-green-600 {
  color: rgb(153 246 228) !important;
}

.pmd-shell .prose,
.pmd-shell .prose :where(p, li, strong, h1, h2, h3, h4):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: rgb(226 232 240) !important;
}

.pmd-shell [data-dropdown-target="menu"],
.pmd-shell [data-user-menu-target="menu"] {
  background: rgb(2 6 23 / 0.94) !important;
  border-color: rgb(255 255 255 / 0.14) !important;
  color: #f8fafc;
  box-shadow: 0 24px 70px rgb(0 0 0 / 0.36) !important;
  backdrop-filter: blur(24px) saturate(145%);
  -webkit-backdrop-filter: blur(24px) saturate(145%);
}

.pmd-modal {
  background: linear-gradient(135deg, rgb(2 6 23 / 0.92), rgb(15 23 42 / 0.84)) !important;
  border: 1px solid rgb(255 255 255 / 0.14) !important;
  color: #f8fafc;
  box-shadow: 0 24px 70px rgb(0 0 0 / 0.38) !important;
  backdrop-filter: blur(28px) saturate(135%);
  -webkit-backdrop-filter: blur(28px) saturate(135%);
}

.pmd-modal .text-gray-900,
.pmd-modal .text-slate-900 {
  color: #f8fafc !important;
}

.pmd-modal .text-gray-700,
.pmd-modal .text-gray-600,
.pmd-modal .text-slate-600,
.pmd-modal .text-slate-500 {
  color: #cbd5e1 !important;
}