.navbar-logo {
  width: 70px;
  height: auto;
  margin-right: -10px;
}

/* Landing page styles */
.landing-page {
  min-height: calc(100vh - 7rem);
  display: flex;
  align-items: center;
  padding: 6rem 0;
  background: linear-gradient(180deg, 
    rgba(var(--bs-primary-rgb), 0.02) 0%,
    rgba(var(--bs-secondary-rgb), 0.02) 100%
  );
}

.landing-page .display-4 {
  font-size: clamp(2.5rem, 5vw, 3.5rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  margin-bottom: 1.25rem;
  color: var(--bs-gray-900);
  line-height: 1.2;
}

.landing-page .lead {
  font-size: clamp(1.125rem, 2vw, 1.25rem);
  color: var(--bs-gray-600);
  margin-bottom: 5rem;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.6;
}

/* Features grid container */
.features-grid {
  --grid-gap: 2rem;
  margin: calc(var(--grid-gap) * -0.5);
}

.features-grid > [class*="col-"] {
  padding: calc(var(--grid-gap) * 0.5);
}

/* Feature cards */
.feature-card {
  background: var(--bs-body-bg);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 1.5rem;
  padding: 2rem;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  position: relative;
  transition: all 0.2s ease-in-out;
}

.feature-card::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: 1.5rem;
  background: linear-gradient(to bottom right, 
    rgba(var(--bs-primary-rgb), 0.1),
    rgba(var(--bs-secondary-rgb), 0.1)
  );
  opacity: 0;
  transition: opacity 0.2s ease-in-out;
  z-index: -1;
}

.feature-card:hover {
  transform: translateY(-2px);
  border-color: rgba(var(--bs-primary-rgb), 0.2);
}

.feature-card:hover::before {
  opacity: 1;
}

/* Feature icons */
.feature-icon {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.feature-icon i {
  font-size: 24px;
}

/* Feature content */
.feature-card h3 {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--bs-gray-900);
  margin-bottom: 1rem;
  line-height: 1.3;
}

.feature-card p {
  font-size: 1rem;
  color: var(--bs-gray-600);
  line-height: 1.6;
  margin: 0;
  flex-grow: 1;
}

/* Call to action buttons */
.landing-buttons {
  margin-top: 5rem;
}

.landing-buttons .btn {
  --btn-padding-x: 2.5rem;
  --btn-padding-y: 0.875rem;
  padding: var(--btn-padding-y) var(--btn-padding-x);
  font-size: 1rem;
  font-weight: 600;
  border-radius: 1rem;
  min-width: 160px;
  transition: all 0.2s ease-in-out;
}

.landing-buttons .btn-primary {
  background: var(--bs-primary);
  border: none;
  box-shadow: 
    0 2px 4px rgba(var(--bs-primary-rgb), 0.1),
    0 4px 12px rgba(var(--bs-primary-rgb), 0.1);
}

.landing-buttons .btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 
    0 4px 8px rgba(var(--bs-primary-rgb), 0.15),
    0 8px 16px rgba(var(--bs-primary-rgb), 0.15);
}

.landing-buttons .btn-outline-secondary {
  border: 2px solid var(--bs-gray-200);
  color: var(--bs-gray-700);
}

.landing-buttons .btn-outline-secondary:hover {
  background: var(--bs-gray-100);
  border-color: var(--bs-gray-300);
  color: var(--bs-gray-900);
}

.landing-buttons .btn i {
  opacity: 0.8;
  margin-right: 0.5rem;
  position: relative;
  top: 1px;
}

/* Preserve existing styles */
ul.socialaccount_providers {
  padding-left: 0px;
}

.socialaccount_providers li {
  list-style: none;
  margin-left: 0px;
  padding-left: 0px;
}

.socialaccount_providers li a.socialaccount_provider.google {
  display: inline-block;
  background-image: url("/static/img/google_sign_in_buttons/btn_google_signin_dark_normal_web@2x.png");
  background-repeat: no-repeat;
  background-size: contain;
  width: 191px;
  height: 46px;
  text-indent: -9999px;
}

.mt-6 {
  margin-top: 7rem;
}

.spell-container {
  /* border: 1px solid #ccc; */ /* Removed - Handled by .spell-iframe now */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  /* padding: 10px; */ /* Removed - Let .spell-iframe handle padding/border */
  /* margin-bottom: 10px; */ /* Removed - Let grid gap handle spacing */
  position: relative;
}

.spell-toggle-container {
  position: absolute;
  top: 10px;
  right: 10px;
}

[data-bs-theme="dark"] .navbar {
  background-color: black;
}

