:root {
  --color-bg-default: #ffffff;
  --color-bg-raised: #ffffff;
  --color-bg-muted: #ededed;
  --color-bg-blurry: #ffffff64;

  --color-primary: #00b9f0;
  --color-primary-hovered: #0069f0;

  --padding-2xs: 2px;
  --padding-xs: 4px;
  --padding-sm: 8px;
  --padding-md: 16px;
  --padding-lg: 24px;
  --padding-xl: 32px;
  --padding-2xl: 40px;
  --padding-3xl: 48px;
  --padding-4xl: 64px;

  --radius-none: 0px;
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 24px;
  --radius-3xl: 32px;
  --radius-full: 9999px;

  --space-2xs: 2px;
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 40px;
  --space-3xl: 48px;
  --space-4xl: 64px;
  --space-5xl: 80px;

  --border-default: 1px solid #ffffff;

  /** Sidebar variables */
  --surface-menu-bar: transparent;
  --sidebar-border-color: transparent;
}

body {
  background:
    radial-gradient(ellipse at 0% 85%, rgba(255, 120, 180, 0.7) 0%, transparent 50%),
    radial-gradient(ellipse at 100% 0%, rgba(255, 190, 130, 0.65) 0%, transparent 50%),
    radial-gradient(ellipse at 0% 0%, rgba(200, 220, 255, 0.5) 0%, transparent 45%),
    #eef2fa;
}

.navbar-container {
  border-bottom-width: 0;
}

.page-container {
  background-color: transparent;
}

.page-head {
  background-color: transparent;
  border-bottom-width: 0;
  backdrop-filter: blur(20px);
}
.page-head .page-head-content {
  height: 65px;
}

.page-body {
  padding: var(--padding-md) !important;
}

.page-wrapper {
  border-radius: var(--radius-xl);
  background-color: var(--color-bg-blurry);
  border: var(--border-default);
  padding: var(--space-md);
}

.page-content {
  background-color: var(--color-bg-default);
  border-radius: var(--radius-xl);
}

.page-form {
  border-top-left-radius: var(--radius-xl);
  border-top-right-radius: var(--radius-xl);
}

.form-page {
  border-top-left-radius: var(--radius-xl);
}

.btn {
  transition: background-color 0.3s ease;
  border-radius: var(--radius-md) !important;
}

.btn.btn-primary {
  background-color: var(--color-primary);
}
.btn.btn-primary:hover,
.btn.btn-primary:active,
.btn.btn-primary:focus {
  background-color: var(--color-primary-hovered) !important;
}

.input-group-btn .btn {
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
  border-top-right-radius: var(--radius-md) !important;
  border-bottom-right-radius: var(--radius-md) !important;
}
.filter-selector .filter-button {
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}
.filter-selector .filter-x-button {
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
}
.sort-selector .btn-order {
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}
.sort-selector .sort-selector-button {
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
}

.primary-action {
  padding-inline: var(--space-md) !important;
}

/* Hidden Elements */
.header-subtitle {
  display: none !important;
}
.about-sidebar-link {
  pointer-events: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
}

/* --- Login View --- */
.for-login .page-card-head {
  margin-bottom: 25px;
}
.for-login .page-card-head .app-logo {
  content: url('/assets/knit_theme/images/knitware-logo.svg');
  width: 100px !important;
  height: auto !important;
  max-height: none !important;
}
.for-login .page-card-head h4 {
  display: none !important;
}


/* --- Dashboard View --- */
.dashboard {
  padding: var(--space-lg);
  margin: 0 !important;
}
.dashboard-graph .widget-group:last-child {
  margin-bottom: 0;
}