/* ==========================================================================
   Shared CSS — common patterns extracted from component <style> blocks.
   Eliminates repeated Pico CSS overrides and recurring layout primitives.
   ========================================================================== */

/* --- Override Pico's progressive font scaling ---
   Pico bumps --pico-font-size up to 131.25% on wide viewports, making
   everything feel oversized.  Keep the standard 100% (16px) everywhere.
   -------------------------------------------------------------------- */
:root {
    --pico-font-size: 100%;
}

/* --- Unstyled / icon button reset ----------------------------------------
   Pico styles every <button> with padding, background, borders, etc.
   Use .btn-icon on buttons that are just icon triggers.
   ------------------------------------------------------------------------- */
.btn-icon {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.25em;
    margin: 0;
    color: var(--pico-muted-color);
    width: auto;
    line-height: 1;
}
.btn-icon:hover {
    color: var(--pico-primary);
}
.btn-icon:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* --- Hover-reveal opacity ------------------------------------------------
   Dim by default, full opacity on hover. For subtle interactive icons.
   ------------------------------------------------------------------------- */
.hover-reveal {
    opacity: 0.6;
    transition: opacity 0.15s ease;
}
.hover-reveal:hover {
    opacity: 1;
}

/* --- Delete icon variant -------------------------------------------------
   Like hover-reveal but turns red on hover.
   ------------------------------------------------------------------------- */
.btn-delete {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.5em;
    margin: 0;
}
.btn-delete i {
    opacity: 0.8;
    color: var(--pico-muted-color);
}
.btn-delete:hover i {
    opacity: 1;
    color: var(--pico-del-color);
}

/* --- Item card -----------------------------------------------------------
   Bordered card used for prior-item, tracker-item, stat-item, list-item.
   ------------------------------------------------------------------------- */
.item-card {
    background: var(--pico-background-color);
    border: 1px solid var(--pico-secondary-border);
    border-radius: 4px;
    transition: all 0.2s ease;
}
.item-card.disabled {
    opacity: 0.6;
}

/* --- Manager container ---------------------------------------------------
   Shared flex-column container for the three manager components.
   ------------------------------------------------------------------------- */
.manager-container {
    display: flex;
    flex-direction: column;
    gap: 0.5em;
    margin-top: 1em;
    padding: 0;
    width: 100%;
}

/* --- Manager item --------------------------------------------------------
   Shared layout for individual items in manager lists.
   ------------------------------------------------------------------------- */
.manager-item {
    display: flex;
    flex-direction: column;
    padding: 0.75em;
    margin-bottom: 0.5em;
}

/* --- Manager header ------------------------------------------------------
   Row containing controls, main inputs, expand/delete buttons.
   ------------------------------------------------------------------------- */
.manager-header {
    display: flex;
    align-items: center;
    gap: 0.75em;
}

/* --- Manager controls (up/down arrows) ---------------------------------- */
.manager-controls {
    display: flex;
    gap: 0.25em;
}

/* --- Manager main (name input + toggle) --------------------------------- */
.manager-main {
    display: flex;
    flex: 1;
    gap: 0.75em;
    align-items: center;
}
.manager-main input[name="name"] {
    flex: 1;
    font-weight: 500;
}

/* --- Manager toggle (checkbox + label) ---------------------------------- */
.manager-toggle {
    display: flex;
    align-items: center;
    gap: 0.5em;
}
.manager-toggle label {
    margin: 0;
    font-size: 0.85em;
    color: var(--pico-muted-color);
}
.manager-toggle input[type="checkbox"] {
    margin: 0;
}

/* --- Expand button ------------------------------------------------------- */
.expand-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.5em;
    margin: 0;
    color: var(--pico-muted-color);
    transition: transform 0.2s ease;
}
.expand-btn:hover {
    color: var(--pico-primary);
}
.expand-btn.expanded {
    transform: rotate(180deg);
}

/* --- Manager details (expandable section) ------------------------------- */
.manager-details {
    display: none;
    flex-direction: column;
    gap: 0.75em;
    margin-top: 1em;
    padding-top: 1em;
    border-top: 1px solid var(--pico-secondary-border);
}
.manager-details.expanded {
    display: flex;
}

/* --- Manager field (label + input/textarea) ----------------------------- */
.manager-field {
    display: flex;
    flex-direction: column;
    gap: 0.25em;
}
.manager-field label {
    font-size: 0.8em;
    color: var(--pico-muted-color);
    margin: 0;
}
.manager-field input,
.manager-field textarea {
    margin: 0;
    padding: 0.5em;
}
.manager-field textarea {
    min-height: 4em;
    resize: vertical;
}
.manager-field small {
    font-size: 0.75em;
    color: var(--pico-muted-color);
    margin-top: 0.25em;
}

/* --- Presets section ----------------------------------------------------- */
.presets-section {
    margin-top: 1em;
    padding-top: 1em;
    border-top: 1px dashed var(--pico-secondary-border);
}
.presets-section h4 {
    font-size: 0.9em;
    margin: 0 0 0.75em 0;
    color: var(--pico-muted-color);
}
.preset-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5em;
}
.preset-buttons button {
    padding: 0.35em 0.75em;
    font-size: 0.85em;
    margin: 0;
}

/* --- Compact input override ---------------------------------------------
   Pico applies generous spacing to form controls; this tightens them for
   dense layouts (manager items, stat rows, action rows).
   ------------------------------------------------------------------------- */
input.input-compact,
select.input-compact,
textarea.input-compact {
    margin: 0;
    padding: 0.5em;
    height: 2.5em;
}

/* --- Square icon button -------------------------------------------------
   Fixed-size Pico button for icon-only triggers (toggles, preset actions).
   Keeps Pico's border/outline but removes fill.
   ------------------------------------------------------------------------- */
.btn-square {
    flex-shrink: 0;
    width: 2.25em;
    height: 2.25em;
    padding: 0;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1em;
    background: transparent;
}
.btn-square .fa,
.btn-square .fas {
    pointer-events: none;
}
.btn-square[disabled] {
    opacity: 0.4;
    cursor: not-allowed;
}

/* --- Centered block button ---------------------------------------------- */
.btn-block-center {
    width: auto;
    margin-inline: auto;
    display: block;
}

/* --- Empty-state message ------------------------------------------------ */
.empty-state {
    color: var(--pico-muted-color);
    text-align: center;
}

/* --- Responsive: manager header stacking -------------------------------- */
@media (max-width: 768px) {
    .manager-header {
        flex-direction: column;
        align-items: stretch;
    }
    .manager-main {
        flex-direction: column;
    }
}