@import 'tailwindcss';

@source '../../vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php';
@source '../../storage/framework/views/*.php';

@theme {
    --font-sans: 'Instrument Sans', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
        'Segoe UI Symbol', 'Noto Color Emoji';
}

@layer base {
    [x-cloak] { display: none !important; }
    html { @apply bg-slate-100 antialiased; }
    body { @apply min-w-80 text-slate-900; font-family: 'Instrument Sans', ui-sans-serif, system-ui, sans-serif; }
    button, [role="button"], summary { -webkit-tap-highlight-color: transparent; }
    button:not(:disabled), [role="button"]:not(:disabled), summary { @apply cursor-pointer; }
    ::selection { @apply bg-cyan-200 text-cyan-950; }
}

@layer components {
    .nav-link { @apply relative flex items-center gap-3 rounded-xl px-3 py-2.5 text-sm font-semibold text-slate-400 transition duration-150 hover:bg-white/[.07] hover:text-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-cyan-400; }
    .nav-link-active { @apply bg-cyan-400/10 text-cyan-200; }
    .nav-link-active::before { content: ''; @apply absolute -left-3 h-6 w-1 rounded-r-full bg-cyan-400; }
    /* The dashboard is the entry point and is deliberately louder than the rest of the navigation. */
    .nav-dashboard { @apply flex items-center gap-3 rounded-xl bg-gradient-to-br from-cyan-600 to-cyan-800 px-3 py-3 text-white shadow-lg shadow-cyan-950/40 ring-1 ring-cyan-400/30 transition hover:from-cyan-500 hover:to-cyan-700 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-cyan-300; }
    .nav-dashboard-active { @apply from-cyan-500 to-cyan-700 ring-2 ring-cyan-300/70; }
    .nav-dashboard-icon { @apply flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-white/15; }
    .eyebrow { @apply text-[10px] font-bold uppercase tracking-[.2em] text-cyan-700; }
    .page-title { @apply text-3xl font-black tracking-[-.025em] text-slate-950 sm:text-4xl; }
    .page-subtitle { @apply mt-2 max-w-2xl text-sm leading-6 text-slate-600; }
    .section-title { @apply text-xl font-bold tracking-tight text-slate-950; }
    .panel { @apply overflow-hidden rounded-2xl border border-slate-200/90 bg-white shadow-[0_1px_2px_rgba(15,23,42,.04),0_8px_24px_rgba(15,23,42,.035)]; }
    .panel-header { @apply flex items-center justify-between gap-4 border-b border-slate-200 px-5 py-4; }
    .metric { @apply flex min-h-32 flex-col justify-between rounded-2xl border border-slate-200 bg-white p-5 shadow-sm; }
    .metric-dark { @apply border-slate-900 bg-slate-950 text-white; }
    .metric-label { @apply text-xs font-bold uppercase tracking-[.14em] text-slate-500; }
    .metric-dark .metric-label { @apply text-slate-500; }
    .metric strong { @apply mt-3 text-4xl font-black tracking-tight text-slate-950; }
    .metric-dark strong { @apply text-white; }
    .metric-foot { @apply mt-2 text-xs text-slate-500; }
    .event-row { @apply flex items-center gap-4 px-5 py-4 transition hover:bg-slate-50; }
    .date-tile { @apply flex h-12 w-12 shrink-0 flex-col items-center justify-center rounded-xl bg-cyan-50 text-cyan-950; }
    .date-tile strong { @apply text-lg leading-none; }
    .date-tile span { @apply mt-1 text-[10px] font-bold uppercase tracking-wide; }
    .badge { @apply inline-flex items-center rounded-full bg-slate-100 px-2.5 py-1 text-[11px] font-bold text-slate-700; }
    .badge-green { @apply bg-emerald-100 text-emerald-800; }
    .status-dot { @apply inline-flex items-center gap-1.5 text-xs font-bold; }
    .status-dot::before { content: ''; @apply h-2 w-2 rounded-full bg-slate-400; }
    .status-running::before { @apply bg-emerald-500; }
    .status-incomplete::before { @apply bg-amber-500; }
    .status-closed::before { @apply bg-slate-500; }
    .text-link { @apply text-sm font-bold text-cyan-800 transition hover:text-cyan-950; }
    .button-primary { @apply inline-flex min-h-10 items-center justify-center gap-2 rounded-xl bg-cyan-700 px-4 py-2.5 text-sm font-bold text-white shadow-sm transition hover:bg-cyan-800 active:translate-y-px focus:outline-none focus:ring-2 focus:ring-cyan-500 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50; }
    .button-secondary { @apply inline-flex min-h-10 items-center justify-center gap-2 rounded-xl border border-slate-300 bg-white px-4 py-2.5 text-sm font-bold text-slate-700 transition hover:border-slate-400 hover:bg-slate-50 active:translate-y-px focus:outline-none focus:ring-2 focus:ring-cyan-500 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50; }
    .button-danger { @apply inline-flex items-center justify-center rounded-xl border border-rose-200 bg-rose-50 px-3 py-2 text-sm font-bold text-rose-700 transition hover:border-rose-300 hover:bg-rose-100 focus:outline-none focus:ring-2 focus:ring-rose-400 focus:ring-offset-2; }
    .icon-button { @apply inline-flex h-10 w-10 shrink-0 items-center justify-center rounded-xl text-slate-500 transition hover:bg-slate-100 hover:text-slate-950 focus:outline-none focus:ring-2 focus:ring-cyan-500; }
    .field-label { @apply block text-sm font-bold text-slate-800; }
    .field { @apply block min-h-11 w-full rounded-xl border border-slate-300 bg-white px-3.5 py-2.5 text-sm font-normal text-slate-900 outline-none transition placeholder:text-slate-400 hover:border-slate-400 focus:border-cyan-600 focus:ring-3 focus:ring-cyan-100 disabled:cursor-not-allowed disabled:bg-slate-100; }
    .field-error { @apply mt-1.5 text-xs font-semibold text-rose-700; }
    /* Tooltip of a step in the phase timeline. Shown on hover and on keyboard focus. */
    .step-tooltip { @apply pointer-events-none absolute left-1/2 top-full z-30 mt-2 w-64 max-w-[85vw] -translate-x-1/2 rounded-lg bg-slate-900 px-3 py-2 text-xs leading-5 text-white opacity-0 shadow-xl transition-opacity duration-150 group-hover:opacity-100 group-focus-within:opacity-100; }
    .collapsible { @apply rounded-xl border border-slate-200 p-4; }
    .collapsible-summary { @apply flex cursor-pointer list-none items-center justify-between gap-3 text-sm font-bold text-slate-800 marker:content-none; }
    .collapsible-summary::-webkit-details-marker { display: none; }
    .collapsible-marker { @apply shrink-0 text-slate-400 transition; }
    .collapsible[open] .collapsible-marker { @apply rotate-180; }
    .data-table { @apply w-full text-left text-sm; }
    .data-table th { @apply bg-slate-50 px-5 py-3 text-[10px] font-bold uppercase tracking-[.14em] text-slate-500; }
    .data-table td { @apply border-t border-slate-200 px-5 py-4 align-middle; }
    .detail-label { @apply text-[10px] font-bold uppercase tracking-[.14em] text-slate-500; }
    .detail-value { @apply mt-1 text-sm font-semibold text-slate-900; }
    .empty-state { @apply p-8 text-center text-sm text-slate-500; }
    .save-indicator { @apply inline-flex items-center gap-2 text-xs font-bold text-slate-500; }
    .save-dot { @apply h-2 w-2 rounded-full bg-slate-400; }
    .save-saving .save-dot { @apply animate-pulse bg-cyan-500; }
    .save-saved .save-dot { @apply bg-emerald-500; }
    .save-error .save-dot { @apply bg-red-500; }
    .watch-grid { @apply grid gap-6 xl:grid-cols-2; }
    .calendar-nav { @apply cursor-pointer select-none rounded-lg px-2.5 py-1 text-xl leading-none text-slate-500 transition hover:bg-slate-100 hover:text-slate-950; }
    .calendar-month { @apply grid grid-cols-7 border-l border-t border-slate-200; }
    .calendar-weekday { @apply select-none border-b border-r border-slate-200 bg-slate-50 px-3 py-2 text-center text-[10px] font-bold uppercase tracking-[.14em] text-slate-500; }
    .calendar-cell { @apply min-h-32 select-none border-b border-r border-slate-200 bg-white p-2; }
    .calendar-cell-muted { @apply bg-slate-50/70 text-slate-400; }
    .calendar-event { @apply mb-1 flex items-center gap-1 rounded-md bg-slate-100 px-1.5 py-1 text-[11px] font-semibold text-slate-700 transition hover:bg-cyan-100 hover:text-cyan-900; }
    .calendar-event-watch { @apply border-l-2 border-cyan-600 bg-cyan-50 text-cyan-950; }
    .calendar-event-time { @apply shrink-0 text-[10px] font-black text-slate-500; }
    .calendar-week { @apply grid grid-cols-[5.5rem_repeat(7,minmax(0,1fr))] border-l border-t border-slate-200; }
    .calendar-week-time { @apply min-h-24 border-b border-r border-slate-200 bg-slate-50 p-2 text-[10px] font-bold uppercase tracking-wide text-slate-500; }
    .calendar-week-column { @apply min-h-24 border-b border-r border-slate-200 bg-white p-2; }
    .calendar-week-event { @apply mb-2 block rounded-lg border border-slate-200 bg-slate-50 p-2 text-xs transition hover:border-cyan-400 hover:bg-cyan-50; }
    .calendar-week-event strong { @apply block text-[10px] text-cyan-800; }
    .calendar-week-event span { @apply mt-1 block font-bold text-slate-900; }
    .calendar-week-event small { @apply mt-1 block truncate text-[10px] text-slate-500; }
    .segmented-tabs { @apply inline-grid grid-flow-col auto-cols-fr rounded-xl border border-slate-200 bg-slate-100 p-1; }
    .segmented-tab { @apply flex min-h-9 select-none items-center justify-center gap-2 whitespace-nowrap rounded-lg px-3 py-2 text-sm font-bold text-slate-600 transition focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-cyan-500; }
    .segmented-tab:hover { @apply text-slate-950; }
    .segmented-tab-active { @apply bg-white text-cyan-800 shadow-sm ring-1 ring-slate-200/70; }
    .segmented-count { @apply rounded-full bg-slate-200 px-1.5 py-0.5 text-[10px] tabular-nums text-slate-600; }
    .segmented-tab-active .segmented-count { @apply bg-cyan-100 text-cyan-800; }
    .toolbar { @apply flex flex-wrap items-center justify-between gap-3 rounded-2xl border border-slate-200 bg-white p-3 shadow-sm; }
    .drawer-enter-active, .drawer-leave-active { transition: opacity .2s ease; }
    .drawer-enter-active section, .drawer-leave-active section { transition: transform .25s cubic-bezier(.22,1,.36,1); }
    .drawer-enter-from, .drawer-leave-to { opacity: 0; }
    .drawer-enter-from section, .drawer-leave-to section { transform: translateX(100%); }
    .route-progress { @apply pointer-events-none fixed inset-x-0 top-0 z-[200] h-0.5 origin-left scale-x-0 bg-cyan-500 opacity-0; transition: transform 8s cubic-bezier(.1,.5,.2,1), opacity .2s; }
    .route-progress-loading { @apply scale-x-[.82] opacity-100; }
    .route-progress-done { @apply scale-x-100 opacity-0; transition: transform .15s ease, opacity .3s .1s; }
}