TugasPaaS/src/assets/main.css

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap");

@tailwind base;
@tailwind components;
@tailwind utilities;

* {
  scroll-behavior: smooth;
}

body {
  @apply bg-slate-50 text-slate-900 font-sans;
}

.container-page {
  @apply max-w-7xl mx-auto px-4 sm:px-6 lg:px-8;
}

.btn-primary {
  @apply inline-flex items-center justify-center gap-2 rounded-xl bg-brand-600 px-5 py-3 text-sm font-semibold text-white transition hover:bg-brand-700;
}

.btn-secondary {
  @apply inline-flex items-center justify-center gap-2 rounded-xl border border-slate-200 bg-white px-5 py-3 text-sm font-semibold text-slate-800 transition hover:bg-slate-100;
}

.card {
  @apply rounded-2xl border border-slate-200 bg-white shadow-sm;
}

.input {
  @apply w-full rounded-xl border border-slate-200 bg-white px-4 py-3 text-sm outline-none transition focus:border-brand-500 focus:ring-4 focus:ring-brand-100;
}

.label {
  @apply text-sm font-semibold text-slate-700;
}

.btn-WA {
  @apply inline-flex items-center justify-center gap-2 rounded-xl bg-green-500 px-5 py-3 text-sm font-semibold text-white transition hover:bg-green-600;
}

/* SecondTech dark mode */
html.dark body {
  background: #121212;
  color: #f8fafc;
}

html.dark header {
  background: rgba(18, 18, 18, 0.94);
  border-color: rgba(37, 99, 235, 0.34);
}

html.dark main,
html.dark section {
  background: #121212;
}

html.dark .card {
  background: #181818;
  border-color: rgba(37, 99, 235, 0.30);
  box-shadow: 0 14px 34px rgba(37, 99, 235, 0.20);
}

html.dark .input {
  background: #181818;
  border-color: rgba(37, 99, 235, 0.34);
  color: #f8fafc;
}

html.dark .input::placeholder {
  color: #94a3b8;
}

html.dark .btn-secondary {
  background: #181818;
  border-color: rgba(37, 99, 235, 0.38);
  color: #f8fafc;
  box-shadow: 0 10px 24px rgba(37, 99, 235, 0.12);
}

html.dark .btn-primary {
  box-shadow: 0 12px 28px rgba(37, 99, 235, 0.24);
}

html.dark .bg-white,
html.dark .bg-slate-50,
html.dark .bg-slate-100 {
  background-color: #181818;
}

html.dark .text-slate-950,
html.dark .text-slate-900,
html.dark .text-slate-800,
html.dark .text-slate-700 {
  color: #f8fafc;
}

html.dark .text-slate-600,
html.dark .text-slate-500 {
  color: #cbd5e1;
}

html.dark .border-slate-200 {
  border-color: rgba(37, 99, 235, 0.30);
}

/* SecondTech stronger dark mode repair */
html.dark,
html.dark body {
  background: #121212 !important;
  color: #f8fafc !important;
}

html.dark header,
html.dark footer,
html.dark main,
html.dark section {
  background-color: #121212 !important;
}

html.dark header {
  border-color: rgba(37, 99, 235, 0.35) !important;
}

html.dark .card {
  background: #181818 !important;
  border-color: rgba(37, 99, 235, 0.34) !important;
  box-shadow: 0 14px 34px rgba(37, 99, 235, 0.22) !important;
}

html.dark .input,
html.dark input,
html.dark select,
html.dark textarea {
  background-color: #181818 !important;
  border-color: rgba(37, 99, 235, 0.38) !important;
  color: #f8fafc !important;
}

html.dark .input::placeholder,
html.dark input::placeholder,
html.dark textarea::placeholder {
  color: #94a3b8 !important;
}

html.dark .btn-secondary {
  background: #181818 !important;
  border-color: rgba(37, 99, 235, 0.42) !important;
  color: #f8fafc !important;
  box-shadow: 0 10px 24px rgba(37, 99, 235, 0.14) !important;
}

html.dark .btn-primary {
  box-shadow: 0 12px 28px rgba(37, 99, 235, 0.26) !important;
}

html.dark .bg-white,
html.dark .bg-slate-50,
html.dark .bg-slate-100,
html.dark .bg-brand-50 {
  background-color: #181818 !important;
}

html.dark .text-slate-950,
html.dark .text-slate-900,
html.dark .text-slate-800,
html.dark .text-slate-700,
html.dark .text-brand-900,
html.dark .text-brand-800,
html.dark .text-brand-700 {
  color: #f8fafc !important;
}

