/* ============================================
   DarChat Customer Dashboard Shell
   Light-mode redesign layer for customer apps.
   This file intentionally styles only the UI
   surface and does not change behavior.
   ============================================ */

body.customer-app {
    font-family: "Space Grotesk", "Segoe UI", sans-serif;
    background:
        radial-gradient(circle at top left, rgba(148, 163, 184, 0.12), transparent 32%),
        radial-gradient(circle at top right, rgba(203, 213, 225, 0.38), transparent 28%),
        linear-gradient(180deg, #fbfcfe 0%, #f5f7fb 46%, #edf2f7 100%);
    color: #0f172a;
}

body.customer-app::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(90deg, rgba(255, 255, 255, 0.28), transparent 18%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.35), transparent 22%);
    z-index: 0;
}

body.customer-app > * {
    position: relative;
    z-index: 1;
}

body.customer-app #dashboardSection {
    background: transparent;
}

body.customer-app #sidebar.sidebar {
    background: rgba(255, 255, 255, 0.88) !important;
    color: #0f172a !important;
    border-right: 1px solid rgba(226, 232, 240, 0.96);
    box-shadow: 24px 0 46px rgba(15, 23, 42, 0.08);
    backdrop-filter: blur(22px);
}

body.customer-app #sidebar .border-b,
body.customer-app #sidebar .border-t {
    border-color: rgba(226, 232, 240, 0.96) !important;
}

body.customer-app #sidebar .text-white,
body.customer-app #sidebar .text-indigo-100,
body.customer-app #sidebar .text-indigo-200,
body.customer-app #sidebar .text-indigo-300 {
    color: #64748b !important;
}

body.customer-app #sidebar .sidebar-header-text:first-child {
    color: #0f172a !important;
    letter-spacing: -0.04em;
}

body.customer-app #sidebar .sidebar-header-text:last-child {
    color: #94a3b8 !important;
    text-transform: uppercase;
    letter-spacing: 0.22em;
    font-size: 0.7rem !important;
}

body.customer-app .nav-link {
    background: transparent !important;
    color: #475569 !important;
    border: 1px solid transparent;
    border-radius: 18px !important;
    padding: 0.92rem 1rem !important;
    font-weight: 600;
    transition:
        background-color 0.2s ease,
        color 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        transform 0.2s ease;
}

body.customer-app .nav-link svg {
    color: currentColor !important;
    opacity: 0.82;
}

body.customer-app .nav-link:hover {
    background: rgba(248, 250, 252, 0.9) !important;
    color: #0f172a !important;
    border-color: rgba(226, 232, 240, 0.96);
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.06);
    transform: translateX(2px);
}

body.customer-app .nav-link.bg-indigo-800 {
    background: #111827 !important;
    color: #ffffff !important;
    border-color: #111827 !important;
    box-shadow: 0 20px 34px rgba(17, 24, 39, 0.2);
}

body.customer-app .nav-link.bg-indigo-800 svg,
body.customer-app .nav-link.bg-indigo-800 .nav-text {
    color: #ffffff !important;
    opacity: 1;
}

body.customer-app #sidebar button[onclick="logout()"] {
    color: #64748b !important;
    border: 1px solid transparent;
    border-radius: 18px;
}

body.customer-app #sidebar button[onclick="logout()"]:hover {
    background: #111827 !important;
    color: #ffffff !important;
    border-color: #111827;
}

body.customer-app header.bg-white {
    background: rgba(255, 255, 255, 0.82) !important;
    border-bottom: 1px solid rgba(226, 232, 240, 0.96);
    box-shadow: none !important;
    backdrop-filter: blur(20px);
    position: sticky;
    top: 0;
    z-index: 15;
}

body.customer-app #pageTitle {
    color: #0f172a !important;
    font-size: clamp(1.35rem, 2vw, 1.8rem);
    font-weight: 700 !important;
    letter-spacing: -0.045em;
}

body.customer-app #customerName {
    color: #475569 !important;
    font-weight: 600;
}

body.customer-app #walletBadge {
    background: #111827 !important;
    color: #ffffff !important;
    border-radius: 999px !important;
    box-shadow: 0 14px 26px rgba(17, 24, 39, 0.18);
}

body.customer-app .mobile-menu-btn {
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid rgba(226, 232, 240, 0.96);
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
}

body.customer-app .mobile-menu-btn svg {
    color: #0f172a !important;
}

body.customer-app main {
    padding: clamp(1.25rem, 3vw, 2.15rem) !important;
}

body.customer-app .section {
    animation: customerSectionFade 0.18s ease;
}

@keyframes customerSectionFade {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

body.customer-app #dashboardSection .bg-white.rounded-lg.shadow,
body.customer-app #dashboardSection .bg-white.rounded-xl.shadow,
body.customer-app #dashboardSection .bg-white.rounded-2xl.shadow,
body.customer-app #dashboardSection .border.border-gray-200.rounded-lg,
body.customer-app #dashboardSection .border.border-gray-200.rounded-xl,
body.customer-app #projectsList > div.bg-white.rounded-lg.shadow {
    background: rgba(255, 255, 255, 0.92) !important;
    border: 1px solid rgba(226, 232, 240, 0.96) !important;
    border-radius: 24px !important;
    box-shadow: 0 22px 48px rgba(15, 23, 42, 0.08) !important;
}

