/* Minimal custom styles on top of Tailwind */
/* Brand: Wings Beauty Space — Key Visual palette */

:root {
    /* Backgrounds */
    --wl-bg-page:    #F3F2F1;   /* bardzo jasna szarość */
    --wl-bg-surface: #FFFFFF;
    --wl-bg-soft:    #E9E4DC;   /* beż tło-akcent */
    --wl-bg-cream:   #F8F5F1;   /* kremowe tło formularzy */

    /* Brand neutrals (skala ciemna → jasna) */
    --wl-black:      #1F1F1E;
    --wl-dark:       #343332;
    --wl-mid-dark:   #525251;
    --wl-mid:        #72706E;
    --wl-mid-light:  #928F8C;
    --wl-light:      #BAB8B5;
    --wl-soft:       #E5E3E1;

    /* Accent – ciepły beż / taupe */
    --wl-accent:     #897B6C;
    --wl-accent-dark:#483D32;
    --wl-accent-light:#BCAF9F;

    /* CTA / promo – ceglasty */
    --wl-cta:        #D2451E;
    --wl-cta-light:  #FEF0EC;

    /* Semantic */
    --wl-success:    #1E8955;
    --wl-success-bg: #EBFFF5;
    --wl-error:      #C02A32;
    --wl-error-bg:   #FFEBEC;

    /* Legacy aliases (used below) */
    --wl-gold:       var(--wl-cta);
    --wl-gold-dark:  #B53A18;
    --wl-gold-muted: #973015;
    --wl-text-main:  var(--wl-black);
    --wl-text-soft:  var(--wl-accent-light);
    --wl-border:     var(--wl-soft);

    /* Typography scale */
    --wl-font:       'Inter Tight', system-ui, sans-serif;
    --wl-fw-regular: 400;
    --wl-fw-medium:  500;
    --wl-fw-semi:    600;
}

body {
    color: var(--wl-black);
    background-color: var(--wl-bg-page);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    font-family: 'Inter Tight', system-ui, sans-serif;
    font-weight: 400;
}

button,
input,
select,
textarea {
    font-family: inherit;
    font-weight: 500;
}

h1, h2, h3 {
    letter-spacing: -0.02em;
    font-weight: 600;
}

h4, h5, h6 {
    font-weight: 500;
    letter-spacing: -0.01em;
}

.bg-gray-50 {
    background-color: var(--wl-bg-page) !important;
    background-image: none;
}

.bg-gray-50 {
    color: var(--wl-black);
}

.bg-white { background-color: var(--wl-bg-surface) !important; }
.bg-gray-100 { background-color: var(--wl-bg-soft) !important; }

/* Form inputs */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="datetime-local"],
input[type="date"],
select,
textarea {
    padding: 0.68rem 0.9rem;
    border: 1px solid var(--wl-soft);
    border-radius: 0.5rem;
    font-size: 0.95rem;
    line-height: 1.4;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    width: 100%;
    background-color: var(--wl-bg-surface);
    color: var(--wl-black);
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="datetime-local"],
input[type="date"],
select {
    min-height: 3rem;
}

select {
    min-height: 3rem;
    padding: 0.65rem 2.4rem 0.65rem 0.9rem;
    font-size: 0.95rem;
    line-height: 1.35;
    border-color: var(--wl-soft);
    background-color: var(--wl-bg-surface);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M5.25 7.5L10 12.25L14.75 7.5' stroke='%23897B6C' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 1.05rem;
    appearance: none;
}

select:hover {
    border-color: #d6c3a0;
}

select option {
    font-size: 0.95rem;
}

/* Product selectors: more breathing room from borders */
select[name="product"],
select[name$="-product"],
#id_product {
    min-height: 3.15rem;
    padding: 0.75rem 2.65rem 0.75rem 1rem;
}