html.dark .text-slate-600,
html.dark .text-slate-500,
html.dark .text-slate-400 {
  color: #cbd5e1 !important;
}

html.dark .nav-link,
html.dark .mobile-link,
html.dark a:not(.btn-primary) {
  color: #dbeafe !important;
}

html.dark .nav-link:hover,
html.dark .mobile-link:hover,
html.dark a:not(.btn-primary):hover {
  color: #ffffff !important;
}

html.dark .border-slate-200,
html.dark .border-brand-600 {
  border-color: rgba(37, 99, 235, 0.42) !important;
}

html.dark .shadow-sm {
  box-shadow: 0 14px 34px rgba(37, 99, 235, 0.18) !important;
}

/* SecondTech final dark mode repair */
html.dark,
html.dark body {
  background: #121212 !important;
  color: #f8fafc !important;
}

html.dark header,
html.dark footer,
html.dark main,
html.dark section {
  background-color: #121212 !important;
}

html.dark header {
  border-color: rgba(37, 99, 235, 0.35) !important;
}

html.dark .card {
  background: #181818 !important;
  border-color: rgba(37, 99, 235, 0.34) !important;
  box-shadow: 0 14px 34px rgba(37, 99, 235, 0.22) !important;
}

html.dark .input,
html.dark input,
html.dark select,
html.dark textarea {
  background-color: #181818 !important;
  border-color: rgba(37, 99, 235, 0.38) !important;
  color: #f8fafc !important;
}

html.dark .input::placeholder,
html.dark input::placeholder,
html.dark textarea::placeholder {
  color: #94a3b8 !important;
}

html.dark .btn-secondary {
  background: #181818 !important;
  border-color: rgba(37, 99, 235, 0.42) !important;
  color: #f8fafc !important;
  box-shadow: 0 10px 24px rgba(37, 99, 235, 0.14) !important;
}

html.dark .btn-primary {
  box-shadow: 0 12px 28px rgba(37, 99, 235, 0.26) !important;
}

html.dark .bg-white,
html.dark .bg-slate-50,
html.dark .bg-slate-100,
html.dark .bg-brand-50,
html.dark .bg-emerald-50,
html.dark .bg-red-50 {
  background-color: #181818 !important;
}

html.dark .text-zinc-950,
html.dark .text-zinc-900,
html.dark .text-zinc-800,
html.dark .text-slate-950,
html.dark .text-slate-900,
html.dark .text-slate-800,
html.dark .text-slate-700,
html.dark .text-brand-900,
html.dark .text-brand-800,
html.dark .text-brand-700,
html.dark .text-emerald-700,
html.dark .text-red-700 {
  color: #f8fafc !important;
}

html.dark .text-slate-600,
html.dark .text-slate-500,
html.dark .text-slate-400,
html.dark .text-zinc-600,
html.dark .text-zinc-500,
html.dark .text-zinc-400 {
  color: #cbd5e1 !important;
}

html.dark .nav-link,
html.dark .mobile-link,
html.dark a:not(.btn-primary) {
  color: #dbeafe !important;
}

html.dark .nav-link:hover,
html.dark .mobile-link:hover,
html.dark a:not(.btn-primary):hover {
  color: #ffffff !important;
}

html.dark .border-slate-200,
html.dark .border-brand-600 {
  border-color: rgba(37, 99, 235, 0.42) !important;
}

html.dark .shadow-sm {
  box-shadow: 0 14px 34px rgba(37, 99, 235, 0.18) !important;
}

/* SecondTech final dark mode override */
:root {
  --hero-title-color: #0f1729;
}

html.dark {
  --hero-title-color: #f8fafc;
  color-scheme: dark;
}

html.dark,
html.dark body {
  background: #121212 !important;
  color: #f8fafc !important;
}

html.dark header,
html.dark footer,
html.dark main,
html.dark section {
  background-color: #121212 !important;
}

html.dark header {
  border-color: rgba(37, 99, 235, 0.36) !important;
}

html.dark .card {
  background: #181818 !important;
  border-color: rgba(37, 99, 235, 0.34) !important;
  box-shadow: 0 14px 34px rgba(37, 99, 235, 0.22) !important;
}

html.dark .input,
html.dark input,
html.dark select,
html.dark textarea {
  background-color: #181818 !important;
  border-color: rgba(37, 99, 235, 0.38) !important;
  color: #f8fafc !important;
}

html.dark .input::placeholder,
html.dark input::placeholder,
html.dark textarea::placeholder {
  color: #94a3b8 !important;
}

