/* --- Base & Utility Styles --- */
body { font-family: 'Inter', sans-serif; }
.font-teko { font-family: 'Teko', sans-serif; }
.card-ui { background-color: white; padding: 1.5rem; border-radius: 0.75rem; box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.05), 0 2px 4px -2px rgb(0 0 0 / 0.05); transition: transform 0.2s ease-out, box-shadow 0.2s ease-out; }
.dark .card-ui { background-color: #1e293b; }
.card-ui:hover { transform: translateY(-3px); box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.07), 0 4px 6px -4px rgb(0 0 0 / 0.07); }
.form-hr { border-color: #e5e7eb; margin-top: 1rem; margin-bottom: 1rem; }
.dark .form-hr { border-color: #334155; }
.form-label { font-size: 0.875rem; font-weight: 500; color: #475569; display: block; margin-bottom: 0.25rem; }
.dark .form-label { color: #94a3b8; }
.form-section-title { font-size: 1.125rem; font-weight: 600; color: #1e293b; border-bottom: 1px solid #e2e8f0; padding-bottom: 0.75rem; }
.dark .form-section-title { color: #f1f5f9; border-color: #334155; }
.input-field { width: 100%; padding: 0.5rem 0.75rem; border: 1px solid #cbd5e1; border-radius: 0.5rem; font-size: 0.875rem; transition: ring 150ms ease-in-out, border-color 150ms ease-in-out; background-color: #f8fafc; color: #334155; }
.input-field:focus { outline: none; --tw-ring-color: #0ea5e9; border-color: #0ea5e9; box-shadow: 0 0 0 2px var(--tw-ring-color); background-color: white; }
.dark .input-field { background-color: #334155; border-color: #475569; color: #cbd5e1; }
.dark .input-field:focus { background-color: #475569; }
.file-input { width: 100%; font-size: 0.875rem; color: #475569; }
.dark .file-input { color: #94a3b8; }
.file-input::file-selector-button { padding: 0.5rem 1rem; margin-right: 1rem; border: none; border-radius: 0.375rem; font-weight: 500; background-color: #e2e8f0; color: #334155; cursor: pointer; transition: background-color 150ms ease-in-out; }
.dark .file-input::file-selector-button { background-color: #334155; color: #cbd5e1; }
.custom-scrollbar::-webkit-scrollbar { width: 8px; }
.custom-scrollbar::-webkit-scrollbar-track { background: transparent; }
.custom-scrollbar::-webkit-scrollbar-thumb { background-color: #d1d5db; border-radius: 20px; }
.dark .custom-scrollbar::-webkit-scrollbar-thumb { background-color: #4b5563; }
#invoice-preview-container { aspect-ratio: 210 / 297; }
.theme-btn { transition: transform 0.2s ease, box-shadow 0.2s ease; }
.theme-btn:hover { transform: scale(1.1); }
.theme-btn.active { box-shadow: 0 0 0 3px white, 0 0 0 5px currentColor; }
.dark .theme-btn.active { box-shadow: 0 0 0 3px #1e293b, 0 0 0 5px currentColor; }

/* -- Styling for Theme & App Titles (retained as general) -- */
.theme-title, .branding-title { color: #1e293b; }
.dark .theme-title, .dark .branding-title { color: #f1f5f9; }

/* -- Styling for Info Cards in Branding (retained as general) -- */
.info-card { background-color: #f8fafc; padding: 1rem; border-radius: 0.5rem; text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.25rem; }
.dark .info-card { background-color: rgba(15, 23, 42, 0.5); }
.info-card .lucide { width: 1.5rem; height: 1.5rem; }
.info-card-title { font-weight: 700; color: #1e293b; }
.dark .info-card-title { color: #f1f5f9; }
.info-card-text { color: #64748b; font-size: 0.75rem; }
.dark .info-card-text { color: #94a3b8; }

.copy-btn { margin-top: 0.5rem; display: flex; align-items: center; gap: 0.375rem; font-size: 0.75rem; padding: 0.25rem 0.75rem; border: 1px solid #e2e8f0; border-radius: 9999px; color: #475569; cursor: pointer; transition: all 0.2s; }
.dark .copy-btn { border-color: #475569; color: #cbd5e1; }
.copy-btn:hover { background-color: #e2e8f0; }
.dark .copy-btn:hover { background-color: #334155; }
.copy-btn.copied { background-color: #d1fae5; color: #065f46; border-color: #a7f3d0; }
.dark .copy-btn.copied { background-color: rgba(16, 185, 129, 0.2); color: #a7f3d0; border-color: #34d399; }
.copy-btn .lucide { width: 0.8rem; height: 0.8rem; }

/* -- Styling for New Service & Fees Layout (retained as general) -- */
.service-box { cursor: default; display: flex; align-items: center; gap: 0.5rem; font-size: 0.875rem; padding: 0.75rem; background-color: #f8fafc; border-radius: 0.5rem; color: #334155; text-decoration: none; transition: all 0.2s; border: 1px solid #f1f5f9; }
.dark .service-box { background-color: #334155; color: #e2e8f0; border-color: #334155; }
.service-box .lucide { width: 1rem; height: 1rem; flex-shrink: 0; }
.service-box[data-color="blue"]:hover { background-color: #dbeafe; color: #1e40af; border-color: #bfdbfe; }
.service-box[data-color="orange"]:hover { background-color: #ffedd5; color: #9a3412; border-color: #fed7aa; }
.service-box[data-color="indigo"]:hover { background-color: #e0e7ff; color: #3730a3; border-color: #c7d2fe; }
.service-box[data-color="rose"]:hover { background-color: #ffe4e6; color: #9f1239; border-color: #fecdd3; }
.service-box[data-color="amber"]:hover { background-color: #fef3c7; color: #92400e; border-color: #fde68a; }
.service-box[data-color="violet"]:hover { background-color: #ede9fe; color: #5b21b6; border-color: #ddd6fe; }

/* -- Styling for Copyright Box (retained as general) -- */
.copyright-box { padding: 1rem; background-color: #fef2f2; border-left-width: 4px; border-color: #ef4444; color: #b91c1c; border-radius: 0 0.5rem 0.5rem 0; }
.dark .copyright-box { background-color: rgba(153, 27, 27, 0.2); border-color: #ef4444; color: #fca5a5; }

/* --- Styles for Login/Register Page (index.html) --- */
.auth-container {
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient(to right bottom, #1e3a8a, #0c4a6e); /* Blue gradient */
    padding: 1.5rem;
}
.dark .auth-container {
    background: linear-gradient(to right bottom, #0f172a, #1e293b);
}
.auth-card {
    background-color: white; /* Default background for light mode */
    padding: 2.5rem;
    border-radius: 1rem;
    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    width: 100%;
    max-width: 420px;
    text-align: center;
}
.dark .auth-card {
    background-color: #1e293b; /* Darker background for dark mode */
}
.auth-title {
    font-size: 2.25rem;
    font-weight: 700;
    color: #1e293b; /* Dark text for light mode */
    margin-bottom: 1.5rem;
}
.dark .auth-title {
    color: #f1f5f9; /* Light text for dark mode */
}
.auth-toggle-btn {
    background-color: #e2e8f0;
    color: #475569;
    font-weight: 600;
    padding: 0.75rem 1.5rem;
    border-radius: 9999px;
    cursor: pointer;
    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; /* Added box-shadow transition */
}
.dark .auth-toggle-btn {
    background-color: #334155;
    color: #94a3b8;
}
.auth-toggle-btn.active {
    background-color: #0ea5e9;
    color: white;
    box-shadow: 0 4px 6px -1px rgb(14 165 233 / 0.2), 0 2px 4px -2px rgb(14 165 233 / 0.2);
}