/* Other common fields: same comfortable spacing */
select[name="worker"],
select[name$="-worker"],
#id_worker,
input[name="quantity"],
input[name$="-quantity"],
#id_quantity,
input[name="sale_date"],
input[name$="-sale_date"],
#id_sale_date {
    min-height: 3.1rem;
    padding-top: 0.72rem;
    padding-bottom: 0.72rem;
}

@media (max-width: 640px) {
    #multi-sale-form input[type="number"],
    #multi-sale-form input[type="date"],
    #multi-sale-form select {
        font-size: 16px;
    }
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
input[type="datetime-local"]:focus,
select:focus,
textarea:focus {
    outline: none;
    border-color: var(--wl-accent);
    box-shadow: 0 0 0 3px rgba(137, 123, 108, 0.18);
}

/* Scrollbar styling */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--wl-soft); }
::-webkit-scrollbar-thumb { background: var(--wl-light); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--wl-mid-light); }

/* ====== BRAND PALETTE OVERRIDES ====== */

/* --- Gray scale → warm neutrals (global, all elements) --- */
.text-gray-900 { color: var(--wl-black) !important; }
.text-gray-800 { color: var(--wl-black) !important; }
.text-gray-700 { color: var(--wl-mid-dark) !important; }
.text-gray-600 { color: var(--wl-mid) !important; }
.text-gray-500 { color: var(--wl-mid-light) !important; }
.text-gray-400 { color: var(--wl-light) !important; }
.text-gray-300 { color: var(--wl-soft) !important; }

