780 行
19 KiB
CSS
780 行
19 KiB
CSS
/*
|
|
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;
|
|
}
|
|
|
|
.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-5 py-5 md:flex-row md:items-end md:justify-between md:px-6;
|
|
}
|
|
|
|
.ops-status-strip {
|
|
@apply grid gap-3;
|
|
}
|
|
|
|
.ops-status-strip .metric-card {
|
|
border-radius: var(--radius-lg);
|
|
box-shadow: var(--shadow-xs);
|
|
@apply px-3.5 py-3.5;
|
|
}
|
|
|
|
.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 md:p-3.5;
|
|
}
|
|
|
|
.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-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);
|
|
}
|
|
|
|
.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-4 py-3 text-xs font-semibold;
|
|
}
|
|
|
|
.ops-table-focus td,
|
|
.ops-table-focus .table-td,
|
|
.ops-table-focus .table-td-strong {
|
|
@apply px-4 py-3 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-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)];
|
|
}
|
|
|
|
.detail-workspace-grid {
|
|
@apply grid gap-5 xl:grid-cols-[minmax(0,1.45fr),minmax(300px,0.72fr)];
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
.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 border p-4;
|
|
}
|
|
|
|
.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-2 text-2xl font-bold;
|
|
}
|
|
|
|
.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-4 md:p-5;
|
|
}
|
|
|
|
.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-4 md:p-5;
|
|
}
|
|
|
|
.admin-tile-grid {
|
|
@apply grid gap-4 md:grid-cols-2 xl:grid-cols-3;
|
|
}
|
|
|
|
.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-4 transition-colors hover:border-slate-300 hover:bg-slate-50/60 md:p-5;
|
|
}
|
|
|
|
.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-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-sm);
|
|
box-shadow: var(--shadow-xs);
|
|
@apply block px-3.5 py-3 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-3 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.5 py-3;
|
|
}
|
|
|
|
.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.5 md:p-4;
|
|
}
|
|
|
|
.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.5 py-3;
|
|
}
|
|
|
|
.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);
|
|
}
|
|
}
|