/* V1 Custom Styles */

:root {
  --primary: #d32f2f; /* Red accent */
  --primary-hover: #b71c1c;
  --primary-focus: rgba(211, 47, 47, 0.125);
  --primary-inverse: #FFF;
  --secondary: #e0e0e0;
  --secondary-hover: #bdbdbd;
  --secondary-focus: rgba(224, 224, 224, 0.125);
  --secondary-inverse: #212121;
}

[data-theme="dark"] {
  --background-color: #121212;
  --card-background-color: #1e1e1e;
  --h1-color: #f5f5f5;
  --h2-color: #f5f5f5;
  --h3-color: #f5f5f5;
  --h4-color: #f5f5f5;
  --h5-color: #f5f5f5;
  --h6-color: #f5f5f5;
  --p-color: #e0e0e0;
  --a-color: var(--primary);
  --color: #e0e0e0;
  --form-element-background-color: #1e1e1e;
  --form-element-border-color: #424242;
  --form-element-color: #e0e0e0;
  --form-element-placeholder-color: #757575;
  --card-border-color: #424242;
}

#gearlists-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--spacing);
}

#gearlists-container a[role="button"] {
    margin-bottom: 0; /* Reset previous margin */
}

.gearlist-items-textarea {
    min-height: 300px;
    height: 60vh;
}

#gearlist-items label {
    display: block;
    background-color: var(--card-background-color);
    padding: var(--spacing);
    border-radius: var(--border-radius);
    margin-bottom: var(--spacing);
    font-size: 1.1rem;
    border: 1px solid var(--card-border-color);
}

#gearlist-items label.checked {
    opacity: 0.5;
}

#gearlist-progress {
    padding-bottom: var(--spacing);
    padding-top: calc(var(--spacing) / 2);
}

@media (min-width: 992px) { /* Desktop breakpoint for Pico.css */
    #gearlist-template .grid {
        grid-template-columns: 1fr auto auto; /* Title, Progress, Buttons */
        align-items: center;
    }
    #gearlist-progress {
        order: 2; /* Move progress after title */
        padding-top: 0;
        padding-bottom: 0;
        text-align: center;
    }
    #gearlist-template .grid div:last-child { /* Buttons container */
        order: 3;
    text-align: right;
    }
}

.gearlist-category {
    margin-top: var(--spacing);
    margin-bottom: calc(var(--spacing) / 2);
    padding-left: var(--spacing); /* Indent categories */
    font-weight: bold;
    color: var(--primary); /* Use primary color for categories */
}