/**
 * 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: color var(--transition-fast), background-color var(--transition-fast),
        border-color var(--transition-fast), box-shadow 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-text);
    border-color: var(--color-success-text);
}

.btn-success:hover:not(:disabled) {
    /* Green-800. success-dark is lighter than the resting fill and puts
       white text at 3.3:1. */
    background-color: var(--badge-completed-text);
    border-color: var(--badge-completed-text);
}

.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: color var(--transition-fast), background-color 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. The icon shows the rows as they are now (two roomy
   rows, or four tight bars); when compact is on, the button is filled with the brand color
   and keeps a border, so the two states differ at a glance at the same size. */
#density-toggle {
    /* Fixed size in both states: the compact view shrinks other icon
       buttons (tables.css), and this one must not move the row it sits in */
    width: 40px;
    height: 40px;
    padding: 0;
    border: 1px solid var(--color-gray-300);
}

#density-toggle svg {
    width: 20px;
    height: 20px;
}

#density-toggle .density-compact,
#density-toggle.active .density-roomy {
    display: none;
}

#density-toggle.active .density-compact {
    display: inline;
}

#density-toggle.active {
    background-color: var(--color-primary);
    border-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);
}

/* A phone keeps its width for the content, not the frame. */
@media (max-width: 599px) {
    .card {
        padding: var(--spacing-4);
    }
}

/* The title and whatever sits beside it (a description, buttons) wrap
   onto their own lines when there is no room for both. */
.card-header {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-2) var(--spacing-3);
    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);
}


/* ==========================================================================
   Organization picker (shared/static/js/org-picker.js): a search box with a
   list of matches, each with its town and parent
   ========================================================================== */
.org-picker {
    position: relative;
}
.org-picker .form-input {
    padding-right: calc(var(--spacing-3) + 1.5rem);
}
.org-picker-clear {
    position: absolute;
    right: var(--spacing-2);
    top: 50%;
    transform: translateY(-50%);
    border: 0;
    background: none;
    color: var(--color-gray-500);
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
    padding: var(--spacing-1);
    min-width: 24px;
    min-height: 24px;
}
.org-picker-clear:hover,
.org-picker-clear:focus-visible {
    color: var(--color-gray-800);
}
.org-picker-list {
    position: absolute;
    z-index: 30;
    left: 0;
    right: 0;
    top: calc(100% + 2px);
    margin: 0;
    padding: var(--spacing-1) 0;
    list-style: none;
    background: var(--color-white, #fff);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    max-height: 18rem;
    overflow-y: auto;
    min-width: 100%;
}
.org-picker-list [role="option"] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: var(--spacing-2) var(--spacing-3);
    cursor: pointer;
}
.org-picker-list [role="option"]:hover {
    background: var(--color-gray-100);
}
/* The highlighted match: a bar as well as a tint, since a tint alone is
   too faint a state cue (WCAG 1.4.11) */
.org-picker-list [role="option"][aria-selected="true"] {
    background: var(--color-primary-50, #eef4ff);
    box-shadow: inset 3px 0 0 var(--color-primary);
}
.org-picker-name {
    font-weight: 600;
}
.org-picker-where {
    font-size: var(--font-size-sm);
    color: var(--color-gray-600);
}
.org-picker-empty,
.org-picker-more {
    padding: var(--spacing-2) var(--spacing-3);
    font-size: var(--font-size-sm);
    color: var(--color-gray-600);
}

}

/* --- "Show contact" (components/show_contact.html) ---------------------- */

/* Reads as a link inside a sentence; a press puts the address in its place */
.show-contact {
    display: inline;
    padding: 0;
    border: 0;
    background: none;
    color: var(--color-primary);
    font: inherit;
    text-decoration: underline;
    cursor: pointer;
}

.show-contact:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}