/* Glass Panel Utility */
.glass-panel {
    background-color: rgba(17, 41, 33, 0.4);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

/* Custom Input Styling */
select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%239ca3af' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
    background-position: right 0.5rem center;
    background-repeat: no-repeat;
    background-size: 1.2em 1.2em;
    padding-right: 2rem;
}

/* Removes up/down arrows from number inputs in modern browsers */
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type=number] {
    -moz-appearance: textfield;
}

/* Custom Scrollbar */
.custom-scrollbar::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

.custom-scrollbar::-webkit-scrollbar-track {
    background: transparent;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
    background: #1E4537;
    border-radius: 10px;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background: #00B894;
}

/* Base Range Slider */
.custom-range {
    -webkit-appearance: none;
    width: 100%;
    background: transparent;
}

.custom-range::-webkit-slider-runnable-track {
    width: 100%;
    height: 6px;
    background: #1E4537;
    border-radius: 3px;
    border: none;
}

.custom-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    border: none;
    height: 16px;
    width: 16px;
    border-radius: 50%;
    background: #00B894;
    cursor: pointer;
    margin-top: -5px;
    box-shadow: 0 0 10px rgba(0, 184, 148, 0.5);
    transition: transform 0.1s;
}

.custom-range:focus {
    outline: none;
}

.custom-range:focus::-webkit-slider-thumb {
    transform: scale(1.2);
}

/* Goal Buttons */
.goal-btn {
    padding: 0.5rem 0.25rem;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #9CA3AF;
    background-color: #0D211A;
    border: 1px solid #1E4537;
    border-radius: 0.5rem;
    transition: all 0.2s;
}

.goal-btn:hover {
    background-color: #112921;
    color: white;
}

.goal-btn.active {
    background-color: rgba(0, 184, 148, 0.1);
    color: #00B894;
    border-color: #00B894;
}

/* Safe area padding for mobile web apps */
.pt-safe {
    padding-top: env(safe-area-inset-top);
}

/* Cycle Switch toggle classes */
#toggle-cycle.active #cycle-switch {
    background-color: #00B894;
}

#toggle-cycle.active #cycle-knob {
    transform: translateX(16px);
    background-color: white;
}

/* --- Print Styles --- */
@media print {
    body {
        background-color: white !important;
        color: black !important;
    }

    .print-hidden {
        display: none !important;
    }

    .glass-panel {
        background-color: transparent !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        border: 1px solid #e5e7eb !important;
        box-shadow: none !important;
    }

    .print-layout {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Force 3 columns on print for macro cards */
    .grid-cols-1.md\:grid-cols-3 {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 1rem !important;
    }

    .text-white {
        color: #111827 !important;
    }

    .text-gray-400,
    .text-gray-500 {
        color: #4b5563 !important;
    }

    .print-footer {
        display: block !important;
    }

    /* Conic gradient chart printed gracefully */
    #macro-chart {
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    .bg-theme-bg,
    .bg-theme-panel,
    .bg-theme-card {
        background-color: white !important;
    }

    #macro-chart-container .absolute.inset-2 {
        background-color: white !important;
    }
}