/* =============================================================================
   Agent Meeko button kit (Leone, 16 Oct). Used by the Website module and the
   toolbars of every list page (see core/list-layout.js).
   Reference: design/Agent Meeko buttons v3. Theme AM Dark Navy: primary #19213B,
   secondary #92969E (v2 was brand blue #4361FF), 4px corners,
   sm 28px / md 34px / lg 42px. 
   ============================================================================= */
:root {
    --am-blue: #19213b;
    --am-blue-hover: #26315a;
    --am-blue-press: #10162a;
    --am-blue-ink: #19213b;
    --am-blue-soft: #e6e9f2;
    --am-blue-soft-hover: #d8dcea;
    --am-blue-tint: #f4f5fa;
    --am-red: #dc2626;
    --am-red-hover: #c81f1f;
    --am-red-press: #b01b1b;
    --am-red-ink: #b42318;
    --am-red-soft: #fee4e2;
    --am-secondary: #92969e;
    --am-secondary-hover: #80858e;
    --am-outline: #d3d6e0;
    --am-radius: 4px;
    --am-focus: 0 0 0 3px rgba(25, 33, 59, 0.22);
    --am-focus-red: 0 0 0 3px rgba(220, 38, 38, 0.28);
}
.am-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px; white-space: nowrap;
    height: 34px; padding: 0 14px; border: 0; border-radius: var(--am-radius); background: none; cursor: pointer;
    font-family: inherit; font-size: 13px; font-weight: 500; line-height: 1; text-decoration: none;
    transition: background-color .12s ease, color .12s ease, box-shadow .12s ease;
}
.am-btn .icon, .am-btn > svg { width: 16px; height: 16px; flex: none; }
.am-btn:focus-visible { outline: none; box-shadow: var(--am-focus); }
.am-btn--sm { height: 28px; padding: 0 10px; gap: 6px; font-size: 12px; }
.am-btn--sm .icon, .am-btn--sm > svg { width: 14px; height: 14px; }
.am-btn--lg { height: 42px; padding: 0 20px; gap: 10px; font-size: 14px; }

.am-btn--primary { background: var(--am-blue); color: #fff; }
.am-btn--primary:hover { background: var(--am-blue-hover); color: #fff; }
.am-btn--primary:active { background: var(--am-blue-press); }
.am-btn--soft { background: var(--am-blue-soft); color: var(--am-blue-ink); }
.am-btn--soft:hover { background: var(--am-blue-soft-hover); color: var(--am-blue-ink); }
.am-btn--outline { background: #fff; color: var(--am-blue-ink); box-shadow: inset 0 0 0 1px var(--am-outline); }
.am-btn--outline:hover { background: var(--am-blue-tint); box-shadow: inset 0 0 0 1px var(--am-blue-ink); }
.am-btn--outline:focus-visible { box-shadow: inset 0 0 0 1px var(--am-outline), var(--am-focus); }
.am-btn--secondary { background: var(--am-secondary); color: #fff; }
.am-btn--secondary:hover { background: var(--am-secondary-hover); color: #fff; }
.am-btn--ghost { background: transparent; color: var(--text-secondary, #344054); }
.am-btn--ghost:hover { background: #eef0f5; color: var(--text-primary, #101828); }
.am-btn--danger { background: var(--am-red); color: #fff; }
.am-btn--danger:hover { background: var(--am-red-hover); color: #fff; }
.am-btn--danger:active { background: var(--am-red-press); }
.am-btn--danger:focus-visible { box-shadow: var(--am-focus-red); }
.am-btn--danger-soft { background: var(--am-red-soft); color: var(--am-red-ink); }

/* Badge: label with its icon in a badge on the right (Edit). */
.am-btn--badge { padding-right: 4px; gap: 10px; }
.am-btn--sm.am-btn--badge { padding-right: 3px; gap: 8px; }
.am-btn__badge { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 3px; flex: none; }
.am-btn--sm .am-btn__badge { width: 22px; height: 22px; }
.am-btn--primary .am-btn__badge { background: #fff; color: var(--am-blue); }
.am-btn--soft .am-btn__badge { background: var(--am-blue); color: #fff; }

.am-btn:disabled, .am-btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; pointer-events: none; }


/* Chips: status filters under the tiles (All, Active, Trial ...). */
.am-chip {
    display: inline-flex; align-items: center; height: 30px; padding: 0 14px; border: 0; border-radius: var(--am-radius);
    background: var(--am-blue-soft); color: var(--am-blue-ink); font-family: inherit; font-size: 12.5px; font-weight: 500; cursor: pointer;
    transition: background-color .12s ease, color .12s ease;
}
.am-chip:hover { background: var(--am-blue-soft-hover); }
.am-chip[aria-pressed="true"] { background: var(--am-blue); color: #fff; }
.am-chip:focus-visible { outline: none; box-shadow: var(--am-focus); }


/* AM Dark Navy on the main menu (rail) and the sub menu (Leone, 17 Oct): the
   selected item, its marker and its icon follow the navy instead of purple. */
.navigation-rail, .sub-navigation {
    --accent: var(--am-blue);
    --accent-tint: #e9ecf4;
}
/* The marker beside the selected main-menu item, navy too. */
.navigation-rail .module-button--active::before { background: var(--am-blue); }
/* A selected item in the sub menu's lower group (Settings) reads as selected, not muted. */
.sub-navigation .navigation-group--secondary .navigation-item--selected { color: var(--accent); }