/**
 * SAM Shared Components CSS
 * Reusable component styles used across multiple dashboards
 */

/* ===================================================================
   Interactive Table Rows
   =================================================================== */

.clickable-row {
    cursor: pointer;
}

/* Target the cells (> *), not the tr — Bootstrap 5.3 paints each <td> with a
   solid --bs-table-bg that covers any tr-level background color. This mirrors
   Bootstrap's own .table-hover > tbody > tr:hover > * pattern. The pale-teal
   tint matches the .table-hover and .resource-row treatments elsewhere. */
.clickable-row > * {
    transition: background-color var(--transition-fast);
}

.clickable-row:hover > * {
    background-color: rgba(var(--ncar-teal-rgb), 0.08) !important;
}

/* ===================================================================
   Stat Boxes (User Dashboard)
   =================================================================== */

.stat-box {
    background: var(--surface-tertiary);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-sm);
    padding: 15px;
    text-align: center;
}

/* ===================================================================
   Progress Bar Sizes
   =================================================================== */

.progress-small {
    height: 8px;
}

.progress-medium {
    height: 18px;
}

.progress-large {
    height: 20px;
}

.progress-xlarge {
    height: 24px;
}

.progress-xxlarge {
    height: 25px;
}

.progress-narrow {
    width: 60px;
}

/* ===================================================================
   Number input — hide browser spinner arrows
   =================================================================== */

.no-spinner::-webkit-outer-spin-button,
.no-spinner::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.no-spinner {
    -moz-appearance: textfield;   /* Firefox */
    appearance: textfield;
}

/* ===================================================================
   Button Sizes
   =================================================================== */

.xs {
    padding: 0.125rem 0.375rem;
    font-size: 0.75rem;
    line-height: 1.5;
    border-radius: 0.2rem;
}

/* ===================================================================
   Table Column Widths
   =================================================================== */

.table-col-expand {
    width: 30px;
}

.table-col-usage {
    width: 200px;
}

.table-col-actions {
    width: 180px;
}

/* ===================================================================
   Utility Classes
   =================================================================== */

.transition-smooth {
    transition: transform var(--transition-base);
}

.cursor-pointer {
    cursor: pointer;
}

.expired-allocation {
    opacity: 0.6;
}

/* ===================================================================
   Dropdowns
   =================================================================== */

.dropdown-list {
    display: none;
    max-height: 200px;
    overflow-y: auto;
}

.dropdown-list.active {
    display: block;
}

.scrollable-list {
    max-height: 200px;
    overflow-y: auto;
}

/* ===================================================================
   Spinners
   =================================================================== */

.loading-spinner-lg {
    width: 3rem;
    height: 3rem;
}

/* ===================================================================
   Spacing Utilities
   =================================================================== */

.section-spacing {
    margin-top: 30px;
}

/* ===================================================================
   Icon Sizes
   =================================================================== */

/* Large decorative icons (e.g. status page service icons) */
.icon-jumbo {
    font-size: 70px;
}

/* ===================================================================
   Text Utilities
   =================================================================== */

/* Subdued detail text — smaller size, normal weight, for secondary info
   within card bodies (e.g. org/contract/directory lists in project cards) */
.text-detail {
    font-size: 0.9rem;
    font-weight: normal;
}

/* Stacked modal z-index is handled in js/htmx-config.js via a
   shown.bs.modal listener — a CSS-only approach can't cover cases
   where the stacked modals aren't DOM siblings (e.g. the singleton
   samConfirmModal at body level on top of a page-scoped modal). */

/* ===================================================================
   SVG chart links
   ===================================================================
   matplotlib chart legends and bars emit <a xlink:href> wrappers via
   Artist.set_url() for clickable projcode/username/day entries (see
   js/svg-chart-links.js). Strip the default browser link styling so
   the legend looks identical to its non-clickable form — only the
   pointer cursor signals interactivity. */
svg a, svg a:hover, svg a:focus, svg a:visited {
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    outline: none;
}

/* ── Fragment styles extracted from inline <style> blocks (CSP work) ── */

/* edit_project.html: contracts/orgs tree lists */
.tree-list { list-style: none; padding-left: 1.25rem; }
.tree-list > li { border-left: 2px solid var(--border-default); padding: 0.25rem 0.5rem; margin-bottom: 0.1rem; }

/* admin configuration card: two-column definition stats */
.config-stats {
    display: grid;
    grid-template-columns: max-content 1fr;
    column-gap: 1.25rem;
    row-gap: 0;
}
.config-stats dt, .config-stats dd {
    margin: 0;
    padding: 2px 0;
    word-break: break-word;
}

