/**
 * DH Suite — shared components.
 *
 * Split out of components.css, which had grown to 1,073 lines
 * across eleven unrelated families. Same layer, same order: these are
 * linked in the sequence they were concatenated, because within a layer
 * later source wins.
 */

@layer components {

/* ==========================================================================
   Buttons
   ========================================================================== */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-2);
    padding: var(--spacing-3) var(--spacing-6);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-medium);
    line-height: 1.5;
    text-align: center;
    text-decoration: none;
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.btn:hover {
    text-decoration: none;
}

.btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.btn:focus-visible {
    outline: var(--focus-ring);
    outline-offset: var(--focus-ring-offset);
}

/* --- Variants ----------------------------------------------------------- */

.btn-primary {
    /* Not `white`: the brand color is the customer's, and a pale one needs
       dark text. suite_base.html derives --color-on-brand from it. */
    color: var(--color-on-brand, white);
    background-color: var(--color-primary);
    border-color: var(--color-primary);
}

.btn-primary:hover:not(:disabled) {
    background-color: var(--color-primary-dark);
    border-color: var(--color-primary-dark);
}

.btn-secondary {
    color: var(--color-gray-700);
    background-color: white;
    border-color: var(--color-gray-300);
}

.btn-secondary:hover:not(:disabled) {
    background-color: var(--color-gray-50);
    border-color: var(--color-gray-400);
}

.btn-danger {
    color: white;
    /* The darker red: white on --color-danger is 3.8:1, under the 4.5:1 AA
       minimum for button text. */
    background-color: var(--color-danger-dark);
    border-color: var(--color-danger-dark);
}

.btn-danger:hover:not(:disabled) {
    background-color: var(--color-danger-text);
    border-color: var(--color-danger-text);
}

.btn-success {
    color: white;
    background-color: var(--color-success);
    border-color: var(--color-success);
}

.btn-success:hover:not(:disabled) {
    background-color: var(--color-success-dark);
    border-color: var(--color-success-dark);
}

.btn-warning {
    color: var(--color-gray-900);
    background-color: var(--color-warning);
    border-color: var(--color-warning);
}

.btn-warning:hover:not(:disabled) {
    background-color: var(--color-warning-dark);
    border-color: var(--color-warning-dark);
}

.btn-ghost {
    color: var(--color-gray-700);
    background-color: transparent;
    border-color: transparent;
}

.btn-ghost:hover:not(:disabled) {
    background-color: var(--color-gray-100);
}

/* --- Sizes -------------------------------------------------------------- */

.btn-sm {
    padding: var(--spacing-2) var(--spacing-4);
    font-size: var(--font-size-sm);
}

.btn-lg {
    padding: var(--spacing-4) var(--spacing-8);
    font-size: var(--font-size-lg);
}

/* --- Modifiers ---------------------------------------------------------- */

.btn-block {
    width: 100%;
}

.btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    background: transparent;
    border: none;
    color: inherit;
    cursor: pointer;
    border-radius: var(--radius-md);
    transition: all var(--transition-fast);
}

.btn-icon:hover:not(:disabled) {
    background-color: var(--color-gray-100);
}

.btn-icon:focus-visible {
    outline: var(--focus-ring);
    outline-offset: var(--focus-ring-offset);
}

.btn-icon:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    pointer-events: none;
}

/* Density toggle — pressed/active state.
   Brand-colored background with white icon to signal the toggle is on. */
#density-toggle.active {
    background-color: var(--color-primary);
    color: white;
}

#density-toggle.active:hover:not(:disabled) {
    background-color: var(--color-primary-dark);
}

/* ==========================================================================
   Cards
   ========================================================================== */

.card {
    background-color: white;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: var(--spacing-6);
    margin-bottom: var(--spacing-4);
}

.card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--spacing-4);
    padding-bottom: var(--spacing-4);
    border-bottom: 1px solid var(--color-gray-200);
}

.card-title {
    margin: 0;
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
}

.card-subtitle {
    margin: var(--spacing-1) 0 0;
    font-size: var(--font-size-sm);
    color: var(--color-gray-500);
    font-weight: var(--font-weight-normal);
}

.card-body {
    /* Content area — no default padding (card itself has padding) */
}

.card-footer {
    margin-top: var(--spacing-4);
    padding-top: var(--spacing-4);
    border-top: 1px solid var(--color-gray-200);
}

/* --- Stat card ---------------------------------------------------------- */

.stat-card {
    background-color: white;
    border-radius: var(--radius-lg);
    padding: var(--spacing-4);
    box-shadow: var(--shadow-sm);
    display: flex;
    align-items: center;
    gap: var(--spacing-4);
}

/* The text half of a .stat-card, beside .stat-icon.
 *
 * Shared because all three apps write it and none of them defined it. Respond
 * used the class name in markup with no rule behind it at all, and Rally had
 * the rule under a different name — .stat-info, which was ALSO a color
 * modifier (.stat-card.stat-info, one of five). A bare `.stat-info` rule
 * therefore matched the card as well as the block inside it, silently giving
 * the card `flex: 1; min-width: 0`.
 *
 * The color modifier keeps its name: it belongs to a family, and renaming one
 * member to resolve a collision breaks the family. */
.stat-content {
    flex: 1;
    min-width: 0;
}

/* ==========================================================================
   Tabs: views of one thing inside a page (settings, a catalog).
   Moving between pages is the sidebar's job. Moved from rally.css.
   ========================================================================== */

.tab-bar {
    display: flex;
    border-bottom: 2px solid var(--color-gray-200);
    margin-bottom: var(--spacing-6);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.tab-btn {
    padding: var(--spacing-3) var(--spacing-4);
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-600);
    cursor: pointer;
    white-space: nowrap;
    transition: color var(--transition-fast), border-color var(--transition-fast);
}

.tab-btn:hover {
    color: var(--color-gray-700);
}

.tab-btn.active,
.tab-btn[aria-selected="true"] {
    color: var(--color-primary);
    border-bottom-color: var(--color-primary);
}

.tab-btn:focus-visible {
    outline: var(--focus-ring);
    outline-offset: var(--focus-ring-offset);
}

/* While a list or panel loads */
.loading-text {
    text-align: center;
    padding: var(--spacing-8);
    color: var(--color-gray-600);
    font-size: var(--font-size-sm);
}

}