[data-bs-theme="light"] .navbar {
  background-color: white;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Disable Bootstrap's default validation icons (checkmarks/exclamation points) */
.form-control.is-valid, 
.form-select.is-valid {
    /* Remove green checkmark */
    background-image: none !important;
    /* Reset border and shadow to default (remove green) */
    border-color: var(--bs-border-color);
    box-shadow: none;
}

.form-control.is-invalid, 
.form-select.is-invalid {
    /* Only remove exclamation icon, keep red border/shadow */
    background-image: none !important; 
}

/* Optional: Reset text color if Bootstrap makes valid text green */
/* 
.form-control.is-valid, .form-select.is-valid {
    color: var(--bs-body-color);
}
*/

/* == Spell Specific Styles (Potentially Global) == */

/* REMOVED Generic horizontal padding for direct children of spell-content */
/*
.spell-content > * {
    margin-left: 1rem; 
    margin-right: 1rem;
}
*/

/* REMOVED Generic vertical padding for first/last children */
/*
.spell-content > *:first-child {
    margin-top: 1rem; 
}
.spell-content > *:last-child {
    margin-bottom: 1rem; 
}
*/

.metrics-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    margin-bottom: 2rem;
    /* margin-left: 0; */ /* Removed Reset */
    /* margin-right: 0; */ /* Removed Reset */
}

.metric-card {
    background: var(--card-bg);
    padding: 1rem;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    border: 1px solid var(--bs-border-color); /* Default border */
}

[data-bs-theme="dark"] .metric-card {
    border-color: var(--bs-border-color-translucent); /* More visible border in dark mode */
}

.metric-value {
    font-size: 1.5rem;
    font-weight: bold;
    margin: 0.5rem 0;
}

.data-table {
    overflow-x: auto;
    margin-left: 1em;
    margin-right: 1em;
    /* margin-left: 0; */ /* Removed Reset */
    /* margin-right: 0; */ /* Removed Reset */
}

table {
    width: 100%;
    border-collapse: collapse;
}

th, td {
    padding: 0.25rem;
    text-align: left;
    border-bottom: 1px solid var(--border-color);
}

th {
    background: var(--header-bg);
    font-weight: 600;
}

tr:hover {
    background: var(--hover-bg);
}

.spell-content-title {
    font-size: 1.5rem;
    font-weight: 600;
    margin-top: 2em; /* Keep top margin at 0 */
    margin-bottom: 0.5rem; /* Keep default spacing below */
    color: var(--spell-text-color);
}

/* Add specific margins for simple direct children */
.spell-content > hr {
    margin-left: 1rem;
    margin-right: 1rem;
    /* Default vertical margins usually ok */
}

/* Add specific margins for simple direct children */
.spell-content > div {
  margin-left: 1rem;
  margin-right: 1rem;
  margin-top: 1rem;
  /* Default vertical margins usually ok */
}

.spell-content > h2 {
  margin-left: 1rem;
  margin-right: 1rem;
  margin-top: 1.5rem; /* Add space above */
  /* Default bottom margin usually ok */
}

.spell-content > h3 {
  margin-left: 1rem;
  margin-right: 1rem;
  margin-top: 1rem; /* Add space above */
  /* Default bottom margin usually ok */
}

.spell-content > h4 {
  margin-left: 1rem;
  margin-right: 1rem;
  margin-top: 1rem; /* Add space above */
  /* Default bottom margin usually ok */
}
.spell-content > h5 {
    margin-left: 1rem;
    margin-right: 1rem;
    margin-top: 1.5rem; /* Add space above */
    /* Default bottom margin usually ok */
}

.spell-content > form {
    margin-left: 1rem;
    margin-right: 1rem;
    /* Default vertical margins usually ok */
}

.spell-content > pre {
    margin-left: 1rem;
    margin-right: 1rem;
    margin-bottom: 1rem; /* Add space below */
}

/* Customize form focus styles */
.form-control:focus,
.form-select:focus {
    /* Use primary color for border and shadow on focus */
    border-color: var(--bs-primary); 
    box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.25); 
    outline: 0; /* Ensure no default browser outline */
}

/* Ensure invalid fields retain their red glow on focus */
.form-control.is-invalid:focus,
.form-select.is-invalid:focus {
    border-color: var(--bs-danger);
    box-shadow: 0 0 0 0.25rem rgba(var(--bs-danger-rgb), 0.25);
}

/* Ensure explicitly valid fields also use the neutral primary focus style */
.form-control.is-valid:focus,
.form-select.is-valid:focus {
     border-color: var(--bs-primary); /* Match the neutral focus */
     box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.25); /* Match the neutral focus */
}

/* Basic styling for the iframe container */
.spell-iframe {
    border: 1px solid var(--bs-border-color); /* Restore border */
    border-radius: var(--bs-border-radius); /* Optional: match theme rounding */
    /* height: 100%; */ /* Consider removing if aspect-ratio handles it */
}

/* Styles for square spell iframes */
.spell-iframe.is-square {
    aspect-ratio: 1 / 1;
    height: auto; /* Let aspect-ratio determine height based on width */
    overflow: auto; /* Show scrollbars if content exceeds square */
}

/* Task Status Visibility Helpers */
.task-hidden { display: none !important; }
.task-visible { display: block !important; }

/* Attempt to force-hide DjDT handle when body has is-embedded-spell class */
body.is-embedded-spell #djDebugToolbarHandle {
    display: none !important;
    visibility: hidden !important;
}

/* REMOVED - category-badge-7px class */

/* Custom small font size for badges */
.xtra-small {
    font-size: 8px;
}