/* Wishlister Custom Styles */

/* Theme variables */
:root {
    --bg-color: #ffffff;
    --text-color: #363636;
    --secondary-bg: #f5f5f5;
    --border-color: #dbdbdb;
    --muted-color: #6c757d;
}

[data-theme="dark"] {
    --bg-color: #212529;
    --text-color: #f8f9fa;
    --secondary-bg: #343a40;
    --border-color: #4a5568;
    --muted-color: #a0aec0;
}

/* Base theming */
body {
    background-color: var(--bg-color);
    color: var(--text-color);
}

/* Layout spacing */
main.container {
    margin-top: 2rem;
    margin-bottom: 3rem;
    padding-bottom: 1rem;
}

@media (max-width: 767.98px) {
    main.container {
        margin-top: 1.5rem;
        margin-bottom: 2rem;
        padding-bottom: 1.5rem;
    }
    
    body {
        padding-bottom: env(safe-area-inset-bottom, 1rem);
    }
}

/* Theme toggle button */
#theme-toggle {
    min-width: 44px;
    min-height: 44px;
    border-radius: 0.375rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

#theme-toggle:hover {
    background-color: var(--secondary-bg);
}

/* Component theming */
.box, .card {
    background-color: var(--bg-color);
    border-color: var(--border-color);
}

.card-header {
    background-color: var(--secondary-bg);
    border-color: var(--border-color);
}

.navbar {
    background-color: var(--secondary-bg);
}

[data-theme="dark"] .navbar-brand, 
[data-theme="dark"] .navbar-item, 
[data-theme="dark"] .navbar-link {
    color: var(--text-color);
}

.input, .textarea, .select select {
    background-color: var(--bg-color);
    border-color: var(--border-color);
    color: var(--text-color);
}

.has-text-grey {
    color: var(--muted-color);
}

/* Checkbox and radio inputs */
.checkbox input[type="checkbox"], 
.radio input[type="radio"] {
    background-color: var(--bg-color);
    border-color: var(--border-color);
}

/* Delete modal theming */
[data-theme="light"] .card-header.has-background-danger .card-header-title {
    color: #363636;
}

[data-theme="dark"] .card-header.has-background-danger .card-header-title {
    color: #fff;
}