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

@layer base {
    :root { color-scheme: light; }
    html { scroll-behavior: smooth; }
    body { @apply bg-mist text-ink antialiased; }
    ::selection { @apply bg-teal-100 text-teal-900; }
}

@layer components {
    .app-card { @apply rounded-[26px] border border-slate-200/80 bg-white shadow-card; }
    .app-input { @apply w-full rounded-2xl border-slate-200 bg-slate-50/70 px-4 py-3 text-sm text-ink placeholder:text-slate-400 focus:border-teal-500 focus:ring-teal-500; }
    .btn-primary { @apply inline-flex min-h-[46px] items-center justify-center gap-2 rounded-2xl bg-teal-600 px-5 py-3 text-sm font-extrabold text-white shadow-sm transition hover:bg-teal-700 focus:outline-none focus:ring-2 focus:ring-teal-500 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-60; }
    .btn-secondary { @apply inline-flex min-h-[44px] items-center justify-center gap-2 rounded-2xl border border-slate-200 bg-white px-5 py-3 text-sm font-extrabold text-ink transition hover:border-teal-300 hover:bg-teal-50 focus:outline-none focus:ring-2 focus:ring-teal-500 focus:ring-offset-2; }
    .eyebrow { @apply text-[10px] font-black uppercase tracking-[0.18em] text-teal-700; }
    .muted { @apply text-sm text-slate-500; }
    .status-dot { @apply inline-block h-1.5 w-1.5 rounded-full; }
    .sidebar-link { @apply flex items-center gap-3 rounded-2xl px-3 py-3 text-sm font-semibold text-slate-500 transition hover:bg-teal-50 hover:text-teal-700; }
    .sidebar-link.active { @apply bg-teal-50 text-teal-700; }
}

[x-cloak] { display: none !important; }

/* Image-led mobile application shell */
.mobile-app-shell { min-height: 100vh; background: #f0f3f8; }
.mobile-app-shell > aside { display: none !important; }
.mobile-main-shell { width: 100%; max-width: 620px; min-height: 100vh; margin-inline: auto; background: #f7f9fc; padding-bottom: 88px; box-shadow: 0 0 50px rgb(21 37 60 / 0.08); }
.mobile-topbar { display: flex; align-items: center; justify-content: space-between; padding: .8rem 1rem !important; background: rgb(255 255 255 / .95) !important; }
.mobile-brand { display: flex !important; align-items: center; min-width: 0; }
.mobile-brand .brand-mark { display: grid; height: 2.75rem; width: 2.75rem; place-items: center; border-radius: 1rem; background: linear-gradient(135deg,#67e8d0,#4d94f6); color: #11243d; font-size: 1.35rem; font-weight: 900; }
.mobile-page { width: 100%; max-width: none !important; padding: 1.5rem .95rem 2rem !important; }
.mobile-bottom-nav { display: flex !important; position: fixed; z-index: 30; right: auto !important; left: 50% !important; width: 100%; max-width: 620px; transform: translateX(-50%); border: 1px solid #e1e7f0; border-bottom: 0; border-radius: 1.5rem 1.5rem 0 0; background: rgb(255 255 255 / .98) !important; box-shadow: 0 -14px 34px rgb(28 42 67 / .10); backdrop-filter: blur(14px); }
.mobile-bottom-nav a { min-width: 54px; min-height: 42px; border-radius: .8rem; }
.mobile-app-shell .app-card { border-radius: 1.55rem; border-color: #e1e7f0; box-shadow: 0 10px 28px rgb(28 42 67 / .06); }
.mobile-app-shell .page-head { align-items: flex-start; }
.mobile-app-shell .page-head h1 { font-size: 1.9rem; line-height: 1.1; }
.mobile-app-shell .btn-primary, .mobile-app-shell .btn-secondary { min-height: 46px; }
.mobile-app-shell .text-ink { color: #132238; }

/* Light dashboard primitives used by the reference-style UI */
.dashboard-hero { position: relative; overflow: hidden; border-radius: 1.75rem; background: linear-gradient(135deg,#e2f8ff 0%,#e9e6ff 52%,#def9f3 100%); border: 1px solid #dbe7f2; box-shadow: 0 15px 30px rgb(51 78 126 / .10); }
.dashboard-hero:after { position: absolute; right: -4rem; top: -5rem; height: 13rem; width: 13rem; border-radius: 999px; background: rgb(123 108 241 / .14); content: ''; filter: blur(2px); }
.premium-icon-tile { display: grid; place-items: center; border-radius: 1rem; background: #eff5fb; color: #43cdb8; }
.premium-icon-tile.violet { background: #f0edff; color: #8d7bf2; }
.premium-icon-tile.orange { background: #fff1eb; color: #ed8c6d; }

@media (min-width: 520px) {
    .mobile-page { padding-inline: 1.25rem !important; }
}