/* project allocation tree (admin edit_project) */
.btn-xs { padding: 0.1rem 0.35rem; font-size: 0.75rem; }
.alloc-resource-header:hover td { filter: brightness(0.96); }

/* Caret rotation driven by Bootstrap's aria-expanded update */
.alloc-resource-header .alloc-caret { transition: transform 0.15s ease; }
.alloc-resource-header[aria-expanded="true"] .alloc-caret { transform: rotate(90deg); }

/* Kill Bootstrap's height animation on <tbody> — looks jittery on table-row-groups.
   Zero transition-duration makes Bootstrap's getTransitionDurationFromElement() return 0,
   so .collapsing is removed immediately and the toggle snaps (same visual as d-none). */
tbody.alloc-tree-body.collapse,
tbody.alloc-tree-body.collapsing { transition: none !important; }

/* Dim the tree while a reload is in flight.
   htmx adds .htmx-request to any element listed in hx-indicator for the
   duration of the request — we use that to fade the existing tree so users
   see the UI is "doing something" during slow (~14s) refreshes. */
#allocationTreeContainer { transition: opacity 150ms ease; }
#allocationTreeContainer.htmx-request {
    opacity: 0.5;
    pointer-events: none;
}

/* resource_details: collapse chevron rotation */
.collapse-icon { transition: transform 0.2s ease; }
[aria-expanded="true"] .collapse-icon { transform: rotate(90deg); }

/* Sortable table headers (sortable_table.js, loaded globally in base.html).
   Pairs the global JS with its indicator so any `.sortable-header` shows a
   neutral up/down cue (click to sort) and an arrow for the active column.
   Mirrors the rule duplicated in admin.css / allocations.css. */
.sortable-header { cursor: pointer; user-select: none; white-space: nowrap; }
.sortable-header::after { content: ' \2195'; color: var(--text-tertiary); font-size: 0.8em; }
.sortable-header.sort-asc::after { content: ' \2191'; color: var(--text-primary); }
.sortable-header.sort-desc::after { content: ' \2193'; color: var(--text-primary); }

/* Secondary sort handle inside a sortable header (sortable_table.js):
   its own arrow for an alternate sort key on the same column, e.g.
   first-name sort to the left of "Name" (which sorts by last name). */
.sortable-header .sort-handle::after { content: '\2195 '; color: var(--text-tertiary); font-size: 0.8em; }
.sortable-header .sort-handle.sort-asc::after { content: '\2191 '; color: var(--text-primary); }
.sortable-header .sort-handle.sort-desc::after { content: '\2193 '; color: var(--text-primary); }

/* resource_details Historical Usage / Usage by User tables.
   Each lazily-loaded user/queue/date subtree renders as its own nested
   <table> inside a colspan cell, so without a fixed layout its columns
   size independently and the numeric values drift out of alignment with
   the parent table. Pinning both the parent (.usage-table-N) and the
   nested subtree (same class) to table-layout:fixed with a shared
   colgroup makes every tier line up column-for-column. The -5 variant is
   Historical Usage (Date + 4 numeric); -4 is Usage by User (Username +
   3 numeric). */
.usage-table-5, .usage-table-4 { table-layout: fixed; }
.usage-table-5 .ucol-name { width: 36%; }
.usage-table-5 .ucol-num  { width: 16%; }
.usage-table-4 .ucol-name { width: 40%; }
.usage-table-4 .ucol-num  { width: 20%; }

/* Help affordances (help.html macros, activated by tooltip-init.js).
   .help-icon — chrome-less ⓘ/? button next to a heading or label.
   .help-term — inline term/column-header with a dotted-underline cue. */
.help-icon {
    color: var(--text-tertiary);
    font-size: inherit;
    line-height: 1;
    vertical-align: baseline;
    cursor: help;
    text-decoration: none;
}
.help-icon:hover,
.help-icon:focus-visible { color: var(--text-secondary); }
.help-term {
    cursor: help;
    text-decoration: underline dotted;
    text-underline-offset: 2px;
    text-decoration-thickness: 1px;
}

/* <code> inside an alert.
   Measured: the global code colour on .alert-warning is 1.21:1, against 8.57:1
   for the alert's own body text — effectively invisible. Alert palettes pick a
   foreground for their own background, so the only safe colour in there is the
   one the alert already chose.

   Not cosmetic. The string this hides most often IS the redirect address —
   "your mail is going HERE, not to the PI" on the XRAS Notify modal and the
   admin Notifications card. A safety interlock nobody can read is not one.

   Colour only — no background tint. A tint here would be a new raw colour
   (test_no_new_raw_colours is the gate) for no benefit: the monospace face
   already separates the address from the prose, and the 8.57:1 comes from
   inheriting the alert's own foreground, not from anything behind it. */
.alert code {
    color: inherit;
}