.bg-gray-200 { background-color: var(--wl-soft) !important; }
.bg-gray-300 { background-color: #d5d2cf !important; }

.border-gray-300,
.ring-gray-300 { border-color: var(--wl-soft) !important; }
.hover\:bg-gray-200:hover { background-color: #d5d2cf !important; }
.hover\:bg-gray-50:hover { background-color: var(--wl-bg-page) !important; }

/* --- Indigo / Blue → brand accent-dark (primary actions) --- */
.bg-indigo-50,
.bg-indigo-50\/40 { background-color: var(--wl-bg-cream) !important; }
.bg-indigo-100 { background-color: var(--wl-bg-soft) !important; }
.bg-indigo-400 { background-color: var(--wl-accent) !important; }

.bg-indigo-500,
.bg-indigo-600,
.bg-blue-500,
.bg-blue-600 {
    background-color: var(--wl-accent-dark) !important;
    background-image: linear-gradient(135deg, #5a4e42 0%, #483D32 100%) !important;
    color: #FFFFFF !important;
    box-shadow: 0 3px 10px rgba(72, 61, 50, 0.25);
    transition: background-color 0.2s ease, background-image 0.2s ease;
}

.hover\:bg-indigo-500:hover,
.hover\:bg-blue-700:hover {
    background-color: var(--wl-dark) !important;
    background-image: linear-gradient(135deg, #483D32 0%, #3a3028 100%) !important;
}

.text-indigo-200 { color: var(--wl-accent-light) !important; }
.text-indigo-500,
.text-indigo-600,
.text-blue-600 { color: var(--wl-accent-dark) !important; }

.text-indigo-700,
.text-blue-700,
.hover\:text-indigo-500:hover,
.hover\:text-indigo-800:hover { color: var(--wl-accent) !important; }

.from-indigo-500,
.from-indigo-600 {
    --tw-gradient-from: var(--wl-dark) var(--tw-gradient-from-position) !important;
    --tw-gradient-to: rgb(52 51 50 / 0) var(--tw-gradient-to-position) !important;
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}

.to-indigo-600 { --tw-gradient-to: var(--wl-dark) var(--tw-gradient-to-position) !important; }
.to-indigo-800 { --tw-gradient-to: var(--wl-black) var(--tw-gradient-to-position) !important; }

.border-indigo-500,
.focus\:border-indigo-500:focus,
.border-indigo-500\/30 { border-color: var(--wl-soft) !important; }

.ring-indigo-300,
.ring-indigo-400,
.focus\:ring-indigo-400:focus { --tw-ring-color: rgba(137, 123, 108, 0.30) !important; }
.ring-indigo-500,
.focus\:ring-indigo-500:focus,
.focus-visible\:outline-indigo-600:focus-visible {
    --tw-ring-color: rgba(137, 123, 108, 0.22) !important;
    outline-color: var(--wl-accent) !important;
}

.hover\:bg-indigo-700\/50:hover { background-color: rgba(137, 123, 108, 0.14) !important; }

.font-semibold.text-indigo-600,
a.text-indigo-600 {
    text-decoration-thickness: 1px;
    text-underline-offset: 0.18em;
}
a.text-indigo-600:hover,
.text-indigo-600.hover\:text-indigo-500:hover { color: var(--wl-accent) !important; }

/* --- Semantic: Red (errors, destructive) — keep red tones --- */
.bg-red-50  { background-color: var(--wl-error-bg) !important; }
.bg-red-100 { background-color: var(--wl-error-bg) !important; }
.bg-red-600,
.bg-red-700 {
    background-color: var(--wl-error) !important;
    background-image: linear-gradient(135deg, #d0353d 0%, #a82229 100%) !important;
    color: #FFFFFF !important;
    box-shadow: 0 3px 10px rgba(192, 42, 50, 0.25);
    transition: background-color 0.2s ease, background-image 0.2s ease;
}
.hover\:bg-red-700:hover,
.hover\:bg-red-500:hover {
    background-color: #a82229 !important;
    background-image: linear-gradient(135deg, #a82229 0%, #8f1c22 100%) !important;
}
.text-red-400 { color: #e57373 !important; }
.text-red-600 { color: var(--wl-error) !important; }
.text-red-700 { color: #a82229 !important; }
.text-red-800 { color: #8f1c22 !important; }
.hover\:text-red-800:hover { color: #8f1c22 !important; }
.ring-red-200,
.ring-red-200\/50 { border-color: #f5c6c8 !important; --tw-ring-color: rgba(192, 42, 50, 0.15) !important; }
.focus\:ring-red-500:focus { --tw-ring-color: rgba(192, 42, 50, 0.25) !important; }

/* --- Semantic: Green (success) — keep green tones --- */
.bg-green-50  { background-color: var(--wl-success-bg) !important; }
.bg-green-100 { background-color: var(--wl-success-bg) !important; }
.bg-green-400 { background-color: #4ead6e !important; }
.bg-green-500,
.bg-green-600 {
    background-color: var(--wl-success) !important;
    background-image: none !important;
    color: #FFFFFF !important;
    box-shadow: 0 3px 10px rgba(30, 137, 85, 0.22);
}
.hover\:bg-green-700:hover {
    background-color: #18704a !important;
    background-image: none !important;
}
.text-green-500 { color: #4ead6e !important; }
.text-green-600 { color: var(--wl-success) !important; }
.text-green-700 { color: #18704a !important; }
.text-green-800 { color: #125a3a !important; }
.ring-green-200,
.ring-green-200\/50,
.ring-green-300 { border-color: #b8e6ce !important; --tw-ring-color: rgba(30, 137, 85, 0.15) !important; }
.focus\:ring-green-500:focus { --tw-ring-color: rgba(30, 137, 85, 0.25) !important; }

/* --- Semantic: Yellow / Amber (warnings) — keep warm amber --- */
.bg-yellow-50,
.bg-yellow-100,
.bg-amber-100 { background-color: #FFF8EC !important; }
.text-yellow-700 { color: #92610a !important; }
.text-yellow-800,
.text-amber-800 { color: #7a500a !important; }
.text-yellow-900,
.text-amber-700 { color: #5f3d07 !important; }
.ring-yellow-200,
.ring-yellow-200\/50 { border-color: #f5e0b0 !important; --tw-ring-color: rgba(146, 97, 10, 0.15) !important; }
.border-yellow-400 { border-color: #e6c56a !important; }

/* --- Semantic: Purple (status badges) --- */
.bg-purple-100 { background-color: #f3eff8 !important; }
.text-purple-700 { color: #6b4d8a !important; }
.text-purple-800 { color: #553c70 !important; }

/* --- Semantic: Orange / Blue tinted (info badges) --- */
.bg-blue-50,
.bg-blue-100 { background-color: #f0f3f8 !important; }
.bg-orange-100 { background-color: #FFF5EC !important; }
.text-orange-700 { color: #a85a20 !important; }
.ring-blue-200,
.ring-blue-200\/50 { border-color: #d0dae8 !important; --tw-ring-color: rgba(80, 110, 160, 0.15) !important; }
.focus\:ring-blue-500:focus { --tw-ring-color: rgba(80, 110, 160, 0.25) !important; }

/* --- Neutral borders/rings/dividers --- */
.ring-gray-200,
.border-gray-200,
.divide-gray-200 > :not([hidden]) ~ :not([hidden]) { border-color: var(--wl-soft) !important; }

/* --- Cards & surfaces --- */
.bg-gray-50 .bg-white {
    border: 1px solid var(--wl-soft);
    box-shadow: 0 1px 4px rgba(31, 31, 30, 0.06) !important;
}

.rounded-xl,
.rounded-lg {
    transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.bg-gray-50 .bg-white:hover {
    box-shadow: 0 4px 14px rgba(31, 31, 30, 0.09) !important;
}

thead.bg-gray-50,
thead.bg-gray-100 {
    background-color: var(--wl-bg-soft) !important;
}

button:disabled,
.cursor-not-allowed {
    opacity: 0.85;
}

/* Avatar – brand dark gradient */
.wl-avatar {
    background: linear-gradient(135deg, #525251 0%, #1F1F1E 100%);
    box-shadow: 0 2px 6px rgba(31, 31, 30, 0.28);
}

/* Logo sidebar – PNG z przezroczystym tłem, dostosowane do ciemnego sidebara */
.wl-logo-sidebar {
    display: block;
    opacity: 1;
    image-rendering: auto;
    -webkit-backface-visibility: visible;
    backface-visibility: visible;
}

/* Logout button */
.wl-logout {
    color: var(--wl-error) !important;
}
.wl-logout:hover {
    background-color: var(--wl-error-bg) !important;
    color: var(--wl-error) !important;
}

/* Sidebar styling */
#app-sidebar {
    background: linear-gradient(180deg, #343332 0%, #1F1F1E 100%) !important;
}

#app-sidebar .border-indigo-500\/30 { border-color: rgba(188, 175, 159, 0.25) !important; }

#app-sidebar .text-xs.font-semibold {
    color: var(--wl-accent) !important;
    letter-spacing: 0.08em;
    font-weight: 600;
    font-size: 0.7rem;
}

#app-sidebar nav a {
    color: var(--wl-accent-light) !important;
    border: 1px solid transparent;
    font-weight: 500;
}

#app-sidebar nav a svg {
    color: var(--wl-accent-light) !important;
    transition: color 0.2s ease;
}

#app-sidebar nav a:hover {
    background-color: rgba(188, 175, 159, 0.13) !important;
    border-color: rgba(188, 175, 159, 0.28) !important;
    color: #FFFFFF !important;
}

#app-sidebar nav a:hover svg { color: #FFFFFF !important; }

#app-sidebar .text-indigo-200,
#app-sidebar button.text-indigo-200 { color: var(--wl-accent-light) !important; }

/* Points progress bar animation */
.wl-progress-bar {
    background-color: var(--wl-success) !important;
    background-image: none !important;
    box-shadow: none !important;
    transform-origin: left;
    animation: wl-progress-fill 0.7s cubic-bezier(0.4, 0, 0.2, 1) both;
}
@keyframes wl-progress-fill {
    from { transform: scaleX(0); }
    to   { transform: scaleX(1); }
}

#app-sidebar button.text-indigo-200:hover { color: #FFFFFF !important; }