/**
 * 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(--bg-gray-light);
    border: 1px solid #dee2e6;
    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 #dee2e6; 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: #adb5bd; font-size: 0.8em; }
.sortable-header.sort-asc::after { content: ' \2191'; color: #495057; }
.sortable-header.sort-desc::after { content: ' \2193'; color: #495057; }

/* 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: #adb5bd; font-size: 0.8em; }
.sortable-header .sort-handle.sort-asc::after { content: '\2191 '; color: #495057; }
.sortable-header .sort-handle.sort-desc::after { content: '\2193 '; color: #495057; }

/* 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: #adb5bd;
    font-size: inherit;
    line-height: 1;
    vertical-align: baseline;
    cursor: help;
    text-decoration: none;
}
.help-icon:hover,
.help-icon:focus-visible { color: #6c757d; }
.help-term {
    cursor: help;
    text-decoration: underline dotted;
    text-underline-offset: 2px;
    text-decoration-thickness: 1px;
}