/* ============================================================================
   GRMS Console component styles.

   A small, token-driven component layer for the GRMS (Grant Response
   Management System) console. Everything is namespaced `.grms-*` so it never
   leaks into other consoles. Colours/radii/shadows reference the design tokens
   already defined in design-tokens.css / theme-buzzrfp.css — no new hex values.

   Replaces: ~16 inline `style="background:#hex"` buttons, 6 copy-pasted status
   badge colour blocks, duplicated metric/filter-chip markup, and ~29 arbitrary
   `text-[10px]/[11px]` sizes.

   Generated with मायावी शक्ति 🪬
   ============================================================================ */

/* ----------------------------------------------------------------------------
   Buttons
   ------------------------------------------------------------------------- */
.grms-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.75rem;          /* matches the old px-3 py-1.5 */
    border: 1px solid transparent;
    border-radius: var(--radius-md, 6px);
    font-size: var(--text-sm, 0.846rem);
    font-weight: var(--weight-medium, 500);
    line-height: 1.2;
    color: #fff;
    background: var(--brand-blue, #205493);
    cursor: pointer;
    text-decoration: none;
    transition: filter var(--transition-fast, 150ms ease),
                box-shadow var(--transition-fast, 150ms ease),
                background-color var(--transition-fast, 150ms ease);
    white-space: nowrap;
}
.grms-btn:hover     { filter: brightness(0.94); }
.grms-btn:active    { filter: brightness(0.88); }
.grms-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(32, 84, 147, 0.35);
}
.grms-btn:disabled,
.grms-btn[disabled] { opacity: 0.55; cursor: not-allowed; filter: none; }

/* Size modifiers */
.grms-btn--lg { padding: 0.625rem 1rem; font-size: var(--text-base, 1rem); }   /* larger CTA */
.grms-btn--sm { padding: 0.25rem 0.5rem; font-size: var(--text-xs, 0.769rem); } /* compact inline */
.grms-btn--block { width: 100%; justify-content: center; }