body.customer-app #dashboardSection .bg-white.rounded-lg.shadow:hover,
body.customer-app #dashboardSection .bg-white.rounded-xl.shadow:hover,
body.customer-app #dashboardSection .bg-white.rounded-2xl.shadow:hover {
    box-shadow: 0 26px 58px rgba(15, 23, 42, 0.11) !important;
}

body.customer-app #overviewSection > .grid:first-child > div {
    min-height: 154px;
    overflow: hidden;
}

body.customer-app #overviewSection > .grid:first-child > div p[id^="stat"] {
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.05em;
}

body.customer-app #statMessagesToday,
body.customer-app #statUsageCost {
    letter-spacing: -0.05em;
}

body.customer-app #dashboardSection .p-3.rounded-lg {
    border-radius: 18px !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

body.customer-app #dashboardSection .text-gray-800 {
    color: #0f172a !important;
}

body.customer-app #dashboardSection .text-gray-700 {
    color: #334155 !important;
}

body.customer-app #dashboardSection .text-gray-600,
body.customer-app #dashboardSection .text-gray-500,
body.customer-app #dashboardSection .text-gray-400 {
    color: #64748b !important;
}

body.customer-app #dashboardSection input[type="text"],
body.customer-app #dashboardSection input[type="search"],
body.customer-app #dashboardSection input[type="password"],
body.customer-app #dashboardSection input[type="number"],
body.customer-app #dashboardSection input[type="file"],
body.customer-app #dashboardSection input[type="date"],
body.customer-app #dashboardSection input[type="datetime-local"],
body.customer-app #dashboardSection input[type="tel"],
body.customer-app #dashboardSection input[type="email"],
body.customer-app #dashboardSection select,
body.customer-app #dashboardSection textarea {
    background: rgba(255, 255, 255, 0.94) !important;
    color: #0f172a !important;
    border: 1px solid #d9e1ea !important;
    border-radius: 16px !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
    transition:
        border-color 0.18s ease,
        box-shadow 0.18s ease,
        background-color 0.18s ease;
}

body.customer-app #dashboardSection input,
body.customer-app #dashboardSection select {
    min-height: 48px;
}

body.customer-app #dashboardSection textarea {
    min-height: 96px;
}

body.customer-app #dashboardSection input:focus,
body.customer-app #dashboardSection select:focus,
body.customer-app #dashboardSection textarea:focus {
    outline: none;
    border-color: #111827 !important;
    box-shadow: 0 0 0 4px rgba(15, 23, 42, 0.08) !important;
}

body.customer-app #dashboardSection button,
body.customer-app #dashboardSection a {
    transition:
        transform 0.18s ease,
        box-shadow 0.18s ease,
        background-color 0.18s ease,
        border-color 0.18s ease,
        color 0.18s ease;
}

body.customer-app #dashboardSection button:hover,
body.customer-app #dashboardSection a:hover {
    transform: translateY(-1px);
}

body.customer-app #dashboardSection button.bg-indigo-600,
body.customer-app #dashboardSection button.bg-emerald-600,
body.customer-app #dashboardSection button.bg-teal-600,
body.customer-app #dashboardSection button.bg-blue-600,
body.customer-app #dashboardSection button.bg-sky-600,
body.customer-app #dashboardSection a.bg-indigo-600,
body.customer-app #dashboardSection a.bg-emerald-600,
body.customer-app #dashboardSection a.bg-teal-600 {
    background: #111827 !important;
    color: #ffffff !important;
    border: 1px solid #111827 !important;
    border-radius: 16px !important;
    box-shadow: 0 16px 30px rgba(17, 24, 39, 0.18);
}

body.customer-app #dashboardSection button.bg-indigo-600:hover,
body.customer-app #dashboardSection button.bg-emerald-600:hover,
body.customer-app #dashboardSection button.bg-teal-600:hover,
body.customer-app #dashboardSection button.bg-blue-600:hover,
body.customer-app #dashboardSection button.bg-sky-600:hover,
body.customer-app #dashboardSection a.bg-indigo-600:hover,
body.customer-app #dashboardSection a.bg-emerald-600:hover,
body.customer-app #dashboardSection a.bg-teal-600:hover {
    background: #020617 !important;
    border-color: #020617 !important;
    box-shadow: 0 20px 34px rgba(2, 6, 23, 0.22);
}

body.customer-app #dashboardSection .text-indigo-600,
body.customer-app #dashboardSection .text-indigo-500,
body.customer-app #dashboardSection .hover\:text-indigo-600:hover {
    color: #0f172a !important;
}

