/* Esuna app-specific styles — layout shell, nav, theme */

/* Serif on page titles only (topbar + in-page h1) — everything else (body,
   tables, forms, buttons) stays on --font-sans. Deliberately scoped narrow:
   real hierarchy on titles, no risk of serif leaking into dense data/forms. */
h1,
.topbar-title {
  font-family: var(--font-serif);
}

/* Layout shell */
.app-shell {
  @apply flex h-screen bg-gray-50 overflow-hidden;
}

.app-sidebar {
  @apply fixed left-0 top-0 h-screen w-60 bg-white border-r border-gray-100 z-30
         flex flex-col transition-transform duration-200 -translate-x-full
         lg:translate-x-0;
}

.app-sidebar[data-open="true"] {
  @apply translate-x-0;
}

.app-sidebar-overlay {
  @apply fixed inset-0 bg-gray-900/40 z-20 hidden lg:hidden;
}

.app-sidebar-overlay[data-open="true"] {
  @apply block lg:hidden;
}

.app-topbar {
  @apply sticky top-0 z-20 h-14 bg-white border-b border-gray-100
         flex items-center px-4 lg:px-6 gap-3 lg:gap-4;
}

.app-content {
  @apply flex-1 flex flex-col overflow-hidden lg:ml-60;
}

.app-main {
  @apply flex-1 overflow-y-auto px-6 py-6;
}

/* Sidebar nav */
.sidebar-logo {
  @apply px-5 py-5 border-b border-gray-100 flex items-center gap-3 flex-shrink-0;
}

.sidebar-logo-icon {
  @apply w-8 h-8 bg-teal-600 rounded-lg flex items-center justify-center flex-shrink-0;
}

.sidebar-nav {
  @apply flex-1 overflow-y-auto px-3 py-4 space-y-5;
}

.sidebar-section-label {
  @apply text-xs font-semibold text-gray-400 uppercase tracking-wider px-2 mb-1.5 block;
}

.sidebar-section {
  @apply space-y-0.5;
}

.sidebar-item {
  @apply w-full flex items-center gap-2.5 px-3 py-2 rounded-lg text-sm
         text-gray-600 hover:bg-gray-50 hover:text-gray-900
         transition-all duration-150 no-underline;
}

.sidebar-item.active {
  @apply bg-teal-50 text-teal-700 font-medium;
}

.sidebar-item .sidebar-icon {
  @apply text-gray-400 flex-shrink-0;
}

.sidebar-item.active .sidebar-icon {
  @apply text-teal-600;
}

.sidebar-footer {
  @apply px-3 py-4 border-t border-gray-100 flex-shrink-0;
}

/* Topbar */
.topbar-title {
  @apply text-gray-900 font-semibold text-base flex-1;
}

.topbar-date {
  @apply text-gray-400 text-xs hidden md:block;
}

/* Dashboard stat cards */
.stat-card {
  @apply bg-white rounded-xl border border-gray-100 p-5 flex items-start gap-4;
}

.stat-card-icon {
  @apply flex items-center justify-center flex-shrink-0 mt-0.5;
}

.stat-card-value {
  @apply text-2xl font-bold text-gray-900 leading-none mb-1;
  font-variant-numeric: tabular-nums;
}

.stat-card-label {
  @apply text-sm text-gray-500;
}

.stat-card-sub {
  @apply text-xs text-gray-400 mt-1;
}

.stat-card-link {
  @apply no-underline transition-all duration-200 ease-in-out cursor-pointer;
}

.stat-card-link:hover {
  @apply -translate-y-0.5 shadow-md shadow-gray-200/70 border-gray-200;
}

/* Profile tabs */
.tab-nav {
  @apply flex border-b border-gray-100 gap-1;
}

.tab-item {
  @apply px-4 py-3 text-sm font-medium border-b-2 transition-colors -mb-px no-underline;
}

.tab-item.active {
  @apply border-teal-500 text-teal-700;
}

.tab-item:not(.active) {
  @apply border-transparent text-gray-500 hover:text-gray-700;
}