/* Semantic variants — one colour per role, from theme tokens */
.grms-btn--primary { background: var(--brand-blue, #205493); }
.grms-btn--success { background: var(--success-600, #16A34A); }
.grms-btn--info    { background: var(--info-600, #2563EB); }
.grms-btn--ai      { background: #7C3AED; }   /* AI actions — violet (brand-consistent accent) */

/* Ghost / secondary outline button */
.grms-btn--ghost {
    background: #fff;
    color: var(--color-text, #171717);
    border-color: var(--color-border-strong, #d4d4d4);
}
.grms-btn--ghost:hover { background: var(--color-surface-hover, #fafafa); filter: none; }

/* ----------------------------------------------------------------------------
   Cards
   ------------------------------------------------------------------------- */
.grms-card {
    background: #fff;
    border-radius: var(--radius-lg, 8px);
    box-shadow: var(--shadow-card, 0 1px 3px rgba(0, 0, 0, 0.08));
    border: 1px solid var(--color-border, #e5e5e5);
    padding: 1.25rem;                   /* matches old p-5 */
}
.grms-card--tight { padding: 0.75rem; }  /* action bars (old p-3) */

/* ----------------------------------------------------------------------------
   Status badges  (rendered by {% grms_status_badge %})
   ------------------------------------------------------------------------- */
.grms-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.125rem 0.5rem;
    border-radius: var(--radius-full, 9999px);
    font-size: var(--text-sm, 0.846rem);
    font-weight: var(--weight-medium, 500);
    line-height: 1.4;
    white-space: nowrap;
}
.grms-badge--success { background: var(--success-100, #DCFCE7); color: var(--success-800, #166534); }
.grms-badge--warning { background: var(--warning-100, #FEF3C7); color: var(--warning-800, #92400E); }
.grms-badge--danger  { background: var(--danger-100,  #FEE2E2); color: var(--danger-800,  #991B1B); }
.grms-badge--info    { background: var(--info-100,    #DBEAFE); color: var(--info-800,    #1E40AF); }
.grms-badge--neutral { background: var(--neutral-100, #f5f5f5); color: var(--neutral-600, #525252); }

/* ----------------------------------------------------------------------------
   Metric / KPI cards  (rendered by metric_card.html)
   ------------------------------------------------------------------------- */
.grms-metric {
    display: block;
    background: #fff;
    border-radius: var(--radius-lg, 8px);
    box-shadow: var(--shadow-card, 0 1px 3px rgba(0, 0, 0, 0.08));
    border: 1px solid var(--color-border, #e5e5e5);
    border-left: 4px solid var(--neutral-400, #a3a3a3);
    padding: 1rem;
    transition: box-shadow var(--transition-fast, 150ms ease),
                background-color var(--transition-fast, 150ms ease),
                transform var(--transition-fast, 150ms ease);
}
a.grms-metric:hover {
    box-shadow: var(--shadow-card-hover, 0 4px 12px rgba(0, 0, 0, 0.12));
    background: var(--color-surface-hover, #fafafa);
    transform: translateY(-3px);
}
a.grms-metric:active { transform: translateY(-1px); }
/* Nudge the trailing arrow to the right on hover — affordance that the tile is clickable. */
.grms-metric__label .fa-arrow-right { transition: transform var(--transition-fast, 150ms ease); }
a.grms-metric:hover .grms-metric__label .fa-arrow-right { transform: translateX(3px); }
.grms-metric__label { font-size: var(--text-xs, 0.769rem); color: var(--color-text-secondary, #525252); }
.grms-metric__value { font-size: var(--text-3xl, 1.538rem); font-weight: var(--weight-bold, 700); color: var(--color-text, #171717); line-height: 1.1; margin-top: 0.125rem; }
.grms-metric__hint  { font-size: var(--text-xs, 0.769rem); color: var(--color-text-muted, #a3a3a3); margin-top: 0.125rem; }

/* Accent border colours for metric cards */
.grms-metric--primary { border-left-color: var(--brand-blue, #205493); }
.grms-metric--success { border-left-color: var(--success-500, #22C55E); }
.grms-metric--info    { border-left-color: var(--info-500, #3B82F6); }
.grms-metric--warning { border-left-color: var(--warning-500, #F59E0B); }
.grms-metric--danger  { border-left-color: var(--danger-500, #EF4444); }
.grms-metric--neutral { border-left-color: var(--neutral-400, #a3a3a3); }

/* ----------------------------------------------------------------------------
   Filter chips  (rendered by filter_chip.html)
   ------------------------------------------------------------------------- */
.grms-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.25rem 0.625rem;
    border-radius: var(--radius-full, 9999px);
    font-size: var(--text-sm, 0.846rem);
    font-weight: var(--weight-medium, 500);
}
.grms-chip--info    { background: var(--info-100,    #DBEAFE); color: var(--info-800,    #1E40AF); }
.grms-chip--warning { background: var(--warning-100, #FEF3C7); color: var(--warning-800, #92400E); }
.grms-chip--danger  { background: var(--danger-100,  #FEE2E2); color: var(--danger-800,  #991B1B); }
.grms-chip--success { background: var(--success-100, #DCFCE7); color: var(--success-800, #166534); }
.grms-chip--neutral { background: var(--neutral-100, #f5f5f5); color: var(--neutral-600, #525252); }

/* ----------------------------------------------------------------------------
   Micro text  (replaces arbitrary text-[10px] / text-[11px])
   ------------------------------------------------------------------------- */
.grms-meta   { font-size: var(--text-xs, 0.769rem); }   /* ~10px */
.grms-meta-2 { font-size: var(--text-sm, 0.846rem); }   /* ~11px */

/* ----------------------------------------------------------------------------
   Pagination — active page marker (replaces inline style="background:#205493")
   ------------------------------------------------------------------------- */
.grms-page-active {
    background: var(--brand-blue, #205493);
    border-color: var(--brand-blue, #205493);
    color: #fff;
}

/* ----------------------------------------------------------------------------
   Collapsible "Add a grant" toggle (grants list) — declutters the top so the
   grants table is front-and-center. The chevron rotates when open.
   ------------------------------------------------------------------------- */
.grms-add-grant > summary {
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.625rem 0.875rem;
    background: #fff;
    border: 1px solid var(--color-border, #e5e5e5);
    border-radius: var(--radius-lg, 8px);
    box-shadow: var(--shadow-card, 0 1px 3px rgba(0, 0, 0, 0.08));
    cursor: pointer;
    font-size: var(--text-sm, 0.846rem);
    font-weight: var(--weight-medium, 500);
    color: var(--color-text, #171717);
    transition: background-color var(--transition-fast, 150ms ease);
}
.grms-add-grant > summary::-webkit-details-marker { display: none; }
.grms-add-grant > summary:hover { background: var(--color-surface-hover, #fafafa); }
.grms-add-chevron { transition: transform 0.2s ease; color: var(--color-text-muted, #a3a3a3); }
.grms-add-grant[open] > summary .grms-add-chevron { transform: rotate(180deg); }

/* ----------------------------------------------------------------------------
   Native <select> spacing — the Tailwind forms plugin draws a chevron, but the
   inline `px-2` utility overrides its right padding so the text collides with
   the arrow (e.g. "All statuses" looked struck through). Reserve room for it.
   ------------------------------------------------------------------------- */
.grms-page select { padding-right: 1.75rem; }

/* ----------------------------------------------------------------------------
   Saved-search chips (grants list) — pill with a hover-highlighted delete ×.
   ------------------------------------------------------------------------- */
.grms-saved {
    display: inline-flex;
    align-items: center;
    gap: 0.125rem;
    padding: 0.125rem 0.25rem 0.125rem 0.625rem;
    border-radius: var(--radius-full, 9999px);
    background: var(--neutral-100, #f5f5f5);
    border: 1px solid var(--color-border, #e5e5e5);
    font-size: var(--text-sm, 0.846rem);
    line-height: 1.4;
}
.grms-saved__name { color: var(--color-text-secondary, #525252); font-weight: var(--weight-medium, 500); }
.grms-saved__name:hover { color: var(--brand-blue, #205493); text-decoration: underline; }
.grms-saved__x {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.1rem;
    height: 1.1rem;
    border-radius: 9999px;
    color: var(--color-text-muted, #a3a3a3);
    font-size: 0.7rem;
    transition: background-color var(--transition-fast, 150ms ease),
                color var(--transition-fast, 150ms ease);
}
.grms-saved__x:hover { background: var(--danger-100, #FEE2E2); color: var(--danger-700, #B91C1C); }

/* Live-search: dim results while the debounced re-fetch is in flight. */
.grms-loading { opacity: 0.55; pointer-events: none; transition: opacity 0.15s ease; }

/* ----------------------------------------------------------------------------
   Entrance animations — applied to every GRMS page (wrapper has .grms-page).
   Cards, KPI tiles, and any element tagged .grms-rise-in (e.g. table panels)
   fade + rise in with a gentle stagger within their container. Respects
   prefers-reduced-motion.
   ------------------------------------------------------------------------- */
@keyframes grms-rise {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}

.grms-page .grms-metric,
.grms-page .grms-card,
.grms-page .grms-rise-in {
    animation: grms-rise 0.4s cubic-bezier(0.4, 0, 0.2, 1) both;
}

/* KPI tiles cascade (delays reset per grid — natural). */
.grms-page .grms-metric:nth-child(1) { animation-delay: 0.02s; }
.grms-page .grms-metric:nth-child(2) { animation-delay: 0.07s; }
.grms-page .grms-metric:nth-child(3) { animation-delay: 0.12s; }
.grms-page .grms-metric:nth-child(4) { animation-delay: 0.17s; }

/* Cards / panels cascade lightly within their column (4th+ just use 0 delay). */
.grms-page .grms-card:nth-child(1),
.grms-page .grms-rise-in:nth-child(1) { animation-delay: 0.04s; }
.grms-page .grms-card:nth-child(2),
.grms-page .grms-rise-in:nth-child(2) { animation-delay: 0.10s; }
.grms-page .grms-card:nth-child(3) { animation-delay: 0.16s; }
.grms-page .grms-card:nth-child(4) { animation-delay: 0.22s; }
.grms-page .grms-card:nth-child(5) { animation-delay: 0.28s; }

@media (prefers-reduced-motion: reduce) {
    .grms-page .grms-metric,
    .grms-page .grms-card,
    .grms-page .grms-rise-in { animation: none; }
    a.grms-metric:hover,
    a.grms-metric:active { transform: none; }
    a.grms-metric:hover .grms-metric__label .fa-arrow-right { transform: none; }
}