html.dark .btn-secondary {
  background: #181818 !important;
  border-color: rgba(37, 99, 235, 0.42) !important;
  color: #f8fafc !important;
  box-shadow: 0 10px 24px rgba(37, 99, 235, 0.14) !important;
}

html.dark .btn-primary {
  box-shadow: 0 12px 28px rgba(37, 99, 235, 0.26) !important;
}

html.dark .bg-white,
html.dark .bg-slate-50,
html.dark .bg-slate-100,
html.dark .bg-brand-50,
html.dark .bg-emerald-50,
html.dark .bg-red-50 {
  background-color: #181818 !important;
}

html.dark .bg-white\/90 {
  background-color: rgba(24, 24, 24, 0.9) !important;
  color: #f8fafc !important;
  border: 1px solid rgba(37, 99, 235, 0.35) !important;
}

html.dark .text-zinc-950,
html.dark .text-zinc-900,
html.dark .text-zinc-800,
html.dark .text-slate-950,
html.dark .text-slate-900,
html.dark .text-slate-800,
html.dark .text-slate-700,
html.dark .text-brand-950,
html.dark .text-brand-900,
html.dark .text-brand-800,
html.dark .text-brand-700,
html.dark .text-emerald-700,
html.dark .text-red-700 {
  color: #f8fafc !important;
}

html.dark .text-slate-600,
html.dark .text-slate-500,
html.dark .text-slate-400,
html.dark .text-zinc-600,
html.dark .text-zinc-500,
html.dark .text-zinc-400 {
  color: #cbd5e1 !important;
}

html.dark .label,
html.dark label,
html.dark h1,
html.dark h2,
html.dark h3,
html.dark h4,
html.dark p,
html.dark span {
  color: inherit;
}

html.dark .nav-link,
html.dark .mobile-link,
html.dark a:not(.btn-primary) {
  color: #dbeafe !important;
}

html.dark .nav-link:hover,
html.dark .mobile-link:hover,
html.dark a:not(.btn-primary):hover {
  color: #ffffff !important;
}

html.dark .border-slate-200,
html.dark .border-brand-600 {
  border-color: rgba(37, 99, 235, 0.42) !important;
}

html.dark .shadow-sm {
  box-shadow: 0 14px 34px rgba(37, 99, 235, 0.18) !important;
}

/* Sidebar active links are generated by scoped component CSS, so override directly. */
html.dark .side-link {
  color: #e2e8f0 !important;
}

html.dark .side-link.router-link-active {
  background: rgba(37, 99, 235, 0.18) !important;
  border: 1px solid rgba(37, 99, 235, 0.40) !important;
  color: #ffffff !important;
  box-shadow: 0 12px 28px rgba(37, 99, 235, 0.16) !important;
}

html.dark .side-link.router-link-active svg,
html.dark .side-link svg {
  color: currentColor !important;
}

html.dark .side-link.admin-link,
html.dark .side-link.admin-link.router-link-active {
  background: rgba(37, 99, 235, 0.18) !important;
  border: 1px solid rgba(37, 99, 235, 0.40) !important;
  color: #ffffff !important;
}

/* Product cards: category badge and save button use bg-white/90. */
html.dark button.bg-white\/90,
html.dark span.bg-white\/90 {
  background-color: rgba(24, 24, 24, 0.90) !important;
  color: #f8fafc !important;
  border: 1px solid rgba(37, 99, 235, 0.35) !important;
}

html.dark button.bg-white\/90:hover {
  background-color: #2563eb !important;
  color: #ffffff !important;
}

html.dark .rounded-full.bg-brand-50,
html.dark .rounded-full.bg-emerald-50,
html.dark .rounded-full.bg-red-50 {
  background-color: rgba(37, 99, 235, 0.16) !important;
  color: #f8fafc !important;
  border: 1px solid rgba(37, 99, 235, 0.35) !important;
}

/* Dark mode sidebar hover fix */
html.dark .side-link:hover {
  background: rgba(37, 99, 235, 0.16) !important;
  border-color: rgba(37, 99, 235, 0.38) !important;
  color: #ffffff !important;
}

html.dark .side-link:hover svg {
  color: #ffffff !important;
}

html.dark .side-link.router-link-active,
html.dark .side-link.router-link-active:hover {
  background: rgba(37, 99, 235, 0.22) !important;
  border: 1px solid rgba(37, 99, 235, 0.45) !important;
  color: #ffffff !important;
  box-shadow: 0 12px 28px rgba(37, 99, 235, 0.16) !important;
}