/**
 * Inventory Manager — UI refresh (loads after app.css)
 * Teal accent, Inter typography, softer surfaces
 */

:root {
  --im-teal: #0d9488;
  --im-teal-focus: #0f766e;
  --im-teal-deep: #115e59;
  --im-teal-muted: rgb(13 148 136 / 0.12);
  --im-teal-soft: rgb(13 148 136 / 0.2);
  --im-teal-text: rgb(13 148 136 / 0.72);
  /* Dark-mode interactive (matches buttons using dark:bg-accent) */
  --im-teal-on-dark: #2dd4bf;
  --im-teal-on-dark-focus: #14b8a6;
}

/* --- Typography ---------------------------------------------------------- */
html {
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
}

body {
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
  font-size: 0.9375rem;
  line-height: 1.5rem;
  color: #475569;
  letter-spacing: -0.011em;
}

.dark body {
  color: #b8c0d4;
}

/* --- App shell ----------------------------------------------------------- */
#root.min-h-100vh {
  background-color: #f4f7fb;
  background-image:
    radial-gradient(ellipse 120% 80% at 100% -20%, rgb(13 148 136 / 0.06), transparent 50%),
    radial-gradient(ellipse 80% 60% at 0% 100%, rgb(59 130 246 / 0.05), transparent 45%);
}

.dark #root.min-h-100vh {
  background-color: #121a28;
  background-image:
    radial-gradient(ellipse 100% 70% at 100% 0%, rgb(45 212 191 / 0.07), transparent 55%),
    radial-gradient(ellipse 80% 50% at 0% 100%, rgb(96 165 250 / 0.05), transparent 50%);
}

/* Primary → teal (all compiled Tailwind primary utilities) */
.border-primary {
  border-color: var(--im-teal) !important;
}
.border-primary\/30 {
  border-color: rgb(13 148 136 / 0.3) !important;
}
.border-r-primary {
  border-right-color: var(--im-teal) !important;
}
.bg-primary {
  background-color: var(--im-teal) !important;
}
.bg-primary-focus {
  background-color: var(--im-teal-focus) !important;
}
.bg-primary\/10 {
  background-color: var(--im-teal-muted) !important;
}
.bg-primary\/15 {
  background-color: rgb(13 148 136 / 0.15) !important;
}
.text-primary {
  color: var(--im-teal) !important;
}
.decoration-primary {
  text-decoration-color: var(--im-teal) !important;
}
.shadow-primary\/50 {
  --tw-shadow-color: rgb(13 148 136 / 0.45) !important;
}
.ring-primary {
  --tw-ring-color: var(--im-teal) !important;
}
.ring-primary\/50 {
  --tw-ring-color: rgb(13 148 136 / 0.5) !important;
}
.before\:bg-primary::before {
  background-color: var(--im-teal) !important;
}
.checked\:border-primary:checked {
  border-color: var(--im-teal) !important;
}
.checked\:bg-primary:checked {
  background-color: var(--im-teal) !important;
}
.checked\:before\:bg-primary:checked::before {
  background-color: var(--im-teal) !important;
}
.focus-within\:\!border-primary:focus-within {
  border-color: var(--im-teal) !important;
}
.hover\:border-primary:hover {
  border-color: var(--im-teal) !important;
}
.hover\:bg-primary:hover {
  background-color: var(--im-teal) !important;
}
.hover\:bg-primary-focus:hover {
  background-color: var(--im-teal-focus) !important;
}
.hover\:bg-primary\/10:hover {
  background-color: var(--im-teal-muted) !important;
}
.hover\:bg-primary\/20:hover {
  background-color: var(--im-teal-soft) !important;
}
.hover\:text-primary:hover {
  color: var(--im-teal) !important;
}
.hover\:text-primary-focus:hover {
  color: var(--im-teal-focus) !important;
}
.hover\:text-primary\/70:hover {
  color: var(--im-teal-text) !important;
}
.hover\:shadow-primary\/50:hover {
  --tw-shadow-color: rgb(13 148 136 / 0.45) !important;
}
.focus\:border-primary:focus {
  border-color: var(--im-teal) !important;
}
.focus\:bg-primary:focus {
  background-color: var(--im-teal) !important;
}
.focus\:bg-primary-focus:focus {
  background-color: var(--im-teal-focus) !important;
}
.focus\:bg-primary\/10:focus {
  background-color: var(--im-teal-muted) !important;
}
.focus\:bg-primary\/20:focus {
  background-color: var(--im-teal-soft) !important;
}
.focus\:text-primary:focus {
  color: var(--im-teal) !important;
}
.focus\:text-primary\/70:focus {
  color: var(--im-teal-text) !important;
}
.focus\:shadow-primary\/50:focus {
  --tw-shadow-color: rgb(13 148 136 / 0.45) !important;
}
.active\:bg-primary-focus\/90:active {
  background-color: rgb(15 118 110 / 0.9) !important;
}
.active\:bg-primary\/25:active {
  background-color: rgb(13 148 136 / 0.25) !important;
}
.active\:bg-primary\/90:active {
  background-color: rgb(13 148 136 / 0.9) !important;
}
.group:hover .group-hover\:text-primary {
  color: var(--im-teal) !important;
}
.group:focus .group-focus\:text-primary {
  color: var(--im-teal) !important;
}
.peer:focus ~ .peer-focus\:text-primary {
  color: var(--im-teal) !important;
}

