/* ==UserStyle==
@name coolify-tweaks
@version 3.2.3
@namespace https://github.com/techwithanirudh
@author Anirudh Sriram <hello@techwithanirudh.com> (https://github.com/techwithanirudh)
@homepageURL https://github.com/techwithanirudh/coolify-tweaks#readme
@updateURL https://github.com/techwithanirudh/coolify-tweaks/releases/latest/download/main.user.css
@description Opinionated tweaks for Coolify: better spacing, layout, and color polish.
@license MIT
==/UserStyle== */
@charset "UTF-8";
@-moz-document regexp("https?://app\.coolify\.io/.*"), regexp("https?://coolify\.local:8000/.*"){
:root {
  font-size: 15px;
  --color-base: #ffffff;
  --color-coolgray-100: #f6f7f9;
  --color-coolgray-200: #eceef2;
  --color-coolgray-300: #e3e5ea;
  --color-coolgray-400: #d8dae0;
  --color-coolgray-500: #cfd1d8;
  --color-coolgray-600: #c6c8d0;
  --color-coolgray-700: #f4f5f7;
  --color-coolgray-800: #edeef1;
  --color-coolgray-900: #e6e7eb;
  --color-coollabs: #4c3495;
  --color-coollabs-100: color-mix(in srgb, #4c3495 85%, #ffffff);
  --color-success: #2aaa52;
  --color-warning: #e0b842;
  --color-error: #d63b3b;
  --color-text-primary: #1f1c23;
  --color-text-muted: #6e6b75;
  --color-placeholder: #8e8c91;
  --color-overlay: rgba(0, 0, 0, 0.6);
  --color-shadow-light: rgba(0, 0, 0, 0.15);
  --color-shadow-dark: rgba(0, 0, 0, 0.35);
  --color-shadow-main: rgba(0, 0, 0, 0.25);
  --cfy-accent: var(--color-coollabs);
  --cfy-accent-light: var(--color-coollabs-100);
  --cfy-sidebar-bg: var(--color-coolgray-700);
  --cfy-secondary: var(--color-coolgray-100);
  --cfy-content-bg: var(--color-base);
  --cfy-card-container: var(--color-coolgray-200);
  --cfy-card: var(--color-coolgray-300);
  --cfy-text: var(--color-text-primary);
  --cfy-muted: var(--color-text-muted);
  --cfy-blur: 14px;
  --cfy-shadow: 0 4px 20px var(--color-shadow-main);
  --cfy-sidebar-w: 260px;
  --radius-base: 14px;
  --radius-step: 2px;
  --radius-xs: 10px;
  --radius-sm: 12px;
  --radius-md: 14px;
  --radius-lg: 16px;
  --radius-xl: 18px;
  --spacing: 0.25rem;
}

.dark {
  --color-base: #1f1c23;
  --color-coolgray-100: #26252b;
  --color-coolgray-200: #2a292e;
  --color-coolgray-300: #353239;
  --color-coolgray-400: #3d3a40;
  --color-coolgray-500: #45424a;
  --color-coolgray-600: #403d44;
  --color-coolgray-700: #1a191f;
  --color-coolgray-800: #151419;
  --color-coolgray-900: #101014;
  --color-coollabs: #7349f3;
  --color-coollabs-100: color-mix(in srgb, #7349f3 75%, #ffffff);
  --color-success: #23ff1f;
  --color-warning: #fcd452;
  --color-error: #ff1f1c;
  --color-text-primary: #fcfafc;
  --color-text-muted: #8e8c91;
  --color-placeholder: #8e8c91;
}

button.button,
.button {
  padding: calc(0.25rem * 2.25) calc(0.25rem * 4);
  padding: calc(var(--spacing) * 2.25) calc(var(--spacing) * 4);
  border: 1px solid #d8dae0 !important;
  border: 1px solid var(--color-coolgray-400) !important;
  border-radius: 12px !important;
  border-radius: var(--radius-sm) !important; /* 12 px */
  background: #4c3495;
  background: var(--cfy-accent);
  color: var(--color-text) !important;
  font-weight: 600;
  transition: background 0.18s;
}
button.button:hover,
.button:hover {
  background: color-mix(in srgb, #4c3495 85%, #ffffff);
  background: var(--cfy-accent-light);
}

/* Ensure proper text colors in light mode for buttons */
html:not(.dark) button.button,
html:not(.dark) .button {
  color: #ffffff !important;
  color: var(--color-base) !important;
}

button.secondary,
.secondary {
  background: #f6f7f9 !important;
  background: var(--cfy-secondary) !important;
}
button.secondary:hover,
.secondary:hover {
  background: #eceef2 !important;
  background: var(--cfy-card-container) !important;
}

button {
  border-radius: 12px !important;
  border-radius: var(--radius-sm) !important;
}

input.input,
textarea.input,
select.select {
  padding: calc(0.25rem * 2.25) calc(0.25rem * 4);
  padding: calc(var(--spacing) * 2.25) calc(var(--spacing) * 4);
  border: 1px solid #d8dae0 !important;
  border: 1px solid var(--color-coolgray-400) !important;
  border-radius: 12px !important;
  border-radius: var(--radius-sm) !important; /* 12 px */
  background: #e3e5ea !important;
  background: var(--cfy-card) !important;
  color: #1f1c23;
  color: var(--cfy-text);
  transition: border-color 0.15s, background 0.15s;
  /* Placeholder text styling */
}
input.input:focus,
textarea.input:focus,
select.select:focus {
  border-color: color-mix(in srgb, #4c3495 85%, #ffffff) !important;
  border-color: var(--cfy-accent-light) !important;
  background: #eceef2 !important;
  background: var(--cfy-card-container) !important;
}
input.input::-moz-placeholder, textarea.input::-moz-placeholder, select.select::-moz-placeholder {
  color: #6e6b75 !important;
  color: var(--cfy-muted) !important;
  opacity: 0.7;
}
input.input::placeholder,
textarea.input::placeholder,
select.select::placeholder {
  color: #6e6b75 !important;
  color: var(--cfy-muted) !important;
  opacity: 0.7;
}
input.input:focus::-moz-placeholder, textarea.input:focus::-moz-placeholder, select.select:focus::-moz-placeholder {
  opacity: 0.5;
}
input.input:focus::placeholder,
textarea.input:focus::placeholder,
select.select:focus::placeholder {
  opacity: 0.5;
}

input[type=checkbox],
input[type=radio] {
  padding: calc(0.25rem * 2.75);
  padding: calc(var(--spacing) * 2.75);
  border-radius: 4px !important;
  background-color: #e3e5ea !important;
  background-color: var(--cfy-card) !important;
  transition: background 0.18s;
}

label {
  margin-bottom: calc(0.25rem * 3);
  margin-bottom: calc(var(--spacing) * 3);
  font-weight: 600;
}

input,
select,
textarea {
  border-radius: 12px !important;
  border-radius: var(--radius-sm) !important;
}

select,
::picker(select) {
  -moz-appearance: base-select;
       appearance: base-select;
}
select:hover, select:focus,
::picker(select):hover,
::picker(select):focus {
  border-color: color-mix(in srgb, #4c3495 85%, #ffffff);
  border-color: var(--cfy-accent-light);
  background: #eceef2;
  background: var(--cfy-card-container);
}
select::picker-icon,
::picker(select)::picker-icon {
  color: #6e6b75;
  color: var(--cfy-muted);
  transition: 0.4s rotate;
}
select:open::picker-icon,
::picker(select):open::picker-icon {
  rotate: 180deg;
}
select:disabled,
::picker(select):disabled {
  border-color: #6e6b75 !important;
  border-color: var(--cfy-muted) !important;
  color: #6e6b75 !important;
  color: var(--cfy-muted) !important;
  cursor: not-allowed;
  pointer-events: none;
}

::picker(select) {
  border: 1px solid #d8dae0 !important;
  border: 1px solid var(--color-coolgray-400) !important;
  border-radius: 10px !important;
  border-radius: var(--radius-xs) !important;
  background: #e3e5ea !important;
  background: var(--cfy-card) !important;
  top: calc(anchor(bottom) + 4px);
  opacity: 0;
  transition: all 0.4s allow-discrete;
}
::picker(select):popover-open {
  opacity: 1;
}
@starting-style {
  ::picker(select):popover-open {
    opacity: 0;
  }
}
::picker(select):disabled, ::picker(select):disabled:popover-open {
  opacity: 0.6 !important;
  background: var(--cfy-card-disabled) !important;
}

option {
  display: flex;
  justify-content: flex-start;
  padding: calc(0.25rem * 2.5);
  padding: calc(var(--spacing) * 2.5);
  background: #e3e5ea !important;
  background: var(--cfy-card) !important;
  color: #1f1c23;
  color: var(--cfy-text);
  transition: 0.4s;
  gap: calc(0.25rem * 5);
  gap: calc(var(--spacing) * 5);
}
option:first-of-type {
  border-radius: 10px 10px 0 0;
  border-radius: var(--radius-xs) var(--radius-xs) 0 0;
}
option:last-of-type {
  border-radius: 0 0 10px 10px;
  border-radius: 0 0 var(--radius-xs) var(--radius-xs);
}
option:not(option:last-of-type) {
  border-bottom: none;
}
option:hover, option:focus {
  background: #eceef2 !important;
  background: var(--cfy-card-container) !important;
  color: #1f1c23;
  color: var(--cfy-text);
}
option .icon {
  font-size: 1.6rem;
  text-box: trim-both cap alphabetic;
}
option selectedcontent .icon {
  display: none;
}
option:checked {
  font-weight: bold;
}
option::checkmark {
  order: 1;
  margin-left: auto;
  content: "✓";
}
option:disabled {
  color: #6e6b75 !important;
  color: var(--cfy-muted) !important;
  cursor: not-allowed;
  opacity: 0.7;
  pointer-events: none;
}

table {
  overflow: hidden !important;
  margin-top: calc(0.25rem * 4);
  margin-top: calc(var(--spacing) * 4);
  border-radius: 12px !important;
  border-radius: var(--radius-sm) !important;
  background: #eceef2 !important;
  background: var(--cfy-card-container) !important;
}

[dashed],
[class*=dashed] {
  border-color: #6e6b75 !important;
  border-color: var(--cfy-muted) !important;
  border-radius: 12px !important;
  border-radius: var(--radius-sm) !important;
  padding-block: calc(0.25rem * 8) !important;
  padding-block: calc(var(--spacing) * 8) !important;
}

[role=row]:not([dashed]) {
  padding: calc(0.25rem * 2.5) calc(0.25rem * 3.25);
  padding: calc(var(--spacing) * 2.5) calc(var(--spacing) * 3.25);
  border-radius: 12px !important;
  border-radius: var(--radius-sm) !important;
  background: #e3e5ea !important;
  background: var(--cfy-card) !important;
}

.box,
.box-without-bg {
  overflow: hidden;
  padding: calc(0.25rem * 2.5) calc(0.25rem * 3);
  padding: calc(var(--spacing) * 2.5) calc(var(--spacing) * 3);
  border: 1px solid #d8dae0 !important;
  border: 1px solid var(--color-coolgray-400) !important;
  border-radius: 12px !important;
  border-radius: var(--radius-sm) !important;
  /* 12 px */
  background: #e3e5ea !important;
  background: var(--cfy-card) !important;
  transition: transform 0.15s, box-shadow 0.2s, background 0.18s, border-color 0.18s;
}

.box:hover {
  border-color: #4c3495;
  border-color: var(--cfy-accent);
  background: color-mix(in srgb, #e3e5ea 70%, #4c3495 30%);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  box-shadow: 0 8px 24px var(--color-shadow-dark);
  transform: translateY(-2px);
}

@supports (color: color-mix(in lch, red, blue)){
.box:hover {
  background: color-mix(in srgb, var(--cfy-card) 70%, var(--cfy-accent) 30%);
}
}

.box-title {
  font-weight: 600;
  font-size: 1.05rem;
  display: -webkit-box !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: normal !important;
  word-break: break-word !important;
  -webkit-line-clamp: 4 !important;
  -webkit-box-orient: vertical !important;
}

.box-description {
  color: #6e6b75;
  color: var(--cfy-muted);
}

div[data-testid=resources-grid],
div.grid[class*=cols] {
  overflow: hidden;
  margin-top: calc(0.25rem * 2.5);
  margin-top: calc(var(--spacing) * 2.5);
  padding: calc(0.25rem * 3) calc(0.25rem * 3.5) !important;
  padding: calc(var(--spacing) * 3) calc(var(--spacing) * 3.5) !important;
  border-radius: 14px !important;
  border-radius: var(--radius-md) !important;
  background: #eceef2 !important;
  background: var(--cfy-card-container) !important;
}

div.grid[class*=cols]:is(:has([wire\:click^=navigateToProject]),
:has([\@click^="$wire.navigateToProject"]),
[x-show="filteredApplications.length > 0"],
[x-show="filteredServices.length > 0"]) {
  grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
}
@media screen and (min-width: 640px) {
  div.grid[class*=cols]:is(:has([wire\:click^=navigateToProject]),
  :has([\@click^="$wire.navigateToProject"]),
  [x-show="filteredApplications.length > 0"],
  [x-show="filteredServices.length > 0"]) {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}
@media screen and (min-width: 1024px) {
  div.grid[class*=cols]:is(:has([wire\:click^=navigateToProject]),
  :has([\@click^="$wire.navigateToProject"]),
  [x-show="filteredApplications.length > 0"],
  [x-show="filteredServices.length > 0"]) {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}
@media screen and (min-width: 1280px) {
  div.grid[class*=cols]:is(:has([wire\:click^=navigateToProject]),
  :has([\@click^="$wire.navigateToProject"]),
  [x-show="filteredApplications.length > 0"],
  [x-show="filteredServices.length > 0"]) {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}
@media screen and (min-width: 1536px) {
  div.grid[class*=cols]:is(:has([wire\:click^=navigateToProject]),
  :has([\@click^="$wire.navigateToProject"]),
  [x-show="filteredApplications.length > 0"],
  [x-show="filteredServices.length > 0"]) {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}
div.grid[class*=cols]:is(:has([wire\:click^=navigateToProject]),
:has([\@click^="$wire.navigateToProject"]),
[x-show="filteredApplications.length > 0"],
[x-show="filteredServices.length > 0"]) .box {
  height: 150px;
}
div.grid[class*=cols]:is(:has([wire\:click^=navigateToProject]),
:has([\@click^="$wire.navigateToProject"]),
[x-show="filteredApplications.length > 0"],
[x-show="filteredServices.length > 0"]) .box > div {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.grid:has(a[href*="/server/"]) {
  grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
}

.grid:has(a[href*="/source/"]) {
  grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
}

.grid:has(a[href*="/destination/"]) {
  grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
}

.grid:has(a[href*="/security/"]) {
  grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
}

.grid,
[class*=grid-cols] {
  gap: calc(0.25rem * 2.5) !important;
  gap: calc(var(--spacing) * 2.5) !important;
}

.navbar-main {
  position: sticky;
  top: 0;
  padding: calc(0.25rem * 1.75) calc(0.25rem * 3.5);
  padding: calc(var(--spacing) * 1.75) calc(var(--spacing) * 3.5);
  border: 1px solid #d8dae0 !important;
  border: 1px solid var(--color-coolgray-400) !important;
  border-radius: 12px !important;
  border-radius: var(--radius-sm) !important;
  background: #f4f5f7;
  background: var(--cfy-sidebar-bg);
  backdrop-filter: blur(14px) !important;
  backdrop-filter: blur(var(--cfy-blur)) !important;
}

.navbar-main nav {
  display: flex;
  align-items: center;
  padding-top: 0px;
  gap: calc(0.25rem * 3.25);
  gap: calc(var(--spacing) * 3.25);
}

.navbar-main nav::-webkit-scrollbar {
  display: none;
}

.navbar-main nav a {
  padding: calc(0.25rem * 1.25);
  padding: calc(var(--spacing) * 1.25);
  border-radius: 10px !important;
  color: #6e6b75;
  color: var(--cfy-muted);
  font-weight: 600;
  cursor: pointer;
  transition: background 0.18s, color 0.18s;
}

.navbar-main nav a:hover {
  color: #1f1c23 !important;
  color: var(--cfy-text) !important;
}

.navbar-main nav a[class*="dark:text-white"],
.navbar-main nav a[aria-current=page] {
  box-shadow: inset 0 0 0 2px color-mix(in srgb, #4c3495 85%, #ffffff);
  box-shadow: inset 0 0 0 2px var(--cfy-accent-light);
  color: #1f1c23 !important;
  color: var(--cfy-text) !important;
}

.navbar-main .flex-1 {
  flex: 1 1 auto;
}

/* Targets the main desktop sidebar container. 
     Instead of fragile width/flex classes, it's identified by its fixed position on large screens 
     and the fact that it contains the main navigation (`a[title="Dashboard"]`). This is much more stable. */
div.lg\:fixed:has(nav a[title=Dashboard]) {
  width: 260px !important;
  width: var(--cfy-sidebar-w) !important;
}

nav[x-data]:has(a[title=Dashboard]) {
  overflow-x: hidden;
  overflow-y: auto !important;
  width: 100%;
  border-right: 1px solid #d8dae0;
  border-right: 1px solid var(--color-coolgray-400);
  background: #f4f5f7 !important;
  background: var(--cfy-sidebar-bg) !important;
  backdrop-filter: blur(14px) !important;
  backdrop-filter: blur(var(--cfy-blur)) !important;
  scrollbar-width: thin;
  scrollbar-color: #4c3495 transparent;
  scrollbar-color: var(--cfy-accent) transparent;
}

nav[x-data]:has(a[title=Dashboard]) > ul {
  padding-inline: calc(0.25rem * 2);
  padding-inline: calc(var(--spacing) * 2);
}

/* Targets the sidebar header containing the team switcher.
     It's robustly selected by finding the `div` that directly contains the unique Livewire team selection dropdown. */
nav[x-data] > div:has(select[wire\:model\.live=selectedTeamId]) {
  padding-block: calc(0.25rem * 4) !important;
  padding-block: calc(var(--spacing) * 4) !important;
}

aside::-webkit-scrollbar {
  width: 8px;
}

aside::-webkit-scrollbar-thumb {
  border-radius: 4px;
  background: #4c3495;
  background: var(--cfy-accent);
}

nav > ul > li > ul > li {
  overflow: hidden;
  border-radius: 12px !important;
  border-radius: var(--radius-sm) !important;
}

.menu-item {
  display: flex;
  align-items: center;
  padding: calc(0.25rem * 2.25) calc(0.25rem * 3.75);
  padding: calc(var(--spacing) * 2.25) calc(var(--spacing) * 3.75);
  border-radius: 12px !important;
  border-radius: var(--radius-sm) !important;
  color: #6e6b75;
  color: var(--cfy-muted);
  font-weight: 500;
  transition: background 0.18s, color 0.18s;
  gap: calc(0.25rem * 2.5);
  gap: calc(var(--spacing) * 2.5);
}

.menu-item:hover,
.menu-item-active {
  background: #eceef2 !important;
  background: var(--cfy-card-container) !important;
  color: #1f1c23 !important;
  color: var(--cfy-text) !important;
}

.menu-item .icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  stroke-width: 1.6;
  fill: #c6c8d0 !important;
  fill: var(--color-coolgray-600) !important;
}
.menu-item .icon > * {
  display: none !important;
}

.menu-item[title=Dashboard] .icon {
  mask: url("https://cdn.jsdelivr.net/npm/@phosphor-icons/core@2.1.1/assets/fill/house-fill.svg") no-repeat center/contain;
  -webkit-mask: url("https://cdn.jsdelivr.net/npm/@phosphor-icons/core@2.1.1/assets/fill/house-fill.svg") no-repeat center/contain;
  background-color: currentColor;
}

.menu-item[title=Projects] .icon {
  mask: url("https://cdn.jsdelivr.net/npm/@phosphor-icons/core@2.1.1/assets/fill/folder-fill.svg") no-repeat center/contain;
  -webkit-mask: url("https://cdn.jsdelivr.net/npm/@phosphor-icons/core@2.1.1/assets/fill/folder-fill.svg") no-repeat center/contain;
  background-color: currentColor;
}

.menu-item[title=Servers] .icon {
  mask: url("https://cdn.jsdelivr.net/npm/@phosphor-icons/core@2.1.1/assets/fill/hard-drives-fill.svg") no-repeat center/contain;
  -webkit-mask: url("https://cdn.jsdelivr.net/npm/@phosphor-icons/core@2.1.1/assets/fill/hard-drives-fill.svg") no-repeat center/contain;
  background-color: currentColor;
}

.menu-item[title=Sources] .icon {
  mask: url("https://cdn.jsdelivr.net/npm/@phosphor-icons/core@2.1.1/assets/fill/github-logo-fill.svg") no-repeat center/contain;
  -webkit-mask: url("https://cdn.jsdelivr.net/npm/@phosphor-icons/core@2.1.1/assets/fill/github-logo-fill.svg") no-repeat center/contain;
  background-color: currentColor;
}

.menu-item[title=Destinations] .icon {
  mask: url("https://cdn.jsdelivr.net/npm/@phosphor-icons/core@2.1.1/assets/fill/map-pin-fill.svg") no-repeat center/contain;
  -webkit-mask: url("https://cdn.jsdelivr.net/npm/@phosphor-icons/core@2.1.1/assets/fill/map-pin-fill.svg") no-repeat center/contain;
  background-color: currentColor;
}

.menu-item[title="S3 Storages"] .icon {
  mask: url("https://cdn.jsdelivr.net/npm/@phosphor-icons/core@2.1.1/assets/fill/database-fill.svg") no-repeat center/contain;
  -webkit-mask: url("https://cdn.jsdelivr.net/npm/@phosphor-icons/core@2.1.1/assets/fill/database-fill.svg") no-repeat center/contain;
  background-color: currentColor;
}

.menu-item[title="Shared variables"] .icon {
  mask: url("https://cdn.jsdelivr.net/npm/@phosphor-icons/core@2.1.1/assets/fill/function-fill.svg") no-repeat center/contain;
  -webkit-mask: url("https://cdn.jsdelivr.net/npm/@phosphor-icons/core@2.1.1/assets/fill/function-fill.svg") no-repeat center/contain;
  background-color: currentColor;
}

.menu-item[title=Notifications] .icon {
  mask: url("https://cdn.jsdelivr.net/npm/@phosphor-icons/core@2.1.1/assets/fill/bell-fill.svg") no-repeat center/contain;
  -webkit-mask: url("https://cdn.jsdelivr.net/npm/@phosphor-icons/core@2.1.1/assets/fill/bell-fill.svg") no-repeat center/contain;
  background-color: currentColor;
}

.menu-item[title="Keys & Tokens"] .icon {
  mask: url("https://cdn.jsdelivr.net/npm/@phosphor-icons/core@2.1.1/assets/fill/key-fill.svg") no-repeat center/contain;
  -webkit-mask: url("https://cdn.jsdelivr.net/npm/@phosphor-icons/core@2.1.1/assets/fill/key-fill.svg") no-repeat center/contain;
  background-color: currentColor;
}

.menu-item[title=Tags] .icon {
  mask: url("https://cdn.jsdelivr.net/npm/@phosphor-icons/core@2.1.1/assets/fill/tag-fill.svg") no-repeat center/contain;
  -webkit-mask: url("https://cdn.jsdelivr.net/npm/@phosphor-icons/core@2.1.1/assets/fill/tag-fill.svg") no-repeat center/contain;
  background-color: currentColor;
}

.menu-item[title=Terminal] .icon {
  mask: url("https://cdn.jsdelivr.net/npm/@phosphor-icons/core@2.1.1/assets/fill/terminal-fill.svg") no-repeat center/contain;
  -webkit-mask: url("https://cdn.jsdelivr.net/npm/@phosphor-icons/core@2.1.1/assets/fill/terminal-fill.svg") no-repeat center/contain;
  background-color: currentColor;
}

.menu-item[title=Profile] .icon {
  mask: url("https://cdn.jsdelivr.net/npm/@phosphor-icons/core@2.1.1/assets/fill/user-circle-fill.svg") no-repeat center/contain;
  -webkit-mask: url("https://cdn.jsdelivr.net/npm/@phosphor-icons/core@2.1.1/assets/fill/user-circle-fill.svg") no-repeat center/contain;
  background-color: currentColor;
}

.menu-item[title=Teams] .icon {
  mask: url("https://cdn.jsdelivr.net/npm/@phosphor-icons/core@2.1.1/assets/fill/users-fill.svg") no-repeat center/contain;
  -webkit-mask: url("https://cdn.jsdelivr.net/npm/@phosphor-icons/core@2.1.1/assets/fill/users-fill.svg") no-repeat center/contain;
  background-color: currentColor;
}

.menu-item[title=Settings] .icon {
  mask: url("https://cdn.jsdelivr.net/npm/@phosphor-icons/core@2.1.1/assets/fill/gear-fill.svg") no-repeat center/contain;
  -webkit-mask: url("https://cdn.jsdelivr.net/npm/@phosphor-icons/core@2.1.1/assets/fill/gear-fill.svg") no-repeat center/contain;
  background-color: currentColor;
}

.menu-item[title="Sponsor us"] .icon {
  mask: url("https://cdn.jsdelivr.net/npm/@phosphor-icons/core@2.1.1/assets/fill/heart-fill.svg") no-repeat center/contain;
  -webkit-mask: url("https://cdn.jsdelivr.net/npm/@phosphor-icons/core@2.1.1/assets/fill/heart-fill.svg") no-repeat center/contain;
  background-color: currentColor;
}

.menu-item[title="Send us feedback or get help!"] .icon {
  mask: url("https://cdn.jsdelivr.net/npm/@phosphor-icons/core@2.1.1/assets/fill/chat-text-fill.svg") no-repeat center/contain;
  -webkit-mask: url("https://cdn.jsdelivr.net/npm/@phosphor-icons/core@2.1.1/assets/fill/chat-text-fill.svg") no-repeat center/contain;
  background-color: currentColor;
}

.menu-item[title=Logout] .icon {
  mask: url("https://cdn.jsdelivr.net/npm/@phosphor-icons/core@2.1.1/assets/fill/sign-out-fill.svg") no-repeat center/contain;
  -webkit-mask: url("https://cdn.jsdelivr.net/npm/@phosphor-icons/core@2.1.1/assets/fill/sign-out-fill.svg") no-repeat center/contain;
  background-color: currentColor;
}

/* Mobile slide-in */
@media screen and (min-width: 1024px) {
  aside[class*=sidebar] {
    position: fixed;
    z-index: 60;
    transition: transform 0.25s;
    transform: translateX(calc(-1 * 260px));
    transform: translateX(calc(-1 * var(--cfy-sidebar-w)));
    inset: 0;
  }
  body.sidebar-open aside {
    transform: none;
  }
  body.sidebar-open::after {
    position: fixed;
    z-index: 50;
    background: rgba(0, 0, 0, 0.6);
    background: var(--color-overlay);
    content: "";
    inset: 0;
  }
}
/* Desktop push */
@media screen and (min-width: 1024px) {
  body:has(nav[class*="dark:border-coolgray-200"]) main {
    padding-left: 260px !important;
    padding-left: var(--cfy-sidebar-w) !important;
  }
}
button[\@click="dropdownOpen=true"]:has([x-show="theme === 'dark' || theme === 'system'"]) {
  border-radius: 10px !important;
  background: #e3e5ea !important;
  background: var(--cfy-card) !important;
  padding-block: calc(0.25rem * 2.75) !important;
  padding-block: calc(var(--spacing) * 2.75) !important;
}

button[\@click^=switchWidth],
button[\@click^=setZoom] {
  display: none !important;
}

div[class*="font-bold border-b dark:border-coolgray-500 dark:text-white text-md"] {
  display: none !important;
}

img[class*="w-[4.5rem] aspect-square h-[4.5rem]"],
svg[class*="w-[4.5rem] aspect-square h-[4.5rem]"],
div[class*="w-[4.5rem] aspect-square h-[4.5rem]"] {
  overflow: hidden !important;
  border-radius: 12px !important;
  border-radius: var(--radius-sm) !important;
  filter: none !important;
  opacity: 1 !important;
}

button,
a,
input,
select,
textarea {
  border-radius: 12px !important;
  border-radius: var(--radius-sm) !important;
  box-shadow: none !important;
}

body,
main {
  background: #ffffff !important;
  background: var(--cfy-content-bg) !important;
  color: #1f1c23;
  color: var(--cfy-text);
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid #4c3495 !important;
  outline: 2px solid var(--cfy-accent) !important;
  outline-offset: 2px;
}

h1 {
  color: #1f1c23;
  color: var(--cfy-text);
  font: 700 2.1rem/1.25 "Inter", "SF Pro Display", sans-serif;
}

h2 {
  color: #1f1c23;
  color: var(--cfy-text);
  font: 700 1.5rem/1.35 "Inter", "SF Pro Display", sans-serif;
}

h3 {
  color: #1f1c23;
  color: var(--cfy-text);
  font: 700 1.25rem/1.35 "Inter", "SF Pro Display", sans-serif;
}

h4 {
  color: #1f1c23;
  color: var(--cfy-text);
  font: 700 1.1rem/1.35 "Inter", "SF Pro Display", sans-serif;
}

.subtitle {
  color: #6e6b75;
  color: var(--cfy-muted);
  font-size: 0.95rem;
}

main {
  height: 100svh;
}

/* Applies max-width and padding to the main content area. */
main > div:first-child {
  margin: auto;
  max-width: 1280px !important;
  padding-block: calc(0.25rem * 18) !important;
  padding-block: calc(var(--spacing) * 18) !important;
}

body > div[x-data*=pageWidth] {
  min-width: 100% !important;
  max-width: 100% !important;
}

/* Sponsorship Popup Styles */
[x-show="popups.sponsorship"] {
  padding: calc(0.25rem * 5) !important;
  padding: calc(var(--spacing) * 5) !important;
  border-radius: 12px !important;
  border-radius: var(--radius-sm) !important;
  background: #eceef2 !important;
  background: var(--cfy-card-container) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25) !important;
  box-shadow: var(--cfy-shadow) !important;
}

/* Scrollbars */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-thumb {
  border-radius: 4px;
  background: #6e6b75;
  background: var(--cfy-muted);
}

::-webkit-scrollbar-thumb:hover {
  background: #1f1c23;
  background: var(--cfy-text);
}

/* Button to add tags to service */
.add-tag {
  color: #6e6b75 !important;
  color: var(--cfy-muted) !important;
}

/* take full width for compressed items, like checkboxes */
div[class=w-48],
div[class*=w-64],
div[class=w-32],
div[class="pt-2 w-96"],
div[class=w-96],
div[class*="md:w-96"],
div[class=w-96] {
  width: 100% !important;
}

section > h2 + div,
section > h3 + div {
  overflow: hidden;
  margin-top: calc(0.25rem * 2.5);
  margin-top: calc(var(--spacing) * 2.5);
  padding: calc(0.25rem * 3) calc(0.25rem * 3.5) !important;
  padding: calc(var(--spacing) * 3) calc(var(--spacing) * 3.5) !important;
  border-radius: 14px !important;
  border-radius: var(--radius-md) !important;
  /* 14 px */
  background: #eceef2 !important;
  background: var(--cfy-card-container) !important;
}

section:has(> div > div:only-child) > div > div:only-child {
  padding: calc(0.25rem * 5) !important;
  padding: calc(var(--spacing) * 5) !important;
  border-radius: 12px !important;
  border-radius: var(--radius-sm) !important;
  background: #eceef2 !important;
  background: var(--cfy-card-container) !important;
  color: #6e6b75;
  color: var(--cfy-muted);
  text-align: center;
}

/* Misc utilities */
form,
div[class*="shadow-lg lg:border-t dark:border-coolgray-300"] {
  border-radius: 12px !important;
  border-radius: var(--radius-sm) !important;
}

:is(.flex.gap-2, .flex.items.center.gap-4, .flex.flex-col.gap-4) > :is(h1, h2, h3, h4) {
  margin-right: auto;
}

section h3[class=pb-2] {
  font-size: 1.6rem;
}

div[class="flex flex-col gap-4 max-w-2xl"] {
  max-width: none !important;
}

input.dark\:bg-coolgray-100:where(.dark, .dark *) {
  padding: calc(0.25rem * 2.75);
  padding: calc(var(--spacing) * 2.75);
  border-radius: 4px !important;
  background-color: #e3e5ea !important;
  background-color: var(--cfy-card) !important;
  transition: background 0.18s;
}

div[class*="flex flex-col gap-2"] {
  gap: calc(0.25rem * 4) !important;
  gap: calc(var(--spacing) * 4) !important;
}

a[class*="hover:underline"]:hover {
  color: #6e6b75 !important;
  color: var(--cfy-muted) !important;
  text-decoration: none !important;
}

/* “Sponsor us” box and similar */
div[class*="p-4 border dark:border-coolgray-300"] {
  margin-top: calc(0.25rem * 4);
  margin-top: calc(var(--spacing) * 4);
  padding: calc(0.25rem * 4) calc(0.25rem * 6);
  padding: calc(var(--spacing) * 4) calc(var(--spacing) * 6);
  border-radius: 12px !important;
  border-radius: var(--radius-sm) !important;
  background: #eceef2 !important;
  background: var(--cfy-card-container) !important;
}

.dark\:hover\:bg-coolgray-100:where(.dark, .dark *):hover {
  background: none !important;
  color: #1f1c23 !important;
  color: var(--cfy-text) !important;
}
}