/* General Styles */
* { font-family: 'Work Sans', sans-serif; }
body { background: linear-gradient(135deg, #0f0f23 0%, #1a1a2e 50%, #16213e 100%); min-height: 100vh; color: #e2e8f0; }
.hidden { display: none; }

/* Layout Components */
.sidebar { background: linear-gradient(180deg, rgba(15, 15, 35, 0.95) 0%, rgba(26, 26, 46, 0.9) 100%); backdrop-filter: blur(20px); border-right: 1px solid rgba(139, 92, 246, 0.2); }
.main-content-area { background: rgba(15, 15, 35, 0.6); }
.header { background: rgba(15, 15, 35, 0.8); backdrop-filter: blur(20px); }

/* Interactive Elements */
.card { background: rgba(26, 26, 46, 0.9); backdrop-filter: blur(20px); border: 1px solid rgba(139, 92, 246, 0.3); border-radius: 20px; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4); transition: all 0.3s ease; }
.card:hover { transform: translateY(-2px); box-shadow: 0 12px 40px rgba(139, 92, 246, 0.2); border-color: rgba(139, 92, 246, 0.5); }

.primary-btn { background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%); border-radius: 12px; transition: all 0.3s ease; box-shadow: 0 4px 15px rgba(139, 92, 246, 0.4); }
.primary-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 25px rgba(139, 92, 246, 0.6); }

.secondary-btn { background: rgba(26, 26, 46, 0.9); border: 2px solid rgba(139, 92, 246, 0.5); border-radius: 12px; color: #a78bfa; transition: all 0.3s ease; }
.secondary-btn:hover { background: rgba(139, 92, 246, 0.1); border-color: rgba(139, 92, 246, 0.8); color: #c4b5fd; transform: translateY(-1px); }

.danger-btn { background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%); border-radius: 12px; transition: all 0.3s ease; box-shadow: 0 4px 15px rgba(239, 68, 68, 0.4); }
.danger-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 25px rgba(239, 68, 68, 0.6); }

/* Navigation */
.nav-item { border-radius: 12px; transition: all 0.3s ease; margin: 4px 0; }
.nav-item:hover { background: rgba(139, 92, 246, 0.2); transform: translateX(4px); }
.nav-item.active { background: rgba(139, 92, 246, 0.3); box-shadow: 0 4px 15px rgba(139, 92, 246, 0.2); }
.back-link { color: #a78bfa; text-decoration: none; transition: color 0.3s ease; }
.back-link:hover { color: #c4b5fd; }

/* Forms & Inputs */
.form-input { background: rgba(26, 26, 46, 0.9); border: 1px solid rgba(139, 92, 246, 0.3); border-radius: 8px; color: #e2e8f0; padding: 12px 16px; width: 100%; transition: border-color 0.3s ease; }
.form-input:focus { outline: none; border-color: rgba(139, 92, 246, 0.8); }
.toggle-switch { position: relative; display: inline-block; width: 50px; height: 24px; }
.toggle-switch input { opacity: 0; width: 0; height: 0; }
.slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #4b5563; transition: .4s; border-radius: 24px; }
.slider:before { position: absolute; content: ""; height: 18px; width: 18px; left: 3px; bottom: 3px; background-color: white; transition: .4s; border-radius: 50%; }
input:checked + .slider { background-color: #8b5cf6; }
input:checked + .slider:before { transform: translateX(26px); }

/* Modals */
.modal { background: rgba(0, 0, 0, 0.8); backdrop-filter: blur(10px); }
.modal-content { background: rgba(26, 26, 46, 0.95); backdrop-filter: blur(20px); border: 1px solid rgba(139, 92, 246, 0.3); }

/* Specific Component Styles */
.glass-effect { background: rgba(15, 15, 35, 0.8); backdrop-filter: blur(20px); border: 1px solid rgba(139, 92, 246, 0.2); }
.bottle-card { background: rgba(26, 26, 46, 0.8); border: 1px solid rgba(139, 92, 246, 0.2); border-radius: 16px; transition: all 0.3s ease; }
.bottle-card:hover { box-shadow: 0 8px 20px rgba(139, 92, 246, 0.3); border-color: rgba(139, 92, 246, 0.5); }
.verified-badge { background: linear-gradient(135deg, #10b981 0%, #059669 100%); color: white; border-radius: 8px; padding: 4px 8px; font-size: 0.75rem; font-weight: 600; }
.tag-pill { background: linear-gradient(135deg, rgba(139, 92, 246, 0.2) 0%, rgba(124, 58, 237, 0.2) 100%); border: 1px solid rgba(139, 92, 246, 0.4); color: #c4b5fd; border-radius: 25px; padding: 4px 12px; font-size: 0.75rem; font-weight: 500; }

/* Custom Checkbox for My Bottles View */
.custom-checkbox input { display: none; }
.custom-checkbox .checkmark {
    width: 20px; height: 20px; border: 2px solid #6b7280; border-radius: 4px;
    display: inline-block; position: relative; cursor: pointer;
}
.custom-checkbox input:checked + .checkmark { background-color: #8b5cf6; border-color: #8b5cf6; }
.custom-checkbox input:checked + .checkmark:after {
    content: ""; position: absolute; left: 6px; top: 2px;
    width: 5px; height: 10px; border: solid white;
    border-width: 0 3px 3px 0; transform: rotate(45deg);
}

/* -----------------------------------------------------------------------
   Authentication Forms
   -----------------------------------------------------------------------
   The dashboard uses light-on-dark inputs, but the login / sign-up screens
   live on a plain background where dark text is expected.  Those pages
   are wrapped in `.auth-form`, so we scope an override to that container
   to force darker text (and placeholder) colours.
----------------------------------------------------------------------- */
.auth-form .form-input,
.auth-form .form-input[type="text"],
.auth-form .form-input[type="email"],
.auth-form .form-input[type="password"] {
  /* Force solid black text in auth inputs for maximum readability */
  color: #000000 !important;
}

.auth-form .form-input::placeholder {
  color: #6b7280;              /* gray-600 placeholder */
}

/* -----------------------------------------------------------------------
   Explicit Login-form overrides
   -----------------------------------------------------------------------
   Some legacy login views use `.login-form` & `.input` classes (rather than
   the newer `.auth-form .form-input` convention).  Those inputs need the
   same light-background / dark-text treatment so they remain readable.
----------------------------------------------------------------------- */
.login-form .input,
.login-container input,
.login-container .input {
  color: #000000 !important;          /* force black text */
}

.login-form .input::placeholder,
.login-container input::placeholder,
.login-container .input::placeholder {
  color: #6b7280 !important;          /* consistent grey placeholder */
}