/* =====================================================================
   Animations and component classes lifted from the JSX `styles` block and
   the repeated Tailwind class strings (Card / Button / Input / Select).
   Everything else is plain Tailwind from the CDN.
   ===================================================================== */

@keyframes shimmer        { 0%   { transform: translateX(-100%); } 100% { transform: translateX(100%); } }
@keyframes fade-in        { from { opacity: 0; transform: translateY(6px); }  to { opacity: 1; transform: translateY(0); } }
@keyframes slide-in       { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes slide-in-right { from { opacity: 0; transform: translateX(40px); } to { opacity: 1; transform: translateX(0); } }
@keyframes scale-in       { from { opacity: 0; transform: scale(.95); }       to { opacity: 1; transform: scale(1); } }
@keyframes pulse-slow     { 0%, 100% { opacity: 1; } 50% { opacity: .6; } }

.animate-shimmer        { animation: shimmer 2.5s infinite; }
.animate-fade-in        { animation: fade-in .25s ease-out; }
.animate-slide-in       { animation: slide-in .3s ease-out; }
.animate-slide-in-right { animation: slide-in-right .3s ease-out; }
.animate-scale-in       { animation: scale-in .2s ease-out; }
.animate-pulse-slow     { animation: pulse-slow 2s infinite; }

/* --- Card ---------------------------------------------------------- */
.card {
  background: #fff;
  border-radius: 1rem;
  border: 1px solid rgb(226 232 240 / .6);
  box-shadow: 0 1px 3px rgb(0 0 0 / .04), 0 1px 2px rgb(0 0 0 / .06);
  transition: box-shadow .3s;
}
.card:hover { box-shadow: 0 4px 12px rgb(0 0 0 / .07); }

/* --- Buttons ------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: .375rem; font-weight: 500; border-radius: .5rem;
  transition: all .15s; font-size: .875rem; padding: .5rem .875rem;
  cursor: pointer; border: 0; line-height: 1.25rem;
}
.btn:active:not(:disabled) { transform: scale(.95); }
.btn:disabled { opacity: .4; cursor: not-allowed; }

.btn-primary   { background: #0f172a; color: #fff; }
.btn-primary:hover:not(:disabled) { background: #1e293b; }
.btn-secondary { background: #fff; color: #0f172a; border: 1px solid #cbd5e1; }
.btn-secondary:hover:not(:disabled) { background: #f8fafc; }
.btn-accent    { background: #2563eb; color: #fff; box-shadow: 0 1px 2px rgb(37 99 235 / .2); }
.btn-accent:hover:not(:disabled) { background: #1d4ed8; }
.btn-ghost     { background: transparent; color: #475569; }
.btn-ghost:hover:not(:disabled) { background: #f1f5f9; }
.btn-danger    { background: #dc2626; color: #fff; }
.btn-danger:hover:not(:disabled) { background: #b91c1c; }
.btn-success   { background: #059669; color: #fff; }
.btn-success:hover:not(:disabled) { background: #047857; }

.btn-sm { font-size: .8125rem; padding: .375rem .625rem; }
.btn-lg { font-size: 1rem; padding: .625rem 1.25rem; gap: .5rem; }

/* --- Form fields --------------------------------------------------- */
.fld {
  width: 100%; padding: .5rem .75rem; border-radius: .5rem;
  border: 1px solid #cbd5e1; background: #fff; font-size: .875rem; color: #0f172a;
  transition: border-color .15s, box-shadow .15s;
}
.fld:focus {
  outline: none; border-color: #3b82f6; box-shadow: 0 0 0 3px rgb(59 130 246 / .2);
}
.fld.is-error { border-color: #fca5a5; }
.fld[type="date"] { min-height: 2.375rem; }

select.fld { appearance: none; padding-right: 2.25rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .75rem center;
}

.field-error { font-size: .75rem; color: #dc2626; margin-top: .25rem; }
.field-hint  { font-size: .8125rem; color: #64748b; margin-top: .25rem; }
.field-label { font-size: .875rem; font-weight: 500; color: #475569; margin-bottom: .25rem; }

/* --- Tables -------------------------------------------------------- */
.tbl { width: 100%; border-collapse: collapse; }
.tbl th {
  font-size: .75rem; font-weight: 700; color: #64748b;
  text-transform: uppercase; letter-spacing: .05em;
  /* Never wrap a column label — a half-scrolled "CREATED BY" breaking to
     "REATED / BY" reads as a rendering fault rather than a clipped column. */
  white-space: nowrap;
}
.tabular { font-variant-numeric: tabular-nums; }

/* --- Pinned pipeline columns ---------------------------------------
   A pinned cell MUST be fully opaque. With a translucent background
   (e.g. Tailwind's bg-slate-50/70) the horizontally-scrolled columns show
   straight through it and the text collides. Backgrounds are set on the
   cells — not the row — so the pinned ones paint over what slides under. */
/* left:0 is the default so any table can just use .sticky-col
   (Department Summary does). .sticky-col-2 offsets past the checkbox column. */
.sticky-col   { position: sticky; left: 0; z-index: 10; }
.sticky-col-1 { left: 0; }
.sticky-col-2 { left: 2rem; }        /* clears the 2rem checkbox column */

.pipe-row  > td      { background: #ffffff; }
.pipe-row.is-odd > td{ background: #f8fafc; }
.pipe-row:hover > td { background: #eff6ff; }
.pipe-head > th      { background: #f8fafc; }
.pipe-foot > td      { background: #f8fafc; }

/* A soft edge so it reads as "columns scrolling underneath" rather than
   as clipped text. Only shown once the table is actually scrolled. */
.is-scrolled .sticky-edge::after {
  content: '';
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: 8px;
  transform: translateX(100%);
  background: linear-gradient(to right, rgba(15, 23, 42, .13), rgba(15, 23, 42, 0));
  pointer-events: none;
}
.sticky-edge { position: sticky; }

/* --- Modal --------------------------------------------------------- */
.modal-backdrop {
  position: fixed; inset: 0; background: rgb(15 23 42 / .6);
  backdrop-filter: blur(4px); z-index: 50;
  display: flex; align-items: center; justify-content: center; padding: 1rem;
}

/* --- Scrollbars ----------------------------------------------------
   The sidebar nav scrolls when a lot of projects are configured. The default
   OS scrollbar is wide and light, which reads as a rendering fault against
   the navy panel — these make it slim and on-theme.                     */
#sidebar-nav {
  scrollbar-width: thin;
  scrollbar-color: rgba(201, 169, 97, .35) transparent;   /* gold on navy */
}
#sidebar-nav::-webkit-scrollbar        { width: 6px; }
#sidebar-nav::-webkit-scrollbar-track  { background: transparent; }
#sidebar-nav::-webkit-scrollbar-thumb  { background: rgba(201, 169, 97, .3); border-radius: 99px; }
#sidebar-nav:hover::-webkit-scrollbar-thumb { background: rgba(201, 169, 97, .5); }

/* Wide tables (the pipeline) and any other scroll pane on a light surface. */
.overflow-x-auto, .overflow-y-auto, .overflow-auto {
  scrollbar-width: thin;
  scrollbar-color: #cbd5e1 transparent;
}
.overflow-x-auto::-webkit-scrollbar,
.overflow-y-auto::-webkit-scrollbar,
.overflow-auto::-webkit-scrollbar        { width: 8px; height: 8px; }
.overflow-x-auto::-webkit-scrollbar-track,
.overflow-y-auto::-webkit-scrollbar-track,
.overflow-auto::-webkit-scrollbar-track  { background: transparent; }
.overflow-x-auto::-webkit-scrollbar-thumb,
.overflow-y-auto::-webkit-scrollbar-thumb,
.overflow-auto::-webkit-scrollbar-thumb  { background: #cbd5e1; border-radius: 99px; }
.overflow-x-auto:hover::-webkit-scrollbar-thumb,
.overflow-y-auto:hover::-webkit-scrollbar-thumb,
.overflow-auto:hover::-webkit-scrollbar-thumb { background: #94a3b8; }

/* --- Misc ---------------------------------------------------------- */
.spinner {
  width: 1rem; height: 1rem; border: 2px solid rgb(255 255 255 / .35);
  border-top-color: #fff; border-radius: 50%; animation: spin .6s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

[hidden] { display: none !important; }

/* Print: only the request sheet, no chrome. */
@media print {
  #sidebar, header, #toasts, .no-print { display: none !important; }
  body { background: #fff; }
}