/* Chat Mercato Dashboard Theme */

/* Sidebar background */
#sidebar .sidebar-wrapper {
    background: rgba(30,41,59,0.98) !important; /* Deep blue-gray with slight transparency */
    box-shadow: 0 6px 24px 0 #0e74902a;
    border-right: 1.5px solid rgba(255,255,255,0.08);
}

/* Navbar header background */
.navbar-header {
    background: linear-gradient(90deg, #00e0d3 5%, #1e293b 80%) !important; /* Subtle cyan to blue gradient */
    box-shadow: 0 2px 12px rgba(0,0,0,0.07);
}

/* Sidebar header (top area of sidebar) */
#sidebar .sidebar-wrapper .sidebar-header {
    background: linear-gradient(90deg, #00e0d3 0%, #60a5fa 100%);
    color: #fff;
    font-family: 'Inter', sans-serif;
    font-weight: 800;
    letter-spacing: 0.03em;
    border-bottom: 1.5px solid rgba(255,255,255,0.09);
    box-shadow: 0 3px 10px #00e0d311;
}

/* Sidebar items (menu text) */
.sidebar-item a span {
    color: #e0f2fe !important; /* Light cyan/white */
    font-weight: 700;
    letter-spacing: 0.01em;
    font-family: 'Inter', sans-serif;
    transition: color 0.2s;
}
.sidebar-item a:hover span,
.sidebar-item.active a span {
    color: #38bdf8 !important; /* Vibrant cyan for active/hover */
    text-shadow: 0 0 6px #38bdf855;
}

/* Optional: Add glassmorphism feel to cards inside dashboard */
.dashboard-card, .content-card {
    background: rgba(255,255,255,0.07);
    backdrop-filter: blur(7px);
    border-radius: 1.25rem;
    box-shadow: 0 4px 20px 0 rgba(0,0,0,0.10);
    border: 1.2px solid rgba(255,255,255,0.13);
}

/* Optional: Neon/cyan accent border for important cards */
.dashboard-card.featured, .content-card.featured {
    box-shadow: 0 0 0 2px #00e0d3, 0 0 14px #60a5fa66;
    border: 1.5px solid #00e0d3;
}

/* Button style for dashboard */
.btn-primary, .dashboard-btn {
    background: linear-gradient(90deg, #00e0d3 40%, #60a5fa 100%);
    color: #fff !important;
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    border-radius: 2em;
    border: none;
    box-shadow: 0 3px 14px #60a5fa44;
    transition: background 0.2s, box-shadow 0.2s;
}
.btn-primary:hover, .dashboard-btn:hover {
    background: linear-gradient(90deg, #60a5fa 10%, #00e0d3 90%);
    box-shadow: 0 6px 22px #60a5fa77;
    color: #ffd700 !important; /* Optional gold/cyan hover highlight */
}
/* 1) Lighten all form field labels */
label,
.form-label {
  color: #94a3b8 !important;  /* light grey-blue */
}

/* 2) Make every input (even icon-only ones) use the translucent white background */
.input-group .form-control,
.input-group-text {
  background: rgba(255, 255, 255, 0.15) !important;
  color: #e0f2fe !important;
}

/* 3) Placeholder text stays legible */
input::placeholder,
textarea::placeholder {
  color: #94a3b8 !important;
  opacity: 1;
}

/* 4) Tweak the icon-only fields so their lock/user/phone icons pop */
.input-group-text {
  border: none;
  padding: 0.75rem 1rem;
  font-size: 1.1rem;
}

/* 5) Keep focus ring consistent */
.form-control:focus {
  background: rgba(255, 255, 255, 0.2) !important;
  box-shadow: 0 0 0 0.2rem rgba(0,224,211,0.5) !important;
  outline: none;
}