/**
 * Internal Apps Portal — page-specific styles (IDEAMAKERS design system)
 */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
@import url('tokens.css');
@import url('typography.css');
@import url('shell.css');
@import url('components.css');

*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  min-height: 100%;
  background: hsl(var(--background));
  color: hsl(var(--foreground));
  font-family: var(--font-family-sans);
  font-size: var(--font-size-body);
  line-height: 1.5;
}

a { color: inherit; text-decoration: none; }

:focus-visible {
  outline: 2px solid hsl(var(--ring));
  outline-offset: 2px;
}

.page-title {
  margin: 0;
  font: var(--font-page-title);
  letter-spacing: -0.01em;
}

.section-title {
  margin: 0;
  font: var(--font-section-title);
  letter-spacing: -0.01em;
}

.help-text, .meta-text {
  color: hsl(var(--muted-foreground));
  font: var(--font-body);
}

.surface {
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius-panel);
  background: hsl(var(--card));
}

.portal-header {
  border-bottom: 1px solid hsl(var(--border));
  background: hsl(var(--sidebar));
  color: hsl(var(--sidebar-foreground));
}

.portal-header-inner,
.portal-nav,
.portal-main {
  max-width: 72rem;
  margin: 0 auto;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

.portal-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.portal-brand {
  display: flex;
  align-items: center;
  gap: var(--brand-gap);
}

.portal-brand-mark {
  width: var(--brand-mark-size);
  height: var(--brand-mark-size);
  border-radius: var(--radius-control);
  background: hsl(var(--primary));
  display: grid;
  place-items: center;
  color: #fff;
  font-weight: 700;
  font-size: 1rem;
}

.portal-brand-text {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}

.portal-brand-product {
  font-size: var(--brand-product-size);
  font-weight: var(--brand-product-weight);
  color: #fff;
}

.portal-brand-company {
  font-size: var(--brand-company-size);
  letter-spacing: var(--brand-company-tracking);
  text-transform: uppercase;
  color: hsl(var(--sidebar-foreground) / 0.6);
}

.portal-user {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.portal-avatar {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 999px;
  background: hsl(var(--primary));
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 0.75rem;
  font-weight: 600;
}

.portal-nav {
  display: flex;
  gap: 0.25rem;
  padding-bottom: 0.75rem;
}

.nav-pill {
  border-radius: var(--radius-control);
  padding: 0.375rem 0.75rem;
  font-weight: 500;
  color: hsl(var(--sidebar-foreground) / 0.7);
  transition: background-color var(--transition-fast), color var(--transition-fast);
}

.nav-pill:hover {
  background: hsl(0 0% 100% / 0.05);
  color: #fff;
}

.nav-pill.active {
  background: hsl(0 0% 100% / 0.1);
  color: #fff;
}

.portal-main {
  padding-top: 2rem;
  padding-bottom: 3rem;
}

.app-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
}

.app-card {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  min-height: 10rem;
  padding: 1.25rem;
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius-panel);
  background: hsl(var(--card));
  transition: border-color var(--transition-fast);
}

.app-card:hover {
  border-color: hsl(var(--primary) / 0.4);
}

.app-card--coming-soon,
.app-card--disabled {
  background: hsl(var(--muted) / 0.35);
  border-color: hsl(var(--border));
  opacity: 0.92;
}

.app-card--coming-soon:hover,
.app-card--disabled:hover {
  border-color: hsl(var(--border));
}

.app-card--coming-soon .app-icon {
  color: hsl(var(--muted-foreground));
}

.app-card-soon-label {
  font-size: var(--font-size-small);
  font-weight: 500;
  color: hsl(var(--muted-foreground));
}

.btn--disabled {
  opacity: 0.55;
  cursor: not-allowed;
  pointer-events: none;
}

.portal-banner {
  margin-bottom: 1rem;
  padding: 0.75rem 1rem;
  border-radius: var(--radius-control);
  font-size: var(--font-size-small);
}

.portal-banner--error {
  background: hsl(var(--danger) / 0.12);
  color: hsl(var(--danger));
  border: 1px solid hsl(var(--danger) / 0.25);
}

.portal-banner--info {
  background: hsl(var(--primary) / 0.1);
  color: hsl(var(--foreground));
  border: 1px solid hsl(var(--border));
}

.app-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.5rem;
}

.app-icon {
  width: 1.5rem;
  height: 1.5rem;
  color: hsl(var(--primary));
}

.app-card-title {
  margin: 0;
  font: var(--font-section-title);
  font-size: var(--font-size-card-title);
  line-height: var(--line-height-card-title);
}

.app-card-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding-top: 0.5rem;
}

.fav-btn {
  border: none;
  background: transparent;
  color: hsl(var(--muted-foreground));
  cursor: pointer;
  font: inherit;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

.fav-btn.active { color: hsl(var(--primary)); }

.badge-new, .badge-popular, .badge-degraded, .badge-unavailable, .badge-coming-soon {
  display: inline-flex;
  align-items: center;
  border-radius: var(--radius-control);
  padding: 0.125rem 0.375rem;
  font-size: var(--font-size-small);
  font-weight: 600;
}

.badge-new { background: hsl(var(--primary) / 0.15); color: hsl(var(--primary)); }
.badge-popular { background: hsl(var(--muted)); }
.badge-degraded { background: hsl(var(--warning) / 0.2); }
.badge-unavailable { background: hsl(var(--danger) / 0.15); color: hsl(var(--danger)); }
.badge-coming-soon { background: hsl(var(--primary) / 0.1); color: hsl(var(--muted-foreground)); border: 1px solid hsl(var(--border)); }

.login-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  padding: 1.5rem;
}

.login-card { width: 100%; max-width: 28rem; padding: 2rem; }

.alert-error {
  margin-bottom: 1rem;
  padding: 0.75rem 1rem;
  border: 1px solid hsl(var(--danger) / 0.3);
  border-radius: var(--radius-control);
  background: hsl(var(--danger) / 0.05);
  color: hsl(var(--danger));
}

.admin-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
}

.admin-link {
  display: block;
  padding: 1.5rem;
  transition: border-color var(--transition-fast);
}

.admin-link:hover { border-color: hsl(var(--primary) / 0.4); }

.entra-sync-meta {
  display: grid;
  gap: 0.75rem 1.5rem;
  grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
  margin: 0;
}

.entra-sync-meta > div { display: grid; gap: 0.15rem; }
.entra-sync-meta dt { font-size: 0.75rem; color: hsl(var(--muted-foreground)); text-transform: uppercase; letter-spacing: 0.04em; }
.entra-sync-meta dd { margin: 0; font-weight: 500; }

.portal-toast {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: var(--z-toast);
  max-width: min(24rem, calc(100vw - 2rem));
  padding: 0.85rem 1rem;
  border-radius: var(--radius-control);
  background: hsl(var(--foreground));
  color: hsl(var(--background));
  box-shadow: var(--shadow-lg);
  opacity: 0;
  transform: translateY(0.5rem);
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.portal-toast.visible { opacity: 1; transform: translateY(0); }
.portal-toast-error { background: hsl(var(--danger)); color: white; }

.hidden { display: none !important; }

.space-y-8 > * + * { margin-top: 2rem; }
.space-y-6 > * + * { margin-top: 1.5rem; }
.mb-4 { margin-bottom: 1rem; }
.mt-2 { margin-top: 0.5rem; }
.mt-4 { margin-top: 1rem; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}