/* Custom Styles for Keys 1.0 Packaging Tool */

:root {
    --primary-color: #2563eb; /* blue-600 */
    --primary-hover: #1d4ed8; /* blue-700 */
    --bg-light: #f3f4f6;
    --border-color: #e5e7eb;
    --panel-bg: rgba(255, 255, 255, 0.85);
    --panel-border: rgba(255, 255, 255, 0.4);
}

/* Base resets & fonts */
body {
    font-family: 'Outfit', 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* Glassmorphism Panel styles */
.glass-panel {
    background: var(--panel-bg);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid var(--panel-border);
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.05);
}

/* Scrollbar customizations */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

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

::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.15);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.25);
}

/* Drag Over Animation for Uploader Dropzone */
#drop-zone.dragover {
    background-color: rgba(254, 226, 226, 0.4); /* red-50/40 */
    border-color: var(--primary-color);
    transform: scale(0.98);
}

/* Slider custom styles */
input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    background: #e5e7eb;
    height: 4px;
    border-radius: 2px;
    outline: none;
}

input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--primary-color);
    cursor: pointer;
    transition: transform 0.1s ease;
}

input[type="range"]::-webkit-slider-thumb:hover {
    transform: scale(1.2);
}

input[type="range"]:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

input[type="range"]:disabled::-webkit-slider-thumb {
    background: #9ca3af;
    cursor: not-allowed;
}

/* Custom Animation for Loading Status */
@keyframes status-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

.status-anim-pulse {
    animation: status-pulse 2s infinite ease-in-out;
}

/* Dropdown styling updates */
select {
    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='%236b7280' 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.5em 1.5em;
    padding-right: 2rem;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

/* Texture card hover state */
.texture-card {
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.texture-card:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* ==========================================================================
   Night Mode (Dark Theme) Style Overrides
   ========================================================================== */
body.dark {
    background-color: #0f172a;
    color: #f1f5f9;
}

body.dark header {
    background-color: #1e293b !important;
    border-color: #334155 !important;
}

body.dark header span {
    color: #f1f5f9 !important;
}

body.dark header button {
    background-color: #1e293b !important;
    color: #cbd5e1 !important;
    border-color: #334155 !important;
}

body.dark header button:hover {
    background-color: #334155 !important;
    color: #f1f5f9 !important;
}

body.dark main {
    background-color: #0f172a !important;
}

body.dark .border-l,
body.dark .border-r,
body.dark .border-t,
body.dark .border-b,
body.dark .border-gray-100,
body.dark .border-gray-200,
body.dark .divide-y > * {
    border-color: #334155 !important;
}

body.dark #right-content-panel {
    background-color: #1e293b !important;
}

body.dark #right-content-panel > div {
    background-color: #1e293b !important;
}

body.dark .bg-white {
    background-color: #1e293b !important;
}

body.dark .bg-gray-50 {
    background-color: #0f172a !important;
}

body.dark .bg-gray-100 {
    background-color: #334155 !important;
}

body.dark #right-tabs-sidebar {
    background-color: #111827 !important;
}

body.dark .text-gray-900 {
    color: #f1f5f9 !important;
}

body.dark .text-gray-800 {
    color: #e2e8f0 !important;
}

body.dark .text-gray-700 {
    color: #cbd5e1 !important;
}

body.dark .text-gray-500 {
    color: #94a3b8 !important;
}

body.dark .text-gray-400 {
    color: #64748b !important;
}

body.dark input[type="text"],
body.dark input[type="number"],
body.dark select {
    background-color: #0f172a !important;
    color: #f1f5f9 !important;
    border-color: #334155 !important;
}

body.dark input:disabled {
    background-color: #1e293b !important;
    color: #475569 !important;
    border-color: #334155 !important;
}

body.dark .glass-panel {
    background: rgba(30, 41, 59, 0.7) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    color: #f1f5f9 !important;
}

body.dark .glass-panel span {
    color: #e2e8f0 !important;
}

body.dark .glass-panel button {
    background-color: rgba(15, 23, 42, 0.6) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    color: #cbd5e1 !important;
}

body.dark .glass-panel button:hover {
    background-color: rgba(15, 23, 42, 0.9) !important;
    color: #f1f5f9 !important;
}

body.dark footer {
    background-color: #1e293b !important;
    border-color: #334155 !important;
    color: #64748b !important;
}

body.dark #dim-summary {
    background-color: #0f172a !important;
    border-color: #334155 !important;
}

body.dark #btn-toggle-unit {
    background-color: #2563eb !important;
    color: #ffffff !important;
}

body.dark #btn-toggle-unit:hover {
    background-color: #1d4ed8 !important;
}

body.dark #tab-auto.bg-white {
    background-color: #334155 !important;
    color: #60a5fa !important;
}

body.dark #tab-manual.bg-white {
    background-color: #334155 !important;
    color: #60a5fa !important;
}

body.dark #btn-tab-upload.bg-blue-50,
body.dark #btn-tab-print.bg-blue-50,
body.dark #btn-tab-craft.bg-blue-50 {
    background-color: rgba(30, 58, 138, 0.3) !important;
    color: #60a5fa !important;
    border-color: rgba(30, 58, 138, 0.6) !important;
}

body.dark #btn-tab-upload:not(.bg-blue-50):hover,
body.dark #btn-tab-print:not(.bg-blue-50):hover,
body.dark #btn-tab-craft:not(.bg-blue-50):hover {
    background-color: #334155 !important;
}

body.dark #print-drop-zone,
body.dark #craft-drop-zone {
    background-color: #0f172a !important;
    border-color: #475569 !important;
}

body.dark #print-drop-zone:hover {
    border-color: #3b82f6 !important;
}

body.dark #craft-drop-zone:hover {
    border-color: #a855f7 !important;
}

body.dark #print-previews > div,
body.dark #craft-previews > div {
    background-color: #0f172a !important;
    border-color: #334155 !important;
}

body.dark .bg-blue-50\/50 {
    background-color: rgba(30, 58, 138, 0.1) !important;
    border-color: rgba(30, 58, 138, 0.3) !important;
}

body.dark .text-blue-900 {
    color: #93c5fd !important;
}

body.dark .text-blue-700 {
    color: #60a5fa !important;
}

body.dark .bg-blue-100 {
    background-color: rgba(30, 58, 138, 0.4) !important;
    color: #60a5fa !important;
}

body.dark .bg-purple-50 {
    background-color: rgba(88, 28, 135, 0.2) !important;
    border-color: rgba(88, 28, 135, 0.4) !important;
    color: #c084fc !important;
}

body.dark .bg-purple-50:hover {
    background-color: rgba(88, 28, 135, 0.3) !important;
}

body.dark .text-purple-600 {
    color: #c084fc !important;
}

body.dark .bg-blue-50 {
    background-color: rgba(30, 58, 138, 0.2) !important;
    border-color: rgba(30, 58, 138, 0.4) !important;
    color: #60a5fa !important;
}

body.dark .bg-blue-50:hover {
    background-color: rgba(30, 58, 138, 0.3) !important;
}

body.dark .peer-checked\:bg-blue-600:checked + div {
    background-color: #2563eb !important;
}

body.dark .bg-gray-200 {
    background-color: #334155 !important;
}