body.customer-app #dashboardSection .bg-indigo-50,
body.customer-app #dashboardSection .bg-indigo-100 {
    background-color: #f8fafc !important;
}

body.customer-app #dashboardSection .border-indigo-200,
body.customer-app #dashboardSection .border-indigo-300,
body.customer-app #dashboardSection .border-indigo-500 {
    border-color: #cbd5e1 !important;
}

body.customer-app #dashboardSection .focus\:ring-indigo-500:focus,
body.customer-app #dashboardSection .focus\:border-indigo-500:focus {
    --tw-ring-color: rgba(15, 23, 42, 0.08) !important;
    border-color: #0f172a !important;
}

body.customer-app #dashboardSection .badge {
    border: 1px solid rgba(203, 213, 225, 0.9);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

body.customer-app #dashboardSection .message-bubble {
    border-radius: 20px !important;
    box-shadow: none !important;
}

body.customer-app #conversationsSection .message-bubble.bg-gray-100,
body.customer-app #conversationsSection .message-bubble.bg-indigo-100,
body.customer-app #conversationsSection .message-bubble.bg-yellow-50,
body.customer-app #conversationsSection .message-bubble.bg-green-100 {
    border: 1px solid rgba(226, 232, 240, 0.96);
}

body.customer-app #dashboardSection .divide-y.divide-gray-100 > * {
    border-color: rgba(226, 232, 240, 0.96) !important;
}

body.customer-app #dashboardSection .border.rounded-lg:not(.nav-link),
body.customer-app #dashboardSection .border.rounded-xl:not(.nav-link) {
    border-color: rgba(226, 232, 240, 0.96) !important;
}

body.customer-app #dashboardSection button.border,
body.customer-app #dashboardSection button[class*="border"] {
    border-radius: 16px !important;
}

body.customer-app .fixed.inset-0.bg-black.bg-opacity-50 {
    background: rgba(15, 23, 42, 0.24) !important;
    backdrop-filter: blur(7px);
}

body.customer-app.modal-open {
    overflow: hidden;
}

body.customer-app #createProjectModal {
    position: fixed !important;
    inset: 0 !important;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    z-index: 80;
}

body.customer-app #createProjectModal.hidden {
    display: none !important;
}

body.customer-app #createProjectModal .customer-modal-card {
    width: min(100%, 34rem);
    margin: 0 auto;
    padding: 1.5rem;
    border-radius: 1.5rem !important;
}

body.customer-app #createProjectModal .customer-modal-card h3 {
    color: #0f172a;
    letter-spacing: -0.03em;
}

body.customer-app #createProjectModal .customer-modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    padding-top: 0.25rem;
}

body.customer-app #createProjectModal #createProjectCancelBtn {
    background: rgba(255, 255, 255, 0.94) !important;
    color: #334155 !important;
    border: 1px solid rgba(203, 213, 225, 0.96) !important;
}

body.customer-app #createProjectModal #createProjectCancelBtn:hover {
    background: rgba(248, 250, 252, 0.98) !important;
    color: #0f172a !important;
}

body.customer-app #createProjectModal #createProjectConfirmBtn {
    min-width: 5.5rem;
}

body.customer-app .fixed.inset-0.bg-black.bg-opacity-50 > .bg-white,
body.customer-app .fixed.inset-0.bg-black.bg-opacity-50 > div.bg-white,
body.customer-app .fixed.inset-0.bg-black.bg-opacity-50 .bg-white.rounded-xl,
body.customer-app .fixed.inset-0.bg-black.bg-opacity-50 .bg-white.rounded-2xl {
    background: rgba(255, 255, 255, 0.96) !important;
    border: 1px solid rgba(226, 232, 240, 0.96);
    border-radius: 24px !important;
    box-shadow: 0 26px 58px rgba(15, 23, 42, 0.14) !important;
}

body.customer-app #dashboardSection .overflow-auto::-webkit-scrollbar-thumb,
body.customer-app #dashboardSection .overflow-y-auto::-webkit-scrollbar-thumb {
    background: #cbd5e1;
}

body.customer-app #dashboardSection .overflow-auto::-webkit-scrollbar-thumb:hover,
body.customer-app #dashboardSection .overflow-y-auto::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

body.customer-app .sidebar-overlay {
    background: rgba(15, 23, 42, 0.18);
    backdrop-filter: blur(4px);
}

@media (max-width: 1024px) {
    body.customer-app header.bg-white {
        padding-inline: 1rem !important;
    }

    body.customer-app main {
        padding: 1rem !important;
    }

    body.customer-app #walletBadge {
        padding-inline: 0.8rem !important;
    }
}

@media (max-width: 768px) {
    body.customer-app #sidebar.sidebar {
        width: 280px !important;
        left: -280px;
        box-shadow: 30px 0 60px rgba(15, 23, 42, 0.14);
    }

    body.customer-app #pageTitle {
        font-size: 1.25rem;
    }

    body.customer-app #overviewSection > .grid:first-child > div {
        min-height: auto;
    }
}