/*
  Design tokens source:
  - aligned to R29 semantic workbench system
*/

@import "@material-symbols/font-400/outlined.css";
@import "./styles/mobile-touch.css";
@import "./design/theme.css";

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

@layer base {
  html {
    min-height: 100%;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    color-scheme: light;
    background: var(--color-bg-canvas);
  }

  body {
    min-height: 100vh;
    min-height: -webkit-fill-available;
    background: linear-gradient(180deg, #ffffff 0%, var(--color-bg-canvas) 16rem, #eef2f6 100%);
    background-attachment: fixed;
    color: var(--color-text-primary);
    @apply font-sans antialiased selection:bg-primary selection:text-white;
  }

  #root {
    min-height: -webkit-fill-available;
    @apply min-h-screen flex flex-col;
  }

  summary::-webkit-details-marker {
    display: none;
  }
}

@layer components {
  .layout-container {
    @apply mx-auto w-full px-0 sm:px-1 lg:px-2;
  }

  .page-scaffold {
    animation: page-reveal 320ms ease-out both;
    @apply space-y-5;
  }

  .workbench-hero {
    position: relative;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid rgba(226, 232, 240, 0.92);
    border-radius: var(--radius-panel);
    box-shadow: var(--shadow-xs);
    @apply flex flex-col gap-4 px-5 py-5 md:flex-row md:items-end md:justify-between md:px-6;
  }

  .workbench-hero::after {
    display: none;
  }

  .workbench-hero > * {
    position: relative;
    z-index: 1;
  }

  .workbench-hero__eyebrow {
    color: var(--color-accent-primary);
    @apply text-xs font-bold uppercase;
  }

  .workbench-hero__title {
    color: var(--color-text-primary);
    @apply mt-1 text-2xl font-semibold md:text-3xl;
  }

  .workbench-hero__subtitle {
    color: var(--color-text-secondary);
    @apply mt-2 max-w-3xl text-sm leading-6;
  }

  .workbench-hero--compact {
    @apply gap-4 px-5 py-5 md:px-6 md:py-6;
  }

  .workbench-hero--compact .workbench-hero__title {
    @apply text-2xl md:text-3xl;
  }

  .workbench-hero--compact .workbench-hero__subtitle {
    @apply mt-2 max-w-2xl text-sm leading-6;
  }

  .card-std {
    background: var(--color-bg-surface-raised);
    border: 1px solid rgba(226, 232, 240, 0.92);
    border-radius: var(--radius-panel);
    box-shadow: var(--shadow-xs);
    backdrop-filter: none;
  }

  .card-title {
    color: var(--color-text-tertiary);
    @apply text-xs font-semibold uppercase tracking-[0.18em];
  }

  .card-desc {
    color: var(--color-text-secondary);
    @apply mt-2 text-sm leading-6;
  }

  .card-value {
    color: var(--color-text-primary);
    @apply text-3xl font-semibold tracking-tight;
  }

  .section-panel {
    position: relative;
    overflow: hidden;
    @apply p-4 md:p-5;
  }

  .section-panel::before {
    display: none;
  }

  .section-panel__header {
    position: relative;
    z-index: 1;
    @apply flex flex-wrap items-start justify-between gap-3;
  }

  .section-panel__title {
    color: var(--color-text-primary);
    @apply text-base font-semibold;
  }

  .section-panel__desc {
    color: var(--color-text-secondary);
    @apply mt-1 text-sm leading-6;
  }

  .section-panel__body {
    position: relative;
    z-index: 1;
    @apply mt-4;
  }

  .metric-card {
    position: relative;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid rgba(226, 232, 240, 0.96);
    border-radius: var(--radius-panel);
    box-shadow: var(--shadow-xs);
    @apply block px-4 py-4 transition duration-150 hover:border-slate-300 hover:bg-white;
  }

  .metric-card::before {
    position: absolute;
    inset: 0 auto 0 0;
    width: 3px;
    content: "";
    background: linear-gradient(180deg, var(--color-accent-primary), rgba(19, 168, 184, 0.72));
    opacity: 0.82;
  }

  .metric-card--warning {
    background: rgba(255, 251, 235, 0.92);
    @apply border-amber-200;
  }

  .metric-card--warning::before {
    @apply bg-amber-500;
  }

  .metric-card--danger {
    background: rgba(254, 242, 242, 0.94);
    @apply border-red-200;
  }

  .metric-card--danger::before {
    @apply bg-red-500;
  }

  .metric-card__title {
    color: var(--color-text-secondary);
    @apply text-sm font-medium;
  }

  .metric-card__value {
    color: var(--color-text-primary);
    @apply mt-2 text-xl font-semibold tracking-tight;
  }

  .metric-card__note {
    color: var(--color-text-secondary);
    @apply mt-2 text-sm leading-6;
  }

  .info-chip {
    border-color: rgba(203, 213, 225, 0.86);
    background: rgba(255, 255, 255, 0.82);
    color: var(--color-text-secondary);
    @apply inline-flex items-center rounded-full border px-3 py-1 text-xs font-medium;
  }

  .surface-muted {
    border-color: rgba(226, 232, 240, 0.92);
    background: rgba(248, 250, 252, 0.86);
    @apply rounded-2xl border;
  }

  .input-std {
    border-color: rgba(203, 213, 225, 0.92);
    background: rgba(255, 255, 255, 0.96);
    color: var(--color-text-primary);
    @apply h-11 w-full rounded-xl border px-3 py-2 text-sm shadow-sm outline-none transition placeholder:text-zinc-400 focus:border-primary focus:ring-2 focus:ring-primary/15;
  }

  .select-std {
    border-color: rgba(203, 213, 225, 0.92);
    background: rgba(255, 255, 255, 0.96);
    color: var(--color-text-primary);
    @apply h-11 w-full rounded-xl border px-3 py-2 text-sm shadow-sm outline-none transition focus:border-primary focus:ring-2 focus:ring-primary/15;
  }

  .select-sm {
    border-color: rgba(203, 213, 225, 0.92);
    background: rgba(255, 255, 255, 0.96);
    color: var(--color-text-secondary);
    @apply h-8 rounded-lg border px-2 py-1 text-xs font-medium shadow-sm outline-none transition focus:border-primary focus:ring-2 focus:ring-primary/15;
  }

  .table-container {
    border-color: rgba(226, 232, 240, 0.92);
    background: var(--color-bg-surface-raised);
    @apply overflow-hidden rounded-2xl border shadow-sm backdrop-blur;
  }

  .table-header {
    border-color: rgba(226, 232, 240, 0.82);
    background: rgba(248, 250, 252, 0.9);
    @apply border-b;
  }

  .table-th {
    color: var(--color-text-tertiary);
    @apply px-6 py-4 text-left text-xs font-semibold uppercase tracking-wide;
  }

  .table-row {
    @apply transition-colors hover:bg-slate-50/90;
  }

  .table-td {
    color: var(--color-text-secondary);
    @apply px-6 py-4 text-sm;
  }

  .table-td-strong {
    color: var(--color-text-primary);
    @apply px-6 py-4 text-sm font-semibold;
  }

  .page-shell-grid {
    @apply grid gap-6 xl:grid-cols-[minmax(0,1fr),360px];
  }

  .detail-shell-grid {
    @apply grid gap-6 xl:grid-cols-[minmax(0,1.4fr),minmax(320px,0.8fr)];
  }

  .badge-success {
    @apply inline-flex items-center rounded-full bg-emerald-50 px-2.5 py-0.5 text-xs font-semibold text-emerald-700 ring-1 ring-inset ring-emerald-600/15;
  }

  .badge-warning {
    @apply inline-flex items-center rounded-full bg-amber-50 px-2.5 py-0.5 text-xs font-semibold text-amber-700 ring-1 ring-inset ring-amber-600/10;
  }

  .badge-error {
    @apply inline-flex items-center rounded-full bg-red-50 px-2.5 py-0.5 text-xs font-semibold text-red-700 ring-1 ring-inset ring-red-600/10;
  }

  .badge-neutral {
    background: rgba(241, 245, 249, 0.92);
    color: var(--color-text-secondary);
    @apply inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-semibold ring-1 ring-inset ring-slate-300/55;
  }

  .portal-metric-strip {
    @apply grid gap-3 md:grid-cols-2 xl:grid-cols-4;
  }

  .portal-home-grid {
    @apply grid gap-5 xl:grid-cols-[minmax(0,2fr),minmax(320px,0.92fr)] xl:items-stretch;
  }

  .portal-home-grid--collaboration {
    @apply xl:grid-cols-[minmax(0,1.55fr),minmax(320px,0.9fr)];
  }

  .portal-panel-fill {
    @apply h-full;
  }

  .portal-list-card {
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(226, 232, 240, 0.94);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xs);
    @apply block px-3.5 py-3.5 transition duration-150;
  }

  .portal-list-card:hover {
    background: #ffffff;
    border-color: rgba(203, 213, 225, 0.96);
  }

  .portal-list-card--warning {
    background: rgba(255, 251, 235, 0.9);
    border-color: rgba(245, 158, 11, 0.36);
  }

  .portal-list-card--compact {
    border-radius: var(--radius-lg);
    @apply px-3.5 py-3.5;
  }

  .portal-action-stack {
    @apply grid gap-3 sm:grid-cols-2 xl:grid-cols-1;
  }

  .portal-action-tile {
    min-height: 100%;
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid rgba(226, 232, 240, 0.94);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xs);
    @apply px-3.5 py-3.5 text-left transition duration-150;
  }

  .portal-action-tile:hover {
    border-color: rgba(203, 213, 225, 0.96);
    background: #ffffff;
  }

  .portal-action-tile--disabled {
    background: rgba(241, 245, 249, 0.86);
    color: var(--color-text-tertiary);
    cursor: not-allowed;
    transform: none;
  }

  .portal-action-tile--compact {
    @apply px-3.5 py-3.5;
  }

  .portal-action-icon {
    background: rgba(0, 57, 138, 0.08);
    color: var(--color-accent-primary);
    @apply flex size-10 items-center justify-center rounded-xl;
  }

  .portal-action-icon--muted {
    background: rgba(226, 232, 240, 0.72);
    color: var(--color-text-tertiary);
  }

  .portal-status-card {
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(226, 232, 240, 0.94);
    border-radius: var(--radius-panel);
    @apply px-4 py-4;
  }

  .portal-team-list {
    border: 1px solid rgba(226, 232, 240, 0.94);
    background: rgba(255, 255, 255, 0.64);
    @apply overflow-hidden rounded-2xl divide-y divide-slate-200/80;
  }

  .portal-team-row {
    background: rgba(255, 255, 255, 0.84);
    @apply flex min-h-[64px] items-center gap-3 px-4 py-3;
  }

  .portal-panel-footer {
    color: var(--color-text-secondary);
    @apply mt-4 flex flex-wrap items-center justify-between gap-3 text-xs leading-5;
  }

  .portal-insight-tabs__list {
    @apply h-10 rounded-full border-slate-200 bg-slate-50 p-1;
  }

  .portal-insight-tabs__content {
    @apply mt-4;
  }

  .portal-secondary-drawer {
    @apply p-4 md:p-5;
  }

  .portal-secondary-summary {
    @apply flex cursor-pointer list-none items-center justify-between gap-4 text-left;
  }

  .portal-secondary-summary__toggle {
    color: var(--color-text-tertiary);
    @apply shrink-0 text-xs font-semibold uppercase tracking-[0.18em];
  }

  .portal-secondary-drawer__body {
    @apply mt-4 space-y-5;
  }

  .portal-secondary-compact-grid {
    @apply grid gap-4 xl:grid-cols-2;
  }

  .portal-compact-group {
    @apply rounded-xl border border-slate-200 bg-white/80 px-3.5 py-3.5;
  }

  .portal-compact-group__title {
    color: var(--color-text-primary);
    @apply text-sm font-semibold;
  }

  .portal-compact-group__body {
    @apply mt-3 space-y-2;
  }

  .portal-compact-row {
    @apply flex min-h-9 items-center justify-between gap-3 rounded-lg px-2 py-1.5 text-sm text-slate-700 transition-colors hover:bg-slate-50 hover:text-slate-950;
  }
}

@keyframes page-reveal {
  from {
    opacity: 0;
    transform: translateY(8px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}