/* Dark mode: accent aligns with primary actions */
.dark .dark\:border-accent {
  border-color: var(--im-teal-on-dark) !important;
}
.dark .dark\:border-accent\/30 {
  border-color: rgb(45 212 191 / 0.3) !important;
}
.dark .dark\:bg-accent {
  background-color: var(--im-teal-on-dark-focus) !important;
}
.dark .dark\:bg-accent-focus {
  background-color: #0f766e !important;
}
.dark .dark\:bg-accent-light\/10 {
  background-color: rgb(45 212 191 / 0.1) !important;
}
.dark .dark\:bg-accent-light\/15 {
  background-color: rgb(45 212 191 / 0.15) !important;
}
.dark .dark\:bg-accent\/10 {
  background-color: rgb(20 184 166 / 0.12) !important;
}
.dark .dark\:bg-accent\/25 {
  background-color: rgb(20 184 166 / 0.22) !important;
}
.dark .dark\:text-accent {
  color: var(--im-teal-on-dark) !important;
}
.dark .dark\:text-accent-light {
  color: #5eead4 !important;
}
.dark .dark\:text-accent-light\/80 {
  color: rgb(94 234 212 / 0.8) !important;
}
.dark .dark\:focus\:border-accent:focus {
  border-color: var(--im-teal-on-dark) !important;
}
.dark .dark\:hover\:border-accent:hover {
  border-color: var(--im-teal-on-dark) !important;
}
.dark .dark\:hover\:bg-accent:hover {
  background-color: var(--im-teal-on-dark-focus) !important;
}
.dark .dark\:hover\:bg-accent-focus:hover {
  background-color: #0f766e !important;
}
.dark .dark\:focus\:bg-accent:focus {
  background-color: var(--im-teal-on-dark-focus) !important;
}
.dark .dark\:focus\:bg-accent-focus:focus {
  background-color: #0f766e !important;
}
.dark .dark\:active\:bg-accent\/90:active {
  background-color: rgb(20 184 166 / 0.9) !important;
}

/* --- Sidebar & cards ----------------------------------------------------- */
.main-sidebar > .flex {
  border-right: 1px solid rgb(226 232 240 / 0.9);
  box-shadow: 4px 0 24px -12px rgb(15 23 42 / 0.12);
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
}

.dark .main-sidebar > .flex {
  border-right-color: rgb(51 65 85 / 0.5);
  box-shadow: 4px 0 32px -8px rgb(0 0 0 / 0.35);
  background: linear-gradient(180deg, #1e293b 0%, #172033 100%);
}

.sidebar-panel > .flex {
  border-right: 1px solid rgb(226 232 240 / 0.6);
}

.dark .sidebar-panel > .flex {
  border-right-color: rgb(51 65 85 / 0.4);
}

/* Cards: slightly lifted */
.card {
  border-radius: 0.75rem;
  border: 1px solid rgb(226 232 240 / 0.85);
  box-shadow: 0 1px 2px rgb(15 23 42 / 0.04), 0 4px 12px -4px rgb(15 23 42 / 0.08);
}

.dark .card {
  border-color: rgb(51 65 85 / 0.6);
  box-shadow: 0 2px 8px rgb(0 0 0 / 0.2);
}

/* Sidebar nav */
.im-nav-link {
  border-radius: 0.5rem;
  transition: background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.im-nav-link:hover {
  background-color: rgb(241 245 249);
}

.dark .im-nav-link:hover {
  background-color: rgb(51 65 85 / 0.5);
}

.im-nav-link-active {
  background-color: var(--im-teal-muted) !important;
  color: var(--im-teal-deep) !important;
  box-shadow: inset 3px 0 0 0 var(--im-teal);
}

.dark .im-nav-link-active {
  background-color: rgb(13 148 136 / 0.15) !important;
  color: #e2e8f0 !important;
  box-shadow: inset 3px 0 0 0 var(--im-teal-on-dark);
}

.im-sidebar-heading {
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: #0f172a;
}

.dark .im-sidebar-heading {
  color: #f1f5f9;
}

.im-sidebar-sub {
  font-size: 0.75rem;
  color: #64748b;
  margin-top: 0.125rem;
}

.dark .im-sidebar-sub {
  color: #94a3b8;
}

.sidebar-panel ul hr {
  border: none;
  height: 1px;
  margin: 0.5rem 0;
  background: linear-gradient(90deg, transparent, rgb(203 213 225 / 0.9), transparent);
}

.dark .sidebar-panel ul hr {
  background: linear-gradient(90deg, transparent, rgb(71 85 105 / 0.5), transparent);
}