/*
  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, #f8fafc 0%, #f3f6f8 22rem, #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 {
  .app-shell {
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(248, 250, 252, 0.76)),
      var(--color-bg-canvas);
  }

  .app-shell-sidebar {
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 10px 0 26px rgba(15, 23, 42, 0.052);
  }

  .app-shell-main {
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.42), rgba(241, 245, 249, 0.36));
  }

  .layout-container {
    @apply mx-auto w-full max-w-[1680px] px-0 sm:px-1 lg:px-2;
  }

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

  .page-header-shell {
    border-bottom: 1px solid rgba(226, 232, 240, 0.92);
    @apply flex flex-col gap-3 pb-3 md:flex-row md:items-end md:justify-between;
  }

  .page-header-shell__eyebrow {
    color: var(--color-accent-primary);
    @apply text-xs font-bold uppercase;
  }

  .page-header-shell__title {
    color: var(--color-text-primary);
    @apply mt-1 text-2xl font-semibold md:text-[1.7rem];
  }

  .page-header-shell__subtitle {
    color: var(--color-text-secondary);
    @apply mt-1.5 max-w-3xl text-sm leading-6;
  }

  .page-header-shell__actions {
    @apply flex shrink-0 flex-wrap items-center gap-2 md:justify-end;
  }

  .app-topbar {
    border-bottom: 1px solid rgba(226, 232, 240, 0.92);
    background: rgba(255, 255, 255, 0.93);
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.035);
    backdrop-filter: blur(16px);
  }

  .app-command-button {
    border-color: rgba(203, 213, 225, 0.96);
    background: rgba(248, 250, 252, 0.92);
    @apply border;
  }

  .sidebar-focus-card {
    border: 1px solid rgba(203, 213, 225, 0.88);
    background:
      linear-gradient(180deg, rgba(248, 250, 252, 0.96), rgba(241, 245, 249, 0.88));
    @apply overflow-hidden rounded-lg px-3.5 py-3 text-sm;
  }

  .nav-section {
    @apply space-y-1.5;
  }

  .nav-section__label {
    color: var(--color-text-tertiary);
    @apply px-3 text-[11px] font-bold uppercase;
  }

  .nav-link-item {
    @apply flex items-center gap-2.5 rounded-lg px-2.5 py-2 text-sm transition duration-150;
  }

  .nav-link-item--active {
    background: rgba(0, 57, 138, 0.08);
    color: var(--color-accent-primary);
    box-shadow: inset 3px 0 0 var(--color-accent-primary);
  }

  .nav-link-item--idle {
    color: var(--color-text-secondary);
    @apply hover:bg-slate-50 hover:text-slate-950;
  }

  .nav-link-item__icon {
    @apply flex size-8 shrink-0 items-center justify-center rounded-md text-[19px] transition-colors;
  }

  .nav-link-item--active .nav-link-item__icon {
    background: rgba(255, 255, 255, 0.9);
    color: var(--color-accent-primary);
  }

  .nav-link-item--idle .nav-link-item__icon {
    background: rgba(241, 245, 249, 0.82);
    color: var(--color-text-tertiary);
  }

  .nav-link-item--idle:hover .nav-link-item__icon {
    color: var(--color-accent-primary);
  }

  .nav-more-section {
    @apply space-y-1.5;
  }

  .nav-more-section__summary {
    color: var(--color-text-secondary);
    @apply flex cursor-pointer list-none items-center gap-2.5 rounded-lg px-2.5 py-2 text-sm transition duration-150 hover:bg-slate-50 hover:text-slate-950;
  }

  .nav-more-section__summary::-webkit-details-marker {
    display: none;
  }

  .nav-more-section__chevron {
    color: var(--color-text-tertiary);
    @apply text-[18px] transition-transform;
  }

  .nav-more-section[open] .nav-more-section__chevron {
    transform: rotate(180deg);
  }

  .auth-shell {
    background:
      radial-gradient(circle at 20% 12%, rgba(0, 57, 138, 0.10), transparent 26rem),
      radial-gradient(circle at 78% 78%, rgba(19, 168, 184, 0.10), transparent 24rem),
      linear-gradient(180deg, #f9fbfd 0%, #eff4f8 58%, #e6edf3 100%);
  }

  .auth-shell__grid {
    opacity: 0.68;
    background-image:
      linear-gradient(rgba(15, 23, 42, 0.052) 1px, transparent 1px),
      linear-gradient(90deg, rgba(15, 23, 42, 0.052) 1px, transparent 1px);
    background-size: 40px 40px;
    mask-image: linear-gradient(180deg, black, transparent 88%);
  }

  .auth-shell__rail {
    background: linear-gradient(180deg, transparent, rgba(0, 57, 138, 0.34), rgba(19, 168, 184, 0.28), transparent);
  }

  .auth-panel {
    border: 1px solid rgba(203, 213, 225, 0.92);
    border-radius: var(--radius-lg);
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.96)),
      #ffffff;
    box-shadow: 0 24px 70px rgba(15, 23, 42, 0.12), 0 1px 0 rgba(255, 255, 255, 0.82) inset;
  }

  .auth-panel__accent {
    position: absolute;
    inset: 0 auto 0 0;
    width: 4px;
    background: linear-gradient(180deg, var(--color-accent-primary), var(--color-accent-secondary));
  }

  .auth-mode-switch {
    border: 1px solid rgba(203, 213, 225, 0.88);
    background: rgba(241, 245, 249, 0.74);
    @apply grid grid-cols-2 gap-1 rounded-lg p-1;
  }

  .auth-mode-switch__item {
    @apply h-9 rounded-md text-sm font-medium transition;
  }

  .auth-mode-switch__item--active {
    color: var(--color-accent-primary);
    background: #ffffff;
    box-shadow: var(--shadow-xs);
  }

  .auth-mode-switch__item--idle {
    color: var(--color-text-secondary);
    @apply hover:text-slate-950;
  }

  .auth-side-entry {
    border: 1px solid rgba(203, 213, 225, 0.88);
    background: rgba(248, 250, 252, 0.82);
    @apply rounded-lg px-3.5 py-3 text-sm leading-6;
  }

  .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-4 py-4 md:flex-row md:items-end md:justify-between md:px-5 md:py-4;
  }

  .ops-status-strip {
    @apply grid gap-3;
  }

  .ops-status-strip .metric-card {
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xs);
    @apply min-h-[92px] px-3.5 py-3;
  }

  .ops-status-strip .metric-card::before {
    width: 2px;
  }

  .ops-status-strip .metric-card__title {
    @apply text-xs font-semibold;
  }

  .ops-status-strip .metric-card__value {
    @apply mt-1 text-lg;
  }

  .ops-status-strip .metric-card__note {
    @apply mt-1 text-xs leading-5;
  }

  .ops-command-bar {
    border-color: rgba(203, 213, 225, 0.92);
    border-radius: var(--radius-lg);
    background: rgba(255, 255, 255, 0.94);
    box-shadow: var(--shadow-xs);
    @apply p-3;
  }

  .ops-command-bar__row {
    @apply flex flex-col gap-3 xl:flex-row xl:items-center xl:justify-between;
  }

  .ops-command-bar__tabs {
    @apply flex w-full flex-wrap justify-start gap-1 rounded-lg border border-slate-200 bg-slate-50 p-1 xl:w-auto;
  }

  .ops-command-bar__actions {
    @apply flex w-full flex-wrap items-center gap-2 xl:w-auto xl:justify-end;
  }

  .ops-command-bar__actions > .select-sm,
  .ops-command-bar__actions > .select-std {
    min-width: 9rem;
  }

  .ops-filter-label {
    color: var(--color-text-secondary);
    @apply text-xs font-semibold;
  }

  .ops-inline-alert {
    border-radius: var(--radius-lg);
    @apply border px-3.5 py-2.5 text-sm leading-6;
  }

  .ops-table-focus {
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xs);
    border: 1px solid rgba(226, 232, 240, 0.94);
    background: rgba(255, 255, 255, 0.98);
  }

  .ops-table-focus table {
    min-width: 760px;
  }

  .ops-table-focus thead,
  .ops-table-focus .table-header {
    background: rgba(248, 250, 252, 0.96);
  }

  .ops-table-focus th,
  .ops-table-focus .table-th {
    color: var(--color-text-tertiary);
    @apply px-3.5 py-2.5 text-xs font-semibold;
  }

  .ops-table-focus td,
  .ops-table-focus .table-td,
  .ops-table-focus .table-td-strong {
    @apply px-3.5 py-2.5 text-sm;
  }

  .ops-table-focus tbody tr:hover {
    background: rgba(248, 250, 252, 0.92);
  }

  .ops-table-focus .table-td-strong {
    color: var(--color-text-primary);
    @apply font-semibold;
  }

  .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-4 py-4 md:px-5 md:py-5;
  }

  .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-3.5 md:p-4;
  }

  .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-3.5 py-3.5 transition duration-150 hover:border-slate-300 hover:bg-white;
  }

  .ux-step-list {
    @apply grid gap-2;
  }

  .ux-step-item {
    border-color: rgba(226, 232, 240, 0.94);
    background: rgba(248, 250, 252, 0.84);
    @apply flex items-start gap-3 rounded-lg border px-3 py-2.5 text-sm;
  }

  .ux-step-item__index {
    background: rgba(0, 57, 138, 0.08);
    color: var(--color-accent-primary);
    @apply flex size-6 shrink-0 items-center justify-center rounded-md text-xs font-semibold;
  }

  .ux-command-note {
    border-color: rgba(203, 213, 225, 0.9);
    background: rgba(248, 250, 252, 0.82);
    @apply rounded-lg border px-3 py-2 text-xs leading-5 text-slate-600;
  }

  .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-1.5 text-xl font-semibold tracking-tight;
  }

  .metric-card__note {
    color: var(--color-text-secondary);
    @apply mt-1.5 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);
    scrollbar-gutter: stable;
    @apply max-w-full overflow-x-auto overflow-y-hidden overscroll-x-contain rounded-lg 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)];
  }

  .detail-workspace-grid {
    @apply grid gap-5 lg:grid-cols-[minmax(0,1.45fr),minmax(280px,0.72fr)];
  }

  .detail-workspace-grid--payment {
    @apply lg:grid-cols-[minmax(0,1fr),320px];
  }

  .detail-command-panel {
    border-color: rgba(203, 213, 225, 0.92);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.9));
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xs);
    @apply border p-3.5 md:p-4;
  }

  .detail-fact-grid {
    @apply grid gap-2.5 md:grid-cols-2;
  }

  .detail-fact-card {
    border-color: rgba(226, 232, 240, 0.94);
    background: rgba(255, 255, 255, 0.92);
    border-radius: var(--radius-sm);
    @apply border px-3 py-2.5 text-sm;
  }

  .detail-fact-card__label {
    color: var(--color-text-tertiary);
    @apply text-xs font-semibold;
  }

  .detail-fact-card__value {
    color: var(--color-text-primary);
    @apply mt-1 break-words font-medium;
  }

  .detail-evidence-card {
    border-color: rgba(226, 232, 240, 0.94);
    background: rgba(248, 250, 252, 0.72);
    border-radius: var(--radius-sm);
    @apply border px-3.5 py-3 text-sm;
  }

  .detail-evidence-card--accent {
    border-color: rgba(0, 57, 138, 0.2);
    background: rgba(0, 57, 138, 0.045);
  }

  .detail-timeline {
    @apply space-y-2.5;
  }

  .detail-timeline-item {
    border-color: rgba(226, 232, 240, 0.94);
    background: rgba(255, 255, 255, 0.94);
    border-radius: var(--radius-sm);
    @apply border px-3 py-2.5 text-sm;
  }

  .detail-timeline-item--current {
    border-color: rgba(0, 57, 138, 0.28);
    background: rgba(0, 57, 138, 0.055);
  }

  .detail-timeline-item--done {
    border-color: rgba(16, 185, 129, 0.28);
    background: rgba(236, 253, 245, 0.88);
  }

  .detail-action-stack {
    @apply grid gap-3 overflow-visible;
  }

  .detail-action-panel {
    overflow: visible;
  }

  .detail-action-card {
    border-color: rgba(226, 232, 240, 0.94);
    background: rgba(255, 255, 255, 0.96);
    border-radius: var(--radius-sm);
    @apply border p-3.5;
  }

  .workflow-action-bar {
    @apply flex flex-wrap items-center gap-2;
  }

  .notification-inbox {
    @apply space-y-3;
  }

  .notification-row-card {
    border-color: rgba(226, 232, 240, 0.94);
    background: rgba(255, 255, 255, 0.96);
    border-radius: var(--radius-sm);
    @apply border px-4 py-3 transition-colors hover:border-slate-300 hover:bg-slate-50/50;
  }

  .notification-row-card--unread {
    border-color: rgba(0, 57, 138, 0.22);
    background: rgba(0, 57, 138, 0.035);
  }

  .notification-row-card__meta {
    color: var(--color-text-tertiary);
    @apply text-xs font-medium;
  }

  .finance-status-strip {
    @apply grid gap-3 md:grid-cols-2 xl:grid-cols-5;
  }

  .finance-metric-card {
    border-color: rgba(203, 213, 225, 0.88);
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.88));
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xs);
    @apply min-h-[92px] border p-3.5;
  }

  .finance-metric-card__label {
    color: var(--color-text-tertiary);
    @apply text-xs font-semibold;
  }

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

  .finance-workspace-grid {
    @apply grid gap-5 xl:grid-cols-[340px,minmax(0,1fr)];
  }

  .finance-command-panel {
    border-color: rgba(203, 213, 225, 0.92);
    background: rgba(255, 255, 255, 0.97);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xs);
    @apply border p-3.5 md:p-4;
  }

  .finance-list-card {
    border-color: rgba(226, 232, 240, 0.94);
    background: rgba(255, 255, 255, 0.96);
    border-radius: var(--radius-sm);
    @apply w-full border px-3 py-3 text-left transition-colors hover:border-slate-300 hover:bg-slate-50/60;
  }

  .finance-list-card--active {
    border-color: rgba(0, 57, 138, 0.34);
    background: rgba(0, 57, 138, 0.055);
  }

  .admin-command-panel {
    border-color: rgba(203, 213, 225, 0.92);
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.9));
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xs);
    @apply border p-3.5 md:p-4;
  }

  .admin-tile-grid {
    @apply grid gap-3 md:grid-cols-2 xl:grid-cols-4;
  }

  .admin-tile-card {
    border-color: rgba(226, 232, 240, 0.94);
    background: rgba(255, 255, 255, 0.96);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xs);
    @apply border p-3.5 transition-colors hover:border-slate-300 hover:bg-slate-50/60 md:p-4;
  }

  .admin-tile-card__icon {
    background: rgba(0, 57, 138, 0.08);
    color: var(--color-accent-primary);
    @apply flex size-9 shrink-0 items-center justify-center rounded-lg;
  }

  .admin-workspace-grid {
    @apply grid gap-5 xl:grid-cols-[220px,280px,minmax(0,1fr)];
  }

  .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-4 xl:grid-cols-[minmax(0,1.72fr),minmax(300px,0.86fr)] xl:items-stretch;
  }

  .portal-home-grid--collaboration {
    @apply xl:grid-cols-[minmax(0,1.42fr),minmax(300px,0.92fr)];
  }

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

  .portal-work-summary {
    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-3 px-4 py-3.5 md:flex-row md:items-center md:justify-between md:px-5;
  }

  .portal-work-summary__eyebrow {
    color: var(--color-accent-primary);
    @apply text-xs font-bold;
  }

  .portal-work-summary__title {
    color: var(--color-text-primary);
    @apply mt-1 text-lg font-semibold leading-7 md:text-xl;
  }

  .portal-work-summary__meta {
    color: var(--color-text-tertiary);
    @apply mt-1 text-xs font-medium;
  }

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

  .portal-quick-entry-grid {
    @apply grid gap-2 sm:grid-cols-2 xl:grid-cols-3;
  }

  .portal-quick-entry {
    border: 1px solid rgba(226, 232, 240, 0.94);
    background: rgba(255, 255, 255, 0.92);
    border-radius: var(--radius-sm);
    color: var(--color-text-primary);
    @apply flex min-h-[64px] items-center gap-3 px-3.5 py-3 transition-colors hover:border-slate-300 hover:bg-white;
  }

  .portal-quick-entry__icon {
    background: rgba(0, 57, 138, 0.08);
    color: var(--color-accent-primary);
    @apply flex size-9 shrink-0 items-center justify-center rounded-lg;
  }

  .portal-quick-entry__title {
    @apply block truncate text-sm font-semibold;
  }

  .portal-quick-entry__action {
    color: var(--color-text-tertiary);
    @apply mt-0.5 block text-xs font-medium;
  }

  .portal-task-row {
    background: rgba(255, 255, 255, 0.88);
    color: var(--color-text-primary);
    @apply grid min-h-[56px] grid-cols-[auto,minmax(0,1fr)] items-center gap-3 px-3.5 py-2.5 transition-colors hover:bg-white md:grid-cols-[auto,minmax(0,1fr),auto,auto];
  }

  .portal-task-row--warning {
    background: rgba(255, 251, 235, 0.74);
  }

  .portal-task-row--high {
    background: rgba(254, 242, 242, 0.78);
  }

  .portal-task-row__icon {
    background: rgba(0, 57, 138, 0.08);
    color: var(--color-accent-primary);
    @apply flex size-9 items-center justify-center rounded-lg;
  }

  .portal-task-row--warning .portal-task-row__icon {
    @apply bg-amber-50 text-amber-700;
  }

  .portal-task-row--high .portal-task-row__icon {
    @apply bg-red-50 text-red-700;
  }

  .portal-task-row__title {
    color: var(--color-text-primary);
    @apply block truncate text-sm font-semibold;
  }

  .portal-task-row__reason {
    color: var(--color-text-secondary);
    @apply mt-1 block text-xs leading-5;
  }

  .portal-task-row__meta {
    color: var(--color-text-secondary);
    @apply ml-12 inline-flex w-fit rounded-full bg-slate-100 px-2.5 py-0.5 text-xs font-semibold md:ml-0;
  }

  .portal-task-row__action {
    color: var(--color-accent-primary);
    @apply ml-12 text-sm font-semibold md:ml-0;
  }

  .portal-empty-start {
    border: 1px dashed rgba(203, 213, 225, 0.9);
    background: rgba(248, 250, 252, 0.78);
    @apply flex flex-col gap-4 rounded-lg px-4 py-4 md:flex-row md:items-center md:justify-between;
  }

  .portal-empty-start__title {
    color: var(--color-text-primary);
    @apply text-base font-semibold;
  }

  .portal-empty-start__desc {
    color: var(--color-text-secondary);
    @apply mt-1 text-sm leading-6;
  }

  .portal-inline-actions {
    @apply flex flex-wrap gap-2;
  }

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

  .portal-list-card {
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(226, 232, 240, 0.94);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-xs);
    @apply block px-3 py-2.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-sm);
    @apply px-3.5 py-3;
  }

  .portal-action-stack {
    @apply grid gap-2 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-sm);
    box-shadow: var(--shadow-xs);
    @apply px-3 py-2.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 py-3;
  }

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

  .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-sm);
    @apply px-3 py-2.5;
  }

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

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

  .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-9 rounded-lg border-slate-200 bg-slate-50 p-1;
  }

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

  .portal-secondary-drawer {
    @apply p-3 md:p-3.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-4;
  }

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

  .portal-compact-group {
    @apply rounded-lg border border-slate-200 bg-white/80 px-3 py-2.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);
  }
}